GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Alarm Clock - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000; color: #FFFFFF;13  }14 15  /* Top patterned header approximation */16  .header {17    position: relative;18    height: 360px;19    background: linear-gradient(180deg, #1c2227 0%, #14181c 100%);20  }21  .header::after {22    content: "";23    position: absolute; inset: 0;24    background-image:25      linear-gradient(60deg, rgba(255,255,255,0.06) 8%, transparent 8%),26      linear-gradient(-60deg, rgba(255,255,255,0.03) 8%, transparent 8%);27    background-size: 40px 40px;28    opacity: 0.25;29    pointer-events: none;30  }31 32  /* Status bar */33  .status {34    height: 70px; padding: 0 34px;35    display: flex; align-items: center; justify-content: space-between;36    font-size: 28px; color: #EDEFF2;37  }38  .status .right { display: flex; align-items: center; gap: 20px; color: #EDEFF2; opacity: 0.95; }39  .status .mini-pill {40    display: inline-block; padding: 6px 10px; border-radius: 4px;41    background: #EDEFF2; color: #111; font-size: 18px; font-weight: 600;42  }43 44  /* Title row */45  .title-row {46    padding: 36px 38px 0 38px;47    display: flex; align-items: center; justify-content: space-between;48  }49  .title-row .title {50    font-size: 64px; font-weight: 600; letter-spacing: 0.2px; color: #E8EDF2;51  }52  .title-icons { display: flex; align-items: center; gap: 26px; opacity: 0.9; }53  .icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }54 55  /* Summary card (next alarm) */56  .summary-card {57    position: absolute; left: 28px; right: 28px; top: 330px;58    background: #0b0f12; border-radius: 18px;59    padding: 26px 30px; display: flex; align-items: center; gap: 26px;60    box-shadow: 0 6px 18px rgba(0,0,0,0.35);61  }62  .summary-text .main { font-size: 56px; font-weight: 700; }63  .summary-text .sub { font-size: 30px; color: #B7C0C8; margin-top: 6px; }64 65  /* Main alarm card */66  .alarm-card {67    position: absolute; left: 28px; right: 28px; top: 510px;68    background: #2a323b; border-radius: 32px;69    padding: 44px; display: flex; align-items: flex-start; justify-content: space-between;70    box-shadow: 0 10px 18px rgba(0,0,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.35);71    color: #FFFFFF;72  }73  .alarm-left .time {74    font-size: 84px; font-weight: 800; letter-spacing: 1px;75    text-shadow: 0 2px 0 rgba(0,0,0,0.2);76  }77  .alarm-left .label {78    margin-top: 16px; font-size: 34px; letter-spacing: 2px; color: #D9E3EB; opacity: 0.9;79  }80  .alarm-right { display: flex; align-items: center; gap: 22px; }81 82  /* Toggle switch */83  .switch {84    width: 140px; height: 64px; border-radius: 32px; position: relative;85    background: #4a4a2b; box-shadow: inset 0 2px 3px rgba(0,0,0,0.3);86  }87  .switch .knob {88    position: absolute; top: 4px; right: 4px;89    width: 56px; height: 56px; border-radius: 50%;90    background: #c0922a; box-shadow: 0 3px 6px rgba(0,0,0,0.4);91  }92  .dots {93    font-size: 50px; color: #E6EBEF; line-height: 1; margin-left: 4px;94  }95 96  /* Floating action button */97  .fab {98    position: absolute; left: 50%; transform: translateX(-50%);99    bottom: 340px; width: 150px; height: 150px; border-radius: 50%;100    background: #b7892a; display: flex; align-items: center; justify-content: center;101    box-shadow: 0 10px 18px rgba(0,0,0,0.45);102  }103 104  /* Bottom navigation bar */105  .bottom-nav {106    position: absolute; left: 0; right: 0; bottom: 140px;107    height: 210px; background: #1e242a;108    border-top-left-radius: 36px; border-top-right-radius: 36px;109    display: flex; justify-content: space-around; align-items: center;110  }111  .nav-item { width: 25%; text-align: center; color: #9aa3ad; }112  .nav-item .nav-icon { width: 72px; height: 72px; margin: 0 auto 10px auto; opacity: 0.95; }113  .nav-item .label { font-size: 34px; }114  .nav-item.active { color: #FFFFFF; }115  .nav-item.active .label { font-weight: 700; }116 117  /* Gesture bar */118  .gesture {119    position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);120    width: 280px; height: 12px; background: #FFFFFF; border-radius: 8px; opacity: 0.95;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Header -->128  <div class="header">129    <div class="status">130      <div class="left">131        12:16132        <span class="mini-pill" style="margin-left:16px;">TH</span>133        <span class="mini-pill">TOI</span>134        <span class="mini-pill">TOI</span>135        <span style="margin-left:10px;">•</span>136      </div>137      <div class="right">138        <!-- Signal icon -->139        <svg class="icon" viewBox="0 0 24 24" fill="#EDEFF2">140          <rect x="2" y="14" width="3" height="8"></rect>141          <rect x="7" y="10" width="3" height="12" opacity="0.7"></rect>142          <rect x="12" y="6" width="3" height="16" opacity="0.5"></rect>143          <rect x="17" y="2" width="3" height="20" opacity="0.3"></rect>144        </svg>145        <!-- WiFi -->146        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEFF2" stroke-width="2">147          <path d="M2 8c5-4 15-4 20 0"></path>148          <path d="M5 12c3-3 11-3 14 0"></path>149          <path d="M8 16c2-2 6-2 8 0"></path>150          <circle cx="12" cy="19" r="1.5" fill="#EDEFF2" stroke="none"></circle>151        </svg>152        <!-- Battery -->153        <svg class="icon" viewBox="0 0 24 24" fill="#EDEFF2">154          <rect x="2" y="6" width="18" height="12" rx="2"></rect>155          <rect x="20" y="10" width="2" height="4"></rect>156        </svg>157      </div>158    </div>159 160    <div class="title-row">161      <div class="title">Alarm Clock</div>162      <div class="title-icons">163        <!-- list/sort icon -->164        <svg class="icon" viewBox="0 0 24 24" fill="#EDEFF2">165          <rect x="6" y="5" width="12" height="2"></rect>166          <rect x="10" y="11" width="8" height="2"></rect>167          <rect x="12" y="17" width="6" height="2"></rect>168        </svg>169        <!-- search -->170        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEFF2" stroke-width="2">171          <circle cx="10" cy="10" r="6"></circle>172          <line x1="15.5" y1="15.5" x2="21" y2="21"></line>173        </svg>174        <!-- more vert -->175        <svg class="icon" viewBox="0 0 24 24" fill="#EDEFF2">176          <circle cx="12" cy="5" r="2"></circle>177          <circle cx="12" cy="12" r="2"></circle>178          <circle cx="12" cy="19" r="2"></circle>179        </svg>180      </div>181    </div>182  </div>183 184  <!-- Summary Card -->185  <div class="summary-card">186    <!-- bell icon -->187    <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF" width="60" height="60" style="width:64px;height:64px;">188      <path d="M12 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"></path>189      <path d="M18 16V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"></path>190    </svg>191    <div class="summary-text">192      <div class="main">Sat 9:15 AM</div>193      <div class="sub">(20 hours and 59 minutes from now)</div>194    </div>195  </div>196 197  <!-- Alarm Card -->198  <div class="alarm-card">199    <div class="alarm-left">200      <div class="time">9:15 AM</div>201      <div class="label">TOMORROW</div>202    </div>203    <div class="alarm-right">204      <div class="switch">205        <div class="knob"></div>206      </div>207      <div class="dots">⋮</div>208    </div>209  </div>210 211  <!-- Floating Action Button -->212  <div class="fab">213    <svg viewBox="0 0 24 24" width="86" height="86" fill="none" stroke="#FFFFFF" stroke-width="2.2">214      <circle cx="12" cy="13" r="5.5" fill="none"></circle>215      <path d="M12 10v6M9 13h6"></path>216      <path d="M7 6l2-2m8 2l-2-2"></path>217    </svg>218  </div>219 220  <!-- Bottom Navigation -->221  <div class="bottom-nav">222    <div class="nav-item active">223      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">224        <circle cx="12" cy="13" r="5"></circle>225        <path d="M7 6l2-2m8 2l-2-2"></path>226      </svg>227      <div class="label">Alarm</div>228    </div>229    <div class="nav-item">230      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">231        <path d="M6 3v4M18 3v4M5 8h14M6 21h12a1 1 0 0 0 1-1V8H5v12a1 1 0 0 0 1 1z"></path>232        <path d="M12 12v6"></path>233      </svg>234      <div class="label">Timer</div>235    </div>236    <div class="nav-item">237      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">238        <circle cx="12" cy="12" r="9"></circle>239        <path d="M12 7v5l4 2"></path>240      </svg>241      <div class="label">Stopwatch</div>242    </div>243    <div class="nav-item">244      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">245        <circle cx="12" cy="13" r="8"></circle>246        <path d="M12 13V8M12 13h5"></path>247      </svg>248      <div class="label">Clock</div>249    </div>250  </div>251 252  <!-- Gesture bar -->253  <div class="gesture"></div>254</div>255</body>256</html>