GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: radial-gradient(1800px 1400px at 80% 70%, #3e5a4f 0%, #6b846f 30%, #7d927d 60%, #6e826f 100%);12 color: #ffffff;13 }14 15 /* Subtle wallpaper curves */16 .curve {17 position: absolute; border-radius: 60% 40% 70% 30% / 60% 40% 70% 30%;18 filter: blur(1px);19 }20 .curve.a {21 width: 900px; height: 2200px; left: 520px; top: -200px;22 background: linear-gradient( to right, rgba(30,50,45,0.35), rgba(20,30,25,0.15) );23 border-left: 2px solid rgba(20,30,25,0.6);24 transform: rotate(12deg);25 }26 .curve.b {27 width: 800px; height: 1600px; left: -160px; top: 400px;28 background: linear-gradient( to right, rgba(20,30,25,0.25), rgba(20,30,25,0.05) );29 border-left: 2px solid rgba(20,30,25,0.45);30 transform: rotate(-8deg);31 }32 .curve.c {33 width: 700px; height: 900px; right: -140px; bottom: 260px;34 background: linear-gradient( to right, rgba(25,35,30,0.35), rgba(25,35,30,0.1) );35 border-left: 2px solid rgba(25,35,30,0.5);36 transform: rotate(18deg);37 }38 39 /* Status bar */40 .statusbar {41 position: absolute; top: 0; left: 0; width: 100%; height: 96px;42 padding: 0 28px;43 display: flex; align-items: center; justify-content: space-between;44 color: #e9f3ea; font-weight: 500; font-size: 36px;45 background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0));46 }47 .status-left { display: flex; align-items: center; gap: 18px; }48 .status-right { display: flex; align-items: center; gap: 24px; }49 .icon-s { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }50 51 /* Header (date + weather) */52 .header {53 position: absolute; left: 56px; top: 250px; color: #ffffff;54 }55 .date {56 font-size: 90px; font-weight: 500; letter-spacing: 0.2px;57 text-shadow: 0 2px 6px rgba(0,0,0,0.25);58 }59 .weather {60 margin-top: 24px; font-size: 42px; color: #e9f3ea; display: flex; align-items: center; gap: 16px;61 text-shadow: 0 2px 6px rgba(0,0,0,0.2);62 }63 64 /* App rows */65 .icon-row {66 position: absolute; left: 0; width: 100%;67 display: flex; justify-content: space-around; align-items: flex-start;68 }69 .row1 { top: 1450px; padding: 0 40px; }70 .row2 { top: 1750px; padding: 0 40px; }71 72 .app {73 width: 210px; text-align: center; color: #f5f7f5;74 }75 .app .circle {76 width: 170px; height: 170px; margin: 0 auto 18px auto;77 background: #ffffff; border-radius: 50%; box-shadow: 0 8px 18px rgba(0,0,0,0.25);78 display: flex; align-items: center; justify-content: center;79 }80 .app .label {81 font-size: 36px; letter-spacing: 0.2px; text-shadow: 0 2px 6px rgba(0,0,0,0.25);82 }83 84 /* Search bar dock */85 .search-dock {86 position: absolute; left: 70px; bottom: 170px; width: 940px; height: 120px;87 background: #ffffff; border-radius: 60px; box-shadow: 0 16px 30px rgba(0,0,0,0.35);88 display: flex; align-items: center; justify-content: space-between;89 padding: 0 34px;90 }91 .search-left { display: flex; align-items: center; gap: 22px; }92 .g-badge {93 width: 72px; height: 72px; border-radius: 50%; background: #ffffff; border: 2px solid #e6e6e6;94 display: inline-flex; align-items: center; justify-content: center; overflow: hidden;95 }96 .search-placeholder {97 width: 600px; height: 64px; border-radius: 32px; background: #f1f1f1; border: 1px solid #e0e0e0;98 display: flex; align-items: center; padding: 0 20px; color: #7a7a7a; font-size: 34px;99 }100 .dock-actions { display: flex; align-items: center; gap: 24px; }101 .dock-btn {102 width: 76px; height: 76px; border-radius: 18px; background: #f7f7f7; border: 1px solid #e5e5e5;103 display: flex; align-items: center; justify-content: center;104 }105 106 /* Gesture bar */107 .gesture {108 position: absolute; left: 420px; bottom: 72px; width: 240px; height: 12px;109 background: #1f1f1f; border-radius: 8px; opacity: 0.9;110 }111 112 /* Simple SVG icon helpers */113 svg { display: block; }114</style>115</head>116<body>117<div id="render-target">118 119 <div class="curve a"></div>120 <div class="curve b"></div>121 <div class="curve c"></div>122 123 <!-- Status bar -->124 <div class="statusbar">125 <div class="status-left">126 <div style="font-size:36px;">8:23</div>127 <div class="icon-s">128 <!-- Alarm -->129 <svg width="36" height="36" viewBox="0 0 36 36">130 <path d="M5 8 L12 4 M24 4 L31 8" stroke="#e9f3ea" stroke-width="2.8" stroke-linecap="round"/>131 <circle cx="18" cy="20" r="10" fill="none" stroke="#e9f3ea" stroke-width="2.8"/>132 <path d="M18 20 L18 12 M18 20 L24 22" stroke="#e9f3ea" stroke-width="2.8" stroke-linecap="round"/>133 </svg>134 </div>135 <div class="icon-s">136 <!-- Cloud -->137 <svg width="40" height="36" viewBox="0 0 40 36">138 <path d="M14 22c0-4 3-7 7-7 3 0 5 2 6 4 3 0 6 3 6 6 0 3-2 6-6 6H13c-4 0-7-3-7-7 0-4 3-6 8-6"139 fill="none" stroke="#e9f3ea" stroke-width="3" stroke-linecap="round"/>140 </svg>141 </div>142 </div>143 <div class="status-right">144 <div class="icon-s">145 <!-- WiFi -->146 <svg width="40" height="36" viewBox="0 0 40 36">147 <path d="M5 13c6-6 24-6 30 0M10 18c4-4 16-4 20 0M16 23c3-3 10-3 13 0M20 28l4 4" fill="none" stroke="#e9f3ea" stroke-width="3" stroke-linecap="round"/>148 </svg>149 </div>150 <div class="icon-s">151 <!-- Battery -->152 <svg width="44" height="36" viewBox="0 0 44 36">153 <rect x="5" y="8" width="30" height="20" rx="5" ry="5" fill="none" stroke="#e9f3ea" stroke-width="3"/>154 <rect x="9" y="12" width="22" height="12" rx="3" fill="#e9f3ea"/>155 <rect x="36" y="14" width="4" height="8" rx="1.5" fill="#e9f3ea"/>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Date and weather -->162 <div class="header">163 <div class="date">Wed, Jun 14</div>164 <div class="weather">165 <svg width="72" height="40" viewBox="0 0 72 40">166 <path d="M6 14c8-8 20-8 28 0M6 22c8-8 20-8 28 0M6 30c8-8 20-8 28 0" fill="none" stroke="#e9f3ea" stroke-width="4" stroke-linecap="round" opacity="0.9"/>167 </svg>168 <span>34°C · Today 41° / 29° · Widespread d...</span>169 </div>170 </div>171 172 <!-- First row of apps -->173 <div class="icon-row row1">174 <div class="app">175 <div class="circle">176 <!-- Play Store (triangle + colors) -->177 <svg width="110" height="110" viewBox="0 0 110 110">178 <polygon points="22,20 88,55 22,90" fill="#00c2ff"/>179 <polygon points="22,20 44,40 34,50 22,58" fill="#00e676"/>180 <polygon points="88,55 64,70 72,80 88,90" fill="#ff5252"/>181 <polygon points="22,90 44,74 34,66 22,58" fill="#ffd740"/>182 </svg>183 </div>184 <div class="label">Play Store</div>185 </div>186 187 <div class="app">188 <div class="circle">189 <!-- Gmail -->190 <svg width="120" height="120" viewBox="0 0 120 120">191 <rect x="20" y="34" width="80" height="52" rx="10" fill="#ffffff" stroke="#d0d0d0" stroke-width="4"/>192 <path d="M24 36 L60 64 L96 36" fill="none" stroke="#ea4335" stroke-width="10" stroke-linecap="round" />193 <path d="M24 36 L24 86" stroke="#34a853" stroke-width="10" />194 <path d="M96 36 L96 86" stroke="#4285f4" stroke-width="10" />195 <path d="M60 64 L60 86" stroke="#fbbc05" stroke-width="10" />196 </svg>197 </div>198 <div class="label">Gmail</div>199 </div>200 201 <div class="app">202 <div class="circle">203 <!-- Photos -->204 <svg width="120" height="120" viewBox="0 0 120 120">205 <circle cx="60" cy="40" r="22" fill="#fbbc05"/>206 <circle cx="80" cy="60" r="22" fill="#34a853"/>207 <circle cx="60" cy="80" r="22" fill="#4285f4"/>208 <circle cx="40" cy="60" r="22" fill="#ea4335"/>209 </svg>210 </div>211 <div class="label">Photos</div>212 </div>213 214 <div class="app">215 <div class="circle">216 <!-- YouTube -->217 <svg width="120" height="120" viewBox="0 0 120 120">218 <rect x="26" y="38" width="68" height="44" rx="12" fill="#ff0000"/>219 <polygon points="54,44 54,76 82,60" fill="#ffffff"/>220 </svg>221 </div>222 <div class="label">YouTube</div>223 </div>224 </div>225 226 <!-- Second row of dock apps -->227 <div class="icon-row row2">228 <div class="app">229 <div class="circle">230 <!-- Phone -->231 <svg width="120" height="120" viewBox="0 0 120 120">232 <path d="M42 36c-6 6-6 12 0 20 8 12 18 22 32 30 8 4 14 2 20-4l-12-14c-4 2-8 2-12-2-6-4-10-8-14-14-4-4-4-8-2-12L42 36z"233 fill="#4285f4"/>234 </svg>235 </div>236 <div class="label"></div>237 </div>238 239 <div class="app">240 <div class="circle">241 <!-- Messages -->242 <svg width="120" height="120" viewBox="0 0 120 120">243 <rect x="26" y="34" width="68" height="48" rx="14" fill="#1a73e8"/>244 <polygon points="54,82 46,96 70,82" fill="#1a73e8"/>245 <rect x="38" y="48" width="44" height="10" rx="5" fill="#ffffff" opacity="0.9"/>246 </svg>247 </div>248 <div class="label"></div>249 </div>250 251 <div class="app">252 <div class="circle">253 <!-- Chrome -->254 <svg width="120" height="120" viewBox="0 0 120 120">255 <circle cx="60" cy="60" r="42" fill="#db4437"/>256 <path d="M60 18 A42 42 0 0 1 102 60 L72 60 Z" fill="#f4b400"/>257 <path d="M18 60 A42 42 0 0 1 60 18 L72 48 Z" fill="#0f9d58"/>258 <circle cx="60" cy="60" r="22" fill="#4285f4"/>259 <circle cx="60" cy="60" r="12" fill="#ffffff"/>260 </svg>261 </div>262 <div class="label"></div>263 </div>264 265 <div class="app">266 <div class="circle">267 <!-- Camera -->268 <svg width="120" height="120" viewBox="0 0 120 120">269 <rect x="26" y="40" width="68" height="40" rx="10" fill="#546e7a"/>270 <rect x="34" y="34" width="24" height="12" rx="6" fill="#90a4ae"/>271 <circle cx="60" cy="60" r="16" fill="#263238"/>272 <circle cx="60" cy="60" r="9" fill="#90caf9"/>273 </svg>274 </div>275 <div class="label"></div>276 </div>277 </div>278 279 <!-- Search dock -->280 <div class="search-dock">281 <div class="search-left">282 <div class="g-badge">283 <svg width="52" height="52" viewBox="0 0 52 52">284 <path d="M26 10c8 0 14 6 14 14 0 1 0 2 0 3H26v-7h18c-1-9-9-15-18-15-10 0-18 8-18 18s8 18 18 18c5 0 9-2 12-5l-5-5c-2 2-5 3-7 3-7 0-12-5-12-11s5-13 12-13z"285 fill="#4285f4"/>286 <path d="M8 26c0-3 1-6 3-9l7 5c-1 3-1 6 0 8l-7 5c-2-3-3-6-3-9z" fill="#34a853"/>287 <path d="M22 12l6 0 0 8 -6 0z" fill="#fbbc05"/>288 <path d="M19 30l20 0c-1 4-6 10-13 10-3 0-6-1-8-3l1-7z" fill="#ea4335"/>289 </svg>290 </div>291 <div class="search-placeholder">Search...</div>292 </div>293 <div class="dock-actions">294 <div class="dock-btn">295 <!-- Mic -->296 <svg width="40" height="40" viewBox="0 0 40 40">297 <rect x="14" y="8" width="12" height="16" rx="6" fill="#4285f4"/>298 <path d="M8 20c0 7 6 12 12 12s12-5 12-12" fill="none" stroke="#34a853" stroke-width="3"/>299 <rect x="19" y="27" width="2" height="6" fill="#fbbc05"/>300 <rect x="16" y="33" width="8" height="2" fill="#ea4335"/>301 </svg>302 </div>303 <div class="dock-btn">304 <!-- Lens/Camera -->305 <svg width="40" height="40" viewBox="0 0 40 40">306 <rect x="8" y="12" width="24" height="16" rx="5" fill="#ffffff" stroke="#d0d0d0" stroke-width="2"/>307 <circle cx="20" cy="20" r="6" fill="#4285f4"/>308 <rect x="12" y="10" width="8" height="4" rx="2" fill="#fbbc05"/>309 <rect x="26" y="10" width="4" height="4" rx="2" fill="#ea4335"/>310 </svg>311 </div>312 </div>313 </div>314 315 <!-- Gesture bar -->316 <div class="gesture"></div>317</div>318</body>319</html>