GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Upcoming Events Document</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #121212;19    color: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 36px;33    box-sizing: border-box;34    color: #DADADA;35    font-size: 32px;36  }37  .status-right {38    display: flex;39    gap: 24px;40    align-items: center;41  }42  .status-dot {43    width: 20px;44    height: 20px;45    background: #DADADA;46    border-radius: 50%;47    opacity: 0.9;48  }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 120px;54    left: 0;55    width: 1080px;56    height: 160px;57    background: #1C1C1C;58    display: flex;59    align-items: center;60    padding: 0 24px;61    box-sizing: border-box;62  }63  .app-left {64    display: flex;65    align-items: center;66    gap: 28px;67  }68  .title {69    font-size: 48px;70    font-weight: 600;71    letter-spacing: 0.5px;72    color: #EDEDED;73  }74  .app-right {75    margin-left: auto;76    display: flex;77    align-items: center;78    gap: 28px;79  }80  .icon-btn {81    width: 88px;82    height: 88px;83    background: #2B2B2B;84    border-radius: 44px;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .kebab {90    width: 20px;91    height: 72px;92    display: flex;93    flex-direction: column;94    justify-content: space-between;95    align-items: center;96  }97  .dot {98    width: 10px;99    height: 10px;100    background: #EDEDED;101    border-radius: 50%;102    opacity: 0.95;103  }104 105  /* Sub header text */106  .save-status {107    position: absolute;108    top: 280px;109    left: 36px;110    color: #A7A7A7;111    font-size: 30px;112  }113 114  /* Document area */115  .doc-area {116    position: absolute;117    top: 332px;118    left: 0;119    width: 1080px;120    height: 2068px;121    background: #0A0A0A;122    box-sizing: border-box;123  }124  .doc-content {125    position: absolute;126    top: 110px;127    left: 90px;128    width: 900px;129    color: #FFFFFF;130  }131  .doc-content h1 {132    font-size: 36px;133    font-weight: 600;134    margin: 0 0 40px 0;135    padding-bottom: 6px;136    border-bottom: 2px solid #BDBDBD;137    width: 340px;138  }139  .doc-content p {140    font-size: 30px;141    margin: 16px 0;142    color: #EDEDED;143  }144 145  /* Floating action button */146  .fab {147    position: absolute;148    right: 54px;149    bottom: 160px;150    width: 160px;151    height: 160px;152    background: #1E4F6F;153    border-radius: 36px;154    box-shadow: 0 14px 30px rgba(0,0,0,0.4);155    display: flex;156    align-items: center;157    justify-content: center;158  }159  /* Simple SVG sizing */160  svg {161    display: block;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status bar -->169  <div class="status-bar">170    <div>10:13</div>171    <div class="status-right">172      <div class="status-dot"></div>173      <div class="status-dot"></div>174      <div class="status-dot"></div>175    </div>176  </div>177 178  <!-- App bar -->179  <div class="app-bar">180    <div class="app-left">181      <!-- Back arrow -->182      <svg width="64" height="64" viewBox="0 0 24 24">183        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184      </svg>185      <div class="title">Upcoming Even...</div>186    </div>187 188    <div class="app-right">189      <!-- Share/Person icon button -->190      <div class="icon-btn">191        <svg width="44" height="44" viewBox="0 0 24 24">192          <circle cx="12" cy="8" r="4" fill="#CFCFCF"/>193          <path d="M4 20c0-4 16-4 16 0" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>194          <path d="M18 5 L21 5 L21 8" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>195          <circle cx="21" cy="5" r="0" fill="none"/>196        </svg>197      </div>198      <!-- Comment icon button -->199      <div class="icon-btn">200        <svg width="44" height="44" viewBox="0 0 24 24">201          <path d="M4 4h16v12h-8l-4 4v-4H4z" fill="#CFCFCF"/>202        </svg>203      </div>204      <!-- Kebab menu -->205      <div class="kebab">206        <div class="dot"></div>207        <div class="dot"></div>208        <div class="dot"></div>209      </div>210    </div>211  </div>212 213  <!-- Save status -->214  <div class="save-status">All changes saved</div>215 216  <!-- Document area -->217  <div class="doc-area">218    <div class="doc-content">219      <h1>Upcoming events</h1>220      <p>Flower Show</p>221      <p>Gardening club meeting</p>222    </div>223  </div>224 225  <!-- Floating action button -->226  <div class="fab">227    <svg width="72" height="72" viewBox="0 0 24 24">228      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#FFFFFF"/>229      <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#FFFFFF"/>230    </svg>231  </div>232 233</div>234</body>235</html>