GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    font-family: Roboto, Arial, sans-serif;15    color: #fff;16  }17 18  /* Wallpaper placeholder */19  .wallpaper {20    position: absolute;21    inset: 0;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    display: flex;25    align-items: center;26    justify-content: center;27    color: #757575;28    font-size: 20px;29  }30  .overlay-dark {31    position: absolute;32    inset: 0;33    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));34    pointer-events: none;35  }36 37  /* Status bar */38  .status-bar {39    position: absolute;40    top: 18px;41    left: 24px;42    right: 24px;43    height: 60px;44    display: flex;45    justify-content: space-between;46    align-items: center;47    color: #fff;48    z-index: 2;49  }50  .status-left, .status-right { display: flex; align-items: center; }51  .status-left { gap: 14px; font-size: 34px; font-weight: 500; }52  .status-square {53    width: 26px; height: 26px; border-radius: 4px; background: #fff; opacity: 0.95;54  }55  .status-right { gap: 18px; }56  .icon-wifi svg, .icon-battery svg { display: block; }57 58  /* Date + Weather */59  .date-weather {60    position: absolute;61    top: 360px;62    left: 64px;63    z-index: 2;64    text-shadow: 0 2px 6px rgba(0,0,0,0.35);65  }66  .date-text {67    font-size: 72px;68    font-weight: 500;69    margin-bottom: 22px;70  }71  .weather-row {72    display: flex;73    align-items: center;74    gap: 16px;75    font-size: 36px;76    opacity: 0.95;77  }78 79  /* App rows */80  .app-row {81    position: absolute;82    left: 48px;83    right: 48px;84    display: flex;85    justify-content: space-between;86    z-index: 2;87  }88  .app-row.top { bottom: 780px; }89  .app-row.dock { bottom: 450px; }90  .app {91    width: 220px;92    text-align: center;93  }94  .icon-circle {95    width: 160px; height: 160px;96    background: #fff;97    border-radius: 50%;98    box-shadow: 0 8px 16px rgba(0,0,0,0.3);99    margin: 0 auto;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .app-label {105    margin-top: 26px;106    font-size: 34px;107    font-weight: 500;108    color: rgba(255,255,255,0.95);109  }110 111  /* Search bar */112  .search-bar {113    position: absolute;114    left: 60px;115    right: 60px;116    bottom: 210px;117    height: 120px;118    background: #fff;119    border-radius: 60px;120    box-shadow: 0 10px 24px rgba(0,0,0,0.35);121    display: flex;122    align-items: center;123    padding: 0 36px;124    z-index: 2;125  }126  .search-left, .search-right { display: flex; align-items: center; }127  .search-left { gap: 22px; flex: 1; }128  .search-placeholder {129    font-size: 36px;130    color: #757575;131  }132  .search-right { gap: 26px; }133 134  /* Gesture bar */135  .gesture-bar {136    position: absolute;137    bottom: 80px;138    left: 50%;139    transform: translateX(-50%);140    width: 250px; height: 12px;141    background: rgba(255,255,255,0.85);142    border-radius: 6px;143    z-index: 2;144  }145 146  /* Utility SVG sizes */147  .svg-64 { width: 64px; height: 64px; }148  .svg-72 { width: 72px; height: 72px; }149  .svg-80 { width: 80px; height: 80px; }150</style>151</head>152<body>153<div id="render-target">154  <div class="wallpaper">[IMG: Canyon Rock Wallpaper]</div>155  <div class="overlay-dark"></div>156 157  <!-- Status bar -->158  <div class="status-bar">159    <div class="status-left">160      <div>3:46</div>161      <div style="font-size:20px; opacity:0.9;">ovo</div>162      <div class="status-square"></div>163    </div>164    <div class="status-right">165      <!-- Wi-Fi icon -->166      <div class="icon-wifi">167        <svg class="svg-64" viewBox="0 0 64 64">168          <g fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round">169            <path d="M6 26c10-8 28-8 38 0" />170            <path d="M12 34c7-6 21-6 28 0" />171            <path d="M20 42c4-3 12-3 16 0" />172            <circle cx="28" cy="48" r="3" fill="#fff"/>173          </g>174        </svg>175      </div>176      <!-- Battery icon -->177      <div class="icon-battery">178        <svg class="svg-64" viewBox="0 0 64 64">179          <rect x="6" y="18" width="44" height="28" rx="5" ry="5" fill="none" stroke="#fff" stroke-width="4"/>180          <rect x="52" y="26" width="6" height="12" rx="2" fill="#fff"/>181          <rect x="10" y="22" width="32" height="20" rx="3" fill="#fff"/>182        </svg>183      </div>184    </div>185  </div>186 187  <!-- Date & Weather -->188  <div class="date-weather">189    <div class="date-text">Mon, Jul 24</div>190    <div class="weather-row">191      <svg class="svg-64" viewBox="0 0 64 64">192        <!-- Sun -->193        <circle cx="18" cy="22" r="10" fill="#FFC107"/>194        <!-- Cloud -->195        <path d="M20 36h22a8 8 0 0 0 0-16c-2 0-4 1-5 2a10 10 0 0 0-19 5c-6 0-9 4-9 9a8 8 0 0 0 8 8h6" fill="#ECEFF1"/>196      </svg>197      <span>34°C</span>198    </div>199  </div>200 201  <!-- Top app row -->202  <div class="app-row top">203    <!-- Play Store -->204    <div class="app">205      <div class="icon-circle">206        <svg class="svg-80" viewBox="0 0 80 80">207          <polygon points="16,40 44,22 44,58" fill="#00C853"/>208          <polygon points="44,22 64,34 44,40" fill="#FF5252"/>209          <polygon points="44,40 64,46 44,58" fill="#FFC107"/>210          <polygon points="16,40 44,40 44,44 20,52" fill="#448AFF"/>211        </svg>212      </div>213      <div class="app-label">Play Store</div>214    </div>215    <!-- Gmail -->216    <div class="app">217      <div class="icon-circle">218        <svg class="svg-80" viewBox="0 0 80 80">219          <rect x="16" y="26" width="48" height="32" rx="6" fill="#FFF"/>220          <path d="M16 26 L40 44 L64 26" fill="none" stroke="#E53935" stroke-width="8"/>221          <path d="M16 26 L16 58" stroke="#34A853" stroke-width="8"/>222          <path d="M64 26 L64 58" stroke="#4285F4" stroke-width="8"/>223          <path d="M28 26 L40 36 L52 26" stroke="#FBBC05" stroke-width="8"/>224        </svg>225      </div>226      <div class="app-label">Gmail</div>227    </div>228    <!-- Photos -->229    <div class="app">230      <div class="icon-circle">231        <svg class="svg-80" viewBox="0 0 80 80">232          <path d="M40 40 H68 A28 28 0 0 0 40 12 Z" fill="#4285F4"/>233          <path d="M40 40 V12 A28 28 0 0 0 12 40 Z" fill="#EA4335"/>234          <path d="M40 40 H12 A28 28 0 0 0 40 68 Z" fill="#34A853"/>235          <path d="M40 40 V68 A28 28 0 0 0 68 40 Z" fill="#FBBC05"/>236        </svg>237      </div>238      <div class="app-label">Photos</div>239    </div>240    <!-- YouTube -->241    <div class="app">242      <div class="icon-circle">243        <svg class="svg-80" viewBox="0 0 80 80">244          <rect x="16" y="26" width="48" height="28" rx="10" fill="#FF0000"/>245          <polygon points="36,30 52,40 36,50" fill="#fff"/>246        </svg>247      </div>248      <div class="app-label">YouTube</div>249    </div>250  </div>251 252  <!-- Dock app row -->253  <div class="app-row dock">254    <!-- Phone -->255    <div class="app">256      <div class="icon-circle">257        <svg class="svg-80" viewBox="0 0 80 80">258          <path d="M24 28 c8 18 18 26 34 32 l6 -8 c-6 -6 -14 -8 -16 -4 l-6 6 c-8 -6 -14 -12 -20 -22 l6 -6 c4 -4 2 -12 -4 -16 l-8 6 Z" fill="#4CAF50"/>259        </svg>260      </div>261    </div>262    <!-- Messages -->263    <div class="app">264      <div class="icon-circle">265        <svg class="svg-80" viewBox="0 0 80 80">266          <rect x="16" y="22" width="48" height="32" rx="12" fill="#3D5AFE"/>267          <rect x="24" y="30" width="32" height="16" rx="8" fill="#90CAF9"/>268          <path d="M36 54 L48 64 L46 54" fill="#3D5AFE"/>269        </svg>270      </div>271    </div>272    <!-- Chrome -->273    <div class="app">274      <div class="icon-circle">275        <svg class="svg-80" viewBox="0 0 80 80">276          <circle cx="40" cy="40" r="24" fill="#4285F4"/>277          <circle cx="40" cy="40" r="12" fill="#FFF"/>278          <path d="M40 16 A24 24 0 0 1 66 40 H44" fill="#EA4335"/>279          <path d="M66 40 A24 24 0 0 1 40 64 L28 44" fill="#FBBC05"/>280          <path d="M40 64 A24 24 0 0 1 14 40 L36 40" fill="#34A853"/>281        </svg>282      </div>283    </div>284    <!-- Camera -->285    <div class="app">286      <div class="icon-circle">287        <svg class="svg-80" viewBox="0 0 80 80">288          <rect x="18" y="26" width="44" height="28" rx="8" fill="#9E9E9E"/>289          <circle cx="40" cy="40" r="10" fill="#2979FF"/>290          <rect x="28" y="20" width="12" height="8" rx="2" fill="#757575"/>291        </svg>292      </div>293    </div>294  </div>295 296  <!-- Search bar -->297  <div class="search-bar">298    <div class="search-left">299      <!-- Google G -->300      <