GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Notein UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#0F1316; color:#EDEDED;13  }14 15  /* Top app bar */16  .status-placeholder { height:60px; }17  .appbar {18    display:flex; align-items:center; justify-content:space-between;19    padding:40px 56px 24px 56px;20  }21  .app-title { font-size:56px; font-weight:800; letter-spacing:0.5px; }22  .app-actions { display:flex; align-items:center; gap:36px; }23  .icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:#DADADA; opacity:0.95; }24  .icon svg { width:100%; height:100%; }25  .dots4 { display:grid; grid-template-columns: repeat(2, 1fr); grid-gap:4px; width:44px; height:44px; }26  .dots4 span { border-radius:50%; }27  .dots4 span:nth-child(1){ background:#4285F4; }28  .dots4 span:nth-child(2){ background:#DB4437; }29  .dots4 span:nth-child(3){ background:#F4B400; }30  .dots4 span:nth-child(4){ background:#0F9D58; }31 32  /* Search bar */33  .search {34    margin:8px 56px 24px 56px;35    background:#1C2127; border-radius:24px;36    height:116px; display:flex; align-items:center;37    padding:0 32px; box-shadow:0 2px 0 rgba(0,0,0,0.35) inset;38  }39  .search .placeholder { color:#8A9097; font-size:36px; margin-left:18px; }40  .search .magnifier svg { width:60px; height:60px; color:#8A9097; }41 42  /* Notes list */43  .notes { padding:8px 56px 180px 56px; }44  .note-card {45    position:relative; background:#1C2127; border-radius:22px;46    padding:40px 36px; margin-bottom:36px;47    box-shadow:0 6px 12px rgba(0,0,0,0.35);48  }49  .note-card::before {50    content:""; position:absolute; left:0; top:0; height:100%; width:22px;51    background:#F3B21E; border-radius:22px 0 0 22px;52  }53  .note-title { font-size:44px; font-weight:800; margin-bottom:8px; }54  .note-time { font-size:32px; color:#8A9097; margin-bottom:24px; }55  .note-icons { position:absolute; right:28px; top:28px; display:flex; gap:28px; }56  .note-icons .icon-btn { width:52px; height:52px; display:flex; align-items:center; justify-content:center; color:#BFC5CC; opacity:0.9; }57  .divider { height:1px; background:#2A3137; margin:16px 0 18px; }58  .checklist { display:flex; flex-direction:column; gap:18px; }59  .item { display:flex; align-items:center; gap:18px; font-size:32px; color:#DADFE5; }60  .item.dim { color:#8A9097; }61  .checkbox {62    width:28px; height:28px; border:3px solid #9AA1A9; border-radius:4px; background:transparent;63  }64 65  /* FAB */66  .fab {67    position:absolute; right:56px; bottom:370px;68    width:140px; height:140px; border-radius:50%;69    background:#2F73FF; box-shadow:0 10px 22px rgba(0,0,0,0.45);70    display:flex; align-items:center; justify-content:center;71  }72  .fab svg { width:70px; height:70px; color:#fff; }73 74  /* Bottom nav */75  .bottom-nav {76    position:absolute; left:0; bottom:0; width:100%; height:200px;77    background:#151A1F; border-top-left-radius:28px; border-top-right-radius:28px;78    box-shadow:0 -8px 20px rgba(0,0,0,0.45);79    display:flex; align-items:center; justify-content:space-evenly;80  }81  .nav-item { width:92px; height:92px; display:flex; align-items:center; justify-content:center; color:#CFD4DA; opacity:0.95; }82  .home-indicator {83    position:absolute; left:50%; transform:translateX(-50%);84    bottom:16px; width:190px; height:12px; background:#D9D9D9; border-radius:8px; opacity:0.6;85  }86</style>87</head>88<body>89<div id="render-target">90  <div class="status-placeholder"></div>91 92  <div class="appbar">93    <div class="app-title">Notein</div>94    <div class="app-actions">95      <div class="dots4">96        <span></span><span></span><span></span><span></span>97      </div>98      <div class="icon" title="download">99        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">100          <path d="M12 3v12"></path>101          <path d="M8 11l4 4 4-4"></path>102          <path d="M5 21h14" ></path>103        </svg>104      </div>105      <div class="icon" title="more">106        <svg viewBox="0 0 24 24" fill="currentColor">107          <circle cx="12" cy="4" r="2"></circle>108          <circle cx="12" cy="12" r="2"></circle>109          <circle cx="12" cy="20" r="2"></circle>110        </svg>111      </div>112    </div>113  </div>114 115  <div class="search">116    <div class="magnifier icon">117      <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">118        <circle cx="10" cy="10" r="7"></circle>119        <path d="M21 21l-5.5-5.5"></path>120      </svg>121    </div>122    <div class="placeholder">Search...</div>123  </div>124 125  <div class="notes">126 127    <!-- Card 1 -->128    <div class="note-card">129      <div class="note-icons">130        <div class="icon-btn">131          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">132            <rect x="3" y="5" width="18" height="16" rx="2"></rect>133            <path d="M16 3v4"></path>134            <path d="M8 3v4"></path>135            <path d="M3 9h18"></path>136          </svg>137        </div>138        <div class="icon-btn">139          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">140            <circle cx="12" cy="12" r="9"></circle>141            <path d="M8 12l3 3 5-6"></path>142          </svg>143        </div>144      </div>145      <div class="note-title">Favourite Books</div>146      <div class="note-time">18:04</div>147      <div class="divider"></div>148      <div class="checklist">149        <div class="item"><span class="checkbox"></span> The Queen's Gambit</div>150        <div class="item dim"><span class="checkbox"></span> The Road less travelled</div>151      </div>152    </div>153 154    <!-- Card 2 -->155    <div class="note-card">156      <div class="note-icons">157        <div class="icon-btn">158          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">159            <rect x="3" y="5" width="18" height="16" rx="2"></rect>160            <path d="M16 3v4"></path>161            <path d="M8 3v4"></path>162            <path d="M3 9h18"></path>163          </svg>164        </div>165        <div class="icon-btn">166          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">167            <circle cx="12" cy="12" r="9"></circle>168            <path d="M8 12l3 3 5-6"></path>169          </svg>170        </div>171      </div>172      <div class="note-title">Interest</div>173      <div class="note-time">18:02</div>174      <div class="divider"></div>175      <div class="checklist">176        <div class="item"><span class="checkbox"></span> Music</div>177        <div class="item dim"><span class="checkbox"></span> Movies</div>178      </div>179    </div>180 181    <!-- Card 3 -->182    <div class="note-card">183      <div class="note-icons">184        <div class="icon-btn">185          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">186            <rect x="3" y="5" width="18" height="16" rx="2"></rect>187            <path d="M16 3v4"></path>188            <path d="M8 3v4"></path>189            <path d="M3 9h18"></path>190          </svg>191        </div>192      </div>193      <div class="note-title">Natalie larson</div>194      <div class="note-time">18:01</div>195      <div class="divider"></div>196      <div class="checklist">197        <div class="item dim">Gmail- natalie.larson1998@gmail.com</div>198      </div>199    </div>200 201    <!-- Card 4 -->202    <div class="note-card">203      <div class="note-icons">204        <div class="icon-btn">205          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">206            <rect x="3" y="5" width="18" height="16" rx="2"></rect>207            <path d="M16 3v4"></path>208            <path d="M8 3v4"></path>209            <path d="M3 9h18"></path>210          </svg>211        </div>212      </div>213      <div class="note-title">Favourite music artist</div>214      <div class="note-time">18:00</div>215      <div class="divider"></div>216    </div>217 218    <!-- Card 5 -->219    <div class="note-card">220      <div class="note-icons">221        <div class="icon-btn">222          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">223            <rect x="3" y="5" width="18" height="16" rx="2"></rect>224            <path d="M16 3v4"></path>225            <path d="M8 3v4"></path>226            <path d="M3 9h18"></path>227          </svg>228        </div>229      </div>230      <div class="note-title">Future plans</div>231      <div class="note-time">18:00</div>232      <div class="divider"></div>233    </div>234 235  </div>236 237  <!-- Floating Action Button -->238  <div class="fab">239    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">240      <path d="M4 20h6"></path>241      <path d="M16.5 3.5l4 4L9 19H5v-4z"></path>242    </svg>243  </div>244 245  <!-- Bottom navigation -->246  <div class="bottom-nav">247    <div class="nav-item" title="notes">248      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">249        <rect x="4" y="3" width="16" height="18" rx="3"></rect>250        <path d="M16 3v6h6"></path>251      </svg>252    </div>253    <div class="nav-item" title="calendar">254      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">255        <rect x="3" y="5" width="18" height="16" rx="2"></rect>256        <path d="M16 3v4"></path>257        <path d="M8 3v4"></path>258        <path d="M3 9h18"></path>259      </svg>260    </div>261    <div class="nav-item" title="menu">262      <svg viewBox="0 0 24 24" fill="currentColor">263        <rect x="4" y="6" width="16" height="2"></rect>264        <rect x="4" y="11" width="16" height="2"></rect>265        <rect x="4" y="16" width="16" height="2"></rect>266      </svg>267    </div>268  </div>269 270  <div class="home-indicator"></div>271</div>272</body>273</html>