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>Sheets Home UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1f1f1f; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F7F6FA;15  }16 17  /* Top search area */18  .top-area { padding: 120px 40px 0 40px; }19  .search-bar {20    width: 1000px;21    height: 96px;22    border-radius: 48px;23    background: #E5E7E1;24    display: flex;25    align-items: center;26    padding: 0 24px;27    box-sizing: border-box;28    gap: 24px;29  }30  .search-text {31    flex: 1;32    font-size: 36px;33    color: #5f6368;34  }35  .folder-icon { width: 48px; height: 48px; }36  .avatar {37    width: 88px; height: 88px;38    background: #138C8C;39    color: #ffffff;40    border-radius: 44px;41    display: flex; align-items: center; justify-content: center;42    font-weight: 700; font-size: 40px;43  }44 45  /* Section header */46  .section-header {47    margin: 40px 40px 0 40px;48    display: flex;49    align-items: center;50    justify-content: space-between;51  }52  .section-left {53    display: flex; align-items: center; gap: 12px;54    font-size: 34px; color: #3c4043;55  }56  .list-toggle {57    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;58  }59 60  /* Cards grid */61  .cards {62    margin: 24px 40px;63    display: grid;64    grid-template-columns: 1fr 1fr;65    column-gap: 36px;66  }67  .card {68    width: 480px;69  }70  .thumb {71    width: 480px;72    height: 300px;73    border-radius: 32px;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex; align-items: center; justify-content: center;77    color: #757575; font-size: 32px;78    position: relative;79    box-sizing: border-box;80  }81  .check-badge {82    position: absolute;83    right: 20px; bottom: 20px;84    width: 72px; height: 72px; border-radius: 36px;85    background: #5f6368;86    display: flex; align-items: center; justify-content: center;87  }88  .meta {89    margin-top: 24px;90    display: flex; align-items: flex-start; justify-content: space-between;91  }92  .title-row {93    display: flex; gap: 16px; align-items: center;94  }95  .sheet-icon {96    width: 52px; height: 52px; background: #0F9D58; border-radius: 8px;97    display: flex; align-items: center; justify-content: center;98  }99  .card-title {100    font-size: 36px; line-height: 42px; color: #202124;101  }102  .ellipsis {103    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;104  }105 106  /* Floating action button */107  .fab {108    position: absolute;109    right: 48px;110    bottom: 180px;111    width: 148px; height: 148px;112    background: #F9C9E1;113    border-radius: 40px;114    box-shadow: 0 12px 24px rgba(0,0,0,0.15);115    display: flex; align-items: center; justify-content: center;116  }117 118  /* Home indicator (system) */119  .home-indicator {120    position: absolute;121    bottom: 88px; left: 50%;122    transform: translateX(-50%);123    width: 480px; height: 16px;124    background: #7a7a7a; border-radius: 8px;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <div class="top-area">132    <div class="search-bar">133      <!-- Hamburger -->134      <svg width="48" height="48" viewBox="0 0 32 32">135        <path d="M4 8h24M4 16h24M4 24h24" stroke="#202124" stroke-width="2.5" stroke-linecap="round"/>136      </svg>137      <div class="search-text">Search Sheets</div>138      <!-- Folder icon -->139      <svg class="folder-icon" viewBox="0 0 32 32">140        <path d="M3 24V9a2 2 0 0 1 2-2h7l3 3h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="#5f6368"/>141      </svg>142      <!-- Avatar -->143      <div class="avatar">N</div>144    </div>145  </div>146 147  <div class="section-header">148    <div class="section-left">149      <span>Last opened by me</span>150      <svg width="32" height="32" viewBox="0 0 32 32">151        <path d="M8 12l8 8 8-8" fill="none" stroke="#5f6368" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>152      </svg>153    </div>154    <div class="list-toggle">155      <svg width="40" height="40" viewBox="0 0 32 32">156        <path d="M6 8h18M6 16h18M6 24h18" stroke="#5f6368" stroke-width="2.5" stroke-linecap="round"/>157        <circle cx="26" cy="8" r="2" fill="#5f6368"/>158        <circle cx="26" cy="16" r="2" fill="#5f6368"/>159        <circle cx="26" cy="24" r="2" fill="#5f6368"/>160      </svg>161    </div>162  </div>163 164  <div class="cards">165    <!-- Card 1 -->166    <div class="card">167      <div class="thumb">168        [IMG: New spreadsheet placeholder]169        <div class="check-badge">170          <svg width="40" height="40" viewBox="0 0 32 32">171            <path d="M8 16l5 5 11-11" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>172          </svg>173        </div>174      </div>175      <div class="meta">176        <div class="title-row">177          <div class="sheet-icon">178            <svg width="32" height="32" viewBox="0 0 32 32">179              <rect x="6" y="6" width="20" height="20" rx="3" ry="3" fill="#ffffff"/>180              <path d="M11 11h10M11 16h10M11 21h10" stroke="#0F9D58" stroke-width="2"/>181            </svg>182          </div>183          <div class="card-title">Untitled<br>spreadsheet</div>184        </div>185        <div class="ellipsis">186          <svg width="22" height="32" viewBox="0 0 8 24">187            <circle cx="4" cy="4" r="2.2" fill="#5f6368"/>188            <circle cx="4" cy="12" r="2.2" fill="#5f6368"/>189            <circle cx="4" cy="20" r="2.2" fill="#5f6368"/>190          </svg>191        </div>192      </div>193    </div>194 195    <!-- Card 2 -->196    <div class="card">197      <div class="thumb">198        [IMG: Spreadsheet thumbnail]199        <div class="check-badge">200          <svg width="40" height="40" viewBox="0 0 32 32">201            <path d="M8 16l5 5 11-11" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>202          </svg>203        </div>204      </div>205      <div class="meta">206        <div class="title-row">207          <div class="sheet-icon">208            <svg width="32" height="32" viewBox="0 0 32 32">209              <rect x="6" y="6" width="20" height="20" rx="3" ry="3" fill="#ffffff"/>210              <path d="M11 11h10M11 16h10M11 21h10" stroke="#0F9D58" stroke-width="2"/>211            </svg>212          </div>213          <div class="card-title">Daily<br>attendance</div>214        </div>215        <div class="ellipsis">216          <svg width="22" height="32" viewBox="0 0 8 24">217            <circle cx="4" cy="4" r="2.2" fill="#5f6368"/>218            <circle cx="4" cy="12" r="2.2" fill="#5f6368"/>219            <circle cx="4" cy="20" r="2.2" fill="#5f6368"/>220          </svg>221        </div>222      </div>223    </div>224  </div>225 226  <!-- Floating add button -->227  <div class="fab">228    <svg width="64" height="64" viewBox="0 0 32 32">229      <path d="M16 6v20M6 16h20" stroke="#2c2431" stroke-width="3.5" stroke-linecap="round"/>230    </svg>231  </div>232 233  <div class="home-indicator"></div>234</div>235</body>236</html>