GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Generated UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #F5EFEC;19  }20 21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 150px;27    background: #E9E0D9;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    box-sizing: border-box;33    color: #2F3945;34    font-weight: 600;35  }36  .status-left, .status-right {37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .dot {42    width: 36px;43    height: 36px;44    background: #1F2328;45    border-radius: 50%;46  }47  .status-icon {48    width: 40px;49    height: 40px;50    background: #D0CBC6;51    border-radius: 20px;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #626A75;56    font-size: 22px;57  }58 59  /* Cards */60  .card {61    position: absolute;62    left: 40px;63    right: 40px;64    background: #FFFFFF;65    border-radius: 40px;66    box-shadow: 0 12px 24px rgba(0,0,0,0.06);67    padding: 30px 36px;68    box-sizing: border-box;69    display: flex;70    align-items: center;71    gap: 30px;72    color: #2F3945;73  }74  .card .img {75    width: 140px;76    height: 140px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    border-radius: 50%;80    display: flex;81    align-items: center;82    justify-content: center;83    color: #757575;84    font-size: 24px;85    text-align: center;86    padding: 0 10px;87    box-sizing: border-box;88  }89  .card .title {90    font-size: 48px;91    font-weight: 700;92    letter-spacing: 0.5px;93  }94  .streak-days {95    margin-top: 8px;96    display: flex;97    gap: 18px;98    flex-wrap: wrap;99  }100  .day-chip {101    width: 68px;102    height: 68px;103    border-radius: 34px;104    border: 3px solid #2F3945;105    display: flex;106    align-items: center;107    justify-content: center;108    font-weight: 700;109    color: #2F3945;110    font-size: 30px;111  }112  .day-chip.filled {113    background: #CDD3DB;114    border-color: transparent;115    color: #2F3945;116  }117 118  /* Badges section */119  .section-title {120    position: absolute;121    left: 48px;122    font-size: 60px;123    font-weight: 800;124    color: #2F3945;125  }126  .badge-img {127    position: absolute;128    left: 60px;129    width: 240px;130    height: 240px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    border-radius: 16px;134    display: flex;135    align-items: center;136    justify-content: center;137    color: #757575;138    font-size: 28px;139  }140 141  /* Menu list card */142  .menu-card {143    position: absolute;144    left: 40px;145    right: 40px;146    background: #FFFFFF;147    border-radius: 40px;148    box-shadow: 0 12px 24px rgba(0,0,0,0.06);149    overflow: hidden;150  }151  .menu-item {152    display: grid;153    grid-template-columns: 120px 1fr 80px;154    align-items: center;155    padding: 40px 30px;156    box-sizing: border-box;157    color: #2F3945;158  }159  .menu-item + .menu-item {160    border-top: 1px solid #E7E7E7;161  }162  .menu-icon {163    display: flex;164    align-items: center;165    justify-content: center;166  }167  .menu-text .label {168    font-size: 48px;169    font-weight: 800;170    margin-bottom: 8px;171  }172  .menu-text .sub {173    font-size: 34px;174    color: #7C8796;175  }176  .chev {177    display: flex;178    align-items: center;179    justify-content: flex-end;180  }181  .chev svg {182    width: 36px;183    height: 36px;184    stroke: #7C8796;185    stroke-width: 6;186    fill: none;187  }188 189  /* Bottom navigation */190  .bottom-nav {191    position: absolute;192    bottom: 120px;193    left: 0;194    width: 1080px;195    height: 180px;196    background: #FFFFFF;197    border-top-left-radius: 30px;198    border-top-right-radius: 30px;199    box-shadow: 0 -10px 24px rgba(0,0,0,0.06);200    display: grid;201    grid-template-columns: repeat(4, 1fr);202    align-items: center;203    padding: 10px 30px 0 30px;204    box-sizing: border-box;205    color: #2F3945;206  }207  .nav-item {208    display: flex;209    flex-direction: column;210    align-items: center;211    gap: 16px;212  }213  .nav-item svg {214    width: 64px;215    height: 64px;216    stroke: #2F3945;217    stroke-width: 8;218    fill: none;219  }220  .nav-item .label {221    font-size: 34px;222    color: #2F3945;223    font-weight: 600;224  }225  .nav-item.active svg {226    stroke: #F07F5E;227  }228  .nav-item.active .label {229    color: #F07F5E;230  }231 232  .gesture-bar {233    position: absolute;234    bottom: 40px;235    left: 50%;236    transform: translateX(-50%);237    width: 320px;238    height: 16px;239    background: #D1D6DD;240    border-radius: 8px;241  }242</style>243</head>244<body>245<div id="render-target">246  <!-- Status bar -->247  <div class="status-bar">248    <div class="status-left">249      <div style="font-size:48px;">10:27</div>250      <div class="dot"></div>251      <div class="status-icon">oyo</div>252      <div class="status-icon">fc</div>253      <div style="width:12px;height:12px;background:#6F6F6F;border-radius:50%;"></div>254    </div>255    <div class="status-right">256      <div class="status-icon">wifi</div>257      <div class="status-icon">🔋</div>258    </div>259  </div>260 261  <!-- First summary card -->262  <div class="card" style="top: 190px; height: 200px;">263    <div class="img">[IMG: Goal Icon]</div>264    <div>265      <div class="title">1 Goal Completed</div>266    </div>267  </div>268 269  <!-- Second summary card -->270  <div class="card" style="top: 430px; height: 260px;">271    <div class="img">[IMG: Streak Plant]</div>272    <div style="flex:1;">273      <div class="title">0 Days Streak</div>274      <div class="streak-days">275        <div class="day-chip">F</div>276        <div class="day-chip">S</div>277        <div class="day-chip">S</div>278        <div class="day-chip">S</div>279        <div class="day-chip">M</div>280        <div class="day-chip">T</div>281        <div class="day-chip">W</div>282        <div class="day-chip filled">T</div>283      </div>284    </div>285  </div>286 287  <!-- Badges section -->288  <div class="section-title" style="top: 740px;">Badges</div>289  <div class="badge-img" style="top: 900px;">[IMG: Ribbon Badge]</div>290 291  <!-- Menu list card -->292  <div class="menu-card" style="top: 1180px;">293    <!-- Stats -->294    <div class="menu-item">295      <div class="menu-icon">296        <svg viewBox="0 0 64 64">297          <path d="M6 42 L20 26 L30 34 L50 14" stroke="#2F3945" stroke-width="6" fill="none"/>298        </svg>299      </div>300      <div class="menu-text">301        <div class="label">Stats</div>302        <div class="sub">Your lifetime stats</div>303      </div>304      <div class="chev">305        <svg viewBox="0 0 20 20"><path d="M4 2 L14 10 L4 18"/></svg>306      </div>307    </div>308    <!-- History -->309    <div class="menu-item">310      <div class="menu-icon">311        <svg viewBox="0 0 64 64">312          <circle cx="32" cy="32" r="22" stroke="#2F3945" stroke-width="6" fill="none"/>313          <path d="M32 18 L32 34 L44 40" stroke="#2F3945" stroke-width="6" fill="none"/>314        </svg>315      </div>316      <div class="menu-text">317        <div class="label">History</div>318        <div class="sub">Your activity within the app</div>319      </div>320      <div class="chev">321        <svg viewBox="0 0 20 20"><path d="M4 2 L14 10 L4 18"/></svg>322      </div>323    </div>324    <!-- Leaderboard -->325    <div class="menu-item">326      <div class="menu-icon">327        <svg viewBox="0 0 64 64">328          <rect x="10" y="34" width="12" height="16" stroke="#2F3945" stroke-width="6" fill="none"/>329          <rect x="26" y="24" width="12" height="26" stroke="#2F3945" stroke-width="6" fill="none"/>330          <rect x="42" y="30" width="12" height="20" stroke="#2F3945" stroke-width="6" fill="none"/>331        </svg>332      </div>333      <div class="menu-text">334        <div class="label">Leaderboard</div>335        <div class="sub">Track your progress against the community</div>336      </div>337      <div class="chev">338        <svg viewBox="0 0 20 20"><path d="M4 2 L14 10 L4 18"/></svg>339      </div>340    </div>341    <!-- Manage Goal -->342    <div class="menu-item">343      <div class="menu-icon">344        <svg viewBox="0 0 64 64">345          <path d="M14 48 L50 48 L40 34 L24 34 Z" stroke="#2F3945" stroke-width="6" fill="none"/>346          <path d="M36 22 L44 18 L44 28" stroke="#2F3945" stroke-width="6" fill="none"/>347        </svg>348      </div>349      <div class="menu-text">350        <div class="label">Manage Goal</div>351        <div class="sub">Cancel or pick a new goal</div>352      </div>353      <div class="chev">354        <svg viewBox="0 0 20 20"><path