GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI Rendering</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F6F5F9;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 92px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    color: #4A4A4A;27    font-size: 36px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 24px;33  }34  .status-icon {35    width: 40px; height: 40px; background: #6B6B6B; border-radius: 6px;36  }37 38  /* Search bar area */39  .search-area {40    position: absolute;41    top: 92px;42    left: 0;43    width: 100%;44    padding: 28px 36px 20px;45    box-sizing: border-box;46  }47  .search-row {48    display: flex;49    align-items: center;50    justify-content: space-between;51  }52  .search-pill {53    flex: 1;54    display: flex;55    align-items: center;56    gap: 26px;57    background: #ECEAF5;58    height: 96px;59    border-radius: 48px;60    padding: 0 34px;61    color: #5E5E6E;62    font-size: 36px;63  }64  .hamburger svg { width: 48px; height: 48px; }65  .avatar {66    width: 86px; height: 86px; border-radius: 43px;67    background: #5FA5AA; color: #FFFFFF;68    display: flex; align-items: center; justify-content: center;69    font-weight: 700; margin-left: 24px;70  }71 72  /* Tabs */73  .tabs {74    margin-top: 28px;75    display: flex; gap: 80px; padding: 0 6px; color: #6A5AA3; font-size: 38px;76  }77  .tab {78    position: relative; color: #6D66B4;79  }80  .tab.inactive { color: #8B8B95; }81  .tab.active::after {82    content: "";83    position: absolute; left: 0; bottom: -16px;84    width: 180px; height: 8px; background: #6D66B4; border-radius: 4px;85  }86  .divider {87    margin-top: 24px; height: 2px; background: #E1E1E8;88  }89 90  /* Sub header "Name" and toggle */91  .subheader {92    display: flex; align-items: center; justify-content: space-between;93    padding: 26px 36px 6px; color: #3D3D40; font-size: 36px;94  }95  .name-sort { display: flex; align-items: center; gap: 12px; }96  .toggle {97    width: 72px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center;98  }99  .toggle svg { width: 44px; height: 44px; }100  .content {101    padding: 16px 36px 0;102  }103 104  /* Grid of items */105  .grid {106    display: grid;107    grid-template-columns: 1fr 1fr;108    gap: 80px 60px;109  }110  .card {111    min-height: 380px;112  }113  .folder-icon {114    width: 360px; height: 220px;115    display: flex; align-items: center; justify-content: center;116  }117  .folder-icon svg { width: 320px; height: 200px; }118  .file-preview {119    width: 420px; height: 260px; background: #E0E0E0;120    border: 1px solid #BDBDBD; border-radius: 28px;121    display: flex; align-items: center; justify-content: center;122    color: #757575; font-size: 30px;123  }124  .title-row {125    display: flex; align-items: flex-start; justify-content: space-between;126    margin-top: 20px;127  }128  .title {129    max-width: 420px;130    font-size: 36px; color: #2F2F35; line-height: 1.1;131  }132  .dots { width: 18px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }133  .dot { width: 10px; height: 10px; background: #6F6F78; border-radius: 50%; }134 135  /* Small doc/pdf icon next to title */136  .title-with-icon { display: flex; align-items: center; gap: 14px; }137  .doc-icon, .pdf-icon {138    width: 36px; height: 36px; border-radius: 6px;139    display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700;140  }141  .doc-icon { background: #4C7AF2; }142  .pdf-icon { background: #D35A43; }143 144  /* Floating action button */145  .fab {146    position: absolute;147    right: 44px;148    bottom: 340px;149    width: 132px; height: 132px; border-radius: 28px;150    background: #DED9F1;151    display: flex; align-items: center; justify-content: center;152    box-shadow: 0 8px 20px rgba(0,0,0,0.12);153  }154  .fab svg { width: 60px; height: 60px; fill: #3A3A44; }155 156  /* Bottom nav */157  .bottom-nav {158    position: absolute; left: 0; bottom: 0; width: 100%; height: 220px;159    background: #ECEAF5;160    border-top-left-radius: 0; border-top-right-radius: 0;161    box-sizing: border-box;162    padding-top: 30px;163  }164  .nav-items {165    display: flex; justify-content: space-around; align-items: flex-end;166    padding: 0 40px;167  }168  .nav-item { width: 180px; text-align: center; color: #63637A; font-size: 30px; }169  .nav-icon {170    width: 88px; height: 88px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;171  }172  .nav-icon svg { width: 54px; height: 54px; fill: #5F5F6E; }173  .active .nav-icon {174    background: #D7D2F0; border-radius: 30px;175  }176  .active .nav-icon svg { fill: #3B356D; }177  .gesture {178    position: absolute; left: 50%; transform: translateX(-50%);179    bottom: 18px; width: 240px; height: 12px; background: #CFCFD7; border-radius: 8px;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="status-bar">188    <div>10:17</div>189    <div class="status-right">190      <div>ovo 90°</div>191      <div class="status-icon"></div>192      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#6B6B6B" d="M17 18h2a2 2 0 0 0 2-2V6h-2v10h-2zM3 18h12V8H3v10zm2-8h8v6H5V10z"/></svg>193      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#6B6B6B" d="M12 22a1 1 0 0 0 1-1V4a1 1 0 0 0-2 0v17a1 1 0 0 0 1 1z"/></svg>194    </div>195  </div>196 197  <!-- Search bar / toolbar -->198  <div class="search-area">199    <div class="search-row">200      <div class="search-pill">201        <div class="hamburger">202          <svg viewBox="0 0 24 24"><path fill="#4A4A4A" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>203        </div>204        <div>Search in Drive</div>205      </div>206      <div class="avatar">C</div>207    </div>208 209    <div class="tabs">210      <div class="tab active">My Drive</div>211      <div class="tab inactive">Computers</div>212    </div>213    <div class="divider"></div>214  </div>215 216  <!-- Subheader -->217  <div class="subheader">218    <div class="name-sort">219      <span>Name</span>220      <svg width="24" height="24" viewBox="0 0 24 24"><path fill="#4A4A4A" d="M7 14l5-5 5 5H7z"/></svg>221    </div>222    <div class="toggle">223      <svg viewBox="0 0 24 24">224        <path fill="#4A4A4A" d="M3 5h8v4H3V5zm10 0h8v4h-8V5zM3 11h8v4H3v-4zm10 0h8v4h-8v-4zM3 17h8v4H3v-4zm10 0h8v4h-8v-4z"/>225      </svg>226    </div>227  </div>228 229  <!-- Content grid -->230  <div class="content">231    <div class="grid">232 233      <!-- Folder card 1 -->234      <div class="card">235        <div class="folder-icon">236          <svg viewBox="0 0 64 48">237            <path fill="#3E3E43" d="M8 10h16l5 6h27c3 0 5 2 5 5v17c0 3-2 5-5 5H8c-3 0-5-2-5-5V15c0-3 2-5 5-5z"/>238            <path fill="#3E3E43" d="M8 10h18v6H8z"/>239          </svg>240        </div>241        <div class="title-row">242          <div class="title">Official_Docs</div>243          <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>244        </div>245      </div>246 247      <!-- Folder card 2 -->248      <div class="card">249        <div class="folder-icon">250          <svg viewBox="0 0 64 48">251            <path fill="#3E3E43" d="M8 10h16l5 6h27c3 0 5 2 5 5v17c0 3-2 5-5 5H8c-3 0-5-2-5-5V15c0-3 2-5 5-5z"/>252            <path fill="#3E3E43" d="M8 10h18v6H8z"/>253          </svg>254        </div>255        <div class="title-row">256          <div class="title">YMCA 2023</div>257          <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>258        </div>259      </div>260 261      <!-- File card 1 -->262      <div class="card">263        <div class="file-preview">[IMG: Document Preview]</div>264        <div class="title-row">265          <div class="title-with-icon">266            <div class="doc-icon">▯</div>267            <div class="title">BACKUP_REMINDER_M...</div>268          </div>269          <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>270        </div>271      </div>272 273      <!-- File card 2 -->274      <div class="card">275        <div class="file-preview">[IMG: PDF Preview]</div>276        <div class="title-row">277          <div class="title-with-icon">278            <div class="pdf-icon">PDF</div>279            <div class="title">Presentation_sample.pdf</div>280          </div>281          <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>282        </div>283      </div>