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 - Add Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #111; border-radius: 32px;13    box-shadow: 0 20px 60px rgba(0,0,0,0.45);14    color: #eaeaea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; width: 100%; height: 120px;20    padding: 30px 40px; box-sizing: border-box;21    display: flex; align-items: center; justify-content: space-between;22    color: #f2f2f2; font-size: 42px; letter-spacing: 0.5px;23  }24  .status-left { display: flex; align-items: center; gap: 20px; }25  .status-badge {26    padding: 6px 14px; border-radius: 16px;27    background: #2a2a2a; color: #d9d9d9; font-size: 34px;28  }29  .status-right { display: flex; align-items: center; gap: 24px; }30  .status-icon svg { width: 46px; height: 46px; }31 32  /* Header */33  .app-header {34    position: absolute; top: 140px; left: 40px; right: 40px; height: 120px;35    display: flex; align-items: center; justify-content: space-between;36    color: #9a9a9a;37  }38  .brand { font-size: 68px; font-weight: 600; color: #9a9a9a; }39  .header-right { display: flex; align-items: center; gap: 26px; }40  .dots { display: flex; flex-direction: column; gap: 10px; }41  .dots span { width: 10px; height: 10px; background: #777; border-radius: 50%; display: block; }42 43  /* Sort bar */44  .sort-bar {45    position: absolute; top: 300px; left: 40px; right: 40px; height: 110px;46    background: #222; border: 1px solid #1a1a1a; border-radius: 12px;47    display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;48    color: #c4c4c4; font-size: 40px;49  }50  .sort-bar .arrow { margin-left: 16px; color: #c4c4c4; }51 52  /* Modal */53  .modal {54    position: absolute; left: 50px; top: 1400px; width: 980px;55    background: #4a4a4a; border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,0.6);56    padding: 40px; box-sizing: border-box;57  }58  .modal h2 {59    margin: 0 0 24px; font-size: 64px; color: #ffffff; font-weight: 700;60  }61  .option {62    display: flex; align-items: center; gap: 32px;63    padding: 28px 0; border-radius: 12px; color: #f1f1f1; font-size: 48px;64  }65  .option + .option { margin-top: 10px; }66  .icon-box {67    width: 84px; height: 84px; border-radius: 12px;68    background: #5a5a5a; display: flex; align-items: center; justify-content: center;69  }70  .icon-box svg { width: 60px; height: 60px; }71 72  /* Bottom nav */73  .bottom-bar {74    position: absolute; left: 0; bottom: 120px; width: 100%; height: 200px;75    background: #0e0e0e; border-top: 1px solid #1b1b1b;76    display: flex; align-items: flex-end; justify-content: space-between;77    padding: 0 80px 34px; box-sizing: border-box; color: #93a5a2;78  }79  .nav-icon svg { width: 72px; height: 72px; }80  .nav-icon.dim { color: #6b6b6b; }81 82  .fab {83    position: absolute; left: 50%; transform: translateX(-50%);84    bottom: 230px; width: 170px; height: 170px; border-radius: 50%;85    background: #2f5e59; box-shadow: 0 14px 24px rgba(0,0,0,0.8), inset 0 -6px 0 rgba(0,0,0,0.4);86    display: flex; align-items: center; justify-content: center;87  }88  .fab svg { width: 84px; height: 84px; }89 90  /* Home indicator */91  .home-indicator {92    position: absolute; left: 390px; bottom: 46px;93    width: 300px; height: 12px; background: #fff; border-radius: 8px; opacity: 0.85;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div class="status-left">103      <div>11:34</div>104      <div class="status-badge">M</div>105    </div>106    <div class="status-right">107      <div class="status-icon">108        <!-- Wi-Fi -->109        <svg viewBox="0 0 24 24" fill="none">110          <path d="M2 9c5-4 15-4 20 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>111          <path d="M5 12c4-3 10-3 14 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>112          <path d="M8 15c2-2 6-2 8 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>113          <circle cx="12" cy="18" r="1.8" fill="#eaeaea"/>114        </svg>115      </div>116      <div class="status-icon">117        <!-- Battery -->118        <svg viewBox="0 0 28 24" fill="none">119          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#eaeaea" stroke-width="2"/>120          <rect x="4" y="8" width="14" height="8" rx="1" fill="#eaeaea"/>121          <rect x="22" y="9" width="4" height="6" rx="1" fill="#eaeaea"/>122        </svg>123      </div>124    </div>125  </div>126 127  <!-- Header -->128  <div class="app-header">129    <div class="brand">ColorNote</div>130    <div class="header-right">131      <!-- 2x2 colored squares icon -->132      <svg width="60" height="60" viewBox="0 0 24 24">133        <rect x="2" y="2" width="9" height="9" fill="#4CAF50"/>134        <rect x="13" y="2" width="9" height="9" fill="#F44336"/>135        <rect x="2" y="13" width="9" height="9" fill="#FFC107"/>136        <rect x="13" y="13" width="9" height="9" fill="#2196F3"/>137      </svg>138      <!-- vertical dots -->139      <div class="dots">140        <span></span><span></span><span></span>141      </div>142    </div>143  </div>144 145  <!-- Sort bar -->146  <div class="sort-bar">147    <span>Sort by modified time</span>148    <span class="arrow">▾</span>149  </div>150 151  <!-- Modal: Add -->152  <div class="modal">153    <h2>Add</h2>154 155    <div class="option">156      <div class="icon-box">157        <!-- Text / document icon -->158        <svg viewBox="0 0 64 64">159          <rect x="8" y="8" width="48" height="48" rx="8" fill="none" stroke="#d1d1d1" stroke-width="4"/>160          <line x1="16" y1="24" x2="48" y2="24" stroke="#d1d1d1" stroke-width="4"/>161          <line x1="16" y1="34" x2="48" y2="34" stroke="#d1d1d1" stroke-width="4"/>162          <line x1="16" y1="44" x2="48" y2="44" stroke="#d1d1d1" stroke-width="4"/>163        </svg>164      </div>165      <div>Text</div>166    </div>167 168    <div class="option">169      <div class="icon-box">170        <!-- Checklist icon -->171        <svg viewBox="0 0 64 64">172          <rect x="10" y="10" width="44" height="44" rx="8" fill="none" stroke="#d1d1d1" stroke-width="4"/>173          <path d="M18 34l10 10L46 26" fill="none" stroke="#d1d1d1" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>174        </svg>175      </div>176      <div>Checklist</div>177    </div>178  </div>179 180  <!-- Bottom navigation -->181  <div class="bottom-bar">182    <div class="nav-icon">183      <!-- Notes icon -->184      <svg viewBox="0 0 64 64">185        <rect x="10" y="12" width="44" height="40" rx="6" stroke="currentColor" stroke-width="4" fill="none"/>186        <line x1="18" y1="24" x2="46" y2="24" stroke="currentColor" stroke-width="4"/>187        <line x1="18" y1="34" x2="46" y2="34" stroke="currentColor" stroke-width="4"/>188        <line x1="18" y1="44" x2="46" y2="44" stroke="currentColor" stroke-width="4"/>189      </svg>190    </div>191    <div class="nav-icon dim" style="opacity:0.7;">192      <!-- Calendar 31 icon -->193      <svg viewBox="0 0 64 64">194        <rect x="10" y="16" width="44" height="36" rx="6" stroke="currentColor" stroke-width="4" fill="none"/>195        <line x1="10" y1="24" x2="54" y2="24" stroke="currentColor" stroke-width="4"/>196        <circle cx="22" cy="18" r="3" fill="currentColor"/>197        <circle cx="42" cy="18" r="3" fill="currentColor"/>198        <text x="23" y="44" font-size="20" fill="currentColor" font-family="Arial" font-weight="700">31</text>199      </svg>200    </div>201    <div class="nav-icon dim" style="visibility:hidden;">202      <!-- spacer for center -->203      <svg></svg>204    </div>205    <div class="nav-icon dim" style="opacity:0.7;">206      <!-- Search icon -->207      <svg viewBox="0 0 64 64">208        <circle cx="28" cy="28" r="16" stroke="currentColor" stroke-width="4" fill="none"/>209        <line x1="41" y1="41" x2="54" y2="54" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>210      </svg>211    </div>212    <div class="nav-icon dim" style="opacity:0.7;">213      <!-- Hamburger menu -->214      <svg viewBox="0 0 64 64">215        <line x1="14" y1="22" x2="50" y2="22" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>216        <line x1="14" y1="32" x2="50" y2="32" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>217        <line x1="14" y1="42" x2="50" y2="42" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>218      </svg>219    </div>220  </div>221 222  <!-- Floating Action Button -->223  <div class="fab">224    <svg viewBox="0 0 24 24">225      <rect x="11" y="4" width="2" height="16" fill="#111"/>226      <rect x="4" y="11" width="16" height="2" fill="#111"/>227    </svg>228  </div>229 230  <!-- Home indicator -->231  <div class="home-indicator"></div>232 233</div>234</body>235</html>