GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Easy Timezones - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 120px;24    padding: 36px 40px 0 40px;25    box-sizing: border-box;26    font-size: 42px;27    color: #ffffff;28    display: flex;29    align-items: center;30    justify-content: space-between;31    opacity: 0.9;32  }33  .status-icons { display: flex; gap: 26px; align-items: center; }34  .sb-dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; display: inline-block; margin: 0 8px; }35 36  /* Header */37  .header {38    position: absolute;39    top: 140px;40    left: 40px;41    right: 40px;42    display: flex;43    align-items: center;44    justify-content: space-between;45  }46  .brand {47    display: flex; align-items: center; gap: 28px;48  }49  .app-logo {50    width: 120px; height: 120px; border-radius: 60px;51    background: #E0E0E0;52    border: 1px solid #BDBDBD;53    display: flex; align-items: center; justify-content: center;54    color: #757575; font-size: 28px; text-align: center;55  }56  .title {57    font-size: 64px; font-weight: 700; letter-spacing: 0.5px;58    display: flex; gap: 16px; align-items: baseline;59  }60  .title .easy { color: #23c0f1; }61  .title .timezones { color: #d21fa2; }62 63  .header-actions { display: flex; gap: 34px; align-items: center; }64  .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: grid; place-items: center; }65  .icon-btn svg { width: 52px; height: 52px; fill: none; stroke: #EDEDED; stroke-width: 3.5; }66  .gear { font-size: 56px; color: #EDEDED; }67 68  /* Group selector */69  .group-row {70    position: absolute;71    top: 300px;72    left: 40px;73    right: 40px;74    padding-bottom: 16px;75    border-bottom: 2px solid #3a3a3a;76    display: flex; align-items: center; justify-content: space-between;77  }78  .group-left { display: flex; align-items: center; gap: 18px; }79  .group-left .label { font-size: 46px; }80  .group-left svg { width: 40px; height: 40px; stroke: #EDEDED; stroke-width: 3; }81  .caret { width: 28px; height: 28px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #D0D0D0; }82 83  /* Date control row */84  .controls {85    position: absolute;86    top: 380px;87    left: 40px;88    right: 40px;89    display: flex; align-items: center; gap: 28px;90  }91  .date-pill {92    flex: 1;93    height: 120px;94    background: #2A2A2A;95    border-radius: 60px;96    display: flex; align-items: center;97    padding: 0 28px; box-sizing: border-box;98    gap: 24px; color: #EDEDED;99  }100  .date-pill .nav {101    width: 70px; height: 70px; display: grid; place-items: center;102    border-radius: 35px; background: #242424; border: 1px solid #3a3a3a;103  }104  .date-pill .nav svg { width: 40px; height: 40px; stroke: #EDEDED; stroke-width: 3.5; }105  .date-pill .calendar {106    width: 84px; height: 84px; border-radius: 18px;107    background: #242424; border: 2px solid #3a3a3a;108    display: grid; place-items: center;109  }110  .date-pill .calendar svg { width: 48px; height: 48px; stroke: #EDEDED; stroke-width: 3; }111  .date-text { font-size: 42px; flex: 1; }112  .refresh {113    width: 90px; height: 90px; border-radius: 45px;114    display: grid; place-items: center;115    background: #242424; border: 1px solid #3a3a3a;116  }117  .refresh svg { width: 56px; height: 56px; stroke: #EDEDED; stroke-width: 3.5; }118 119  .edit-btn {120    width: 280px; height: 120px; border-radius: 60px;121    background: #19a9f5; color: #fff; font-size: 48px; font-weight: 600;122    display: flex; align-items: center; justify-content: center; gap: 26px;123    box-shadow: 0 4px 10px rgba(0,0,0,0.35);124  }125  .edit-btn .plus-badge {126    width: 72px; height: 72px; border-radius: 36px; background: #ffffff;127    color: #19a9f5; display: grid; place-items: center; font-size: 48px; font-weight: 700;128  }129 130  /* Empty state text */131  .empty {132    position: absolute;133    top: 680px;134    left: 40px;135    right: 40px;136    text-align: center;137  }138  .empty .msg { font-size: 48px; color: #BDBDBD; margin-bottom: 40px; }139  .empty .cta { font-size: 52px; color: #EDEDED; }140 141  /* Bottom home indicator */142  .home-indicator {143    position: absolute;144    bottom: 44px; left: 50%; transform: translateX(-50%);145    width: 310px; height: 14px; background: #DADADA; border-radius: 10px; opacity: 0.9;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status bar -->153  <div class="statusbar">154    <div>9:27</div>155    <div class="status-icons">156      <!-- Simple placeholders for small status icons -->157      <svg viewBox="0 0 24 24">158        <circle cx="12" cy="12" r="9" stroke="#EDEDED" fill="none" stroke-width="2.5"></circle>159        <path d="M10 8l6 4-6 4z" fill="#EDEDED"></path>160      </svg>161      <svg viewBox="0 0 24 24">162        <circle cx="12" cy="12" r="9" stroke="#EDEDED" fill="none" stroke-width="2.5"></circle>163        <path d="M10 8l6 4-6 4z" fill="#EDEDED"></path>164      </svg>165      <svg viewBox="0 0 24 24">166        <circle cx="12" cy="12" r="9" stroke="#EDEDED" fill="none" stroke-width="2.5"></circle>167        <path d="M10 8l6 4-6 4z" fill="#EDEDED"></path>168      </svg>169      <svg viewBox="0 0 24 24">170        <circle cx="11" cy="11" r="8.5" stroke="#EDEDED" fill="none" stroke-width="2.5"></circle>171        <path d="M20 20l-4-4" stroke="#EDEDED" stroke-width="2.5" stroke-linecap="round"></path>172      </svg>173      <span class="sb-dot"></span>174      <svg viewBox="0 0 24 24">175        <path d="M7 2l10 0a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3z" stroke="#EDEDED" stroke-width="2" fill="none"></path>176      </svg>177      <svg viewBox="0 0 24 24">178        <path d="M3 12h18" stroke="#EDEDED" stroke-width="2" fill="none"></path>179        <path d="M12 3v18" stroke="#EDEDED" stroke-width="2" fill="none"></path>180      </svg>181      <svg viewBox="0 0 24 24">182        <path d="M6 2h12l-1 16H7z" stroke="#EDEDED" stroke-width="2" fill="none"></path>183      </svg>184    </div>185  </div>186 187  <!-- Header -->188  <div class="header">189    <div class="brand">190      <div class="app-logo">[IMG: App Logo]</div>191      <div class="title">192        <span class="easy">Easy</span>193        <span class="timezones">Timezones</span>194      </div>195    </div>196    <div class="header-actions">197      <div class="icon-btn">198        <!-- Share icon -->199        <svg viewBox="0 0 24 24">200          <circle cx="5" cy="12" r="2.5"></circle>201          <circle cx="18.5" cy="6.5" r="2.5"></circle>202          <circle cx="18.5" cy="17.5" r="2.5"></circle>203          <path d="M7.5 11.5 L16 7.5 M7.5 12.5 L16 16.5" stroke="#EDEDED" stroke-width="3" stroke-linecap="round"></path>204        </svg>205      </div>206      <div class="icon-btn gear">⚙</div>207    </div>208  </div>209 210  <!-- Group selector -->211  <div class="group-row">212    <div class="group-left">213      <svg viewBox="0 0 24 24">214        <path d="M4 20l5-1 9-9-4-4-9 9-1 5z" fill="none" stroke="#EDEDED" stroke-width="2.5"></path>215      </svg>216      <div class="label">Main Group</div>217    </div>218    <div class="caret"></div>219  </div>220 221  <!-- Controls -->222  <div class="controls">223    <div class="date-pill">224      <div class="nav">225        <!-- back arrow -->226        <svg viewBox="0 0 24 24">227          <path d="M14 4L6 12l8 8" stroke-linecap="round" stroke-linejoin="round"></path>228        </svg>229      </div>230 231      <div class="calendar">232        <svg viewBox="0 0 24 24">233          <rect x="4" y="6" width="16" height="14" rx="2" fill="none"></rect>234          <path d="M4 10h16M8 2v6M16 2v6" stroke-linecap="round"></path>235        </svg>236      </div>237 238      <div class="date-text">Tue, Jan 9, 2024</div>239 240      <div class="nav">241        <!-- forward arrow -->242        <svg viewBox="0 0 24 24">243          <path d="M10 4l8 8-8 8" stroke-linecap="round" stroke-linejoin="round"></path>244        </svg>245      </div>246    </div>247 248    <div class="refresh">249      <svg viewBox="0 0 24 24">250        <path d="M20 12a8 8 0 1 1-3-6" fill="none"></path>251        <path d="M18 4v6h-6" stroke-linecap="round"></path>252      </svg>253    </div>254 255    <div class="edit-btn">256      <span>Edit</span>257      <div class="plus-badge">+</div>258    </div>259  </div>260 261  <!-- Empty state -->262  <div class="empty">263    <div class="msg">No locations have been entered yet.</div>264    <div class="cta">Add New Location</div>265  </div>266 267  <!-- Bottom home indicator -->268  <div class="home-indicator"></div>269 270</div>271</body>272</html>