GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #d9d3cc;13  }14 15  /* Fullscreen wallpaper placeholder */16  .wallpaper {17    position: absolute;18    left: 0; top: 0; right: 0; bottom: 0;19    background: linear-gradient(160deg, #f0d4bf 0%, #f6e6d7 30%, #e2d2c9 60%, #d7cbc5 100%);20  }21  .wallpaper::after{22    content: "[IMG: Artistic abstract wallpaper with singer illustration]";23    position: absolute;24    left: 50%; top: 50%;25    transform: translate(-50%, -50%);26    color: #6f6f6f;27    padding: 8px 14px;28    border: 1px solid #bdbdbd;29    background: rgba(224,224,224,0.5);30    border-radius: 6px;31    font-size: 20px;32    letter-spacing: 0.3px;33  }34 35  /* Top status bar */36  .status-bar {37    position: absolute;38    top: 22px;39    left: 28px;40    right: 28px;41    height: 48px;42    color: #ffffff;43    text-shadow: 0 1px 2px rgba(0,0,0,0.35);44    font-size: 38px;45    display: flex;46    align-items: center;47    justify-content: space-between;48  }49  .status-icons {50    display: flex; align-items: center; gap: 18px; font-size: 24px;51  }52  .status-icons .icon {53    width: 28px; height: 28px;54    display: inline-flex; align-items: center; justify-content: center;55  }56  .status-icons .battery {57    display: inline-flex; align-items: center; gap: 8px; font-size: 26px;58  }59 60  /* Date & weather */61  .date-weather {62    position: absolute;63    top: 170px;64    left: 64px;65    color: #ffffff;66    text-shadow: 0 2px 4px rgba(0,0,0,0.35);67  }68  .date-weather .date {69    font-size: 64px; font-weight: 600; margin-bottom: 14px;70  }71  .date-weather .meta {72    font-size: 34px; opacity: 0.95; display: flex; align-items: center; gap: 18px;73  }74  .dot { width: 6px; height: 6px; background: #fff; border-radius: 50%; display: inline-block; margin: 0 16px; opacity: 0.9; }75 76  /* App icons grid */77  .apps-row {78    position: absolute;79    top: 1460px;80    left: 0; right: 0;81    display: flex;82    justify-content: space-around;83    padding: 0 60px;84  }85  .app {86    width: 180px;87    text-align: center;88    color: #ffffff;89    text-shadow: 0 2px 4px rgba(0,0,0,0.35);90  }91  .circle {92    width: 170px; height: 170px; margin: 0 auto;93    background: rgba(255,255,255,0.88);94    border-radius: 50%;95    box-shadow: 0 8px 18px rgba(0,0,0,0.25);96    display: flex; align-items: center; justify-content: center;97  }98  .app label {99    display: block; margin-top: 18px; font-size: 34px;100  }101 102  /* Dock icons */103  .dock {104    position: absolute;105    left: 0; right: 0;106    top: 1840px;107    display: flex;108    justify-content: space-evenly;109    padding: 0 70px;110  }111  .dock .circle { width: 160px; height: 160px; }112 113  /* Search bar */114  .search-bar {115    position: absolute;116    left: 70px;117    right: 70px;118    bottom: 130px;119    height: 130px;120    background: rgba(255,255,255,0.95);121    border-radius: 66px;122    box-shadow: 0 10px 22px rgba(0,0,0,0.25);123    display: flex;124    align-items: center;125    padding: 0 28px;126    color: #333;127  }128  .search-bar .g {129    width: 76px; height: 76px; border-radius: 50%;130    display: inline-flex; align-items: center; justify-content: center;131    font-weight: 700; font-size: 40px; color: #4285F4;132    background: #fff; border: 2px solid #e6e6e6;133    margin-right: 16px;134  }135  .search-placeholder {136    flex: 1; color: #777; font-size: 36px;137  }138  .search-actions {139    display: flex; gap: 18px; align-items: center;140  }141  .action-btn {142    width: 88px; height: 88px;143    border-radius: 50%;144    background: #f5f6f8;145    border: 1px solid #e1e1e1;146    display: flex; align-items: center; justify-content: center;147  }148 149  /* Gesture bar */150  .gesture {151    position: absolute; bottom: 44px; left: 50%;152    transform: translateX(-50%);153    width: 320px; height: 10px; background: rgba(0,0,0,0.32);154    border-radius: 8px;155  }156 157  /* SVG helpers */158  svg { display: block; }159</style>160</head>161<body>162<div id="render-target">163  <div class="wallpaper"></div>164 165  <!-- Status bar -->166  <div class="status-bar">167    <div class="time">9:24</div>168    <div class="status-icons">169      <div class="icon">170        <!-- simple ring icon -->171        <svg width="26" height="26" viewBox="0 0 26 26">172          <circle cx="13" cy="13" r="10" fill="none" stroke="white" stroke-width="2"/>173        </svg>174      </div>175      <div class="icon">176        <!-- WiFi icon -->177        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">178          <path d="M2 8c5-5 15-5 20 0"/>179          <path d="M5 11c4-4 10-4 14 0"/>180          <path d="M8 14c3-3 5-3 8 0"/>181          <circle cx="12" cy="18" r="1.7" fill="white" stroke="none"/>182        </svg>183      </div>184      <div class="battery">185        <svg width="34" height="24" viewBox="0 0 34 24" fill="none" stroke="white" stroke-width="2">186          <rect x="1" y="4" width="28" height="16" rx="3" ry="3" fill="none"/>187          <rect x="3" y="6" width="22" height="12" fill="white"/>188          <rect x="29" y="9" width="4" height="6" fill="white" stroke="none"/>189        </svg>190        <span>98%</span>191      </div>192    </div>193  </div>194 195  <!-- Date and weather -->196  <div class="date-weather">197    <div class="date">Fri, Nov 24</div>198    <div class="meta">199      <span>16°C</span>200      <span class="dot"></span>201      <span>Today 26° / 13°</span>202      <span class="dot"></span>203      <span>Fog</span>204    </div>205  </div>206 207  <!-- Apps row -->208  <div class="apps-row">209    <div class="app">210      <div class="circle">211        <!-- Play Store -->212        <svg width="110" height="110" viewBox="0 0 110 110">213          <polygon points="20,20 90,55 20,90" fill="#34A853"/>214          <polygon points="20,20 55,45 45,55 20,20" fill="#4285F4"/>215          <polygon points="20,90 55,65 45,55 20,90" fill="#FBBC05"/>216          <polygon points="45,55 55,45 74,55 55,65" fill="#EA4335"/>217        </svg>218      </div>219      <label>Play Store</label>220    </div>221    <div class="app">222      <div class="circle">223        <!-- Gmail -->224        <svg width="120" height="90" viewBox="0 0 120 90">225          <rect x="10" y="20" width="100" height="50" rx="8" fill="#ffffff" stroke="#d0d0d0"/>226          <path d="M10 25 L60 55 L110 25" stroke="#EA4335" stroke-width="12" fill="none"/>227          <path d="M10 25 L60 55 L110 25" stroke="#34A853" stroke-width="8" opacity="0.6"/>228        </svg>229      </div>230      <label>Gmail</label>231    </div>232    <div class="app">233      <div class="circle">234        <!-- YouTube -->235        <svg width="120" height="90" viewBox="0 0 120 90">236          <rect x="10" y="20" width="100" height="50" rx="14" fill="#FF0000"/>237          <polygon points="52,35 80,45 52,55" fill="#ffffff"/>238        </svg>239      </div>240      <label>YouTube</label>241    </div>242  </div>243 244  <!-- Dock icons -->245  <div class="dock">246    <div class="app">247      <div class="circle">248        <!-- Phone -->249        <svg width="90" height="90" viewBox="0 0 24 24" fill="none" stroke="#1976D2" stroke-width="2">250          <path d="M6 2l3 2-2 3c1 2 3 4 5 5l3-2 2 3-2 3c-5 2-12-5-10-10l3-2z" fill="#90CAF9" stroke="#1976D2"/>251        </svg>252      </div>253    </div>254    <div class="app">255      <div class="circle">256        <!-- Messages -->257        <svg width="88" height="88" viewBox="0 0 24 24" fill="#1E88E5">258          <path d="M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" fill="#1E88E5"/>259          <rect x="6" y="8" width="12" height="2" fill="#fff"/>260          <rect x="6" y="12" width="8" height="2" fill="#fff"/>261        </svg>262      </div>263    </div>264    <div class="app">265      <div class="circle" style="background: #f1e1e1;">266        <div style="width:110px;height:110px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:20px;border-radius:10px;">[IMG: Bus]</div>267      </div>268    </div>269    <div class="app">270      <div class="circle">271        <!-- Camera -->272        <svg width="92" height="92" viewBox="0 0 24 24" fill="none" stroke="#343a40" stroke-width="2">273          <rect x="3" y="7" width="18" height="12" rx="3" fill="#ffffff"/>274          <circle cx="12" cy="13" r="4" fill="#90A4AE" stroke="#263238"/>275          <rect x="8" y="4" width="8" height="3" rx="1.5" fill="#616161" stroke="#616161"/>276        </svg>277      </div>278    </div>279  </div>280 281  <!-- Search bar -->282  <div class="search-bar">283    <div class="g">G</div>284    <div class="search-placeholder">Search</div>285    <div class="search-actions">286      <div class="action-btn">287        <!-- Mic -->288        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">289          <rect x="9" y="3" width="6" height="10" rx="3" fill="#4285F4" stroke="none"/>290          <path d="M5 12a7 7 0 0 0 14 0" stroke="#333" fill="none"/>291          <path d="M12 19v3" stroke="#333"/>292        </svg>293      </div>294      <div class="action-btn">295        <!-- Lens/Camera -->296        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">297          <rect x="4" y="6" width="16" height="12" rx="3" fill="#fff"/>298          <circle cx="12" cy="12" r="3.2" fill="#90CAF9" stroke="#333"/>299          <rect x="9" y="4" width="6" height="3" rx="1.5" fill="#9E9E9E" stroke="#9E9E9E"/>300        </svg>301      </div>302    </div>303  </div>304 305  <div class="gesture"></div>306</div>307</body>308</html>