GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Home UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #0e0f12;11 }12 13 /* Wallpaper placeholder covering the whole screen */14 .wallpaper {15 position: absolute; inset: 0;16 background: #E0E0E0;17 border: 1px solid #BDBDBD;18 display: flex; align-items: center; justify-content: center;19 color: #757575; font-size: 28px; letter-spacing: 0.5px;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute; top: 20px; left: 36px; right: 36px; height: 60px;25 display: flex; align-items: center; justify-content: space-between; color: #fff;26 }27 .status-left { display: flex; align-items: center; gap: 16px; }28 .status-time { font-size: 32px; font-weight: 600; }29 .mini-shape { width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: 0.9; }30 .mini-rect { width: 26px; height: 20px; border-radius: 4px; background: #fff; opacity: 0.9; }31 .status-right { display: flex; align-items: center; gap: 18px; }32 .icon { display: inline-block; }33 .icon svg { display: block; }34 35 /* Date + Weather */36 .date-weather {37 position: absolute; left: 60px; top: 220px; color: #fff;38 }39 .date-weather .date {40 font-size: 58px; font-weight: 500; margin-bottom: 16px;41 text-shadow: 0 2px 3px rgba(0,0,0,0.35);42 }43 .weather-row { display: flex; align-items: center; gap: 18px; }44 .weather-text { font-size: 34px; opacity: 0.92; }45 46 /* App grid rows */47 .app-row {48 position: absolute; left: 60px; width: 960px;49 display: flex; justify-content: space-between; align-items: flex-start;50 }51 .app-row.first { top: 1520px; }52 .app-row.second { top: 1765px; }53 54 .app {55 width: 210px; text-align: center; color: #fff;56 }57 .app-icon {58 width: 160px; height: 160px; margin: 0 auto 18px;59 border-radius: 50%; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.35);60 display: flex; align-items: center; justify-content: center;61 }62 .app-label { font-size: 32px; letter-spacing: 0.2px; }63 64 /* Search bar */65 .search-bar {66 position: absolute; left: 60px; right: 60px; bottom: 180px; height: 120px;67 background: #fff; border-radius: 60px; box-shadow: 0 14px 28px rgba(0,0,0,0.35);68 display: flex; align-items: center; justify-content: space-between; padding: 0 32px;69 }70 .g-left { display: flex; align-items: center; gap: 22px; }71 .g-logo {72 font-weight: 700; font-size: 48px; line-height: 1; color: transparent;73 background: linear-gradient(90deg, #4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);74 -webkit-background-clip: text; background-clip: text;75 }76 .search-placeholder {77 font-size: 32px; color: #6b6b6b;78 }79 .g-actions { display: flex; align-items: center; gap: 26px; }80 .circle-action {81 width: 64px; height: 64px; border-radius: 50%; background: #f3f6ff;82 display: flex; align-items: center; justify-content: center; border: 1px solid #dfe4ff;83 }84 85 /* Gesture bar */86 .gesture-bar {87 position: absolute; bottom: 70px; left: 420px; width: 240px; height: 12px;88 background: rgba(255,255,255,0.85); border-radius: 8px;89 }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Wallpaper placeholder -->96 <div class="wallpaper">[IMG: Rocky cliff wallpaper]</div>97 98 <!-- Status bar -->99 <div class="status-bar">100 <div class="status-left">101 <div class="status-time">1:03</div>102 <div class="mini-shape"></div>103 <div class="mini-rect"></div>104 <div style="width:36px; height:18px; border-radius:6px; background:#fff;"></div>105 </div>106 <div class="status-right">107 <!-- Wi-Fi icon -->108 <span class="icon" style="width:34px; height:28px;">109 <svg width="34" height="28" viewBox="0 0 34 28" fill="none" xmlns="http://www.w3.org/2000/svg">110 <path d="M2 9c7-6 23-6 30 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>111 <path d="M7 14c5-4 15-4 20 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>112 <path d="M13.5 19.5c3-2 4-2 7 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>113 <circle cx="17" cy="24" r="2.5" fill="#fff"/>114 </svg>115 </span>116 <!-- Battery with bolt icon -->117 <span class="icon" style="width:36px; height:28px;">118 <svg width="36" height="28" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg">119 <rect x="2" y="6" width="28" height="16" rx="3" stroke="#fff" stroke-width="3" fill="none"/>120 <rect x="31" y="10" width="3" height="8" rx="1.5" fill="#fff"/>121 <path d="M17 10l-4 6h4l-1 6 6-8h-4l3-4h-4z" fill="#fff"/>122 </svg>123 </span>124 </div>125 </div>126 127 <!-- Date + Weather -->128 <div class="date-weather">129 <div class="date">Thu, Aug 10</div>130 <div class="weather-row">131 <span class="icon" style="width:48px; height:32px;">132 <svg width="48" height="32" viewBox="0 0 48 32" xmlns="http://www.w3.org/2000/svg">133 <path d="M4 10c6 6 12 6 18 0M10 18c6 6 12 6 18 0M16 26c6 6 12 6 18 0" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.9"/>134 </svg>135 </span>136 <div class="weather-text">32°C</div>137 </div>138 </div>139 140 <!-- App grid row 1 -->141 <div class="app-row first">142 <!-- Play Store -->143 <div class="app">144 <div class="app-icon">145 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">146 <polygon points="28,20 96,60 28,100" fill="#34A853"/>147 <polygon points="32,24 80,60 32,96" fill="#4285F4" opacity="0.9"/>148 <polygon points="28,20 46,34 28,48" fill="#FBBC05"/>149 <polygon points="28,72 46,86 28,100" fill="#EA4335"/>150 </svg>151 </div>152 <div class="app-label">Play Store</div>153 </div>154 155 <!-- Gmail -->156 <div class="app">157 <div class="app-icon">158 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">159 <rect x="22" y="32" width="76" height="56" rx="8" fill="#fff" stroke="#DDDDDD"/>160 <path d="M22 42l38 28 38-28" stroke="#EA4335" stroke-width="10" fill="none"/>161 <path d="M30 32l30 24 30-24" stroke="#4285F4" stroke-width="8" opacity="0.6"/>162 </svg>163 </div>164 <div class="app-label">Gmail</div>165 </div>166 167 <!-- Photos -->168 <div class="app">169 <div class="app-icon">170 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">171 <circle cx="60" cy="60" r="16" fill="#fff"/>172 <path d="M60 24a24 24 0 0 1 0 48" fill="#FBBC05"/>173 <path d="M96 60a24 24 0 0 1-48 0" fill="#34A853"/>174 <path d="M60 96a24 24 0 0 1 0-48" fill="#EA4335"/>175 <path d="M24 60a24 24 0 0 1 48 0" fill="#4285F4"/>176 </svg>177 </div>178 <div class="app-label">Photos</div>179 </div>180 181 <!-- YouTube -->182 <div class="app">183 <div class="app-icon">184 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">185 <rect x="24" y="40" width="72" height="40" rx="14" fill="#FF0000"/>186 <polygon points="54,50 54,70 74,60" fill="#fff"/>187 </svg>188 </div>189 <div class="app-label">YouTube</div>190 </div>191 </div>192 193 <!-- App grid row 2 -->194 <div class="app-row second">195 <!-- Phone -->196 <div class="app">197 <div class="app-icon">198 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">199 <path d="M40 36c8-6 14 6 18 12s20 14 14 22c-6 8-12 8-18 4-6-4-22-20-24-28-2-8 2-12 10-10z"200 fill="#1976D2"/>201 </svg>202 </div>203 <div class="app-label">Phone</div>204 </div>205 206 <!-- Messages -->207 <div class="app">208 <div class="app-icon">209 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">210 <rect x="26" y="34" width="68" height="44" rx="12" fill="#4285F4"/>211 <rect x="34" y="66" width="52" height="22" rx="8" fill="#5C93FF"/>212 </svg>213 </div>214 <div class="app-label">Messages</div>215 </div>216 217 <!-- Chrome -->218 <div class="app">219 <div class="app-icon">220 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">221 <circle cx="60" cy="60" r="44" fill="#EA4335"/>222 <path d="M60 60L28 60A44 44 0 0 1 60 16z" fill="#FBBC05"/>223 <path d="M60 60l24 41A44 44 0 0 1 28 60z" fill="#34A853"/>224 <circle cx="60" cy="60" r="22" fill="#4285F4" stroke="#fff" stroke-width="6"/>225 </svg>226 </div>227 <div class="app-label">Chrome</div>228 </div>229 230 <!-- Camera -->231 <div class="app">232 <div class="app-icon">233 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">234 <rect x="24" y="40" width="72" height="44" rx="10" fill="#9AA0A6"/>235 <rect x="36" y="30" width="18" height="12" rx="4" fill="#B0B6BB"/>236 <circle cx="60" cy="62" r="16" fill="#1A73E8"/>237 <circle cx="60" cy="62" r="8" fill="#8AB4F8"/>238 </svg>239 </div>240 <div class="app-label">Camera</div>241 </div>242 </div>243 244 <!-- Search bar -->245 <div class="search-bar">246 <div class="g-left">247 <div class="g-logo">G</div>248 <div class="search-placeholder">Search</div>249 </div>250 <div class="g-actions">251 <!-- Mic -->252 <div class="circle-action">253 <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">254 <rect x="11" y="6" width="6" height="10" rx="3" fill="#EA4335"/>255 <path d="M8 13c0 5 4 7 6 7s6-2 6-7" stroke="#34A853" stroke-width="2"/>256 <path d="M14 20v4" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/>257 <path d="M10 24h8" stroke="#FBBC05" stroke-width="2" stroke-linecap="round"/>258 </svg>259 </div>260 <!-- Google Lens style -->261 <div class="circle-action">262 <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">263 <rect x="6" y="6" width="16" height="16" rx="4" fill="#fff" stroke="#4285F4" stroke-width="2"/>264 <circle cx="14" cy="14" r="5" fill="#34A853"/>265 <rect x="4" y="10" width="4" height="8" rx="2" fill="#FBBC05"/>266 <rect x="20" y="10" width="4" height="8" rx="2" fill="#EA4335"/>267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Gesture bar -->273 <div class="gesture-bar"></div>274 275</div>276</body>277</html>