GD-ML/AndroidCode

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 - Floral Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #f1d0a9 0%, #f0cda6 40%, #86a97b 70%, #2f4e32 100%);15    border-radius: 0;16  }17 18  /* Soft wallpaper blobs to mimic floral art */19  .blob { position: absolute; border-radius: 50%; filter: saturate(110%); mix-blend-mode: multiply; opacity: 0.9; }20  .blob.blue { background:#6ab0ff; }21  .blob.orange { background:#ff8a4d; }22  .blob.pink { background:#e5a4e0; }23  .blob.green { background:#76b083; }24  .blob.yellow { background:#ffd765; }25  .blob.deep { background:#2b6f3e; opacity:.7; }26  .grain {27    position:absolute; inset:0;28    background-image: radial-gradient(#c1b28e 1px, transparent 1px);29    background-size: 12px 12px;30    opacity: .14; pointer-events:none;31  }32 33  /* Status bar */34  .status-bar { position: absolute; top: 18px; left: 24px; right: 24px; height: 64px; color: #fff; }35  .status-left { position:absolute; left:0; top:0; height:100%; display:flex; align-items:center; gap:16px; }36  .status-time { font-size: 40px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.35); }37  .status-right { position:absolute; right:0; top:0; height:100%; display:flex; align-items:center; gap:22px; }38  .sb-icon svg { display:block; }39  .battery { display:flex; align-items:center; gap:10px; font-weight:600; }40 41  /* Date and weather */42  .date-weather { position: absolute; top: 270px; left: 60px; color: #ffffff; text-shadow: 0 3px 10px rgba(0,0,0,.35); }43  .date-main { font-size: 80px; font-weight: 600; line-height: 1.1; }44  .weather { display:flex; align-items:center; gap: 18px; margin-top: 14px; font-size: 40px; opacity:.95; }45 46  /* Page dots */47  .page-dots { position:absolute; left: 26px; top: 820px; display:flex; flex-direction:column; gap:18px; }48  .page-dots span { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 2px 5px rgba(0,0,0,.3); }49  .page-dots span.active { background: rgba(255,255,255,.95); }50 51  /* App grid */52  .app-row { position:absolute; left: 0; width: 100%; display:flex; justify-content: space-around; }53  .row1 { top: 1510px; }54  .row2 { top: 1755px; }55  .app { width: 170px; text-align: center; color:#fff; }56  .app .icon {57    width: 160px; height: 160px; border-radius: 50%; background:#ffffff;58    box-shadow: 0 10px 22px rgba(0,0,0,.35);59    display:flex; align-items:center; justify-content:center; margin: 0 auto 16px;60  }61  .app .label { font-size: 38px; text-shadow: 0 3px 8px rgba(0,0,0,.45); }62 63  /* Search pill */64  .search { position:absolute; left: 60px; right: 60px; bottom: 240px;65    height: 120px; border-radius: 60px; background: rgba(16,16,16,.65);66    display:flex; align-items:center; padding: 0 28px; color:#fff;67    box-shadow: 0 14px 26px rgba(0,0,0,.45);68  }69  .search .g { width: 64px; height: 64px; border-radius: 16px; background:#1f1f1f; display:flex; align-items:center; justify-content:center; margin-right: 18px; }70  .search .placeholder { flex:1; opacity:.75; font-size:38px; }71  .search .tools { display:flex; align-items:center; gap: 22px; }72 73  /* Gesture bar */74  .gesture { position:absolute; bottom: 56px; left:50%; transform:translateX(-50%);75    width: 340px; height: 10px; border-radius:10px; background: rgba(255,255,255,.9); box-shadow: 0 1px 6px rgba(0,0,0,.4);76  }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Decorative wallpaper blobs -->83  <div class="blob blue" style="width:360px;height:360px; top:180px; left: 510px;"></div>84  <div class="blob orange" style="width:300px;height:300px; top:320px; left: 770px;"></div>85  <div class="blob pink" style="width:380px;height:380px; top:520px; left: 140px;"></div>86  <div class="blob green" style="width:300px;height:300px; top:760px; left: 420px;"></div>87  <div class="blob yellow" style="width:240px;height:240px; top:620px; left: 760px;"></div>88  <div class="blob deep" style="width:700px;height:700px; bottom: -120px; left: -120px;"></div>89  <div class="blob blue" style="width:300px;height:300px; bottom: 260px; right: 220px;"></div>90  <div class="blob orange" style="width:320px;height:320px; bottom: 480px; left: 80px;"></div>91  <div class="grain"></div>92 93  <!-- Status bar -->94  <div class="status-bar">95    <div class="status-left">96      <div class="status-time">12:15</div>97    </div>98    <div class="status-right">99      <div class="sb-icon" title="Wi‑Fi">100        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">101          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>102          <path d="M5 11c3.5-3 10.5-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>103          <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>104          <circle cx="12" cy="18" r="1.6" fill="#fff"/>105        </svg>106      </div>107      <div class="battery">108        <svg width="52" height="44" viewBox="0 0 28 16" fill="none">109          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>110          <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>111          <rect x="3" y="5" width="18" height="6" rx="1.5" fill="#fff"/>112        </svg>113        <span style="font-size:28px;">100%</span>114      </div>115    </div>116  </div>117 118  <!-- Date and weather -->119  <div class="date-weather">120    <div class="date-main">Mon, Jul 17</div>121    <div class="weather">122      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">123        <circle cx="9" cy="12" r="4" fill="#ffffff" opacity="0.9"/>124        <circle cx="14.5" cy="12" r="5" fill="#ffffff" opacity="0.9"/>125      </svg>126      <div>31°C</div>127    </div>128  </div>129 130  <!-- Page dots -->131  <div class="page-dots">132    <span class="active"></span>133    <span></span>134    <span></span>135    <span></span>136  </div>137 138  <!-- First row of apps -->139  <div class="app-row row1">140    <!-- Play Store -->141    <div class="app">142      <div class="icon">143        <svg width="110" height="110" viewBox="0 0 64 64">144          <polygon points="12,10 44,32 12,54" fill="#38a9ff"/>145          <polygon points="12,10 30,22 22,30" fill="#33d18e"/>146          <polygon points="12,54 22,34 30,42" fill="#ffb74d"/>147          <polygon points="30,22 44,32 30,42" fill="#ef5350"/>148        </svg>149      </div>150      <div class="label">Play Store</div>151    </div>152 153    <!-- Gmail -->154    <div class="app">155      <div class="icon">156        <svg width="110" height="110" viewBox="0 0 64 64">157          <rect x="10" y="16" width="44" height="32" rx="6" fill="#ffffff" stroke="#e0e0e0"/>158          <path d="M12 20 L32 34 L52 20" stroke="#ea4335" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159          <path d="M18 48 V26" stroke="#34a853" stroke-width="6" />160          <path d="M46 48 V26" stroke="#4285f4" stroke-width="6" />161        </svg>162      </div>163      <div class="label">Gmail</div>164    </div>165 166    <!-- Photos -->167    <div class="app">168      <div class="icon">169        <svg width="110" height="110" viewBox="0 0 64 64">170          <circle cx="24" cy="24" r="12" fill="#fbbc04"/>171          <circle cx="40" cy="24" r="12" fill="#34a853"/>172          <circle cx="24" cy="40" r="12" fill="#4285f4"/>173          <circle cx="40" cy="40" r="12" fill="#ea4335"/>174          <circle cx="32" cy="32" r="6" fill="#fff"/>175        </svg>176      </div>177      <div class="label">Photos</div>178    </div>179 180    <!-- YouTube -->181    <div class="app">182      <div class="icon">183        <svg width="110" height="110" viewBox="0 0 64 64">184          <rect x="12" y="18" width="40" height="28" rx="8" fill="#ff0000"/>185          <polygon points="28,24 28,40 44,32" fill="#ffffff"/>186        </svg>187      </div>188      <div class="label">YouTube</div>189    </div>190  </div>191 192  <!-- Second row of apps -->193  <div class="app-row row2">194    <!-- Phone -->195    <div class="app">196      <div class="icon">197        <svg width="110" height="110" viewBox="0 0 64 64">198          <path d="M18 20c8 12 14 18 26 26l6-6c2-2 4 0 5 2 1 2 2 6-1 8-3 3-7 4-12 2-10-4-20-14-24-24-2-5-1-9 2-12 2-3 6-2 8-1 2 1 4 3 2 5l-6 6z" fill="#2a73ff"/>199        </svg>200      </div>201      <div class="label">Phone</div>202    </div>203 204    <!-- Messages -->205    <div class="app">206      <div class="icon">207        <svg width="110" height="110" viewBox="0 0 64 64">208          <rect x="10" y="14" width="44" height="30" rx="8" fill="#3578ff"/>209          <polygon points="24,44 30,38 44,38 44,44" fill="#3578ff"/>210          <rect x="18" y="22" width="28" height="4" rx="2" fill="#ffffff"/>211          <rect x="18" y="30" width="20" height="4" rx="2" fill="#e8f0ff"/>212        </svg>213      </div>214      <div class="label">Messages</div>215    </div>216 217    <!-- Chrome -->218    <div class="app">219      <div class="icon">220        <svg width="110" height="110" viewBox="0 0 64 64">221          <circle cx="32" cy="32" r="26" fill="#f4b400"/>222          <path d="M32 6a26 26 0 0 1 22 12H32z" fill="#ea4335"/>223          <path d="M54 18a26 26 0 0 1-6 34L32 32z" fill="#34a853"/>224          <path d="M48 52a26 26 0 0 1-34-6L32 32z" fill="#4285f4"/>225          <circle cx="32" cy="32" r="10" fill="#ffffff"/>226          <circle cx="32" cy="32" r="7" fill="#4285f4"/>227        </svg>228      </div>229      <div class="label">Chrome</div>230    </div>231 232    <!-- Camera -->233    <div class="app">234      <div class="icon">235        <svg width="110" height="110" viewBox="0 0 64 64">236          <rect x="10" y="20" width="44" height="28" rx="6" fill="#424242"/>237          <rect x="14" y="16" width="14" height="8" rx="3" fill="#616161"/>238          <circle cx="32" cy="34" r="10" fill="#1e88e5"/>239          <circle cx="32" cy="34" r="5" fill="#90caf9"/>240          <circle cx="48" cy="24" r="3" fill="#9e9e9e"/>241        </svg>242      </div>243      <div class="label">Camera</div>244    </div>245  </div>246 247  <!-- Google search pill -->248  <div class="search">249    <div class="g">250      <svg width="36" height="36" viewBox="0 0 24 24">251        <path d="M21 12h-9v3h5.2A6.5 6.5 0 1 1 12 5.5c1.6 0 3 .6 4.1 1.5l2.1-2.1A9 9 0 1 0 21 12z" fill="#4285F4"/>252        <path d="M3.9 8.8l2.6 1.9A3.8 3.8 0 0 1 12 8.2c1 0 1.9.3 2.6.9l2-2A6.5 6.5 0 0 0 5.3 7c-.6.5-1.1 1.1-1.4 1.8z" fill="#34A853"/>253        <path d="M12 21a9 9 0 0 0 6.1-2.4l-2.4-1.9A6.1 6.1 0 0 1 12 18.5c-2 0-3.9-1-4.9-2.6l-2.6 2A9 9 0 0 0 12 21z" fill="#FBBC05"/>254        <path d="M21 12c0-.5-.1-1-.2-1.5H12v3h5.2c-.2 1-.9 2-2 2.6l2.4 1.9C19.6 16.9 21 14.7 21 12z" fill="#EA4335"/>255      </svg>256    </div>257    <div class="placeholder">Search</div>258    <div class="tools">259      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">260        <rect x="8" y="3" width="8" height="14" rx="4" stroke="#fff" stroke-width="2"/>261        <path d="M12 19v2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>262      </svg>263      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">264        <rect x="3" y="6" width="18" height="12" rx="3" stroke="#fff" stroke-width="2"/>265        <circle cx="12" cy="12" r="3" fill="#fff"/>266      </svg>267    </div>268  </div>269 270  <!-- Gesture bar -->271  <div class="gesture"></div>272</div>273</body>274</html>