GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>The Clock - Timer Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0e0e10; color:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12  }13 14  /* Header / Hero */15  .hero{16    position:absolute; left:0; top:0; width:100%; height:520px; color:#fff;17    background:18      linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.0) 70%) ,19      repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 140px, rgba(255,255,255,0.02) 140px 280px),20      linear-gradient(135deg, #171717 0%, #2a2a2d 100%);21  }22  .status{23    display:flex; align-items:center; justify-content:space-between;24    padding:28px 36px; font-size:30px; opacity:0.95;25  }26  .titlebar{27    display:flex; align-items:center; gap:24px; padding:22px 36px 10px 36px;28  }29  .titlebar h1{ margin:0; font-weight:600; font-size:60px; letter-spacing:0.5px; }30  .icon{31    width:48px; height:48px; display:inline-block;32  }33  .icon svg{ width:100%; height:100%; fill:#ffffff; }34  .tabs{35    display:flex; justify-content:space-around; align-items:flex-end;36    padding:16px 30px 0 30px; margin-top:14px;37  }38  .tab{39    display:flex; flex-direction:column; align-items:center; gap:8px;40    color:#cfcfd2; font-size:34px;41  }42  .tab svg{ width:58px; height:58px; fill:#ffffff; opacity:0.95; }43  .tab.active{ color:#ffffff; }44  .tab.active .underline{45    width:200px; height:6px; background:#d94a57; border-radius:6px; margin-top:14px;46  }47 48  /* Main panel */49  .panel{50    position:absolute; left:0; right:0; top:350px; bottom:0;51    background:#0b0b0c; border-top-left-radius:48px; border-top-right-radius:48px;52    box-shadow: 0 -10px 30px rgba(0,0,0,0.35) inset;53  }54 55  /* Counter */56  .counter{57    width:100%; padding-top:80px; display:flex; justify-content:space-evenly; align-items:flex-end;58  }59  .timeCol{ text-align:center; }60  .timeVal{61    font-size:140px; font-weight:700; letter-spacing:2px; line-height:1;62  }63  .timeLbl{ margin-top:10px; color:#c7c8cb; font-size:34px; }64  .timeCol.sec .timeVal{ color:#e34a5c; }65  .timeCol.sec .timeLbl{ color:#c7c8cb; }66 67  /* Keypad */68  .keypad{69    width:920px; margin:56px auto 0 auto;70    display:grid; grid-template-columns: repeat(3, 1fr); gap:34px;71  }72  .key{73    height:130px; border:3px solid #cfcfd3; border-radius:65px;74    display:flex; align-items:center; justify-content:center;75    font-size:54px; color:#ffffff; letter-spacing:1px;76    background:transparent;77  }78  .key.muted{ color:#e5e5e5; font-size:40px; }79  .btn-wide{80    width:780px; height:130px; margin:40px auto 0 auto;81    border:3px solid #cfcfd3; border-radius:65px; display:flex; align-items:center; justify-content:center;82    color:#e24a58; font-size:56px; letter-spacing:1px;83  }84 85  /* FAB */86  .fab{87    position:absolute; left:50%; transform:translateX(-50%);88    bottom:360px; width:140px; height:140px; background:#e24a58; border-radius:50%;89    display:flex; align-items:center; justify-content:center;90    box-shadow:0 12px 24px rgba(0,0,0,0.35);91  }92  .fab svg{ width:64px; height:64px; fill:#ffffff; }93 94  /* Ad placeholder */95  .adWrap{96    position:absolute; left:0; right:0; bottom:96px;97    padding:0 0 0 0;98  }99  .adBar{100    height:10px; background:#d94a57; width:100%;101  }102  .ad{103    width:100%; height:180px; background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;104    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;105  }106 107  /* Home indicator */108  .home-indicator{109    position:absolute; left:50%; transform:translateX(-50%);110    bottom:28px; width:280px; height:10px; border-radius:8px; background:#e9e9ea; opacity:0.9;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Header -->118  <div class="hero">119    <div class="status">120      <div>12:15</div>121      <div style="font-size:30px; display:flex; gap:16px; align-items:center;">122        <span style="opacity:0.95;">📶</span>123        <span style="opacity:0.95;">🔋</span>124      </div>125    </div>126 127    <div class="titlebar">128      <span class="icon">129        <!-- Hamburger -->130        <svg viewBox="0 0 24 24"><rect y="3" width="24" height="3"/><rect y="10.5" width="24" height="3"/><rect y="18" width="24" height="3"/></svg>131      </span>132      <h1>The Clock</h1>133      <div style="margin-left:auto; display:flex; gap:20px; align-items:center;">134        <span title="Do Not Disturb">🌙</span>135        <span title="Settings">⚙️</span>136      </div>137    </div>138 139    <div class="tabs">140      <div class="tab">141        <!-- Alarm icon -->142        <svg viewBox="0 0 24 24">143          <circle cx="12" cy="13" r="7"></circle>144          <rect x="11" y="9" width="2" height="5"></rect>145          <rect x="11" y="13" width="5" height="2"></rect>146          <path d="M4 5 L7 3" stroke="#fff" stroke-width="2" fill="none"></path>147          <path d="M20 5 L17 3" stroke="#fff" stroke-width="2" fill="none"></path>148        </svg>149        <div>Alarms</div>150      </div>151      <div class="tab">152        <!-- Clock icon -->153        <svg viewBox="0 0 24 24">154          <circle cx="12" cy="12" r="9"></circle>155          <rect x="11" y="6" width="2" height="7"></rect>156          <rect x="12" y="11" width="6" height="2" transform="rotate(45 12 12)"></rect>157        </svg>158        <div>Clock</div>159      </div>160      <div class="tab active">161        <!-- Timer icon -->162        <svg viewBox="0 0 24 24">163          <circle cx="12" cy="14" r="8"></circle>164          <rect x="9" y="2" width="6" height="2"></rect>165          <rect x="11" y="4" width="2" height="3"></rect>166        </svg>167        <div>Timer</div>168        <div class="underline"></div>169      </div>170      <div class="tab">171        <!-- Stopwatch icon -->172        <svg viewBox="0 0 24 24">173          <circle cx="12" cy="13" r="8"></circle>174          <rect x="10" y="2" width="4" height="2"></rect>175          <rect x="11" y="7" width="2" height="6"></rect>176        </svg>177        <div>Stopwatch</div>178      </div>179    </div>180  </div>181 182  <!-- Main content panel -->183  <div class="panel">184    <div class="counter">185      <div class="timeCol">186        <div class="timeVal">00</div>187        <div class="timeLbl">hour</div>188      </div>189      <div class="timeCol">190        <div class="timeVal">10</div>191        <div class="timeLbl">min</div>192      </div>193      <div class="timeCol sec">194        <div class="timeVal">00</div>195        <div class="timeLbl">sec</div>196      </div>197    </div>198 199    <div class="keypad">200      <div class="key">1</div>201      <div class="key">2</div>202      <div class="key">3</div>203 204      <div class="key">4</div>205      <div class="key">5</div>206      <div class="key">6</div>207 208      <div class="key">7</div>209      <div class="key">8</div>210      <div class="key">9</div>211 212      <div class="key muted">CLEAR</div>213      <div class="key">0</div>214      <div class="key muted">RESET</div>215    </div>216 217    <div class="btn-wide">SET</div>218 219    <div class="fab" aria-label="Start timer">220      <svg viewBox="0 0 24 24">221        <polygon points="12,4 7,10 17,10"></polygon>222        <polygon points="12,20 17,14 7,14"></polygon>223      </svg>224    </div>225 226    <div class="adWrap">227      <div class="adBar"></div>228      <div class="ad">[IMG: Play Store Ad - Spades Card Game]</div>229    </div>230  </div>231 232  <div class="home-indicator"></div>233</div>234</body>235</html>