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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f110d; /* deep dark olive */15    color: #e8e9e4;16  }17 18  /* Status bar */19  .status-bar {20    height: 100px;21    padding: 24px 32px 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #f2f2f0;26    font-weight: 600;27    font-size: 36px;28  }29  .status-icons {30    display: flex;31    gap: 22px;32    align-items: center;33  }34  .status-icons svg { width: 40px; height: 40px; fill: #d7d8cf; }35 36  /* Search bar */37  .search-wrap {38    margin: 26px 28px 0 28px;39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .search-bar {44    flex: 1;45    height: 110px;46    background: #2a2e23;47    border-radius: 55px;48    display: flex;49    align-items: center;50    padding: 0 28px;51    box-shadow: inset 0 0 0 1px rgba(170,175,150,0.25);52  }53  .search-icon, .layout-icon {54    width: 52px;55    height: 52px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59  }60  .search-text {61    flex: 1;62    color: #c9cbbd;63    font-size: 40px;64    letter-spacing: 0.2px;65  }66  .avatar {67    width: 96px;68    height: 96px;69    background: #6269c9;70    border-radius: 50%;71    color: #ffffff;72    display: flex;73    align-items: center;74    justify-content: center;75    font-weight: 700;76    font-size: 42px;77    box-shadow: 0 2px 8px rgba(0,0,0,0.35);78    margin-left: 12px;79  }80  .icon-tone { fill: #c7c9b6; }81 82  /* Notes grid */83  .notes {84    margin: 36px 28px 0 28px;85    display: grid;86    grid-template-columns: repeat(2, 1fr);87    gap: 36px;88  }89  .card {90    background: #121513;91    border: 2px solid #6f7560;92    border-radius: 34px;93    box-shadow: 0 2px 0 rgba(111,117,96,0.3) inset;94    padding: 32px;95  }96  .card.tall { min-height: 620px; }97  .card.medium { min-height: 500px; }98  .card.short { min-height: 380px; }99 100  .card-title {101    font-size: 48px;102    font-weight: 800;103    margin-bottom: 20px;104    color: #f0f1ec;105  }106  .card-body {107    font-size: 36px;108    line-height: 1.35;109    color: #d7d8cf;110  }111 112  /* Bottom bar */113  .bottom-bar {114    position: absolute;115    left: 0;116    right: 0;117    bottom: 0;118    height: 170px;119    background: #171b14;120    border-top: 1px solid rgba(140,150,120,0.16);121    display: flex;122    align-items: center;123    justify-content: space-evenly;124    padding: 0 52px;125  }126  .bottom-btn {127    width: 90px;128    height: 90px;129    display: flex;130    align-items: center;131    justify-content: center;132  }133  .bottom-btn svg { width: 64px; height: 64px; fill: #c7c9b6; }134 135  /* Floating add button */136  .fab {137    position: absolute;138    right: 48px;139    bottom: 236px;140    width: 168px;141    height: 168px;142    background: #1c2017;143    border-radius: 34px;144    box-shadow: 0 10px 26px rgba(0,0,0,0.45);145    display: flex;146    align-items: center;147    justify-content: center;148    border: 1px solid rgba(140,150,120,0.2);149  }150 151  /* Gesture bar */152  .gesture {153    position: absolute;154    bottom: 30px;155    left: 50%;156    transform: translateX(-50%);157    width: 420px;158    height: 14px;159    background: #e9e9e9;160    border-radius: 10px;161    opacity: 0.95;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status bar -->169  <div class="status-bar">170    <div>6:41</div>171    <div class="status-icons">172      <!-- Cellular -->173      <svg viewBox="0 0 24 24"><path d="M3 20h2v-5H3v5zm4 0h2v-8H7v8zm4 0h2v-11h-2v11zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>174      <!-- Wifi -->175      <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5L12 24l-2.5-3 2.5-2.5zm-8.5-9C6.8 6.2 9.5 5.5 12 5.5s5.2.7 8.5 4l-1.8 1.8C15.8 8 13.9 7.5 12 7.5s-3.8.5-6.7 3.3L3.5 9.5z"/></svg>176      <!-- Location/temperature placeholder -->177      <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z"/></svg>178      <!-- Battery -->179      <svg viewBox="0 0 24 24"><path d="M16 4h2v2h1a2 2 0 012 2v8a2 2 0 01-2 2h-1v2h-2V4zM5 8a2 2 0 012-2h7a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2V8zm2 0v8h7V8H7z"/></svg>180    </div>181  </div>182 183  <!-- Search bar -->184  <div class="search-wrap">185    <div class="search-bar">186      <!-- Hamburger -->187      <div class="search-icon">188        <svg viewBox="0 0 24 24" class="icon-tone"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>189      </div>190      <div class="search-text">Search your notes</div>191      <!-- Layout toggle -->192      <div class="layout-icon">193        <svg viewBox="0 0 24 24" class="icon-tone"><path d="M3 6h10v3H3V6zm0 6h10v3H3v-3zm12-6h6v9h-6V6z"/></svg>194      </div>195      <div class="avatar">C</div>196    </div>197  </div>198 199  <!-- Notes grid -->200  <div class="notes">201    <div class="card tall">202      <div class="card-title">My dream project first</div>203      <div class="card-body">204        My dreams are to be finance free and travel around the world.205      </div>206    </div>207 208    <div class="card short">209      <div class="card-title">Month overview</div>210      <div class="card-body">211        This month less savings because of expense212      </div>213    </div>214 215    <div class="card medium" style="grid-column: 2;">216      <div class="card-title">Dream for japan</div>217      <div class="card-body">218        I want to go to japan because I love japani language. I try to learn hiragana khatakana and kanji. I will definately go to japan.219      </div>220    </div>221  </div>222 223  <!-- Floating Add Button -->224  <div class="fab">225    <svg viewBox="0 0 100 100">226      <!-- multi-color plus -->227      <rect x="46" y="18" width="8" height="64" fill="#2aa84a"/>228      <rect x="18" y="46" width="64" height="8" fill="#e7412f"/>229      <rect x="46" y="18" width="8" height="32" fill="#f7c20a"/>230      <rect x="50" y="50" width="32" height="8" fill="#2d6fe6"/>231    </svg>232  </div>233 234  <!-- Bottom bar -->235  <div class="bottom-bar">236    <div class="bottom-btn">237      <!-- Checklist -->238      <svg viewBox="0 0 24 24"><path d="M4 4h16v3H4V4zm0 13h16v3H4v-3zm0-6h16v3H4v-3zm3.5 1.5l1.5 1.5 3-3-1.4-1.4-1.6 1.6-1.1-1.1-1.4 1.4z"/></svg>239    </div>240    <div class="bottom-btn">241      <!-- Brush -->242      <svg viewBox="0 0 24 24"><path d="M20.7 7.3L12 16l-3.5-.5-.5-3.5 8.7-8.7 4 4zM7 17c-1.2 0-2 .8-2 2 0 1.5-1.2 2-3 2 2.5 1.3 5 .5 6-1 .7-1 .2-3-1-3z"/></svg>243    </div>244    <div class="bottom-btn">245      <!-- Mic -->246      <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 013 3v6a3 3 0 01-6 0V6a3 3 0 013-3zm7 9a7 7 0 01-14 0H3a9 9 0 0018 0h-2zM11 20h2v3h-2v-3z"/></svg>247    </div>248    <div class="bottom-btn">249      <!-- Image -->250      <svg viewBox="0 0 24 24"><path d="M3 5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm2 0v14h14V5H5zm3 3a2 2 0 110 4 2 2 0 010-4zm-2 10l4-4 3 3 4-5 3 6H6z"/></svg>251    </div>252  </div>253 254  <!-- Gesture bar -->255  <div class="gesture"></div>256 257</div>258</body>259</html>