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>Notes UI - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #1F1F21; /* dark app background */12  }13 14  /* Status bar */15  .statusbar {16    position: absolute; top: 0; left: 0; width: 100%; height: 96px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; color: #EDEDED; font-weight: 600; font-size: 36px;19  }20  .status-left { display: flex; align-items: center; gap: 18px; }21  .status-right { display: flex; align-items: center; gap: 28px; }22  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 3; }23 24  /* Search bar */25  .search-wrap {26    position: absolute; top: 120px; left: 40px; right: 40px;27  }28  .search-bar {29    height: 120px; border-radius: 60px;30    background: #2B2B2F; box-shadow: inset 0 0 0 2px #3D3D42;31    display: flex; align-items: center; padding: 0 26px; gap: 26px; color: #CFCFCF;32  }33  .hamburger, .view-toggle {34    width: 84px; height: 84px; border-radius: 42px;35    display: flex; align-items: center; justify-content: center; color: #CFCFCF;36  }37  .hamburger svg, .view-toggle svg { width: 48px; height: 48px; stroke: #CFCFCF; stroke-width: 6; }38  .search-placeholder { flex: 1; font-size: 40px; color: #BEBEC2; }39  .avatar {40    width: 92px; height: 92px; border-radius: 46px;41    background: linear-gradient(#6273ff, #4b5bcb); color: #FFFFFF;42    font-weight: 700; font-size: 44px; display: flex; align-items: center; justify-content: center;43    box-shadow: 0 0 0 8px #2B2B2F; /* visual separation similar to screenshot */44  }45 46  /* Notes grid */47  .grid {48    position: absolute; top: 280px; left: 36px; right: 36px;49    display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;50  }51  .card {52    min-height: 280px; border-radius: 28px;53    background: #242427; box-shadow: inset 0 0 0 3px #3C3C40;54    padding: 30px; color: #F2F2F2;55  }56  .card h3 {57    margin: 0 0 16px 0; font-size: 44px; font-weight: 700;58    letter-spacing: 0.2px;59  }60  .card p {61    margin: 0; font-size: 34px; color: #C7C7CB; line-height: 1.35;62  }63  .chip {64    display: inline-flex; align-items: center; gap: 12px;65    background: #3A3A3F; color: #BFBFC3;66    border-radius: 28px; padding: 14px 20px; margin-top: 24px;67    font-size: 32px;68  }69  .chip svg { width: 34px; height: 34px; stroke: #BFBFC3; stroke-width: 3; }70 71  /* Snackbar */72  .snackbar {73    position: absolute; bottom: 270px; left: 36px; right: 36px;74    height: 120px; background: #E9E7EB; color: #2B2B2F;75    border-radius: 20px; display: flex; align-items: center; justify-content: space-between;76    padding: 0 34px; font-size: 38px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);77  }78  .snackbar .action { color: #3B5BED; font-weight: 700; }79 80  /* Bottom bar with tools */81  .bottom-bar {82    position: absolute; bottom: 120px; left: 0; width: 100%; height: 140px;83    background: #232326; border-top: 1px solid #34343A;84    display: flex; align-items: center; justify-content: space-evenly;85  }86  .tool {87    width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;88  }89  .tool svg { width: 64px; height: 64px; stroke: #DADADA; fill: none; stroke-width: 5; }90 91  /* Floating add button */92  .fab {93    position: absolute; right: 40px; bottom: 150px;94    width: 132px; height: 132px; border-radius: 32px;95    background: #2B2B2F; box-shadow: 0 12px 28px rgba(0,0,0,0.5);96    display: flex; align-items: center; justify-content: center;97  }98  .plus {99    position: relative; width: 76px; height: 76px;100  }101  .plus::before, .plus::after {102    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);103    border-radius: 10px;104  }105  .plus::before { width: 76px; height: 16px; background: linear-gradient(to right, #EA4335 50%, #34A853 50%); }106  .plus::after  { width: 16px; height: 76px; background: linear-gradient(to bottom, #FBBC04 50%, #4285F4 50%); }107 108  /* Home indicator */109  .home-indicator {110    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);111    width: 320px; height: 12px; border-radius: 8px; background: #D7D7DA; opacity: 0.75;112  }113</style>114</head>115<body>116<div id="render-target">117  <!-- Status bar -->118  <div class="statusbar">119    <div class="status-left">120      <div>8:04</div>121      <div class="status-icon">122        <!-- simple location/weather circle -->123        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>124      </div>125      <div class="status-icon">126        <!-- small moon icon -->127        <svg viewBox="0 0 24 24"><path d="M15 3a9 9 0 1 0 6 15A7 7 0 1 1 15 3z"/></svg>128      </div>129      <div class="status-icon">130        <!-- alert triangle -->131        <svg viewBox="0 0 24 24"><path d="M12 3 21 19H3L12 3z"/><path d="M12 9v5M12 17h.01"/></svg>132      </div>133      <div style="font-size:32px; color:#EDEDED;">28°</div>134    </div>135    <div class="status-right">136      <div class="status-icon">137        <!-- Wi-Fi -->138        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 15c2-1 4-1 6 0"/><circle cx="12" cy="18" r="1.5" fill="#EDEDED"/></svg>139      </div>140      <div class="status-icon">141        <!-- Battery -->142        <svg viewBox="0 0 28 24"><rect x="2" y="5" width="20" height="14" rx="2"/><rect x="23" y="9" width="3" height="6" rx="1"/></svg>143      </div>144      <div style="font-size:32px;">100%</div>145    </div>146  </div>147 148  <!-- Search bar -->149  <div class="search-wrap">150    <div class="search-bar">151      <div class="hamburger">152        <svg viewBox="0 0 24 24">153          <path d="M3 6h18M3 12h18M3 18h18"/>154        </svg>155      </div>156      <div class="search-placeholder">Search your notes</div>157      <div class="view-toggle">158        <svg viewBox="0 0 24 24">159          <rect x="6" y="6" width="12" height="4" rx="1"></rect>160          <rect x="6" y="14" width="12" height="4" rx="1"></rect>161        </svg>162      </div>163      <div class="avatar">C</div>164    </div>165  </div>166 167  <!-- Notes grid -->168  <div class="grid">169    <div class="card">170      <h3>Book Names</h3>171      <p>I, Claudius by Robert Graves</p>172    </div>173 174    <div class="card">175      <h3>Morning Yoga</h3>176      <div class="chip">177        <svg viewBox="0 0 24 24">178          <circle cx="12" cy="12" r="8"></circle>179          <path d="M12 12V8M12 12l4 2"></path>180        </svg>181        Aug 9, 9:30 AM182      </div>183    </div>184 185    <div class="card">186      <h3>Zumba session.</h3>187      <div class="chip">188        <svg viewBox="0 0 24 24">189          <path d="M6 4h12v4M6 12h12M6 20h12"></path>190        </svg>191        Today, 6:00 PM192      </div>193    </div>194 195    <div class="card">196      <h3>Reminder at August 10, 8:00 AM</h3>197      <div class="chip">198        <svg viewBox="0 0 24 24">199          <circle cx="12" cy="12" r="8"></circle>200          <path d="M12 12V8M12 12l4 2"></path>201        </svg>202        Aug 10, 8:00 AM203      </div>204    </div>205 206    <div class="card"></div>207    <div class="card"></div>208  </div>209 210  <!-- Snackbar -->211  <div class="snackbar">212    <div>Note moved to trash</div>213    <div class="action">Undo</div>214  </div>215 216  <!-- Bottom tools bar -->217  <div class="bottom-bar">218    <div class="tool">219      <!-- Checklist icon -->220      <svg viewBox="0 0 24 24">221        <rect x="3" y="3" width="18" height="18" rx="3"></rect>222        <path d="M7 12l3 3 7-7"></path>223      </svg>224    </div>225    <div class="tool">226      <!-- Brush icon -->227      <svg viewBox="0 0 24 24">228        <path d="M15 3l6 6-9 9H6l-3 3 3-6h3l9-9z"></path>229      </svg>230    </div>231    <div class="tool">232      <!-- Mic icon -->233      <svg viewBox="0 0 24 24">234        <rect x="9" y="4" width="6" height="10" rx="3"></rect>235        <path d="M5 11a7 7 0 0 0 14 0M12 18v3"></path>236      </svg>237    </div>238    <div class="tool">239      <!-- Image icon -->240      <svg viewBox="0 0 24 24">241        <rect x="3" y="4" width="18" height="16" rx="2"></rect>242        <circle cx="9" cy="10" r="2.5"></circle>243        <path d="M21 17l-6-6-6 6"></path>244      </svg>245    </div>246  </div>247 248  <!-- Floating action button -->249  <div class="fab">250    <div class="plus"></div>251  </div>252 253  <!-- Home indicator -->254  <div class="home-indicator"></div>255</div>256</body>257</html>