GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: radial-gradient(1500px 1500px at 80% 80%, #6f826d 0%, #647a66 50%, #5b6f5c 100%);11 }12 13 /* Abstract wallpaper curves */14 .curve-left {15 position: absolute; left: 420px; top: -200px; width: 600px; height: 2600px;16 border: 6px solid rgba(35, 50, 42, 0.45); border-radius: 300px; transform: rotate(8deg);17 background: rgba(0,0,0,0.06);18 }19 .curve-right {20 position: absolute; right: -220px; top: 500px; width: 1100px; height: 1100px;21 border: 6px solid rgba(35, 50, 42, 0.55); border-radius: 50%; background: rgba(0,0,0,0.08);22 }23 24 /* Status bar */25 .status-bar {26 position: absolute; top: 24px; left: 24px; right: 24px; height: 44px;27 display: flex; align-items: center; justify-content: space-between; color: #ffffff;28 }29 .status-left, .status-right { display: flex; align-items: center; gap: 18px; }30 .status-time { font-size: 30px; font-weight: 600; letter-spacing: 0.5px; }31 .status-pill {32 font-size: 20px; padding: 6px 10px; border-radius: 6px;33 background: rgba(255,255,255,0.12); color: #fff;34 }35 .dot { width: 8px; height: 8px; background: #ffffff; border-radius: 50%; opacity: 0.7; }36 37 .status-icon svg { display: block; }38 .status-icon { opacity: 0.95; }39 /* Date widget */40 .date-widget {41 position: absolute; top: 260px; left: 72px; color: #ffffff;42 }43 .date-widget .date-text { font-size: 64px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,0.18); }44 .weather { margin-top: 20px; display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,0.9); font-size: 32px; }45 .weather-icon { width: 46px; height: 32px; }46 .weather-icon svg { width: 100%; height: 100%; }47 48 /* App grid rows */49 .icons-row {50 position: absolute; left: 0; width: 1080px; display: flex; justify-content: space-around; align-items: flex-start;51 padding: 0 40px;52 }53 .row1 { top: 1480px; }54 .row2 { top: 1750px; }55 56 .app { width: 170px; text-align: center; color: rgba(255,255,255,0.95); }57 .icon-disc {58 width: 170px; height: 170px; border-radius: 50%; background: #ffffff;59 box-shadow: 0 14px 28px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center;60 position: relative;61 }62 .label { margin-top: 22px; font-size: 28px; letter-spacing: 0.2px; }63 .badge {64 position: absolute; right: 8px; top: 8px; width: 30px; height: 30px;65 background: #69d4a2; border-radius: 50%; border: 4px solid #ffffff;66 }67 68 /* Search bar */69 .search-bar {70 position: absolute; left: 70px; top: 2030px; width: 940px; height: 120px;71 background: #ffffff; border-radius: 60px; box-shadow: 0 14px 28px rgba(0,0,0,0.25);72 display: flex; align-items: center; justify-content: space-between; padding: 0 34px;73 }74 .search-left { display: flex; align-items: center; gap: 18px; }75 .search-g {76 width: 60px; height: 60px; border-radius: 40px; position: relative; overflow: hidden;77 background: conic-gradient(#3cba54 0 25%, #f4c20d 25% 50%, #db3236 50% 75%, #4885ed 75% 100%);78 display: flex; align-items: center; justify-content: center;79 }80 .search-g span { background:#fff; color:#000; font-weight:700; border-radius:10px; padding:1px 6px; font-size: 28px; }81 .search-placeholder { color: #767676; font-size: 32px; }82 .search-actions { display: flex; align-items: center; gap: 18px; }83 .action-btn {84 width: 70px; height: 70px; border-radius: 18px; background: #f3f5f7; display: flex; align-items: center; justify-content: center;85 box-shadow: inset 0 0 0 1px #e0e0e0;86 }87 .gesture-bar {88 position: absolute; left: 410px; bottom: 28px; width: 260px; height: 12px; border-radius: 6px; background: rgba(0,0,0,0.55);89 }90 91 /* Simple SVG icon sizes */92 .icon-disc svg { width: 104px; height: 104px; }93 94</style>95</head>96<body>97<div id="render-target">98 <div class="curve-left"></div>99 <div class="curve-right"></div>100 101 <!-- Status bar -->102 <div class="status-bar">103 <div class="status-left">104 <div class="status-time">12:11</div>105 <div class="status-pill">13°</div>106 <div class="status-pill">y</div>107 <div class="status-pill">ebay</div>108 <div class="dot"></div>109 </div>110 <div class="status-right">111 <div class="status-icon">112 <!-- WiFi icon -->113 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">114 <path d="M12 18.5c.9 0 1.6.7 1.6 1.6s-.7 1.6-1.6 1.6-1.6-.7-1.6-1.6.7-1.6 1.6-1.6z"/>115 <path d="M4.3 10.7c4.2-3.6 11.2-3.6 15.4 0l-1.6 1.9c-3.2-2.7-8.9-2.7-12.1 0l-1.7-1.9z" opacity="0.85"/>116 <path d="M7.3 13.7c2.9-2.1 6.5-2.1 9.4 0l-1.5 1.7c-2-1.4-4.4-1.4-6.4 0l-1.5-1.7z" opacity="0.85"/>117 </svg>118 </div>119 <div class="status-icon">120 <!-- Battery icon -->121 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">122 <rect x="2" y="6" width="16" height="12" rx="2" ry="2" stroke="#fff" stroke-width="1.5" fill="none"/>123 <rect x="4" y="8" width="12" height="8" rx="1.5" ry="1.5" fill="#fff"/>124 <rect x="19" y="9" width="3" height="6" rx="1" fill="#fff"/>125 </svg>126 </div>127 </div>128 </div>129 130 <!-- Date widget -->131 <div class="date-widget">132 <div class="date-text">Thu, Jan 11</div>133 <div class="weather">134 <div class="weather-icon">135 <!-- Wavy lines icon -->136 <svg viewBox="0 0 60 40">137 <path d="M6 12c6-6 12-6 18 0s12 6 18 0" stroke="#d7e3d5" stroke-width="4" fill="none" stroke-linecap="round"/>138 <path d="M6 22c6-6 12-6 18 0s12 6 18 0" stroke="#d7e3d5" stroke-width="4" fill="none" stroke-linecap="round"/>139 <path d="M6 32c6-6 12-6 18 0s12 6 18 0" stroke="#d7e3d5" stroke-width="4" fill="none" stroke-linecap="round"/>140 </svg>141 </div>142 <div>12°C</div>143 </div>144 </div>145 146 <!-- First app row -->147 <div class="icons-row row1">148 <!-- Play Store -->149 <div class="app">150 <div class="icon-disc">151 <svg viewBox="0 0 100 100">152 <polygon points="24,20 70,50 24,80" fill="#48a7ff"/>153 <polygon points="24,20 40,35 24,35" fill="#34a853"/>154 <polygon points="24,80 40,65 24,65" fill="#fbbc04"/>155 <polygon points="40,35 40,65 70,50" fill="#ea4335"/>156 </svg>157 </div>158 <div class="label">Play Store</div>159 </div>160 161 <!-- Gmail -->162 <div class="app">163 <div class="icon-disc" style="overflow: visible;">164 <svg viewBox="0 0 100 100">165 <rect x="18" y="28" width="64" height="44" rx="8" fill="#ffffff" stroke="#d9d9d9" stroke-width="2"/>166 <path d="M18 36 L50 56 L82 36" stroke="#ea4335" stroke-width="10" fill="none" stroke-linecap="round"/>167 <path d="M25 28 L50 48 L75 28" stroke="#34a853" stroke-width="10" fill="none" stroke-linecap="round"/>168 </svg>169 <div class="badge"></div>170 </div>171 <div class="label">Gmail</div>172 </div>173 174 <!-- Photos -->175 <div class="app">176 <div class="icon-disc">177 <svg viewBox="0 0 100 100">178 <circle cx="50" cy="28" r="18" fill="#fbbc04"/>179 <circle cx="72" cy="50" r="18" fill="#34a853"/>180 <circle cx="50" cy="72" r="18" fill="#4285f4"/>181 <circle cx="28" cy="50" r="18" fill="#ea4335"/>182 <circle cx="50" cy="50" r="12" fill="#ffffff"/>183 </svg>184 </div>185 <div class="label">Photos</div>186 </div>187 188 <!-- YouTube -->189 <div class="app">190 <div class="icon-disc">191 <svg viewBox="0 0 100 100">192 <rect x="22" y="28" width="56" height="44" rx="10" fill="#ff0000"/>193 <polygon points="44,38 44,62 66,50" fill="#ffffff"/>194 </svg>195 </div>196 <div class="label">YouTube</div>197 </div>198 </div>199 200 <!-- Second app row -->201 <div class="icons-row row2">202 <!-- Phone -->203 <div class="app">204 <div class="icon-disc">205 <svg viewBox="0 0 100 100">206 <path d="M32 30c6 0 10 6 10 12 0 2-1 5-3 7l10 10c2-2 5-3 7-3 6 0 12 4 12 10 0 4-4 8-8 8-22-4-38-20-42-42 0-4 4-8 8-8z" fill="#1e88e5"/>207 </svg>208 </div>209 </div>210 211 <!-- Messages -->212 <div class="app">213 <div class="icon-disc">214 <svg viewBox="0 0 100 100">215 <rect x="20" y="24" width="60" height="40" rx="12" fill="#2d7ef7"/>216 <rect x="28" y="38" width="44" height="10" rx="5" fill="#ffffff"/>217 <path d="M40 64 L48 52 L60 64" fill="#2d7ef7"/>218 </svg>219 </div>220 </div>221 222 <!-- Chrome -->223 <div class="app">224 <div class="icon-disc">225 <svg viewBox="0 0 100 100">226 <circle cx="50" cy="50" r="40" fill="#db4437"/>227 <path d="M50 10 A40 40 0 0 1 90 50 L64 50 Z" fill="#f4b400"/>228 <path d="M20 50 A40 40 0 0 1 50 10 L50 36 Z" fill="#0f9d58"/>229 <circle cx="50" cy="50" r="20" fill="#4285f4"/>230 <circle cx="50" cy="50" r="10" fill="#bfe1ff"/>231 </svg>232 </div>233 </div>234 235 <!-- Camera -->236 <div class="app">237 <div class="icon-disc">238 <svg viewBox="0 0 100 100">239 <rect x="22" y="34" width="56" height="34" rx="8" fill="#2f80ed"/>240 <rect x="18" y="30" width="64" height="40" rx="10" fill="#ffffff" stroke="#e0e0e0" stroke-width="3"/>241 <circle cx="50" cy="50" r="14" fill="#2f80ed"/>242 <circle cx="50" cy="50" r="8" fill="#73a8ff"/>243 </svg>244 </div>245 </div>246 </div>247 248 <!-- Search bar -->249 <div class="search-bar">250 <div class="search-left">251 <div class="search-g"><span>G</span></div>252 <div class="search-placeholder">Search</div>253 </div>254 <div class="search-actions">255 <div class="action-btn" title="Voice">256 <!-- Mic icon -->257 <svg width="34" height="34" viewBox="0 0 24 24" fill="#4285f4">258 <rect x="9" y="5" width="6" height="10" rx="3"/>259 <path d="M6 11c0 3.3 2.4 5.5 6 5.5s6-2.2 6-5.5" stroke="#4285f4" stroke-width="2" fill="none"/>260 <path d="M12 18v3" stroke="#4285f4" stroke-width="2"/>261 <path d="M8 21h8" stroke="#4285f4" stroke-width="2" />262 </svg>263 </div>264 <div class="action-btn" title="Lens">265 <!-- Camera/Lens icon -->266 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ea4335">267 <rect x="4" y="7" width="16" height="12" rx="3" fill="#ea4335" opacity="0.08"/>268 <circle cx="12" cy="13" r="5" stroke="#ea4335" stroke-width="2" fill="none"/>269 <circle cx="12" cy="13" r="2" fill="#ea4335"/>270 </svg>271 </div>272 </div>273 </div>274 275 <div class="gesture-bar"></div>276</div>277</body>278</html>