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; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0b0f14;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;14    color: #fff;15  }16  /* Wallpaper placeholder */17  .wallpaper {18    position: absolute; inset: 0;19    background: #E0E0E0;20    border: 1px solid #BDBDBD;21    display: flex; align-items: center; justify-content: center;22    color: #757575; font-size: 40px; letter-spacing: 0.5px;23  }24 25  /* Status bar */26  .status-bar {27    position: absolute; top: 18px; left: 0; right: 0; height: 92px;28    padding: 0 34px;29    display: flex; align-items: center; justify-content: space-between;30    color: #fff; font-weight: 600; font-size: 48px;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }33  .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.8; }34 35  /* Date & weather widget */36  .widget {37    position: absolute; left: 56px; top: 300px;38  }39  .widget .date {40    font-size: 90px; font-weight: 600; line-height: 1.1; letter-spacing: -0.5px;41    text-shadow: 0 2px 6px rgba(0,0,0,0.35);42  }43  .widget .weather {44    margin-top: 22px; display: flex; align-items: center; gap: 22px;45    font-size: 48px; opacity: 0.95;46  }47 48  /* App rows */49  .app-row {50    position: absolute; left: 56px; right: 56px;51    display: flex; justify-content: space-between; align-items: flex-start;52  }53  .app-row.top { bottom: 760px; }54  .app-row.dock { bottom: 510px; }55 56  .app {57    width: 210px; text-align: center; color: #eaeaea;58  }59  .icon-circle {60    width: 170px; height: 170px; margin: 0 auto;61    background: #fff; border-radius: 50%;62    display: flex; align-items: center; justify-content: center;63    box-shadow: 0 10px 30px rgba(0,0,0,0.25);64    position: relative;65  }66  .app-label {67    margin-top: 24px; font-size: 44px; font-weight: 500; color: #e9e9e9;68    text-shadow: 0 2px 6px rgba(0,0,0,0.35);69  }70  /* Google search bar */71  .search-bar {72    position: absolute; left: 56px; right: 56px; bottom: 300px;73    height: 120px; background: #ffffff; border-radius: 60px;74    box-shadow: 0 20px 40px rgba(0,0,0,0.35);75    display: flex; align-items: center; justify-content: space-between;76    padding: 0 36px;77  }78  .search-left { display: flex; align-items: center; gap: 26px; }79  .search-placeholder {80    color: #6b6b6b; font-size: 46px;81  }82  .search-right { display: flex; align-items: center; gap: 26px; }83 84  /* Home bar */85  .home-pill {86    position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);87    width: 240px; height: 14px; background: rgba(255,255,255,0.7); border-radius: 10px;88  }89 90  /* Helper colors for mini-logos */91  .g-red { fill: #EA4335; } .g-blue { fill: #4285F4; } .g-green { fill: #34A853; } .g-yellow { fill: #FBBC05; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Wallpaper placeholder -->98  <div class="wallpaper">[IMG: Rocky Cliff Wallpaper]</div>99 100  <!-- Status Bar -->101  <div class="status-bar">102    <div class="status-left">103      <div style="font-weight:700;">1:06</div>104      <div class="dot"></div>105    </div>106    <div class="status-right">107      <!-- Wi-Fi -->108      <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff" opacity="0.9">109        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 9l2 2a12 12 0 0 1 16 0l2-2A15 15 0 0 0 2 9zm4 4 2 2a8 8 0 0 1 8 0l2-2a11 11 0 0 0-12 0z"/>110      </svg>111      <!-- Battery -->112      <svg width="58" height="58" viewBox="0 0 24 24" fill="#fff">113        <path d="M17 6h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1v1h-2v-1H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zM7 8v8h10V8H7z"/>114      </svg>115    </div>116  </div>117 118  <!-- Date and Weather -->119  <div class="widget">120    <div class="date">Thu, Jul 27</div>121    <div class="weather">122      <!-- Wavy icon -->123      <svg width="70" height="52" viewBox="0 0 48 24" fill="none" stroke="#ffffff" stroke-width="3" opacity="0.9">124        <path d="M1 12c6 6 12-6 18 0s12-6 18 0 12-6 18 0" />125      </svg>126      <div>32°C</div>127    </div>128  </div>129 130  <!-- Top App Row -->131  <div class="app-row top">132    <!-- Play Store -->133    <div class="app">134      <div class="icon-circle">135        <svg width="120" height="120" viewBox="0 0 48 48">136          <path class="g-green" d="M5 8l16 16L5 40z"/>137          <path class="g-yellow" d="M21 24l8-8 8-5-16 13z" />138          <path class="g-blue" d="M21 24l8 8 8 5-16-13z" />139          <path class="g-red" d="M21 24l-16 16 24-8z" opacity="0.9"/>140        </svg>141      </div>142      <div class="app-label">Play Store</div>143    </div>144 145    <!-- Gmail -->146    <div class="app">147      <div class="icon-circle">148        <svg width="120" height="120" viewBox="0 0 48 48">149          <rect x="8" y="14" width="32" height="22" rx="3" fill="#ffffff"/>150          <path d="M8 16 24 28 40 16" fill="none" stroke="#EA4335" stroke-width="6" stroke-linejoin="round"/>151          <path d="M12 16v18" stroke="#34A853" stroke-width="6"/>152          <path d="M36 16v18" stroke="#4285F4" stroke-width="6"/>153          <path d="M16 16l8 6 8-6" stroke="#FBBC05" stroke-width="6" fill="none"/>154        </svg>155      </div>156      <div class="app-label">Gmail</div>157    </div>158 159    <!-- Photos -->160    <div class="app">161      <div class="icon-circle">162        <svg width="120" height="120" viewBox="0 0 48 48">163          <circle cx="24" cy="12" r="10" class="g-yellow"/>164          <circle cx="36" cy="24" r="10" class="g-green"/>165          <circle cx="24" cy="36" r="10" class="g-blue"/>166          <circle cx="12" cy="24" r="10" class="g-red"/>167          <circle cx="24" cy="24" r="7" fill="#fff"/>168        </svg>169      </div>170      <div class="app-label">Photos</div>171    </div>172 173    <!-- YouTube -->174    <div class="app">175      <div class="icon-circle">176        <svg width="120" height="120" viewBox="0 0 48 48">177          <rect x="8" y="14" width="32" height="20" rx="6" fill="#FF0000"/>178          <path d="M22 18v12l10-6-10-6z" fill="#fff"/>179        </svg>180        <!-- notification dot -->181        <div style="position:absolute; top:8px; right:14px; width:26px; height:26px; background:#f7a1c0; border-radius:50%;"></div>182      </div>183      <div class="app-label">YouTube</div>184    </div>185  </div>186 187  <!-- Dock Row -->188  <div class="app-row dock">189    <!-- Phone -->190    <div class="app">191      <div class="icon-circle">192        <svg width="110" height="110" viewBox="0 0 48 48">193          <path d="M32 30c-4 2-14-8-12-12l3-3-6-6-5 5c-2 2 0 8 6 14s12 8 14 6l5-5-6-6-3 3z" fill="#4285F4"/>194        </svg>195      </div>196    </div>197 198    <!-- Messages -->199    <div class="app">200      <div class="icon-circle">201        <svg width="110" height="110" viewBox="0 0 48 48">202          <rect x="8" y="10" width="32" height="24" rx="6" fill="#5DA2FF"/>203          <path d="M16 28h10l6 6v-6h4" fill="#3378FF"/>204          <rect x="14" y="16" width="20" height="3" fill="#fff" opacity="0.95"/>205          <rect x="14" y="21" width="14" height="3" fill="#fff" opacity="0.9"/>206        </svg>207      </div>208    </div>209 210    <!-- Chrome -->211    <div class="app">212      <div class="icon-circle">213        <svg width="110" height="110" viewBox="0 0 48 48">214          <circle cx="24" cy="24" r="10" fill="#4285F4"/>215          <circle cx="24" cy="24" r="6" fill="#fff"/>216          <path d="M24 8a16 16 0 0 1 13.8 8H24" fill="#EA4335"/>217          <path d="M10.2 16A16 16 0 0 1 24 8l-8 14" fill="#FBBC05"/>218          <path d="M37.8 16A16 16 0 1 1 11 32l7-12" fill="#34A853"/>219        </svg>220      </div>221    </div>222 223    <!-- Camera -->224    <div class="app">225      <div class="icon-circle">226        <svg width="110" height="110" viewBox="0 0 48 48">227          <rect x="8" y="14" width="32" height="22" rx="4" fill="#777"/>228          <rect x="14" y="10" width="8" height="6" rx="2" fill="#666"/>229          <circle cx="24" cy="25" r="8" fill="#2b6fff"/>230          <circle cx="24" cy="25" r="4" fill="#9ec1ff"/>231        </svg>232      </div>233    </div>234  </div>235 236  <!-- Google Search Bar -->237  <div class="search-bar">238    <div class="search-left">239      <!-- Google "G" -->240      <svg width="64" height="64" viewBox="0 0 48 48">241        <path class="g-blue" d="M24 10c3 0 5 1 7 3l-3 3c-1-1-3-2-4-2-5 0-8 4-8 8s3 8 8 8c4 0 6-2 7-5h-7v-5h13c1 8-5 15-13 15-8 0-14-6-14-13S16 10 24 10z"/>242      </svg>243      <div class="search-placeholder">Search...</div>244    </div>245    <div class="search-right">246      <!-- Mic -->247      <svg width="56" height="56" viewBox="0 0 24 24">248        <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-5-3h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h-4v-3.1A7 7 0 0 1 7 11z" fill="#4285F4"/>249      </svg>250      <!-- Lens/Camera -->251      <svg width="56" height="56" viewBox="0 0 24 24">252        <rect x="4" y="6" width="16" height="12" rx="3" fill="#34A853"/>253        <circle cx="12" cy="12" r="4" fill="#fff"/>254        <circle cx="12" cy="12" r="2" fill="#4285F4"/>255      </svg>256    </div>257  </div>258 259  <!-- Home Navigation Pill -->260  <div class="home-pill"></div>261 262</div>263</body>264</html>