GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI 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 background:10 radial-gradient(1400px 1100px at 60% 30%, #2b2f33 0%, #1e2126 60%, #101317 100%);11 }12 /* subtle feather-like texture overlay */13 #render-target::before{14 content:""; position:absolute; inset:0;15 background:16 repeating-linear-gradient(65deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, rgba(0,0,0,0) 22px),17 repeating-linear-gradient(-65deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, rgba(0,0,0,0) 26px);18 opacity:0.25; pointer-events:none;19 }20 21 .status-bar { position:absolute; top:32px; left:32px; right:32px; height:64px; color:#fff; font-size:38px; display:flex; align-items:center; justify-content:space-between; }22 .status-left { display:flex; align-items:center; gap:18px; }23 .status-right { display:flex; align-items:center; gap:26px; }24 .status-small { font-size:26px; opacity:0.7; }25 26 .date-block { position:absolute; top:200px; left:72px; color:#fff; }27 .date-block .date { font-size:68px; font-weight:600; letter-spacing:0.5px; }28 .weather { margin-top:26px; display:flex; align-items:center; gap:22px; color:#fff; font-size:42px; opacity:0.9; }29 30 /* App grid */31 .app-grid { position:absolute; left:60px; right:60px; top:1450px; display:grid; grid-template-columns:repeat(4, 1fr); gap:52px 30px; }32 .app-item { display:flex; flex-direction:column; align-items:center; color:#fff; }33 .icon-circle { width:170px; height:170px; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; }34 .app-label { margin-top:26px; font-size:40px; letter-spacing:0.2px; }35 36 /* Bottom row (phone/messages/chrome/camera) slightly lower */37 .app-grid.bottom { top:1700px; }38 39 /* Search bar */40 .search-bar { position:absolute; bottom:190px; left:85px; width:910px; height:120px; background:#2e3235; border-radius:70px; box-shadow:0 10px 28px rgba(0,0,0,0.45); display:flex; align-items:center; padding:0 36px; color:#fff; }41 .search-left { display:flex; align-items:center; gap:18px; }42 .search-right { margin-left:auto; display:flex; align-items:center; gap:34px; }43 44 /* Gesture bar */45 .gesture { position:absolute; bottom:72px; left:50%; transform:translateX(-50%); width:340px; height:20px; background:#ffffff; border-radius:12px; opacity:0.85; }46 47 /* Helper styles for simple SVG icons */48 svg { display:block; }49</style>50</head>51<body>52<div id="render-target">53 54 <!-- Status Bar -->55 <div class="status-bar">56 <div class="status-left">57 <div>11:13</div>58 <div class="status-small">5G</div>59 </div>60 <div class="status-right">61 <!-- Wi-Fi icon -->62 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">63 <path d="M12 18.5c.9 0 1.7.7 1.7 1.5S12.9 21.5 12 21.5s-1.7-.7-1.7-1.5.8-1.5 1.7-1.5Z" fill="#fff"/>64 <path d="M3 9c2.6-2.1 6-3.3 9-3.3s6.4 1.2 9 3.3" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.8"/>65 <path d="M5.5 12c1.9-1.6 4.3-2.5 6.5-2.5s4.6.9 6.5 2.5" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.8"/>66 <path d="M8 15c1.2-1 2.6-1.6 4-1.6s2.8.6 4 1.6" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.8"/>67 </svg>68 <!-- Battery icon -->69 <svg width="54" height="54" viewBox="0 0 26 26" fill="none">70 <rect x="2" y="6" width="18" height="12" rx="2.5" stroke="#fff" stroke-width="2"/>71 <rect x="4" y="8" width="12" height="8" rx="1.5" fill="#fff"/>72 <rect x="20.5" y="10" width="3" height="4" rx="1" fill="#fff"/>73 </svg>74 </div>75 </div>76 77 <!-- Date and Weather -->78 <div class="date-block">79 <div class="date">Wed, Nov 15</div>80 <div class="weather">81 <!-- Wavy water icon -->82 <svg width="80" height="44" viewBox="0 0 80 44" fill="none">83 <path d="M5 22c6-7 12 7 18 0s12 7 18 0 12 7 18 0" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity="0.9"/>84 <path d="M5 36c6-7 12 7 18 0s12 7 18 0 12 7 18 0" stroke="#fff" stroke-width="4" stroke-linecap="round" opacity="0.6"/>85 </svg>86 <div>22°C</div>87 </div>88 </div>89 90 <!-- App grid: Play Store, Gmail, Photos, YouTube -->91 <div class="app-grid">92 <!-- Play Store -->93 <div class="app-item">94 <div class="icon-circle">95 <svg width="120" height="120" viewBox="0 0 120 120">96 <!-- Simplified Play Store triangle -->97 <polygon points="26,24 96,60 26,96" fill="#43A047"/>98 <polygon points="26,24 56,44 44,58 26,24" fill="#1E88E5"/>99 <polygon points="26,96 44,62 56,76 26,96" fill="#FB8C00"/>100 <polygon points="56,44 96,60 56,76 44,62" fill="#E53935" opacity="0.9"/>101 </svg>102 </div>103 <div class="app-label">Play Store</div>104 </div>105 106 <!-- Gmail -->107 <div class="app-item">108 <div class="icon-circle">109 <svg width="120" height="120" viewBox="0 0 120 120">110 <rect x="22" y="36" width="76" height="52" rx="10" fill="#fff" stroke="#9E9E9E" stroke-width="6"/>111 <path d="M22 40 L60 68 L98 40" stroke="#E53935" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>112 <path d="M32 40 L32 88 M88 40 L88 88" stroke="#43A047" stroke-width="10"/>113 </svg>114 </div>115 <div class="app-label">Gmail</div>116 </div>117 118 <!-- Photos -->119 <div class="app-item">120 <div class="icon-circle">121 <svg width="120" height="120" viewBox="0 0 120 120">122 <circle cx="60" cy="60" r="18" fill="#F5F5F5"/>123 <path d="M60 18 a22 22 0 0 1 22 22 h-22z" fill="#F44336"/>124 <path d="M102 60 a22 22 0 0 1-22 22 V60z" fill="#FB8C00"/>125 <path d="M60 102 a22 22 0 0 1-22-22 h22z" fill="#43A047"/>126 <path d="M18 60 a22 22 0 0 1 22-22 v22z" fill="#1E88E5"/>127 </svg>128 </div>129 <div class="app-label">Photos</div>130 </div>131 132 <!-- YouTube -->133 <div class="app-item">134 <div class="icon-circle">135 <svg width="120" height="120" viewBox="0 0 120 120">136 <rect x="20" y="36" width="80" height="48" rx="16" fill="#E53935"/>137 <polygon points="52,46 52,74 78,60" fill="#fff"/>138 </svg>139 </div>140 <div class="app-label">YouTube</div>141 </div>142 </div>143 144 <!-- Bottom app grid -->145 <div class="app-grid bottom">146 <!-- Phone -->147 <div class="app-item">148 <div class="icon-circle">149 <svg width="120" height="120" viewBox="0 0 120 120">150 <circle cx="60" cy="60" r="52" fill="#1E88E5"/>151 <path d="M40 48c8 15 17 24 32 32l10-10c3-3 9-1 12 2l7 7c-1 8-9 13-16 13-32 0-62-30-62-62 0-7 5-15 13-16l7 7c3 3 5 9 2 12l-5 5z" fill="#fff" opacity="0.95"/>152 </svg>153 </div>154 <div class="app-label">Phone</div>155 </div>156 157 <!-- Messages -->158 <div class="app-item">159 <div class="icon-circle">160 <svg width="120" height="120" viewBox="0 0 120 120">161 <circle cx="60" cy="60" r="52" fill="#3F51B5"/>162 <rect x="32" y="38" width="56" height="34" rx="12" fill="#fff"/>163 <rect x="42" y="78" width="36" height="12" rx="6" fill="#fff"/>164 </svg>165 </div>166 <div class="app-label">Messages</div>167 </div>168 169 <!-- Chrome -->170 <div class="app-item">171 <div class="icon-circle">172 <svg width="120" height="120" viewBox="0 0 120 120">173 <circle cx="60" cy="60" r="52" fill="#fff"/>174 <path d="M60 16a44 44 0 0 1 38 22H60z" fill="#E53935"/>175 <path d="M98 38a44 44 0 0 1-14 60L60 60z" fill="#FB8C00"/>176 <path d="M84 98A44 44 0 0 1 22 46h38z" fill="#43A047"/>177 <circle cx="60" cy="60" r="22" fill="#1E88E5" stroke="#0D47A1" stroke-width="6"/>178 </svg>179 </div>180 <div class="app-label">Chrome</div>181 </div>182 183 <!-- Camera -->184 <div class="app-item">185 <div class="icon-circle">186 <svg width="120" height="120" viewBox="0 0 120 120">187 <rect x="24" y="40" width="72" height="44" rx="10" fill="#616161"/>188 <rect x="36" y="26" width="24" height="14" rx="4" fill="#757575"/>189 <circle cx="60" cy="62" r="16" fill="#90CAF9"/>190 <circle cx="60" cy="62" r="8" fill="#1E88E5"/>191 </svg>192 </div>193 <div class="app-label">Camera</div>194 </div>195 </div>196 197 <!-- Search Bar -->198 <div class="search-bar">199 <div class="search-left">200 <!-- Google G simple -->201 <svg width="54" height="54" viewBox="0 0 48 48">202 <circle cx="24" cy="24" r="22" fill="#fff"/>203 <path d="M24 11c7 0 13 6 13 13h-13v-6h19" stroke="#1E88E5" stroke-width="4" fill="none"/>204 <path d="M24 33c-6 0-11-5-11-11s5-11 11-11" stroke="#43A047" stroke-width="4" fill="none"/>205 <path d="M13 24c0 3 1 6 3 8" stroke="#FB8C00" stroke-width="4" fill="none"/>206 <path d="M24 35c3 0 6-1 8-3" stroke="#E53935" stroke-width="4" fill="none"/>207 </svg>208 </div>209 <div class="search-right">210 <!-- Mic icon -->211 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">212 <rect x="7" y="3" width="10" height="12" rx="5" fill="#E53935"/>213 <path d="M5 12a7 7 0 0 0 14 0" stroke="#fff" stroke-width="2"/>214 <path d="M12 19v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>215 </svg>216 <!-- Lens/Camera icon -->217 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">218 <rect x="3" y="6" width="18" height="12" rx="3" fill="#1976D2"/>219 <circle cx="12" cy="12" r="5" fill="#fff"/>220 <circle cx="12" cy="12" r="3" fill="#64B5F6"/>221 </svg>222 </div>223 </div>224 225 <!-- Gesture bar -->226 <div class="gesture"></div>227 228</div>229</body>230</html>