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 - Doc</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1f1f1f;14    color: #eaeaea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 30px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #ffffff;30    font-size: 40px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0.9; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 96px;43    left: 0;44    width: 1080px;45    height: 152px;46    display: flex;47    align-items: center;48    background: #212224;49    box-sizing: border-box;50    padding: 0 28px;51  }52  .back-btn {53    width: 84px;54    height: 84px;55    display: flex;56    align-items: center;57    justify-content: center;58    margin-right: 16px;59  }60  .title-wrap {61    flex: 1;62  }63  .title {64    font-size: 64px;65    font-weight: 600;66    letter-spacing: 0.2px;67    color: #e9e9e9;68    line-height: 1;69  }70  .subtitle {71    font-size: 28px;72    color: #a9a9a9;73    margin-top: 14px;74  }75  .app-actions {76    display: flex;77    align-items: center;78    gap: 18px;79  }80  .circle-icon {81    width: 104px;82    height: 104px;83    border-radius: 52px;84    background: #2e3236;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .square-icon {90    width: 104px;91    height: 104px;92    border-radius: 18px;93    background: #2e3236;94    display: flex;95    align-items: center;96    justify-content: center;97  }98 99  /* Document area */100  .doc-canvas {101    position: absolute;102    top: 248px;103    left: 0;104    right: 0;105    bottom: 0;106    padding: 0 0 160px 0;107    overflow: hidden;108    display: flex;109    justify-content: center;110  }111  .doc-page {112    width: 1080px;113    height: 1900px;114    background: #000;115    box-sizing: border-box;116    padding: 90px 80px;117  }118  .doc-title {119    font-size: 34px;120    color: #bdbdbd;121    margin-bottom: 46px;122  }123  .doc-text {124    font-size: 36px;125    color: #e8e8e8;126    line-height: 1.8;127  }128 129  /* Floating action button */130  .fab {131    position: absolute;132    right: 56px;133    bottom: 210px;134    width: 170px;135    height: 170px;136    border-radius: 50%;137    background: #1e5774;138    box-shadow: 0 12px 28px rgba(0,0,0,0.5);139    display: flex;140    align-items: center;141    justify-content: center;142  }143  /* Simple helpers for icons */144  svg { display: block; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div>10:19</div>153    <div class="status-icons">154      <!-- Simple circular icons to mimic status indicators -->155      <div class="dot" style="width:18px;height:18px;border-radius:9px;"></div>156      <div class="dot" style="width:18px;height:18px;border-radius:9px;"></div>157      <div class="dot" style="width:18px;height:18px;border-radius:9px;"></div>158      <!-- Wi-Fi icon -->159      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff" opacity="0.9">160        <path d="M12 18.5l-1.3-1.3a2 2 0 0 1 2.6 0L12 18.5zm4-4l-1.4 1.4a5 5 0 0 0-7.2 0L6 14.5a7 7 0 0 1 10 0zm4-4l-1.4 1.4a11 11 0 0 0-15.2 0L2 10.5a13 13 0 0 1 18 0z"/>161      </svg>162      <!-- Battery icon -->163      <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff">164        <path d="M16 6h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1v1h-2v-1H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zM6 8v8h10V8H6z"/>165      </svg>166    </div>167  </div>168 169  <!-- App Bar -->170  <div class="app-bar">171    <div class="back-btn">172      <svg width="64" height="64" viewBox="0 0 24 24" fill="#eaeaea">173        <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"/>174      </svg>175    </div>176 177    <div class="title-wrap">178      <div class="title">Upcoming Even...</div>179      <div class="subtitle">All changes saved</div>180    </div>181 182    <div class="app-actions">183      <div class="circle-icon" title="Share">184        <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8dc">185          <path d="M16 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM8 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm8 10a3 3 0 1 1 .001-6.001A3 3 0 0 1 16 19zm-7.2-8.4l6.3 3.2-.6 1.2-6.3-3.2.6-1.2zm0-3.4l.6-1.2 6.3 3.2-.6 1.2-6.3-3.2z"/>186        </svg>187      </div>188      <div class="square-icon" title="Comments">189        <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd8dc">190          <path d="M4 4h16v12H7l-3 3V4z"/>191        </svg>192      </div>193      <div class="circle-icon" title="More">194        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfd8dc">195          <circle cx="12" cy="5" r="2"/>196          <circle cx="12" cy="12" r="2"/>197          <circle cx="12" cy="19" r="2"/>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Document -->204  <div class="doc-canvas">205    <div class="doc-page">206      <div class="doc-title">Upcoming events</div>207      <div class="doc-text">208        Flower Show<br>209        Gardening club meeting210      </div>211    </div>212  </div>213 214  <!-- Floating action button -->215  <div class="fab" title="Edit">216    <svg width="72" height="72" viewBox="0 0 24 24" fill="#ffffff">217      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.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"/>218    </svg>219  </div>220 221</div>222</body>223</html>