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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    border-radius: 36px;15    /* rocky canyon-like wallpaper using layered gradients */16    background:17      radial-gradient(1200px 900px at 70% 70%, rgba(18,18,26,0.75), rgba(18,18,26,0.2) 45%, rgba(0,0,0,0) 60%),18      radial-gradient(900px 800px at 30% 35%, rgba(70,48,78,0.8), rgba(30,24,38,0.2) 60%, rgba(0,0,0,0) 70%),19      linear-gradient(160deg, #835f50 0%, #51415a 40%, #2a2943 75%, #201c2e 100%);20    color: #fff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 18px;27    left: 28px;28    right: 28px;29    height: 60px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #ffffff;34    opacity: 0.95;35    font-size: 30px;36    letter-spacing: 0.3px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .status-icon svg { display: block; }49 50  /* Date and weather */51  .info {52    position: absolute;53    top: 290px;54    left: 64px;55    right: 64px;56    text-shadow: 0 2px 8px rgba(0,0,0,0.6);57  }58  .date {59    font-size: 72px;60    font-weight: 600;61  }62  .weather {63    margin-top: 20px;64    display: flex;65    align-items: center;66    gap: 18px;67    font-size: 38px;68    opacity: 0.95;69  }70 71  /* App grid */72  .grid {73    position: absolute;74    left: 48px;75    right: 48px;76    top: 1140px;77    display: grid;78    grid-template-columns: repeat(4, 1fr);79    gap: 56px 40px;80  }81  .app {82    display: flex;83    align-items: center;84    flex-direction: column;85  }86  .icon {87    width: 160px;88    height: 160px;89    border-radius: 50%;90    background: #ffffff;91    display: grid;92    place-items: center;93    box-shadow: 0 10px 20px rgba(0,0,0,0.35);94  }95  .icon.blue { background: #3d6ddf; }96  .icon.white { background: #ffffff; }97  .label {98    margin-top: 16px;99    font-size: 34px;100    line-height: 1.1;101    text-align: center;102    max-width: 200px;103    overflow: hidden;104    text-overflow: ellipsis;105    white-space: nowrap;106    opacity: 0.95;107  }108 109  /* Dock */110  .dock {111    position: absolute;112    left: 84px;113    right: 84px;114    bottom: 420px;115    display: flex;116    justify-content: space-between;117  }118  .dock .icon {119    width: 150px;120    height: 150px;121  }122 123  /* Google search bar */124  .search-bar {125    position: absolute;126    left: 72px;127    right: 72px;128    bottom: 250px;129    height: 120px;130    background: rgba(28,28,30,0.65);131    border-radius: 60px;132    display: flex;133    align-items: center;134    padding: 0 34px;135    box-shadow: 0 10px 24px rgba(0,0,0,0.45);136    backdrop-filter: blur(2px);137  }138  .search-left {139    display: flex;140    align-items: center;141    gap: 20px;142    color: rgba(255,255,255,0.92);143    font-size: 40px;144  }145  .pill-icons {146    margin-left: auto;147    display: flex;148    align-items: center;149    gap: 26px;150  }151  .pill-icons .separator {152    width: 2px;153    height: 42px;154    background: rgba(255,255,255,0.15);155    border-radius: 1px;156    margin-right: 8px;157  }158 159  /* Gesture bar */160  .gesture {161    position: absolute;162    left: 50%;163    bottom: 90px;164    transform: translateX(-50%);165    width: 260px;166    height: 11px;167    background: #ffffff;168    opacity: 0.9;169    border-radius: 6px;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status Bar -->177  <div class="status-bar">178    <div class="status-left">179      <div>11:09</div>180      <div class="status-icon">181        <!-- tiny Play icon -->182        <svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">183          <path d="M8 5l11 7-11 7V5z"/>184        </svg>185      </div>186    </div>187    <div class="status-right">188      <!-- Wi-Fi -->189      <div class="status-icon">190        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">191          <path d="M12 20a2 2 0 110-4 2 2 0 010 4zm6.3-6.3l-1.4 1.4A8 8 0 006.9 15l-1.4-1.3A10 10 0 0112 10a10 10 0 016.3 3.7zM12 6a14 14 0 019.2 3.5l-1.4 1.5A12 12 0 0012 8a12 12 0 00-7.8 3L2.8 9.5A14 14 0 0112 6z"/>192        </svg>193      </div>194      <!-- Ring/notification -->195      <div class="status-icon">196        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff">197          <path d="M12 3a6 6 0 00-6 6v3.6L4 15v1h16v-1l-2-2.4V9a6 6 0 00-6-6zm0 18a2.5 2.5 0 002.4-2h-4.8A2.5 2.5 0 0012 21z"/>198        </svg>199      </div>200      <!-- Battery -->201      <div class="status-icon">202        <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">203          <path d="M16 6h1a2 2 0 012 2v8a2 2 0 01-2 2h-1v1h-2v-1H8a2 2 0 01-2-2V8a2 2 0 012-2h8zm-8 2v8h8V8H8z"/>204        </svg>205      </div>206    </div>207  </div>208 209  <!-- Date and Weather -->210  <div class="info">211    <div class="date">Wed, Oct 25</div>212    <div class="weather">213      <svg width="60" height="36" viewBox="0 0 60 36" fill="none">214        <path d="M2 10c8-6 16-6 24 0M2 20c8-6 16-6 24 0M2 30c8-6 16-6 24 0" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.9"/>215      </svg>216      <span>27°C</span>217    </div>218  </div>219 220  <!-- App Grid -->221  <div class="grid">222    <!-- Row 1: Skyscanner, Japan Airlines, empty, empty -->223    <div class="app">224      <div class="icon blue">225        <!-- Skyscanner-like rising sun -->226        <svg width="96" height="96" viewBox="0 0 24 24" fill="none">227          <path d="M4 14a8 8 0 0116 0" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>228          <path d="M6 16h12" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>229          <path d="M8 19h8" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>230        </svg>231      </div>232      <div class="label">Skyscanner</div>233    </div>234 235    <div class="app">236      <div class="icon white">237        <!-- JAL simple bird in circle -->238        <svg width="96" height="96" viewBox="0 0 24 24">239          <circle cx="12" cy="12" r="10" fill="#e53935"/>240          <path d="M6 13c4-5 8-5 12 0-3-1-5 0-6 2-1-1-3-2-6-2z" fill="#fff"/>241        </svg>242      </div>243      <div class="label">Japan Airlin...</div>244    </div>245 246    <div class="app"></div>247    <div class="app"></div>248 249    <!-- Row 2 -->250    <div class="app">251      <div class="icon white">252        <!-- Play Store -->253        <svg width="96" height="96" viewBox="0 0 24 24">254          <path d="M3 4l11 8-11 8V4z" fill="#43a047"/>255          <path d="M14 12l4.5-3.2a2 2 0 011.5 1.9v2.6a2 2 0 01-1.5 1.9L14 12z" fill="#fb8c00"/>256          <path d="M3 4l7.5 5.5 2.5-1.8L6 3.2A2 2 0 003 4z" fill="#1e88e5"/>257          <path d="M3 20a2 2 0 003 0l6-4.5-2.5-1.8L3 20z" fill="#e53935"/>258        </svg>259      </div>260      <div class="label">Play Store</div>261    </div>262 263    <div class="app">264      <div class="icon white">265        <!-- Gmail -->266        <svg width="96" height="96" viewBox="0 0 24 24">267          <rect x="3" y="6" width="18" height="12" rx="2" fill="#fff"/>268          <path d="M3 8l9 6 9-6" stroke="#e53935" stroke-width="3" stroke-linejoin="round"/>269          <path d="M6 18V9l6 4 6-4v9" stroke="#34a853" stroke-width="3"/>270          <path d="M6 8l6 4 6-4" stroke="#fbbc05" stroke-width="3"/>271        </svg>272      </div>273      <div class="label">Gmail</div>274    </div>275 276    <div class="app">277      <div class="icon white">278        <!-- Google Photos flower -->279        <svg width="96" height="96" viewBox="0 0 24 24">280          <path d="M12 3a4 4 0 014 4h-4V3z" fill="#fbbc05"/>281          <path d="M21 12a4 4 0 01-4 4v-4h4z" fill="#34a853"/>282          <path d="M12 21a4 4 0 01-4-4h4v4z" fill="#4285f4"/>283          <path d="M3 12a4 4 0 014-4v4H3z" fill="#ea4335"/>284        </svg>285      </div>286      <div class="label">Photos</div>287    </div>288 289    <div class="app">290      <div class="icon white">291        <!-- YouTube -->292        <svg width="96" height="96" viewBox="0 0 24 24">293          <rect x="3" y="7" width="18" height="10" rx="3" fill="#ff3d00"/>294          <path d="M10 9l6 3-6 3V9z" fill="#fff"/>295        </svg>296      </div>297      <div class="label">YouTube</div>298    </div>299  </div>300 301  <!-- Dock -->302  <div class="dock">303    <div class="icon white">304      <!-- Phone -->305      <svg width="92" height="92" viewBox="0 0 24 24" fill="#3d6ddf">306        <path d="M6.6 3h2.3c.5 0 .9.3 1 .8l.7 3a1 1 0 01-.3 1l-1.3 1.3a13 13 0 006.6 6.6l1.3-1.3a1 1 0 011-.3l3 .7c.5.1.8.5.8 1v2.3c0 .6-.5 1.1-1.1 1.1A17 17 0 013.7 7.1C3.7 6.5 4.2 6 4.8 6h0z"/>307      </svg>308    </div>309    <div class="icon white">310      <!-- Messages bubble -->311      <svg width="92" height="92" viewBox="0 0 24 24" fill="#3f6ae0">312        <path d="M4 4h16a2 2 0 012 2v8a2 2 0 01-2 2H9l-5 4V6a2 2 0 012-2z" fill="#4c7cf0"/>313        <circle cx="10" cy="10" r="1.5" fill="#fff"/>314        <circle cx="14" cy="10" r="1.5" fill="#fff"/>315        <circle cx="18" cy="10" r="1.5" fill="#fff"/>316      </svg>317    </div>318    <div class="icon white">319      <!-- Chrome -->320      <svg width="92" height="92" viewBox="0 0 24 24">321        <circle cx="12" cy="12" r="10" fill="#fbbc05"/>322        <path d="M12 12L6 3h12" fill="#ea4335"/>323        <path d="M12 12l6 9H6" fill="#34a853"/>324        <circle cx="12" cy="12" r="4" fill="#4285f4" stroke="#fff" stroke-width="1.5"/>325      </svg>326    </div>327    <div class="icon white">328      <!-- Camera -->329      <svg width="92" height="92" viewBox="0 0 24 24">330        <rect x="3" y="6.5" width="18" height="12" rx="2.5" fill="#5c6bc0"/>331        <rect x="8" y="4" width="4" height="3" rx="1" fill="#5c6bc0"/>332        <circle cx="12" cy="12.5" r="4" fill="#fff"/>333        <circle cx="12" cy="12.5" r="2.2" fill="#32408f"/>334      </svg>335    </div>336  </div>337 338  <!-- Google Search Bar -->339  <div class="search-bar">340    <div class="search-left">341      <!-- Google G -->342      <svg width="48" height="48" viewBox="0 0 24 24">343        <path fill="#4285F4" d="M12 10h10a10 10 0 11-3-7l-2.2 2.2A6 6 0 1018 12h-6v-2z"/>344        <path fill="#34A853" d="M12 22a10 10 0 008-4.1l-2.7-2.1A6 6 0 0112 18v4z"/>345        <path fill="#FBBC05" d="M4 13a8 8 0 010-2H0v2h4z"/>346        <path fill="#EA4335" d="M19 5l-2.2 2.2A6 6 0 0012 6V2a10 10 0 017 3z"/>347      </svg>348      <span style="opacity:.9">Search</span>349    </div>350    <div class="pill-icons">351      <div class="separator"></div>352      <!-- Mic -->353      <svg width="44" height="44" viewBox="0 0 24 24">354        <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3z" fill="#4285f4"/>355        <path d="M5 11a7 7 0 0014 0h-2a5 5 0 01-10 0H5z" fill="#34a853"/>356        <rect x="11" y="18" width="2" height="3" rx="1" fill="#fbbc05"/>357      </svg>358      <!-- Lens/Camera -->359      <svg width="44" height="44" viewBox="0 0 24 24">360        <rect x="4" y="6" width="16" height="12" rx="3" fill="#202124"/>361        <circle cx="12" cy="12" r="4.2" fill="#34a853"/>362        <circle cx="12" cy="12" r="2.2" fill="#4285f4"/>363        <rect x="8" y="4" width="4" height="2" rx="1" fill="#ea4335"/>364      </svg>365    </div>366  </div>367 368  <!-- Bottom gesture bar -->369  <div class="gesture"></div>370 371</div>372</body>373</html>