GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Alarm UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: 'Inter', 'Roboto', Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#0f141a; color:#fff;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; left:24px; right:24px; top:18px; height:64px;17 display:flex; align-items:center; justify-content:space-between;18 font-weight:600; color:#e9eef3;19 }20 .status-left { display:flex; align-items:center; gap:18px; }21 .time { font-size:40px; letter-spacing:0.5px; }22 .mini-icon {23 width:34px; height:34px; border-radius:6px;24 border:1px solid #2a3038; background:#1a2027;25 }26 .status-right { display:flex; align-items:center; gap:14px; }27 .battery {28 width:38px; height:22px; border:2px solid #cfd8dc; border-radius:4px; position:relative;29 }30 .battery::after { content:""; position:absolute; right:-6px; top:5px; width:4px; height:12px; background:#cfd8dc; border-radius:1px; }31 .battery .level { position:absolute; left:3px; top:3px; bottom:3px; width:26px; background:#cfd8dc; }32 33 /* Title and top actions */34 .title {35 position:absolute; left:32px; top:128px;36 font-size:64px; margin:0; font-weight:700; letter-spacing:0.2px;37 }38 .top-actions {39 position:absolute; right:28px; top:132px; display:flex; align-items:center; gap:26px;40 }41 .icon-btn {42 width:64px; height:64px; display:flex; align-items:center; justify-content:center;43 }44 .icon-lightning svg { width:36px; height:36px; }45 .icon-gear svg { width:38px; height:38px; }46 .add-square {47 width:124px; height:124px; background:#8ea6ff; border-radius:28px;48 display:flex; align-items:center; justify-content:center;49 box-shadow:0 6px 0 rgba(0,0,0,0.15) inset;50 }51 .add-square svg { width:64px; height:64px; }52 53 /* Create card */54 .create-card {55 position:absolute; left:72px; right:72px; top:320px; height:700px;56 background:#262b31; border-radius:12px; border:1px solid #303743;57 display:flex; align-items:center; justify-content:center; flex-direction:column; gap:36px;58 }59 .plus-circle {60 width:190px; height:190px; background:#8ea6ff; border-radius:50%;61 display:flex; align-items:center; justify-content:center;62 box-shadow:0 0 0 10px rgba(142,166,255,0.15);63 }64 .create-text {65 font-size:46px; color:#d9e1ea;66 }67 68 /* Ads section */69 .ads-container {70 position:absolute; left:0; right:0; top:1060px;71 padding:18px 18px 0;72 background:transparent;73 }74 .ad-controls {75 position:absolute; right:26px; top:4px; display:flex; align-items:center; gap:12px;76 }77 .ad-info {78 width:38px; height:38px; border-radius:50%; background:#5eb3ff;79 display:flex; align-items:center; justify-content:center; font-weight:700; color:#0f141a;80 font-size:24px;81 }82 .ad-close {83 width:38px; height:38px; border-radius:50%; background:#e0e6ed; color:#0f141a;84 display:flex; align-items:center; justify-content:center; font-weight:900; font-size:22px;85 }86 87 .ad-grid {88 display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;89 margin-top:56px;90 }91 .ad-item {92 position:relative; height:360px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:8px;93 display:flex; align-items:center; justify-content:center; color:#555;94 font-size:30px; text-align:center; padding:10px;95 }96 .badge {97 position:absolute; left:12px; top:12px;98 background:#ffffff; color:#1b2026; border:1px solid #cfd6de;99 border-radius:16px; padding:8px 16px; font-weight:700; font-size:34px;100 }101 .price {102 position:absolute; right:12px; bottom:12px;103 background:#e9edf2; color:#1b2026; border-radius:16px; padding:10px 18px;104 font-weight:800; font-size:36px;105 }106 107 /* App ad row */108 .brand-row {109 margin:18px; margin-top:20px; padding:18px;110 display:flex; align-items:center; justify-content:space-between;111 border-top:1px solid #20262e;112 }113 .brand-left { display:flex; align-items:center; gap:18px; }114 .app-icon {115 width:84px; height:84px; border-radius:18px; background:#E0E0E0; border:1px solid #BDBDBD;116 display:flex; align-items:center; justify-content:center; color:#555; font-size:22px;117 }118 .brand-text { display:flex; flex-direction:column; gap:4px; }119 .brand-name { font-size:40px; font-weight:700; }120 .brand-meta { color:#cfd8dc; font-size:30px; display:flex; align-items:center; gap:10px; }121 .star { color:#ffc107; font-size:30px; }122 .installed-pill {123 background:#183c23; color:#90e0a1; padding:4px 12px; border-radius:14px; font-size:26px; border:1px solid #295c39;124 }125 .open-btn {126 background:#1bb05d; color:#0e2517; font-weight:800;127 padding:18px 44px; border-radius:40px; font-size:40px; border:none;128 }129 130 /* Remove ads */131 .remove-ads {132 position:absolute; left:18px; right:18px; bottom:150px; height:120px;133 background:#8ea6ff; color:#0f1a2a; border-radius:18px;134 display:flex; align-items:center; justify-content:center; font-weight:800; font-size:44px;135 }136 137 /* Home indicator */138 .home-indicator {139 position:absolute; left:50%; transform:translateX(-50%);140 bottom:48px; width:360px; height:10px; background:#ffffff; opacity:0.9; border-radius:6px;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status Bar -->148 <div class="status-bar">149 <div class="status-left">150 <div class="time">3:14</div>151 <div class="mini-icon"></div>152 <div class="mini-icon"></div>153 <div class="mini-icon"></div>154 <div class="mini-icon"></div>155 <div class="mini-icon"></div>156 </div>157 <div class="status-right">158 <div class="battery"><div class="level"></div></div>159 </div>160 </div>161 162 <!-- Title -->163 <h1 class="title">My Alarms</h1>164 165 <!-- Top actions -->166 <div class="top-actions">167 <div class="icon-btn icon-lightning">168 <svg viewBox="0 0 24 24" fill="#ffd54f">169 <path d="M13 2L3 14h7l-1 8 12-14h-7l1-6z"/>170 </svg>171 </div>172 <div class="icon-btn icon-gear">173 <svg viewBox="0 0 24 24" fill="#ffffff">174 <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2.1-1.2.2-2.4-2.3-.9-.9-2.3-2.4.2L12 2 9.6 3.4l-2.4-.2-.9 2.3-2.3.9.2 2.4L2 12l1.2 2.1-.2 2.4 2.3.9.9 2.3 2.4-.2L12 22l2.1-1.2 2.4.2.9-2.3 2.3-.9-.2-2.4L21 12z"/>175 </svg>176 </div>177 <div class="add-square">178 <svg viewBox="0 0 24 24" fill="#ffffff">179 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>180 </svg>181 </div>182 </div>183 184 <!-- Create Alarm Card -->185 <div class="create-card">186 <div class="plus-circle">187 <svg viewBox="0 0 24 24" width="86" height="86" fill="#ffffff">188 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>189 </svg>190 </div>191 <div class="create-text">Tap here to create an alarm</div>192 </div>193 194 <!-- Ads Grid -->195 <div class="ads-container">196 <div class="ad-controls">197 <div class="ad-info">i</div>198 <div class="ad-close">×</div>199 </div>200 201 <div class="ad-grid">202 <div class="ad-item">203 [IMG: Men's colorblock polo shirt]204 <div class="badge">-60%</div>205 <div class="price">₹1,390</div>206 </div>207 <div class="ad-item">208 [IMG: Men's navy polo long sleeve]209 <div class="badge">-23%</div>210 <div class="price">₹2,290</div>211 </div>212 <div class="ad-item">213 [IMG: Men's dark polo with subtle print]214 <div class="badge">-60%</div>215 <div class="price">₹990</div>216 </div>217 218 <div class="ad-item">219 [IMG: Men's black chinos/trousers]220 <div class="badge">-36%</div>221 <div class="price">₹3,190</div>222 </div>223 <div class="ad-item">224 [IMG: Men's pastel polo]225 <div class="badge">-60%</div>226 <div class="price">₹1,190</div>227 </div>228 <div class="ad-item">229 [IMG: Men's light grey sweatshirt]230 <div class="badge">-26%</div>231 <div class="price">₹2,590</div>232 </div>233 </div>234 235 <!-- Brand row -->236 <div class="brand-row">237 <div class="brand-left">238 <div class="app-icon">M&S</div>239 <div class="brand-text">240 <div class="brand-name">M&S India</div>241 <div class="brand-meta">242 <span class="star">★</span>243 <span>4.4</span>244 <span class="installed-pill">Installed</span>245 </div>246 </div>247 </div>248 <button class="open-btn">Open</button>249 </div>250 </div>251 252 <!-- Remove Ads button -->253 <div class="remove-ads">REMOVE ADS</div>254 255 <!-- Home indicator -->256 <div class="home-indicator"></div>257</div>258</body>259</html>