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>UI Rendering</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #222427;15    color: #F1F1F1;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 140px;25    background: #1E1E20;26    color: #EAEAEA;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-icons { display: flex; gap: 24px; align-items: center; }36  .status-icon { width: 32px; height: 32px; opacity: 0.8; }37 38  /* Search bar */39  .search-wrap {40    position: absolute;41    top: 170px;42    left: 40px;43    width: 1000px;44    height: 110px;45    border-radius: 55px;46    border: 4px solid #66666A;47    box-sizing: border-box;48    display: flex;49    align-items: center;50    gap: 24px;51    padding: 0 34px;52    color: #A5A6AA;53    background: transparent;54  }55  .search-input {56    font-size: 42px;57    line-height: 1;58  }59  .search-icon svg { width: 48px; height: 48px; }60 61  /* Teal bot section */62  .bot-section {63    position: absolute;64    top: 310px;65    left: 0;66    width: 1080px;67    height: 540px;68    background: #0E5F66;69    padding: 40px;70    box-sizing: border-box;71  }72  .bot-header {73    font-size: 64px;74    font-weight: 800;75    margin: 10px 0 12px 0;76  }77  .bot-sub {78    font-size: 36px;79    color: #D3E7EA;80    margin-bottom: 26px;81  }82  .help-chip {83    position: absolute;84    top: 34px;85    right: 34px;86    width: 64px;87    height: 64px;88    border-radius: 32px;89    background: rgba(255,255,255,0.12);90    display: flex;91    align-items: center;92    justify-content: center;93    color: #D8E9EC;94    font-weight: 700;95  }96 97  .bot-row {98    display: flex;99    align-items: center;100    gap: 26px;101  }102  .avatar {103    width: 140px;104    height: 140px;105    border-radius: 70px;106    overflow: hidden;107    border: 2px solid #BDBDBD;108    background: #E0E0E0;109    display: flex;110    align-items: center;111    justify-content: center;112    color: #757575;113    font-size: 28px;114    font-weight: 700;115  }116 117  .bubble {118    position: relative;119    background: #178996;120    color: #EAF7F9;121    padding: 34px 40px;122    border-radius: 34px;123    max-width: 780px;124    font-size: 40px;125    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;126  }127  .bubble:before {128    content: "";129    position: absolute;130    left: -60px;131    top: 26px;132    width: 70px;133    height: 70px;134    background: #178996;135    border-bottom-left-radius: 70px;136    border-top-left-radius: 30px;137    border-bottom-right-radius: 30px;138  }139 140  /* bot input card below */141  .bot-input {142    position: absolute;143    left: 40px;144    right: 40px;145    bottom: 30px;146    height: 120px;147    background: #2B2D31;148    border-radius: 20px;149    display: flex;150    align-items: center;151    gap: 20px;152    padding: 0 28px;153    box-sizing: border-box;154  }155  .bot-input svg { width: 40px; height: 40px; opacity: 0.85; }156  .bot-input .placeholder {157    color: #A8A9AD;158    font-size: 38px;159  }160 161  /* Section title */162  .section-title {163    position: absolute;164    top: 880px;165    left: 40px;166    font-size: 52px;167    font-weight: 800;168    color: #EDEDED;169  }170 171  /* Feature image card */172  .feature-card {173    position: absolute;174    top: 960px;175    left: 40px;176    width: 1000px;177    height: 930px;178    border-radius: 24px;179    overflow: hidden;180    background: #E0E0E0;181    border: 1px solid #BDBDBD;182    display: flex;183    align-items: center;184    justify-content: center;185    color: #757575;186    font-size: 40px;187    text-align: center;188  }189 190  .feature-overlay {191    position: absolute;192    left: 40px;193    top: 1740px;194    width: 1000px;195    height: 220px;196    background: #0E5F66;197    border-bottom-left-radius: 24px;198    border-bottom-right-radius: 24px;199    padding: 30px;200    box-sizing: border-box;201    display: flex;202    align-items: center;203  }204  .feature-overlay .title {205    font-size: 64px;206    font-weight: 800;207    color: #EAF7F9;208  }209 210  /* Bottom navigation */211  .tabbar {212    position: absolute;213    bottom: 120px;214    left: 0;215    width: 1080px;216    height: 180px;217    background: #2A2C2F;218    box-shadow: 0 -2px 0 rgba(0,0,0,0.3) inset;219    display: flex;220    align-items: center;221    justify-content: space-around;222  }223  .tab {224    width: 220px;225    display: flex;226    flex-direction: column;227    gap: 16px;228    align-items: center;229    color: #C6C7CC;230    font-size: 32px;231  }232  .tab.active { color: #FF4F86; font-weight: 700; }233  .tab svg { width: 48px; height: 48px; }234  .profile-dot {235    width: 64px;236    height: 64px;237    border-radius: 32px;238    background: #A58579;239    color: #2B2D31;240    font-weight: 800;241    display: flex;242    align-items: center;243    justify-content: center;244  }245 246  /* Home indicator */247  .home-indicator {248    position: absolute;249    bottom: 40px;250    left: 50%;251    transform: translateX(-50%);252    width: 360px;253    height: 14px;254    background: #EDEDED;255    border-radius: 8px;256    opacity: 0.8;257  }258</style>259</head>260<body>261<div id="render-target">262 263  <!-- Status Bar -->264  <div class="status-bar">265    <div>10:44</div>266    <div class="status-icons">267      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">268        <path d="M12 2l9 4-9 4-9-4 9-4z"/>269      </svg>270      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">271        <path d="M3 3l18 18M21 3L3 21"/>272      </svg>273      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">274        <rect x="7" y="4" width="10" height="16" rx="2"></rect>275      </svg>276    </div>277  </div>278 279  <!-- Search -->280  <div class="search-wrap">281    <div class="search-icon">282      <svg viewBox="0 0 24 24" fill="none" stroke="#A5A6AA" stroke-width="2" stroke-linecap="round">283        <circle cx="11" cy="11" r="7"></circle>284        <path d="M20 20l-4-4"></path>285      </svg>286    </div>287    <div class="search-input">Search for recipes</div>288  </div>289 290  <!-- Bot Section -->291  <div class="bot-section">292    <div class="help-chip">?</div>293    <div class="bot-header">Meet Botatouille!</div>294    <div class="bot-sub">Discover the perfect meal anytime. Just ask A.I.</div>295 296    <div class="bot-row">297      <div class="avatar">[IMG: Bot Avatar]</div>298      <div class="bubble">What’re you thinking for your next meal?</div>299    </div>300 301    <div class="bot-input">302      <svg viewBox="0 0 24 24" fill="none" stroke="#D0D1D5" stroke-width="2" stroke-linejoin="round">303        <path d="M4 6h16v9a3 3 0 0 1-3 3H10l-4 3v-3a3 3 0 0 1-2-3V6z"></path>304      </svg>305      <div class="placeholder">Try "Su</div>306    </div>307  </div>308 309  <!-- Section Title -->310  <div class="section-title">What We're Loving Now</div>311 312  <!-- Feature Image -->313  <div class="feature-card">[IMG: Crispy Brussels Sprouts Close-up]</div>314 315  <!-- Overlay Title -->316  <div class="feature-overlay">317    <div class="title">A Very Tasty</div>318  </div>319 320  <!-- Bottom Navigation -->321  <div class="tabbar">322    <div class="tab active">323      <svg viewBox="0 0 24 24" fill="none" stroke="#FF4F86" stroke-width="2">324        <circle cx="11" cy="11" r="6"></circle>325        <path d="M20 20l-4-4"></path>326      </svg>327      <div>Discover</div>328    </div>329    <div class="tab">330      <svg viewBox="0 0 24 24" fill="none" stroke="#C6C7CC" stroke-width="2">331        <path d="M3 10h18M6 6h12M6 14h12M6 18h12"></path>332      </svg>333      <div>Community</div>334    </div>335    <div class="tab">336      <svg viewBox="0 0 24 24" fill="none" stroke="#C6C7CC" stroke-width="2" stroke-linecap="round">337        <path d="M6 6h12l-2 10H8L6 6z"></path>338        <circle cx="9" cy="20" r="2"></circle>339        <circle cx="17" cy="20" r="2"></circle>340      </svg>341      <div>My Cart</div>342    </div>343    <div class="tab">344      <div class="profile-dot">I</div>345      <div>Profile</div>346    </div>347  </div>348 349  <!-- Home Indicator -->350  <div class="home-indicator"></div>351 352</div>353</body>354</html>