GD-ML/AndroidCode
13.4k
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>Android Home Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background:12 radial-gradient(1200px 800px at 20% 25%, rgba(255,255,255,0.06), rgba(255,255,255,0) 70%),13 radial-gradient(900px 900px at 80% 65%, rgba(255,255,255,0.04), rgba(255,255,255,0) 70%),14 repeating-linear-gradient(125deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.0) 3px, rgba(0,0,0,0.1) 6px, rgba(255,255,255,0.0) 9px),15 #1d1f21;16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute; top: 0; left: 0; width: 100%; height: 110px;22 padding: 28px 38px; box-sizing: border-box;23 display: flex; justify-content: space-between; align-items: center; font-size: 36px;24 }25 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }26 .tiny-icon {27 width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.15);28 display: inline-flex; align-items: center; justify-content: center; font-size: 22px;29 }30 .dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; display: inline-block; }31 32 /* Date & weather widget */33 .date-widget {34 position: absolute; left: 72px; top: 300px;35 }36 .date-widget .date { font-size: 64px; font-weight: 500; letter-spacing: 0.3px; }37 .weather-row { margin-top: 26px; display: flex; align-items: center; gap: 18px; font-size: 36px; color: #eaeaea; }38 .weather-dot { width: 28px; height: 28px; background: #ffcf33; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(0,0,0,0.25) inset; }39 40 /* App grid */41 .app-row {42 position: absolute; left: 0; width: 100%;43 display: flex; justify-content: space-around; align-items: flex-start;44 padding: 0 40px; box-sizing: border-box;45 }46 .row-top { top: 1480px; }47 .row-bottom { top: 1750px; }48 .app {49 width: 210px; text-align: center; color: #e6e6e6;50 }51 .icon-circle {52 width: 170px; height: 170px; border-radius: 50%;53 background: #ffffff; margin: 0 auto; box-shadow: 0 8px 24px rgba(0,0,0,0.35);54 display: flex; align-items: center; justify-content: center;55 }56 .app-label { margin-top: 22px; font-size: 34px; font-weight: 500; color: #eaeaea; }57 58 /* Search bar dock */59 .search-dock {60 position: absolute; left: 70px; right: 70px; top: 2060px; height: 120px;61 background: #3b3e41; border-radius: 60px; box-shadow: 0 8px 26px rgba(0,0,0,0.45);62 display: flex; align-items: center; justify-content: space-between; padding: 0 40px; box-sizing: border-box;63 }64 .dock-left { display: flex; align-items: center; gap: 20px; }65 .google-g {66 width: 64px; height: 64px; border-radius: 32px; background: #2f3136;67 display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #4285F4;68 }69 .dock-right { display: flex; align-items: center; gap: 20px; }70 .dock-btn {71 width: 64px; height: 64px; border-radius: 32px; background: #2f3136; display: flex; align-items: center; justify-content: center;72 }73 74 /* Home indicator */75 .home-indicator {76 position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);77 width: 360px; height: 12px; background: #d8d8d8; border-radius: 8px; opacity: 0.85;78 }79 80 /* Simple utility */81 svg { display: block; }82 83 /* Labels under YouTube small badge */84 .badge {85 position: absolute; width: 26px; height: 26px; background: #bba8ff; border-radius: 50%;86 right: 18px; top: 12px; border: 3px solid #ffffff;87 }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- Status Bar -->94 <div class="status-bar">95 <div class="status-left">96 <div style="font-weight:600;">2:53</div>97 <div class="tiny-icon">B</div>98 <div class="tiny-icon">99 <svg width="20" height="20" viewBox="0 0 20 20">100 <rect x="4" y="4" width="12" height="12" rx="2" fill="rgba(255,255,255,0.6)"/>101 </svg>102 </div>103 <div class="tiny-icon">N</div>104 <span class="dot"></span>105 </div>106 <div class="status-right">107 <!-- WiFi -->108 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">109 <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>110 <path d="M5 11c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>111 <path d="M8 14c2.5-1.8 5.5-1.8 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>112 <circle cx="12" cy="17.5" r="1.5" fill="#ffffff"/>113 </svg>114 <!-- Battery -->115 <svg width="50" height="44" viewBox="0 0 28 18" fill="none">116 <rect x="1" y="2" width="22" height="14" rx="3" stroke="#ffffff" stroke-width="2"/>117 <rect x="3" y="4" width="16" height="10" rx="2" fill="#ffffff"/>118 <rect x="24" y="6" width="3" height="6" rx="1" fill="#ffffff"/>119 </svg>120 </div>121 </div>122 123 <!-- Date & Weather -->124 <div class="date-widget">125 <div class="date">Thu, Nov 9</div>126 <div class="weather-row">127 <span class="weather-dot"></span>128 <span>28°C</span>129 </div>130 </div>131 132 <!-- Top App Row -->133 <div class="app-row row-top">134 <!-- Play Store -->135 <div class="app">136 <div class="icon-circle">137 <svg width="120" height="120" viewBox="0 0 120 120">138 <!-- Play Store style kite -->139 <polygon points="20,20 95,60 20,100" fill="#34A853"/>140 <polygon points="20,20 60,60 20,100" fill="#4285F4"/>141 <polygon points="60,60 95,60 20,20" fill="#FBBC05"/>142 <polygon points="60,60 95,60 20,100" fill="#EA4335"/>143 </svg>144 </div>145 <div class="app-label">Play Store</div>146 </div>147 148 <!-- Gmail -->149 <div class="app">150 <div class="icon-circle" style="position: relative;">151 <svg width="120" height="120" viewBox="0 0 120 120">152 <rect x="20" y="30" width="80" height="60" rx="12" fill="#f2f2f2" stroke="#C6C6C6" stroke-width="4"/>153 <path d="M20 38 L60 66 L100 38" stroke="#EA4335" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154 <path d="M30 30 L60 54 L90 30" stroke="#34A853" stroke-width="10" fill="none" opacity="0.8"/>155 <path d="M30 90 L60 66 L90 90" stroke="#4285F4" stroke-width="10" fill="none" opacity="0.8"/>156 </svg>157 </div>158 <div class="app-label">Gmail</div>159 </div>160 161 <!-- Photos -->162 <div class="app">163 <div class="icon-circle">164 <svg width="120" height="120" viewBox="0 0 120 120">165 <path d="M60 20 A40 40 0 0 1 100 60 L60 60 Z" fill="#FBBC05"/>166 <path d="M100 60 A40 40 0 0 1 60 100 L60 60 Z" fill="#34A853"/>167 <path d="M60 100 A40 40 0 0 1 20 60 L60 60 Z" fill="#4285F4"/>168 <path d="M20 60 A40 40 0 0 1 60 20 L60 60 Z" fill="#EA4335"/>169 <circle cx="60" cy="60" r="10" fill="#ffffff"/>170 </svg>171 </div>172 <div class="app-label">Photos</div>173 </div>174 175 <!-- YouTube -->176 <div class="app">177 <div class="icon-circle" style="position: relative;">178 <svg width="120" height="120" viewBox="0 0 120 120">179 <rect x="25" y="35" width="70" height="50" rx="12" fill="#FF0000"/>180 <polygon points="55,45 80,60 55,75" fill="#ffffff"/>181 </svg>182 <span class="badge"></span>183 </div>184 <div class="app-label">YouTube</div>185 </div>186 </div>187 188 <!-- Bottom App Row (dock icons) -->189 <div class="app-row row-bottom">190 <!-- Phone -->191 <div class="app">192 <div class="icon-circle">193 <svg width="120" height="120" viewBox="0 0 120 120">194 <path d="M42 40 c18 24 26 28 40 40 l-10 10 c-4 4-12 2-18-3 c-10-8-22-22-30-36 c-4-7-6-14-2-18 l10-10 z"195 fill="#4285F4"/>196 </svg>197 </div>198 <div class="app-label">Phone</div>199 </div>200 201 <!-- Messages -->202 <div class="app">203 <div class="icon-circle">204 <svg width="120" height="120" viewBox="0 0 120 120">205 <rect x="24" y="30" width="72" height="52" rx="16" fill="#5C9CF3"/>206 <polygon points="40,82 52,82 40,96" fill="#5C9CF3"/>207 <rect x="36" y="44" width="48" height="8" rx="4" fill="#ffffff" opacity="0.9"/>208 <rect x="36" y="58" width="38" height="8" rx="4" fill="#ffffff" opacity="0.9"/>209 </svg>210 </div>211 <div class="app-label">Messages</div>212 </div>213 214 <!-- Chrome -->215 <div class="app">216 <div class="icon-circle">217 <svg width="120" height="120" viewBox="0 0 120 120">218 <circle cx="60" cy="60" r="50" fill="#DB4437"/>219 <path d="M60 10 A50 50 0 0 1 110 60 L70 60 Z" fill="#F4B400"/>220 <path d="M110 60 A50 50 0 0 1 60 110 L70 60 Z" fill="#0F9D58"/>221 <circle cx="60" cy="60" r="24" fill="#4285F4" stroke="#ffffff" stroke-width="6"/>222 </svg>223 </div>224 <div class="app-label">Chrome</div>225 </div>226 227 <!-- Camera -->228 <div class="app">229 <div class="icon-circle">230 <svg width="120" height="120" viewBox="0 0 120 120">231 <rect x="22" y="38" width="76" height="44" rx="12" fill="#8e97a7"/>232 <rect x="28" y="32" width="24" height="14" rx="6" fill="#6f7788"/>233 <circle cx="60" cy="60" r="16" fill="#3b4a64"/>234 <circle cx="60" cy="60" r="9" fill="#8fd3ff"/>235 </svg>236 </div>237 <div class="app-label">Camera</div>238 </div>239 </div>240 241 <!-- Search Dock -->242 <div class="search-dock">243 <div class="dock-left">244 <div class="google-g">G</div>245 <div style="color:#cfd2d6; font-size:36px;">Search</div>246 </div>247 <div class="dock-right">248 <div class="dock-btn">249 <!-- Microphone -->250 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">251 <rect x="8" y="4" width="8" height="10" rx="4" fill="#4CAF50"/>252 <path d="M6 11a6 6 0 0 0 12 0" stroke="#ffffff" stroke-width="2"/>253 <path d="M12 17v3" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>254 </svg>255 </div>256 <div class="dock-btn">257 <!-- Google Lens-style camera -->258 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">259 <rect x="4" y="7" width="16" height="10" rx="3" fill="#EF6C00"/>260 <circle cx="12" cy="12" r="4" fill="#FFD54F"/>261 <rect x="8" y="4" width="8" height="3" rx="1.5" fill="#8D6E63"/>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Home Indicator -->268 <div class="home-indicator"></div>269 270</div>271</body>272</html>