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: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0b0f1a;15  }16  /* Wallpaper placeholder */17  .wallpaper {18    position: absolute;19    inset: 0;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    color: #757575;23    display: flex;24    justify-content: center;25    align-items: center;26    font-size: 28px;27    letter-spacing: 0.5px;28  }29  .shade-top {30    position: absolute; inset: 0;31    background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.65));32    pointer-events: none;33  }34 35  /* Status bar */36  .status-bar {37    position: absolute; top: 24px; left: 36px; right: 36px; height: 72px;38    display: flex; align-items: center; justify-content: space-between; color: #fff;39    font-size: 36px; font-weight: 500;40  }41  .status-left, .status-right { display: flex; align-items: center; gap: 18px; }42  .dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.9); }43  .status-icon { width: 40px; height: 40px; }44 45  /* Date & weather */46  .date-wrap {47    position: absolute; left: 60px; top: 220px; color: #fff;48  }49  .date-wrap .date {50    font-size: 72px; font-weight: 600; margin: 0 0 14px 0;51  }52  .weather {53    display: flex; align-items: center; gap: 16px; font-size: 36px; opacity: 0.95;54  }55  .weather svg { width: 48px; height: 48px; }56 57  /* App grid */58  .apps-row {59    position: absolute; left: 60px; right: 60px;60    display: flex; justify-content: space-between; align-items: flex-start;61  }62  .row-1 { top: 1540px; }63  .row-2 { top: 1780px; }64  .app {65    width: 180px;66    display: flex; flex-direction: column; align-items: center; gap: 16px;67    color: #fff; text-align: center;68  }69  .icon-wrap {70    width: 150px; height: 150px; border-radius: 50%; background: #ffffff;71    display: flex; align-items: center; justify-content: center;72    box-shadow: 0 10px 24px rgba(0,0,0,0.35);73  }74  .icon-wrap svg { width: 96px; height: 96px; }75  .label { font-size: 32px; opacity: 0.95; }76  .row-2 .label { display: none; }77 78  /* Search pill */79  .search-pill {80    position: absolute; left: 60px; right: 60px; top: 2030px; height: 120px;81    background: #ffffff; border-radius: 60px; box-shadow: 0 12px 28px rgba(0,0,0,0.35);82    display: flex; align-items: center; padding: 0 34px; color: #666;83  }84  .search-g {85    display: flex; align-items: center; gap: 16px; color: #555; font-size: 38px; font-weight: 500;86  }87  .search-right {88    margin-left: auto; display: flex; align-items: center; gap: 26px;89  }90  .pill-icon { width: 56px; height: 56px; }91 92  /* Gesture bar */93  .gesture {94    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);95    width: 300px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.85);96  }97</style>98</head>99<body>100<div id="render-target">101  <div class="wallpaper">[IMG: Rocky canyon wallpaper]</div>102  <div class="shade-top"></div>103 104  <!-- Status bar -->105  <div class="status-bar">106    <div class="status-left">107      <div>11:09</div>108      <div class="dot"></div>109      <div class="dot" style="opacity:0.7;"></div>110      <div class="dot" style="opacity:0.45;"></div>111    </div>112    <div class="status-right">113      <!-- Wi-Fi -->114      <svg class="status-icon" viewBox="0 0 24 24" fill="none">115        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>116        <path d="M5 11c3.5-3 10.5-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>117        <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>118        <circle cx="12" cy="18" r="2" fill="#fff"/>119      </svg>120      <!-- Battery -->121      <svg class="status-icon" viewBox="0 0 28 24" fill="none">122        <rect x="1" y="6" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>123        <rect x="3" y="8" width="18" height="8" rx="1" fill="#fff"/>124        <rect x="24" y="9" width="3" height="6" rx="1" fill="#fff"/>125      </svg>126    </div>127  </div>128 129  <!-- Date & weather -->130  <div class="date-wrap">131    <h1 class="date">Mon, Oct 16</h1>132    <div class="weather">133      <svg viewBox="0 0 24 24">134        <path d="M7 16h9a4 4 0 0 0 0-8c-.6 0-1.1.1-1.6.3A5 5 0 0 0 5 10.5C3.3 11 2 12.6 2 14.5A3.5 3.5 0 0 0 5.5 18H7" fill="#fff" opacity="0.9"/>135      </svg>136      <span>23°C</span>137    </div>138  </div>139 140  <!-- Apps row 1 -->141  <div class="apps-row row-1">142    <!-- Play Store -->143    <div class="app">144      <div class="icon-wrap">145        <svg viewBox="0 0 100 100">146          <defs>147            <clipPath id="clipPS">148              <circle cx="50" cy="50" r="48"></circle>149            </clipPath>150          </defs>151          <g clip-path="url(#clipPS)">152            <polygon points="25,20 70,50 25,80" fill="#38A856"/>153            <polygon points="25,20 60,35 52,44 25,30" fill="#F7C02D"/>154            <polygon points="25,80 60,65 52,56 25,70" fill="#2DA6F7"/>155            <polygon points="52,44 60,35 60,65 52,56" fill="#EA4335"/>156          </g>157        </svg>158      </div>159      <div class="label">Play Store</div>160    </div>161 162    <!-- Gmail -->163    <div class="app">164      <div class="icon-wrap">165        <svg viewBox="0 0 100 100">166          <rect x="16" y="30" width="68" height="40" rx="8" fill="#fff"/>167          <path d="M16 36 L50 58 L84 36" stroke="#EA4335" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168          <path d="M24 70 V40" stroke="#34A853" stroke-width="10" stroke-linecap="round"/>169          <path d="M76 70 V40" stroke="#4285F4" stroke-width="10" stroke-linecap="round"/>170          <path d="M24 40 L50 58 L76 40" stroke="#FBBC05" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171        </svg>172      </div>173      <div class="label">Gmail</div>174    </div>175 176    <!-- Photos -->177    <div class="app">178      <div class="icon-wrap">179        <svg viewBox="0 0 100 100">180          <circle cx="50" cy="30" r="20" fill="#FBBC05"/>181          <circle cx="70" cy="50" r="20" fill="#34A853"/>182          <circle cx="50" cy="70" r="20" fill="#4285F4"/>183          <circle cx="30" cy="50" r="20" fill="#EA4335"/>184          <circle cx="50" cy="50" r="10" fill="#fff"/>185        </svg>186      </div>187      <div class="label">Photos</div>188    </div>189 190    <!-- YouTube -->191    <div class="app">192      <div class="icon-wrap">193        <svg viewBox="0 0 100 100">194          <rect x="18" y="30" width="64" height="40" rx="10" fill="#FF0000"/>195          <polygon points="46,38 46,62 66,50" fill="#fff"/>196        </svg>197      </div>198      <div class="label">YouTube</div>199    </div>200  </div>201 202  <!-- Apps row 2 -->203  <div class="apps-row row-2">204    <!-- Phone -->205    <div class="app">206      <div class="icon-wrap">207        <svg viewBox="0 0 100 100">208          <path d="M30 25c5-5 10-3 12 1l6 10c2 4 0 6-3 8l-3 2c6 12 14 18 26 24l2-3c2-3 4-5 8-3l10 6c4 2 6 7 1 12-4 4-11 7-16 6-29-7-48-26-55-54-1-6 2-12 6-16z" fill="#4285F4"/>209        </svg>210      </div>211      <div class="label">Phone</div>212    </div>213 214    <!-- Messages -->215    <div class="app">216      <div class="icon-wrap">217        <svg viewBox="0 0 100 100">218          <rect x="18" y="22" width="64" height="48" rx="12" fill="#1A73E8"/>219          <rect x="28" y="34" width="44" height="10" rx="5" fill="#fff" opacity="0.9"/>220          <rect x="28" y="50" width="28" height="10" rx="5" fill="#fff" opacity="0.9"/>221          <path d="M42 70 L42 80 L54 70" fill="#1A73E8"/>222        </svg>223      </div>224      <div class="label">Messages</div>225    </div>226 227    <!-- Chrome -->228    <div class="app">229      <div class="icon-wrap">230        <svg viewBox="0 0 100 100">231          <circle cx="50" cy="50" r="36" fill="#fff"/>232          <path d="M50 14a36 36 0 0 1 31 18H49" fill="#EA4335"/>233          <path d="M81 32a36 36 0 0 1-9 45L50 50" fill="#FBBC05"/>234          <path d="M72 77a36 36 0 0 1-54-14l31-13" fill="#34A853"/>235          <circle cx="50" cy="50" r="16" fill="#4285F4"/>236        </svg>237      </div>238      <div class="label">Chrome</div>239    </div>240 241    <!-- Camera -->242    <div class="app">243      <div class="icon-wrap">244        <svg viewBox="0 0 100 100">245          <rect x="16" y="30" width="68" height="40" rx="8" fill="#9E9E9E"/>246          <rect x="30" y="18" width="16" height="12" rx="3" fill="#757575"/>247          <circle cx="50" cy="50" r="14" fill="#3F51B5"/>248          <circle cx="50" cy="50" r="8" fill="#90CAF9"/>249        </svg>250      </div>251      <div class="label">Camera</div>252    </div>253  </div>254 255  <!-- Search bar -->256  <div class="search-pill">257    <div class="search-g">258      <svg class="pill-icon" viewBox="0 0 24 24">259        <circle cx="12" cy="12" r="10" fill="none" stroke="#4285F4" stroke-width="3"/>260        <path d="M12 2 A10 10 0 0 1 22 12" stroke="#34A853" stroke-width="3" fill="none"/>261        <path d="M12 22 A10 10 0 0 1 2 12" stroke="#EA4335" stroke-width="3" fill="none"/>262        <path d="M12 12 H22" stroke="#FBBC05" stroke-width="3"/>263      </svg>264      <span>Search</span>265    </div>266    <div class="search-right">267      <!-- Mic -->268      <svg class="pill-icon" viewBox="0 0 24 24">269        <rect x="10" y="4" width="4" height="10" rx="2" fill="#1A73E8"/>270        <path d="M7 12a5 5 0 0 0 10 0" stroke="#1A73E8" stroke-width="2" fill="none"/>271        <path d="M12 17v3" stroke="#1A73E8" stroke-width="2" stroke-linecap="round"/>272      </svg>273      <!-- Lens/Camera -->274      <svg class="pill-icon" viewBox="0 0 24 24">275        <rect x="3" y="5" width="18" height="14" rx="4" fill="#fff" stroke="#ccc"/>276        <circle cx="12" cy="12" r="4" fill="#4285F4"/>277        <rect x="7" y="3" width="4" height="3" rx="1.2" fill="#EA4335"/>278        <rect x="13" y="18" width="4" height="3" rx="1.2" fill="#34A853"/>279        <rect x="2" y="10" width="3" height="4" rx="1" fill="#FBBC05"/>280        <rect x="19" y="10" width="3" height="4" rx="1" fill="#4285F4"/>281      </svg>282    </div>283  </div>284 285  <!-- Gesture bar -->286  <div class="gesture"></div>287</div>288</body>289</html>