GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>ClockBuddy Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target{8 width:1080px; height:2400px; position:relative; overflow:hidden;9 color:#fff;10 background:11 linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),12 repeating-linear-gradient(140deg,#191919 0px,#191919 220px,#0f0f0f 220px,#0f0f0f 440px);13 }14 15 /* Status bar */16 .status-bar{17 position:absolute; top:0; left:0; right:0; height:90px; padding:0 30px;18 display:flex; align-items:center; justify-content:space-between; color:#eaeaea;19 font-size:36px; letter-spacing:0.5px;20 }21 .status-icons{ display:flex; gap:22px; align-items:center; color:#e0e0e0; }22 .status-dot{ width:14px; height:14px; border-radius:50%; background:#e0e0e0; opacity:0.8; }23 24 /* Header */25 .header{26 position:absolute; top:90px; left:0; right:0; height:120px; display:flex; align-items:center;27 padding:0 34px; color:#f5f5f5;28 }29 .hamburger{30 width:56px; height:56px; display:flex; align-items:center; justify-content:center; margin-right:22px;31 }32 .hamburger span{ display:block; width:38px; height:4px; background:#f5f5f5; margin:4px 0; border-radius:2px; }33 .title{ font-size:56px; font-weight:700; flex:1; }34 .header-icons{ display:flex; gap:28px; align-items:center; }35 .hdr-ico{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; color:#e0e0e0; font-size:44px; }36 37 /* Tabs */38 .tabs{39 position:absolute; top:210px; left:0; right:0; height:180px; display:flex; align-items:flex-end; padding:0 26px 0 26px;40 box-sizing:border-box;41 }42 .tab{43 flex:1; text-align:center; color:#cfcfcf; padding-top:10px; position:relative;44 }45 .tab svg{ width:64px; height:64px; display:block; margin:0 auto 12px auto; }46 .tab .label{ font-size:40px; }47 .tab.active{ color:#ffffff; }48 .tab.active:after{49 content:""; position:absolute; bottom:0; left:18%; right:18%; height:6px; background:#d6535c; border-radius:3px;50 }51 52 /* Alarm list */53 .list{ position:absolute; left:0; right:0; top:390px; bottom:180px; overflow:hidden; padding:10px 0; }54 .alarm{55 position:relative; padding:38px 110px 26px 150px; margin:6px 0 28px 0;56 }57 .chk{58 position:absolute; left:60px; top:48px; width:62px; height:62px; border:4px solid #bdbdbd; border-radius:12px; opacity:0.9;59 }60 .more{61 position:absolute; right:42px; top:56px; width:48px; height:48px; opacity:0.85;62 }63 .title-small{ font-size:38px; color:#bfbfbf; margin-bottom:10px; display:flex; align-items:center; gap:12px; }64 .time-row{ display:flex; align-items:baseline; gap:18px; }65 .time{ font-size:132px; font-weight:700; letter-spacing:2px; }66 .ampm{ font-size:56px; color:#d8d8d8; margin-top:8px; }67 .note{ font-size:46px; color:#bdbdbd; margin-left:8px; }68 .sub{ font-size:42px; color:#bdbdbd; margin-top:10px; }69 70 /* Floating action button */71 .fab{72 position:absolute; bottom:260px; left:50%; transform:translateX(-50%);73 width:150px; height:150px; background:#d4535c; border-radius:50%;74 display:flex; align-items:center; justify-content:center; color:#fff; font-size:92px;75 box-shadow:0 10px 24px rgba(0,0,0,0.45);76 }77 78 /* Home indicator */79 .home-indicator{80 position:absolute; bottom:28px; left:50%; transform:translateX(-50%);81 width:500px; height:10px; background:#e6e6e6; border-radius:6px; opacity:0.9;82 }83 84 /* helper colors */85 .muted{ color:#bdbdbd; }86 svg{ fill:currentColor; }87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Status bar -->93 <div class="status-bar">94 <div>8:17</div>95 <div class="status-icons">96 <div class="status-dot"></div>97 <div class="status-dot"></div>98 <div class="status-dot"></div>99 </div>100 </div>101 102 <!-- Header -->103 <div class="header">104 <div class="hamburger">105 <span></span><span></span><span></span>106 </div>107 <div class="title">ClockBuddy</div>108 <div class="header-icons">109 <!-- moon -->110 <svg class="hdr-ico" viewBox="0 0 24 24">111 <path d="M21 13.3A8.5 8.5 0 0 1 10.7 3a8.3 8.3 0 1 0 10.3 10.3z"></path>112 </svg>113 <!-- gear (fallback) -->114 <div class="hdr-ico">⚙</div>115 </div>116 </div>117 118 <!-- Tabs -->119 <div class="tabs">120 <div class="tab active">121 <!-- alarm icon -->122 <svg viewBox="0 0 24 24">123 <path d="M7 2L2 5l1 2 6-3L7 2zm10 0l-2 1 6 3 1-2-5-2zM12 7a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 3v5l4 2-.8 1.4L11 15V10h1z"></path>124 </svg>125 <div class="label">Alarms</div>126 </div>127 <div class="tab">128 <!-- clock icon -->129 <svg viewBox="0 0 24 24">130 <path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"></path>131 </svg>132 <div class="label">Clock</div>133 </div>134 <div class="tab">135 <!-- timer icon -->136 <svg viewBox="0 0 24 24">137 <path d="M9 2h6v2H9zM12 6a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 4h-2v6h6l-1-2h-3V10z"></path>138 </svg>139 <div class="label">Timer</div>140 </div>141 <div class="tab">142 <!-- stopwatch icon -->143 <svg viewBox="0 0 24 24">144 <path d="M9 1h6v2H9zM16 3l3 3-1.4 1.4L14.6 4.4 16 3zM12 6a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 4h-2v5l4 2 .8-1.4L13 14V10z"></path>145 </svg>146 <div class="label">Stopwatch</div>147 </div>148 </div>149 150 <!-- Alarm list -->151 <div class="list">152 153 <!-- Item 1 -->154 <div class="alarm">155 <div class="chk"></div>156 <svg class="more" viewBox="0 0 24 24">157 <circle cx="12" cy="5" r="2"></circle>158 <circle cx="12" cy="12" r="2"></circle>159 <circle cx="12" cy="19" r="2"></circle>160 </svg>161 <div class="title-small">Work <span>⏰</span></div>162 <div class="time-row">163 <div class="time">6:30</div>164 <div class="ampm">AM</div>165 <div class="note">♪</div>166 </div>167 <div class="sub">Weekdays</div>168 </div>169 170 <!-- Item 2 -->171 <div class="alarm">172 <div class="chk"></div>173 <svg class="more" viewBox="0 0 24 24">174 <circle cx="12" cy="5" r="2"></circle>175 <circle cx="12" cy="12" r="2"></circle>176 <circle cx="12" cy="19" r="2"></circle>177 </svg>178 <div class="title-small">Late Start</div>179 <div class="time-row">180 <div class="time">9:00</div>181 <div class="ampm">AM</div>182 <div class="note">♪</div>183 </div>184 <div class="sub">Weekends</div>185 </div>186 187 <!-- Item 3 -->188 <div class="alarm">189 <div class="chk"></div>190 <svg class="more" viewBox="0 0 24 24">191 <circle cx="12" cy="5" r="2"></circle>192 <circle cx="12" cy="12" r="2"></circle>193 <circle cx="12" cy="19" r="2"></circle>194 </svg>195 <div class="title-small">Appointment</div>196 <div class="time-row">197 <div class="time">2:45</div>198 <div class="ampm">PM</div>199 <div class="note">♪</div>200 </div>201 <div class="sub">Today</div>202 </div>203 204 <!-- Item 4 -->205 <div class="alarm">206 <div class="chk"></div>207 <svg class="more" viewBox="0 0 24 24">208 <circle cx="12" cy="5" r="2"></circle>209 <circle cx="12" cy="12" r="2"></circle>210 <circle cx="12" cy="19" r="2"></circle>211 </svg>212 <div class="title-small" style="opacity:0;">•</div>213 <div class="time-row">214 <div class="time">3:00</div>215 <div class="ampm">PM</div>216 <div class="note">♪</div>217 </div>218 <div class="sub">Today</div>219 </div>220 221 <!-- Item 5 -->222 <div class="alarm">223 <div class="chk"></div>224 <svg class="more" viewBox="0 0 24 24">225 <circle cx="12" cy="5" r="2"></circle>226 <circle cx="12" cy="12" r="2"></circle>227 <circle cx="12" cy="19" r="2"></circle>228 </svg>229 <div class="title-small">Shopping</div>230 <div class="time-row">231 <div class="time">4:00</div>232 <div class="ampm">PM</div>233 <div class="note">♪</div>234 </div>235 <div class="sub">Saturdays</div>236 </div>237 238 </div>239 240 <!-- Floating action button -->241 <div class="fab">+</div>242 243 <!-- Home indicator -->244 <div class="home-indicator"></div>245 246</div>247</body>248</html>