GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>My Notebook UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: "Roboto", "Segoe UI", Arial, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #0f0f10;26    color: #fff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    box-sizing: border-box;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    gap: 22px;38    align-items: center;39  }40  .status-icon svg { width: 40px; height: 40px; fill: #fff; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 140px;49    background: #ffffff;50    display: flex;51    align-items: center;52    padding: 0 26px 0 26px;53    box-sizing: border-box;54    box-shadow: 0 1px 0 rgba(0,0,0,0.08);55  }56  .app-left {57    display: flex;58    align-items: center;59    gap: 20px;60  }61  .app-title {62    font-size: 56px;63    font-weight: 800;64  }65  .app-actions {66    margin-left: auto;67    display: flex;68    align-items: center;69    gap: 34px;70  }71  .icon-top svg { width: 56px; height: 56px; fill: #1a1a1a; }72 73  /* Content grid */74  .content {75    position: absolute;76    top: 260px;77    left: 0;78    right: 0;79    bottom: 230px;80    padding: 30px 30px 0 30px;81    box-sizing: border-box;82  }83  .notes-grid {84    display: grid;85    grid-template-columns: repeat(2, 1fr);86    gap: 36px;87  }88  .note-card {89    position: relative;90    height: 520px;91    border-radius: 10px;92    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);93    padding: 26px;94    box-sizing: border-box;95  }96  .note-title {97    font-size: 56px;98    font-weight: 800;99    line-height: 1.2;100    color: #101010;101  }102  .note-time {103    position: absolute;104    left: 26px;105    bottom: 26px;106    font-size: 36px;107    color: #b7b7b7;108    font-weight: 600;109    letter-spacing: 0.3px;110  }111  .note-orange { background: #f6c978; }112  .note-yellow { background: #fff3a6; }113 114  /* Bottom bar */115  .bottom-bar {116    position: absolute;117    bottom: 0;118    left: 0;119    width: 1080px;120    height: 210px;121    background: #111111;122    color: #fff;123    box-shadow: 0 -1px 0 rgba(0,0,0,0.3);124  }125  .nav-items {126    position: absolute;127    left: 0;128    right: 0;129    top: 10px;130    height: 170px;131    display: grid;132    grid-template-columns: repeat(5, 1fr);133    align-items: center;134    box-sizing: border-box;135    padding: 8px 10px;136  }137  .nav-item {138    display: flex;139    flex-direction: column;140    align-items: center;141    gap: 10px;142    color: #ffffff;143    font-size: 36px;144    font-weight: 600;145  }146  .nav-item svg { width: 64px; height: 64px; fill: #ffffff; }147  .overflow-only { font-size: 0; }148  .gesture {149    position: absolute;150    bottom: 16px;151    left: 50%;152    transform: translateX(-50%);153    width: 300px;154    height: 10px;155    border-radius: 8px;156    background: #eaeaea;157    opacity: 0.95;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="status-bar">166    <div class="status-left">3:19</div>167    <div class="status-right">168      <div class="status-icon">169        <!-- Wi-Fi -->170        <svg viewBox="0 0 24 24"><path d="M12 20.5l2.2-2.2c-1.2-1.2-3.2-1.2-4.4 0L12 20.5zM6 14.5l1.8 1.8c2.7-2.7 6.7-2.7 9.4 0L19 14.5c-3.9-3.9-10.1-3.9-13 0zM2 10.5l1.8 1.8c5-5 13.4-5 18.4 0l1.8-1.8c-6-6-16-6-22 0z"/></svg>171      </div>172      <div class="status-icon">173        <!-- Battery -->174        <svg viewBox="0 0 24 24"><path d="M17 7h2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-2v2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h12v2zM5 7v10h12V7H5z"/></svg>175      </div>176    </div>177  </div>178 179  <!-- App bar -->180  <div class="app-bar">181    <div class="app-left">182      <!-- Back arrow -->183      <div class="icon-top">184        <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/></svg>185      </div>186      <div class="app-title">My Notebook</div>187    </div>188    <div class="app-actions">189      <!-- Search -->190      <div class="icon-top">191        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14.2 15l.3.3v.8L20 21.5 21.5 20l-6-6zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1 0 9z"/></svg>192      </div>193      <!-- List view -->194      <div class="icon-top">195        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z"/></svg>196      </div>197      <!-- More -->198      <div class="icon-top">199        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>200      </div>201    </div>202  </div>203 204  <!-- Content -->205  <div class="content">206    <div class="notes-grid">207      <div class="note-card note-orange">208        <div class="note-title">Modeling</div>209        <div class="note-time">03:17 PM</div>210      </div>211 212      <div class="note-card note-yellow">213        <div class="note-title">Demo ABC</div>214        <div class="note-time">03:17 PM</div>215      </div>216    </div>217  </div>218 219  <!-- Bottom navigation -->220  <div class="bottom-bar">221    <div class="nav-items">222      <div class="nav-item">223        <!-- Pencil -->224        <svg viewBox="0 0 24 24"><path d="M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM20.7 6.3c.4-.4.4-1 0-1.4L19.1 3.3c-.4-.4-1-.4-1.4 0l-1.8 1.8 3.8 3.8 1.8-1.8z"/></svg>225        <div>Write</div>226      </div>227      <div class="nav-item">228        <!-- Mic -->229        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V20H9v2h6v-2h-2v-2.1A7 7 0 0 0 19 11h-2z"/></svg>230        <div>Record</div>231      </div>232      <div class="nav-item">233        <!-- Camera -->234        <svg viewBox="0 0 24 24"><path d="M9 5l1.5-2h3L15 5h3c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3zm3 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>235        <div>Capture</div>236      </div>237      <div class="nav-item">238        <!-- Check -->239        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.5 12.6l-3.6-3.6 1.4-1.4 2.2 2.2 5.4-5.4 1.4 1.4-6.8 6.8z"/></svg>240        <div>To Do</div>241      </div>242      <div class="nav-item overflow-only">243        <!-- More vertical -->244        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>245      </div>246    </div>247    <div class="gesture"></div>248  </div>249 250</div>251</body>252</html>