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>Mobile UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: radial-gradient(1400px 1000px at 70% 30%, #2c2b3a 0%, #1f2331 40%, #171a26 70%, #12151f 100%);15    color: #fff;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute; top: 20px; left: 0; width: 100%; height: 60px; pointer-events: none;21  }22  .status-left {23    position: absolute; left: 24px; top: 14px; font-size: 28px; opacity: 0.85;24  }25  .status-right {26    position: absolute; right: 24px; top: 10px; display: flex; gap: 20px; align-items: center;27  }28  .status-right svg { width: 36px; height: 36px; opacity: 0.9; }29 30  /* Notification card */31  .notif {32    position: absolute; top: 110px; left: 70px; width: 940px;33    background: #F5F3FF; color: #1b1b1b;34    border-radius: 28px; box-shadow: 0 10px 24px rgba(0,0,0,0.25);35    padding: 22px 24px;36  }37  .notif-header {38    display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 16px;39  }40  .notif-icon {41    width: 56px; height: 56px; border-radius: 50%; background: #D7D5FF; display: flex; align-items: center; justify-content: center;42  }43  .notif-title {44    font-size: 34px; font-weight: 600; color: #262626;45  }46  .notif-sub { font-size: 26px; color: #5c5c5c; margin-left: 8px; }47  .notif-actions { margin-top: 20px; display: flex; gap: 16px; }48  .pill-btn {49    height: 74px; padding: 0 40px; border-radius: 38px; border: 1px solid #D0CFDC;50    background: #FFFFFF; color: #3c3c3c; font-size: 28px; font-weight: 700; letter-spacing: 0.8px;51    display: inline-flex; align-items: center; justify-content: center;52  }53  .pill-btn.secondary { background: #EFEFF7; }54 55  .chev {56    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;57  }58 59  /* App grid */60  .grid {61    position: absolute; top: 420px; left: 0; width: 100%;62    padding: 0 50px;63    display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; row-gap: 80px;64  }65  .app {66    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;67  }68  .icon {69    position: relative;70    width: 160px; height: 160px; border-radius: 50%;71    display: flex; align-items: center; justify-content: center;72    box-shadow: 0 8px 18px rgba(0,0,0,0.35);73  }74  .label {75    margin-top: 18px; font-size: 32px; color: #ffffff; text-shadow: 0 3px 6px rgba(0,0,0,0.45);76  }77  .badge {78    position: absolute; right: -2px; top: -2px; width: 42px; height: 42px; background: #ff95c4; border: 3px solid #fff; border-radius: 50%;79  }80  .icon svg { width: 84px; height: 84px; }81 82  /* Dock */83  .dock {84    position: absolute; bottom: 180px; left: 90px; width: 900px;85    display: flex; justify-content: space-between; align-items: center;86  }87  .dock .dock-icon {88    width: 140px; height: 140px; border-radius: 50%; background: #ffffffdd;89    display: flex; align-items: center; justify-content: center;90    box-shadow: 0 8px 20px rgba(0,0,0,0.35);91  }92  .dock .dock-icon svg { width: 80px; height: 80px; }93 94  /* Search bar */95  .search {96    position: absolute; bottom: 120px; left: 70px; width: 940px; height: 116px;97    background: #fff; border-radius: 58px; box-shadow: 0 14px 28px rgba(0,0,0,0.35);98    display: flex; align-items: center; justify-content: space-between; padding: 0 28px;99  }100  .search-left { display: flex; align-items: center; gap: 18px; }101  .g-logo {102    width: 64px; height: 64px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2);103  }104  .search-right { display: flex; gap: 20px; align-items: center; }105  .search-right .chip {106    width: 64px; height: 64px; border-radius: 18px; background: #f2f2f2; display: grid; place-items: center;107  }108 109  /* Snoozing pill overlay */110  .snooze-pill {111    position: absolute; bottom: 260px; left: 160px; width: 620px; height: 96px;112    background: #fff; border-radius: 48px; box-shadow: 0 14px 28px rgba(0,0,0,0.35);113    display: flex; align-items: center; gap: 18px; padding: 0 24px; color: #333;114    font-size: 30px;115  }116  .snooze-pill .circle {117    width: 56px; height: 56px; border-radius: 50%; background: #39c28e; display: grid; place-items: center;118  }119 120  /* Gesture bar */121  .gesture {122    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);123    width: 260px; height: 12px; border-radius: 10px; background: #e4e4ea; opacity: 0.9;124  }125</style>126</head>127<body>128<div id="render-target">129 130  <div class="statusbar">131    <div class="status-left">Reminder</div>132    <div class="status-right">133      <!-- WiFi -->134      <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6.5-5.5a9 9 0 0113 0l-1.8 1.8a6.5 6.5 0 00-9.4 0L5.5 14.5zm-3.2-3.2a13 13 0 0119.4 0l-1.9 1.9a10.5 10.5 0 00-15.6 0L2.3 11.3z"/></svg>135      <!-- Battery -->136      <svg viewBox="0 0 24 24" fill="#fff"><path d="M18 7h1v10h-1v2H4V5h14v2zM6 7v10h10V7H6z"/></svg>137    </div>138  </div>139 140  <div class="notif">141    <div class="notif-header">142      <div class="notif-icon">143        <svg viewBox="0 0 24 24" fill="#4B5BD7"><path d="M12 3a5 5 0 015 5v4.5l1.6 3.2a1 1 0 01-.9 1.3H6.3a1 1 0 01-.9-1.3L7 12.5V8a5 5 0 015-5zm0 18a2.5 2.5 0 002.5-2.5h-5A2.5 2.5 0 0012 21z"/></svg>144      </div>145      <div>146        <span class="notif-title>[Snooze] DOWNTIME</span><span class="notif-sub"> • now</span>147      </div>148      <div class="chev">149        <svg viewBox="0 0 24 24" fill="#6b6b6b"><path d="M7 10l5 5 5-5H7z"/></svg>150      </div>151    </div>152    <div class="notif-actions">153      <div class="pill-btn secondary">SNOOZE</div>154      <div class="pill-btn">DISMISS</div>155    </div>156  </div>157 158  <div class="grid">159 160    <!-- Row 1 -->161    <div class="app">162      <div class="icon" style="background:#ffffff;">163        <svg viewBox="0 0 24 24"><text x="6" y="16" font-size="12" fill="#333" font-weight="700">tri</text></svg>164      </div>165      <div class="label">trivago</div>166    </div>167 168    <div class="app">169      <div class="icon" style="background:#0E4CA8;">170        <svg viewBox="0 0 24 24"><text x="4" y="16" font-size="12" fill="#fff" font-weight="700">B</text></svg>171      </div>172      <div class="label">Booking.com</div>173    </div>174 175    <div class="app">176      <div class="icon" style="background:#F15A41;">177        <svg viewBox="0 0 24 24"><text x="3" y="16" font-size="12" fill="#fff" font-weight="700">my</text></svg>178      </div>179      <div class="label">MakeMyTrip</div>180    </div>181 182    <div class="app">183      <div class="icon" style="background:#CE3C31;">184        <span class="badge"></span>185        <svg viewBox="0 0 24 24"><text x="2" y="16" font-size="12" fill="#fff" font-weight="800">OYO</text></svg>186      </div>187      <div class="label">OYO</div>188    </div>189 190    <!-- Row 2 -->191    <div class="app">192      <div class="icon" style="background:#F0D24B;">193        <svg viewBox="0 0 24 24" fill="#333"><path d="M5 12l6-6v4h8v4H11v4z"/></svg>194      </div>195      <div class="label">Expedia</div>196    </div>197 198    <div class="app">199      <div class="icon" style="background:#63B6F6;">200        <span class="badge"></span>201        <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="8"/><text x="6" y="15" font-size="10" fill="#2f5fa6" font-weight="700">99</text></svg>202      </div>203      <div class="label">99acres</div>204    </div>205 206    <div class="app">207      <div class="icon" style="background:#C93E35;">208        <svg viewBox="0 0 24 24"><text x="3" y="16" font-size="12" fill="#fff" font-weight="800">REDFIN</text></svg>209      </div>210      <div class="label">Redfin</div>211    </div>212 213    <div class="app">214      <div class="icon" style="background:#167A4A;">215        <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 4l2 6h6l-5 3 2 6-5-3-5 3 2-6-5-3h6l2-6z"/></svg>216      </div>217      <div class="label">Starbucks IN</div>218    </div>219 220    <!-- Row 3 -->221    <div class="app">222      <div class="icon" style="background:#38B86D;">223        <svg viewBox="0 0 24 24" fill="#fff"><circle cx="9" cy="12" r="3"/><circle cx="15" cy="12" r="3"/><path d="M5 9c2-3 12-3 14 0" stroke="#fff" stroke-width="2" fill="none"/></svg>224      </div>225      <div class="label">Tripadvisor</div>226    </div>227 228    <div class="app">229      <div class="icon" style="background:#FF7A38;">230        <svg viewBox="0 0 24 24"><text x="6" y="16" font-size="12" fill="#fff" font-weight="800">K</text></svg>231      </div>232      <div class="label">KAYAK</div>233    </div>234 235    <div class="app">236      <div class="icon" style="background:#2F7AF9;">237        <svg viewBox="0 0 24 24" fill="#fff"><path d="M4 14a8 8 0 0116 0H4z"/><rect x="8" y="10" width="8" height="2" fill="#fff"/></svg>238      </div>239      <div class="label">Skyscanner</div>240    </div>241 242    <div class="app">243      <div class="icon" style="background:#4D2578;">244        <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0116 0" stroke="#fff" stroke-width="2" fill="none"/><circle cx="8" cy="12" r="2" fill="#FF7A38"/><circle cx="16" cy="12" r="2" fill="#63B6F6"/></svg>245      </div>246      <div class="label">momondo</div>247    </div>248 249    <!-- Row 4 -->250    <div class="app">251      <div class="icon" style="background:#42C262;">252        <svg viewBox="0 0 24 24" fill="#fff"><path d="M5 12h14M12 5l5 5-5 5" stroke="#fff" stroke-width="2" fill="none"/></svg>253      </div>254      <div class="label">Citymapper</div>255    </div>256 257    <div class="app">258      <div class="icon" style="background:#F38A2A;">259        <svg viewBox="0 0 24 24" fill="#fff"><circle cx="9" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/><path d="M7 14c2 2 8 2 10 0" stroke="#fff" stroke-width="2" fill="none"/></svg>260      </div>261      <div class="label">Moovit</div>262    </div>263 264    <div class="app">265      <div class="icon" style="background:#ffffff;">266        <svg viewBox="0 0 24 24" fill="#5DA0FF"><path d="M6 15c0-3.3 3.1-6 7-6 3.1 0 5 2 5 4 0 2.7-2.7 5-7 5-3.7 0-5-1.7-5-3z"/><path d="M8 12c0-2 2-4 5-4 1.7 0 3 .7 4 1.8-1.1-2.5-3.5-4.3-6.5-4.3C7.7 5.5 5 8 5 11.2c0 .7.1 1.4.4 2-.3-.4-.4-1-.4-1.2z"/></svg>267      </div>268      <div class="label">OneDrive</div>269    </div>270 271    <div class="app">272      <div class="icon" style="background:#A8D8FF;">273        <span class="badge"></span>274        <svg viewBox="0 0 24 24" fill="#fff"><path d="M11 6a5 5 0 00-5 5h-1a4 4 0 000 8h14a4 4 0 000-8h-1a5 5 0 00-7-5z"/></svg>275      </div>276      <div class="label">TeraBox</div>277    </div>278 279  </div>280 281  <div class="dock">282    <div class="dock-icon">283      <!-- Phone -->284      <svg viewBox="0 0 24 24" fill="#2F77FF"><path d="M6 4h3l2 4-2 2c1.5 2.5 3.5 4.5 6 6l2-2 4 2v3c0 1-1 2-2 2A18 18 0 016 6c0-1 1-2 2-2z"/></svg>285    </div>286    <div class="dock-icon">287      <!-- Messages -->288      <svg viewBox="0 0 24 24" fill="#4A7BFF"><path d="M4 5h16v10H8l-4 4V5z"/></svg>289    </div>290    <div class="dock-icon">291      <!-- Chrome simplified -->292      <svg viewBox="0 0 24 24">293        <circle cx="12" cy="12" r="9" fill="#4CAF50"/>294        <path d="M12 3a9 9 0 019 9h-9V3z" fill="#F44336"/>295        <path d="M3 12a9 9 0 019 9l-4.5-7.8L3 12z" fill="#FFC107"/>296        <circle cx="12" cy="12" r="4" fill="#2196F3"/>297      </svg>298    </div>299    <div class="dock-icon">300      <!-- Camera -->301      <svg viewBox="0 0 24 24" fill="#3E4A59"><path d="M7 7h3l2-2h4l2 2h2v12H4V7h3zm5 3a4 4 0 110 8 4 4 0 010-8z"/></svg>302    </div>303  </div>304 305  <div class="snooze-pill">306    <div class="circle">307      <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 3a5 5 0 015 5v5l2 2H5l2-2V8a5 5 0 015-5z"/></svg>308    </div>309    <div>Snoozing for 10 minutes.</div>310  </div>311 312  <div class="search">313    <div class="search-left">314      <div class="g-logo">315        <svg viewBox="0 0 24 24">316          <path d="M12 3a9 9 0 100 18 9 9 0 000-18z" fill="#fff"/>317          <path d="M12 3a9 9 0 016.4 2.6l-2.2 2.2A6 6 0 0012 6z" fill="#EA4335"/>318          <path d="M21 12a9 9 0 01-2.2 6.1l-2.2-2.2A6 6 0 0018 12z" fill="#34A853"/>319          <path d="M8 20.4A9 9 0 013.6 12H7a6 6 0 001 3.6z" fill="#FBBC05"/>320          <path d="M18.2 16l2.2 2.1A9 9 0 0112 21v-3a6 6 0 006.2-2z" fill="#4285F4"/>321        </svg>322      </div>323      <div style="color:#808080; font-size:30px;">Search</div>324    </div>325    <div class="search-right">326      <div class="chip">327        <svg viewBox="0 0 24 24" fill="#6b6b6b"><path d="M3 6h18v12H3zM6 9h12v2H6z"/></svg>328      </div>329      <div class="chip">330        <svg viewBox="0 0 24 24" fill="#6b6b6b"><path d="M12 3l4 7H8l4-7zm0 18a6 6 0 100-12 6 6 0 000 12z"/></svg>331      </div>332      <div class="chip">333        <svg viewBox="0 0 24 24" fill="#6b6b6b"><path d="M7 5h10v14H7zM9 7h6v10H9z"/></svg>334      </div>335    </div>336  </div>337 338  <div class="gesture"></div>339 340</div>341</body>342</html>