GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</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: #1f1f1f;14    color: #eaeaea;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #0d0d0d;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31  }32  .status-left { font-size: 40px; color: #fff; }33  .status-right { display: flex; align-items: center; gap: 26px; }34  .sb-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }35  .sb-icon svg { width: 40px; height: 40px; }36 37  /* Header area */38  .header {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 320px;44    background: #262626;45    border-bottom: 1px solid #3a3a3a;46    box-sizing: border-box;47    padding: 40px 48px 20px 48px;48  }49  .notch {50    position: absolute;51    top: 8px;52    left: 50%;53    transform: translateX(-50%);54    width: 180px;55    height: 14px;56    background: #6d6d6d;57    border-radius: 8px;58    opacity: 0.6;59  }60  .profile-row { display: grid; grid-template-columns: 120px 1fr 80px; align-items: center; column-gap: 28px; }61  .avatar {62    width: 120px; height: 120px; border-radius: 60px;63    background: #cf4a2f; display: flex; align-items: center; justify-content: center;64    font-weight: 700; font-size: 56px; color: #fff;65  }66  .name-wrap { display: flex; flex-direction: column; }67  .name {68    font-size: 54px; font-weight: 700; line-height: 1.1; color: #f5f5f5;69  }70  .quota-row { display: inline-flex; align-items: center; gap: 14px; margin-top: 12px; color: #bdbdbd; font-size: 30px; }71  .settings {72    width: 70px; height: 70px; border-radius: 18px; background: #333; display: flex; align-items: center; justify-content: center;73    font-size: 42px;74  }75 76  /* Content area */77  .content {78    position: absolute;79    top: 440px;80    left: 0;81    width: 100%;82    padding: 0 48px;83    box-sizing: border-box;84  }85 86  .upgrade-card {87    display: flex; align-items: center; gap: 28px;88    background: #2e2e2e; border-radius: 28px;89    padding: 26px 32px;90    margin: 22px 0 36px 0;91  }92  .star-icon svg { width: 56px; height: 56px; }93  .upgrade-title { font-size: 40px; font-weight: 700; }94  .upgrade-sub { font-size: 28px; color: #bfbfbf; margin-top: 6px; }95 96  /* Menu */97  .menu { margin-top: 12px; }98  .menu-item {99    display: grid; grid-template-columns: 80px 1fr; align-items: center;100    padding: 28px 20px;101    border-radius: 16px;102    margin-bottom: 8px;103  }104  .menu-item.active { background: #555555; }105  .menu-item .label { font-size: 36px; }106  .menu-icon svg { width: 60px; height: 60px; }107 108  /* Projects header */109  .projects-header {110    display: grid;111    grid-template-columns: auto auto 1fr auto auto;112    align-items: center;113    column-gap: 20px;114    margin-top: 44px;115    padding-right: 8px;116  }117  .projects-header .title { font-size: 44px; font-weight: 700; }118  .badge {119    font-size: 24px; color: #cfcfcf; background: #3a3a3a; border-radius: 20px;120    padding: 10px 16px;121  }122  .actions { display: inline-flex; align-items: center; gap: 22px; }123  .icon-btn { width: 56px; height: 56px; border-radius: 16px; background: #333; display: flex; align-items: center; justify-content: center; }124  .icon-btn svg { width: 36px; height: 36px; }125 126  /* Project items */127  .project-item {128    display: grid; grid-template-columns: 34px 1fr; align-items: center;129    gap: 22px; padding: 26px 8px; margin-top: 6px;130  }131  .dot {132    width: 22px; height: 22px; border-radius: 11px; background: #9e9e9e;133  }134  .project-item .text { font-size: 38px; }135 136  .pencil {137    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;138  }139  .manage-row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 20px; padding: 26px 8px; margin-top: 10px; }140  .manage-row .text { font-size: 38px; }141 142  /* Bottom gesture bar */143  .gesture-bar {144    position: absolute;145    bottom: 40px;146    left: 50%;147    transform: translateX(-50%);148    width: 360px; height: 16px; background: #e9e9e9; border-radius: 10px;149    opacity: 0.95;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status bar -->157  <div class="status-bar">158    <div class="status-left">9:02</div>159    <div class="status-right">160      <div class="sb-icon">161        <!-- simple bell-like dot -->162        <svg viewBox="0 0 24 24">163          <circle cx="12" cy="12" r="8" fill="#ffffff" opacity="0.6"></circle>164        </svg>165      </div>166      <div class="sb-icon">167        <!-- WiFi simplified -->168        <svg viewBox="0 0 24 24">169          <path d="M3 9c4-4 14-4 18 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"/>170          <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"/>171          <circle cx="12" cy="16" r="2" fill="#fff"/>172        </svg>173      </div>174      <div class="sb-icon">175        <!-- Battery simplified -->176        <svg viewBox="0 0 32 24">177          <rect x="2" y="5" width="24" height="14" rx="3" stroke="#fff" stroke-width="2" fill="none"/>178          <rect x="4" y="7" width="18" height="10" fill="#fff"/>179          <rect x="26" y="9" width="4" height="6" rx="1" fill="#fff"/>180        </svg>181      </div>182    </div>183  </div>184 185  <!-- Header area -->186  <div class="header">187    <div class="notch"></div>188    <div class="profile-row">189      <div class="avatar">C</div>190      <div class="name-wrap">191        <div class="name">dbwscratch.test.id11</div>192        <div class="quota-row">193          <!-- refresh icon -->194          <svg viewBox="0 0 24 24" width="28" height="28">195            <path d="M12 5v4l3-3M12 19v-4l-3 3" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"/>196            <circle cx="12" cy="12" r="7" stroke="#bdbdbd" stroke-width="2" fill="none" opacity="0.8"/>197          </svg>198          <span>0/5</span>199        </div>200      </div>201      <div class="settings">⚙️</div>202    </div>203  </div>204 205  <!-- Content -->206  <div class="content">207    <div class="upgrade-card">208      <div class="star-icon">209        <svg viewBox="0 0 24 24">210          <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9-6.2-3.3-6.2 3.3 1.2-6.9-5-4.8 6.9-1z" fill="#F7B500"/>211        </svg>212      </div>213      <div>214        <div class="upgrade-title">Upgrade to Pro</div>215        <div class="upgrade-sub">Set up reminders, add extra projects, and more.</div>216      </div>217    </div>218 219    <div class="menu">220      <div class="menu-item">221        <div class="menu-icon">222          <!-- Inbox icon (blue) -->223          <svg viewBox="0 0 24 24">224            <rect x="3" y="5" width="18" height="12" rx="3" stroke="#5AA7FF" stroke-width="2" fill="none"/>225            <path d="M4 13h5l2 2h2l2-2h5" stroke="#5AA7FF" stroke-width="2" fill="none"/>226          </svg>227        </div>228        <div class="label">Inbox</div>229      </div>230 231      <div class="menu-item active">232        <div class="menu-icon">233          <!-- Today icon (green T) -->234          <svg viewBox="0 0 24 24">235            <rect x="3" y="3" width="18" height="18" rx="3" stroke="#3BD16F" stroke-width="2" fill="none"/>236            <rect x="6" y="7" width="12" height="2" fill="#3BD16F"/>237            <rect x="11" y="9" width="2" height="8" fill="#3BD16F"/>238          </svg>239        </div>240        <div class="label">Today</div>241      </div>242 243      <div class="menu-item">244        <div class="menu-icon">245          <!-- Upcoming icon (purple calendar/calculator) -->246          <svg viewBox="0 0 24 24">247            <rect x="3" y="4" width="18" height="16" rx="3" stroke="#A27EFF" stroke-width="2" fill="none"/>248            <rect x="6" y="8" width="4" height="4" fill="#A27EFF"/>249            <rect x="12" y="8" width="4" height="4" fill="#A27EFF"/>250            <rect x="6" y="13" width="4" height="4" fill="#A27EFF"/>251            <rect x="12" y="13" width="4" height="4" fill="#A27EFF"/>252          </svg>253        </div>254        <div class="label">Upcoming</div>255      </div>256 257      <div class="menu-item">258        <div class="menu-icon">259          <!-- Filters & Labels (orange grid) -->260          <svg viewBox="0 0 24 24">261            <rect x="4" y="4" width="16" height="16" rx="3" stroke="#FF9A2E" stroke-width="2" fill="none"/>262            <rect x="6" y="6" width="6" height="6" fill="#FF9A2E"/>263            <rect x="12" y="6" width="6" height="6" fill="#FF9A2E"/>264            <rect x="6" y="12" width="6" height="6" fill="#FF9A2E"/>265            <rect x="12" y="12" width="6" height="6" fill="#FF9A2E"/>266          </svg>267        </div>268        <div class="label">Filters & Labels</div>269      </div>270    </div>271 272    <div class="projects-header">273      <div class="title">Projects</div>274      <div class="badge">USED: 2/5</div>275      <div></div>276      <div class="icon-btn">277        <!-- plus -->278        <svg viewBox="0 0 24 24">279          <path d="M12 5v14M5 12h14" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>280        </svg>281      </div>282      <div class="icon-btn">283        <!-- chevron up -->284        <svg viewBox="0 0 24 24">285          <path d="M6 14l6-6 6 6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>286        </svg>287      </div>288    </div>289 290    <div class="project-item">291      <div class="dot"></div>292      <div class="text">My work 🎯</div>293    </div>294 295    <div class="project-item">296      <div class="dot"></div>297      <div class="text">Home 🏡</div>298    </div>299 300    <div class="manage-row">301      <div class="pencil">302        <svg viewBox="0 0 24 24">303          <path d="M4 16l8-8 4 4-8 8H4z" fill="#cfcfcf"/>304          <path d="M13 5l3-3 4 4-3 3" stroke="#cfcfcf" stroke-width="2" fill="none"/>305        </svg>306      </div>307      <div class="text">Manage projects</div>308    </div>309 310  </div>311 312  <div class="gesture-bar"></div>313</div>314</body>315</html>