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>ColorNote Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #202124;15    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #E0E0E0;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0; right: 0;23    height: 120px;24    background: #131313;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    font-size: 36px;30    color: #fff;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  /* App bar */38  .topbar {39    position: absolute;40    top: 120px;41    left: 0; right: 0;42    height: 160px;43    background: #1a1a1a;44    border-bottom: 1px solid #2c2c2c;45    display: flex;46    align-items: center;47    justify-content: space-between;48    padding: 0 40px;49  }50  .brand {51    font-size: 64px;52    font-weight: 600;53    letter-spacing: 0.5px;54    display: flex;55    align-items: baseline;56    gap: 10px;57  }58  .brand .color { color: #9e9e9e; font-weight: 500; }59  .brand .note  { color: #e0e0e0; font-weight: 700; }60  .top-actions {61    display: flex;62    align-items: center;63    gap: 28px;64  }65  .grid-icon {66    width: 72px;67    height: 72px;68    display: grid;69    grid-template-columns: repeat(2, 1fr);70    grid-template-rows: repeat(2, 1fr);71    gap: 6px;72  }73  .grid-icon div { border-radius: 6px; }74  .dot-icon svg { display: block; }75  /* Sort bar */76  .sort-bar {77    position: absolute;78    top: 300px;79    left: 20px;80    width: 1040px;81    height: 96px;82    background: #3a3a3a;83    border-radius: 8px;84    display: flex;85    align-items: center;86    padding: 0 28px;87    box-sizing: border-box;88    color: #d9d9d9;89    font-size: 38px;90    justify-content: space-between;91  }92  .sort-text { opacity: 0.95; }93  /* Main empty state */94  .empty-area {95    position: absolute;96    top: 980px;97    left: 50%;98    transform: translateX(-50%);99    text-align: center;100  }101  .img-placeholder {102    width: 420px;103    height: 320px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #757575;110    font-size: 36px;111    border-radius: 8px;112  }113  .empty-text {114    margin-top: 24px;115    font-size: 54px;116    font-weight: 700;117    color: #9e9e9e;118  }119  /* Bottom navigation */120  .bottom-nav {121    position: absolute;122    left: 0; right: 0; bottom: 0;123    height: 220px;124    background: #151515;125    border-top: 1px solid #0e0e0e;126    box-shadow: inset 0 10px 20px rgba(0,0,0,0.25);127  }128  .nav-content {129    position: absolute;130    bottom: 34px;131    left: 0; right: 0;132    display: flex;133    justify-content: space-between;134    align-items: center;135    padding: 0 130px;136  }137  .nav-group {138    display: flex;139    align-items: center;140    gap: 140px;141  }142  .nav-icon {143    width: 88px;144    height: 88px;145    display: flex;146    align-items: center;147    justify-content: center;148  }149  .nav-icon svg { width: 76px; height: 76px; }150  /* Floating action button */151  .fab {152    position: absolute;153    left: 50%;154    bottom: 160px;155    transform: translateX(-50%);156    width: 160px;157    height: 160px;158    background: #8BD9D0;159    border-radius: 50%;160    display: flex;161    align-items: center;162    justify-content: center;163    box-shadow: 0 10px 0 #0d0d0d, 0 18px 28px rgba(0,0,0,0.55);164    border: 4px solid #0d0d0d;165  }166  /* Gesture bar */167  .gesture-bar {168    position: absolute;169    bottom: 18px;170    left: 50%;171    transform: translateX(-50%);172    width: 280px;173    height: 12px;174    background: #eaeaea;175    border-radius: 12px;176    opacity: 0.9;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div class="status-left">11:32</div>186    <div class="status-right">187      <!-- Simple Wi-Fi -->188      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">189        <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>190        <path d="M5 11c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>191        <path d="M8 14c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>192        <circle cx="12" cy="18" r="1.6" fill="#ffffff"/>193      </svg>194      <!-- Battery -->195      <svg width="56" height="48" viewBox="0 0 28 18" fill="none">196        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>197        <rect x="3" y="5" width="16" height="8" fill="#ffffff"/>198        <rect x="24" y="6" width="3" height="6" rx="1" fill="#ffffff"/>199      </svg>200    </div>201  </div>202 203  <!-- Top app bar -->204  <div class="topbar">205    <div class="brand">206      <span class="color">Color</span>207      <span class="note">Note</span>208    </div>209    <div class="top-actions">210      <div class="grid-icon">211        <div style="background:#FF5252;"></div>212        <div style="background:#FFD54F;"></div>213        <div style="background:#4CAF50;"></div>214        <div style="background:#42A5F5;"></div>215      </div>216      <div class="dot-icon">217        <svg width="40" height="68" viewBox="0 0 8 20" fill="#d9d9d9">218          <circle cx="4" cy="3" r="2.2"></circle>219          <circle cx="4" cy="10" r="2.2"></circle>220          <circle cx="4" cy="17" r="2.2"></circle>221        </svg>222      </div>223    </div>224  </div>225 226  <!-- Sort bar -->227  <div class="sort-bar">228    <div class="sort-text">Sort by modified time</div>229    <svg width="36" height="36" viewBox="0 0 24 24" fill="#d9d9d9">230      <path d="M6 9l6 6 6-6" />231    </svg>232  </div>233 234  <!-- Main empty state -->235  <div class="empty-area">236    <div class="img-placeholder">[IMG: Add note icon]</div>237    <div class="empty-text">Add note</div>238  </div>239 240  <!-- Floating Action Button -->241  <div class="fab">242    <svg width="72" height="72" viewBox="0 0 24 24" fill="none">243      <path d="M12 5v14M5 12h14" stroke="#0f0f0f" stroke-width="3.2" stroke-linecap="round"/>244    </svg>245  </div>246 247  <!-- Bottom Navigation -->248  <div class="bottom-nav">249    <div class="nav-content">250      <div class="nav-group">251        <!-- Notes/List icon -->252        <div class="nav-icon">253          <svg viewBox="0 0 24 24">254            <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#8BD9D0" stroke-width="2"/>255            <path d="M7 8h10M7 12h10M7 16h6" stroke="#8BD9D0" stroke-width="2" stroke-linecap="round"/>256          </svg>257        </div>258        <!-- Calendar icon -->259        <div class="nav-icon">260          <svg viewBox="0 0 24 24">261            <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#bdbdbd" stroke-width="2"/>262            <path d="M3 9h18" stroke="#bdbdbd" stroke-width="2"/>263            <rect x="6" y="2" width="3" height="4" rx="1" fill="#bdbdbd"/>264            <rect x="15" y="2" width="3" height="4" rx="1" fill="#bdbdbd"/>265            <text x="12" y="17" text-anchor="middle" font-size="9" fill="#bdbdbd" font-weight="700">31</text>266          </svg>267        </div>268      </div>269      <div class="nav-group">270        <!-- Search icon -->271        <div class="nav-icon">272          <svg viewBox="0 0 24 24" fill="none">273            <circle cx="11" cy="11" r="6" stroke="#bdbdbd" stroke-width="2"/>274            <path d="M16 16l5 5" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/>275          </svg>276        </div>277        <!-- Menu icon -->278        <div class="nav-icon">279          <svg viewBox="0 0 24 24" fill="none">280            <path d="M4 7h16M4 12h16M4 17h16" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/>281          </svg>282        </div>283      </div>284    </div>285    <div class="gesture-bar"></div>286  </div>287 288</div>289</body>290</html>