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>Clock UI Render</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#1a1613;12    color:#e9dfd6;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:96px; padding:0 36px;19    display:flex; align-items:center; justify-content:space-between;20    color:#e9dfd6; font-size:36px; letter-spacing:0.5px;21  }22  .status-icons { display:flex; gap:28px; align-items:center; }23  .icon { width:36px; height:36px; opacity:0.9; }24  .icon svg { width:100%; height:100%; fill:#e9dfd6; }25  .kebab {26    position:absolute; right:28px; top:120px;27    width:42px; height:42px; opacity:0.7;28  }29  .kebab svg { width:100%; height:100%; fill:#e9dfd6; }30 31  /* Header Title */32  .title {33    position:absolute; top:140px; left:42px;34    font-size:72px; font-weight:600; color:#e9dfd6;35  }36 37  /* Big time */38  .big-time {39    position:absolute; top:270px; left:42px; right:42px;40    display:flex; align-items:flex-end; gap:18px;41  }42  .big-time .digits {43    font-size:220px; line-height:220px; font-weight:500; letter-spacing:6px;44    color:#e9dfd6;45  }46  .big-time .suffix {47    font-size:90px; line-height:120px; color:#e9dfd6; opacity:0.9;48  }49 50  /* Date line */51  .date-line {52    position:absolute; top:540px; left:42px;53    font-size:44px; color:#d8cfc6; display:flex; align-items:center; gap:22px;54  }55  .date-line .small-icon { width:40px; height:40px; opacity:0.8; }56  .date-line .small-icon svg { width:100%; height:100%; fill:#d8cfc6; }57 58  /* Cards */59  .cards { position:absolute; top:660px; left:24px; right:24px; }60  .card {61    background:#241d19; border-radius:48px;62    padding:56px; margin-bottom:48px;63    display:flex; justify-content:space-between; align-items:center;64    box-shadow:0 2px 0 rgba(0,0,0,0.3) inset;65  }66  .card .left { max-width:60%; }67  .city {68    font-size:72px; font-weight:600; margin-bottom:18px;69  }70  .offset {71    font-size:42px; color:#cbbfb4; opacity:0.9;72  }73  .card .right .time {74    font-size:150px; font-weight:600; letter-spacing:3px;75  }76  .card .right .ampm {77    font-size:64px; margin-left:10px; opacity:0.95;78  }79 80  /* Floating Add Button */81  .fab {82    position:absolute; left:50%; transform:translateX(-50%);83    bottom:420px;84    width:240px; height:240px; border-radius:50%;85    background:#f4bf8f; display:flex; align-items:center; justify-content:center;86    color:#2b201a; font-size:110px; font-weight:500;87    box-shadow:0 18px 40px rgba(0,0,0,0.45);88  }89 90  /* Bottom nav */91  .bottom-nav {92    position:absolute; bottom:0; left:0; right:0;93    height:300px; background:#221b17;94    padding:36px 36px 24px; box-sizing:border-box;95    display:flex; align-items:flex-end; justify-content:space-between;96    color:#d9cfc6;97  }98  .nav-item { width:20%; display:flex; flex-direction:column; align-items:center; gap:18px; }99  .nav-icon { width:90px; height:90px; }100  .nav-icon svg { width:100%; height:100%; fill:#d9cfc6; opacity:0.9; }101  .label { font-size:44px; }102  .active .nav-icon {103    background:#4a3a2f; border-radius:40px; padding:18px;104  }105  .active .label { color:#e9dfd6; }106 107  /* Gesture pill */108  .gesture {109    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);110    width:420px; height:14px; background:#e6e0da; border-radius:10px; opacity:0.7;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status Bar -->118  <div class="status-bar">119    <div class="sb-left">12:18</div>120    <div class="status-icons">121      <div class="icon" title="Alarm">122        <svg viewBox="0 0 24 24"><path d="M7.8 2.5 2 6l1.2 1.6L8.7 4zM16.2 2.5l6 3.5-1.2 1.6-5.5-3.6zM12 5a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-1 3h2v5l4 2-1 1.8-5-2.8z"/></svg>123      </div>124      <div class="icon" title="Do Not Disturb">125        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm-6 9h12v2H6z"/></svg>126      </div>127      <div class="icon" title="Wifi">128        <svg viewBox="0 0 24 24"><path d="M12 18.5 8.7 15.2a4.8 4.8 0 0 1 6.6 0zm-7.7-6.2A12.2 12.2 0 0 1 12 9a12.2 12.2 0 0 1 7.7 3.3l-1.4 1.4A10.2 10.2 0 0 0 12 11a10.2 10.2 0 0 0-6.3 2.7zM2.2 9.1A17 17 0 0 1 12 6a17 17 0 0 1 9.8 3.1l-1.3 1.3A15 15 0 0 0 12 8a15 15 0 0 0-8.5 2.4z"/></svg>129      </div>130      <div class="icon" title="Battery">131        <svg viewBox="0 0 24 24"><path d="M20 7h-1V5h-2v2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm0 10H5V9h15v8z"/></svg>132      </div>133    </div>134  </div>135 136  <!-- Kebab menu -->137  <div class="kebab">138    <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>139  </div>140 141  <div class="title">Clock</div>142 143  <!-- Big Time -->144  <div class="big-time">145    <div class="digits">12:18</div>146    <div class="suffix">AM</div>147  </div>148 149  <!-- Date line -->150  <div class="date-line">151    <span>Fri, Sep 29</span>152    <span class="small-icon">153      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 10.1V6h-2v7.2l5.4 3.1.9-1.7z"/></svg>154    </span>155    <span>Fri 12:20 AM</span>156  </div>157 158  <!-- Cards -->159  <div class="cards">160    <div class="card">161      <div class="left">162        <div class="city">Chicago</div>163        <div class="offset">-10h 30m Yesterday</div>164      </div>165      <div class="right">166        <span class="time">1:48</span>167        <span class="ampm">PM</span>168      </div>169    </div>170 171    <div class="card">172      <div class="left">173        <div class="city">Ottawa</div>174        <div class="offset">-10h 30m Yesterday</div>175      </div>176      <div class="right">177        <span class="time">1:48</span>178        <span class="ampm">PM</span>179      </div>180    </div>181 182    <div class="card">183      <div class="left">184        <div class="city">Madrid</div>185        <div class="offset">-3h 30m Yesterday</div>186      </div>187      <div class="right">188        <span class="time">8:48</span>189        <span class="ampm">PM</span>190      </div>191    </div>192  </div>193 194  <!-- Floating Add Button -->195  <div class="fab">+</div>196 197  <!-- Bottom Navigation -->198  <div class="bottom-nav">199    <div class="nav-item">200      <div class="nav-icon">201        <svg viewBox="0 0 24 24"><path d="M7.8 2.5 2 6l1.2 1.6L8.7 4zM16.2 2.5l6 3.5-1.2 1.6-5.5-3.6zM12 5a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-1 3h2v5l4 2-1 1.8-5-2.8z"/></svg>202      </div>203      <div class="label">Alarm</div>204    </div>205    <div class="nav-item active">206      <div class="nav-icon">207        <svg viewBox="0 0 24 24"><path d="M12 7a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0-5v3m-8 8h3m10 0h3m-8 8v3"/></svg>208      </div>209      <div class="label">Clock</div>210    </div>211    <div class="nav-item">212      <div class="nav-icon">213        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 10.2V6h-2v7.5l6.2 3.6 1-1.7z"/></svg>214      </div>215      <div class="label">Timer</div>216    </div>217    <div class="nav-item">218      <div class="nav-icon">219        <svg viewBox="0 0 24 24"><path d="M7 3h10v2H7zm5 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm-3 5h6v2H9z"/></svg>220      </div>221      <div class="label">Stopwatch</div>222    </div>223    <div class="nav-item">224      <div class="nav-icon">225        <svg viewBox="0 0 24 24"><path d="M2 18h20v2H2zm2-2h16v-6c0-1.1-.9-2-2-2h-4V6H10v2H6c-1.1 0-2 .9-2 2v6z"/></svg>226      </div>227      <div class="label">Bedtime</div>228    </div>229  </div>230 231  <div class="gesture"></div>232 233</div>234</body>235</html>