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>Super Note - Empty</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Top App Bar */23  .appbar {24    position: absolute;25    left: 0;26    top: 0;27    width: 1080px;28    height: 200px;29    background: #E9AA4E; /* warm mustard */30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34  }35  .hamburger {36    position: relative;37    width: 120px;38    height: 70px;39  }40  .hamburger .bar {41    position: absolute;42    left: 0;43    right: 0;44    height: 10px;45    background: #fff;46    border-radius: 6px;47  }48  .hamburger .bar:nth-child(1){ top: 6px; width: 100%; }49  .hamburger .bar:nth-child(2){ top: 30px; width: 90%; }50  .hamburger .bar:nth-child(3){ top: 54px; width: 80%; }51  .hamburger .dot {52    position: absolute;53    left: 98px;54    top: -2px;55    width: 32px;56    height: 32px;57    background: #d84b3f;58    border-radius: 50%;59  }60 61  .title {62    color: #ffffff;63    font-size: 58px;64    font-weight: 500;65    margin-left: 28px;66    letter-spacing: 1px;67  }68 69  .actions {70    margin-left: auto;71    display: flex;72    align-items: center;73    gap: 36px;74  }75  .action-icon {76    width: 64px;77    height: 64px;78    display: inline-flex;79    align-items: center;80    justify-content: center;81  }82  .action-icon svg {83    width: 56px;84    height: 56px;85  }86  .action-icon .stroke-white {87    stroke: #fff;88  }89  .grid-icon {90    width: 84px;91    height: 84px;92    display: grid;93    grid-template-columns: repeat(2, 38px);94    grid-template-rows: repeat(2, 38px);95    gap: 8px;96  }97  .grid-icon span {98    border-radius: 6px;99  }100  .g1 { background: #f3dd8a; }101  .g2 { background: #76d0a5; }102  .g3 { background: #8fcaf7; }103  .g4 { background: #e25a5a; }104 105  .menu-lines {106    width: 110px;107    height: 70px;108    position: relative;109  }110  .menu-lines i {111    position: absolute;112    left: 0;113    right: 0;114    height: 10px;115    background: #fff;116    border-radius: 6px;117  }118  .menu-lines i:nth-child(1){ top: 6px; }119  .menu-lines i:nth-child(2){ top: 30px; }120  .menu-lines i:nth-child(3){ top: 54px; }121 122  /* Empty state text */123  .empty-text {124    position: absolute;125    left: 0;126    top: 1500px;127    width: 100%;128    text-align: center;129    color: #444;130    font-size: 50px;131  }132 133  /* Floating Action Button */134  .fab {135    position: absolute;136    right: 60px;137    bottom: 320px; /* stays above ad banner */138    width: 160px;139    height: 160px;140    background: #EEB255;141    border-radius: 50%;142    box-shadow: 0 10px 22px rgba(0,0,0,0.25);143    display: flex;144    align-items: center;145    justify-content: center;146  }147  .fab span {148    position: absolute;149    background: #fff;150    border-radius: 4px;151  }152  .fab .h {153    width: 90px;154    height: 12px;155  }156  .fab .v {157    width: 12px;158    height: 90px;159  }160 161  /* Ad banner placeholder */162  .ad-banner {163    position: absolute;164    left: 0;165    bottom: 120px; /* above home indicator */166    width: 100%;167    height: 220px;168    background: #E0E0E0;169    border-top: 1px solid #BDBDBD;170    border-bottom: 1px solid #BDBDBD;171    display: flex;172    align-items: center;173    justify-content: center;174    color: #757575;175    font-size: 42px;176    letter-spacing: 0.5px;177    box-sizing: border-box;178  }179  .ad-banner .close {180    position: absolute;181    right: 18px;182    top: -18px;183    width: 54px;184    height: 54px;185    background: #5bb7e8;186    color: #fff;187    border-radius: 50%;188    font-size: 34px;189    line-height: 54px;190    text-align: center;191  }192 193  /* Home indicator area */194  .home-area {195    position: absolute;196    left: 0;197    bottom: 0;198    width: 100%;199    height: 120px;200    background: #000;201  }202  .home-indicator {203    position: absolute;204    left: 50%;205    bottom: 34px;206    transform: translateX(-50%);207    width: 300px;208    height: 14px;209    background: #cfcfcf;210    border-radius: 8px;211    opacity: 0.85;212  }213</style>214</head>215<body>216<div id="render-target">217  <!-- Top App Bar -->218  <div class="appbar">219    <div class="hamburger" aria-label="Menu">220      <div class="bar"></div>221      <div class="bar"></div>222      <div class="bar"></div>223      <div class="dot"></div>224    </div>225    <div class="title">Super Note</div>226 227    <div class="actions">228      <div class="action-icon" aria-label="Search">229        <svg viewBox="0 0 24 24" fill="none">230          <circle cx="10" cy="10" r="6.5" stroke-width="2.2" class="stroke-white"></circle>231          <path d="M15.5 15.5 L22 22" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"></path>232        </svg>233      </div>234      <div class="grid-icon" aria-label="Grid">235        <span class="g1"></span>236        <span class="g2"></span>237        <span class="g3"></span>238        <span class="g4"></span>239      </div>240      <div class="menu-lines" aria-label="More">241        <i></i><i></i><i></i>242      </div>243    </div>244  </div>245 246  <!-- Empty state -->247  <div class="empty-text">Empty Items!</div>248 249  <!-- Floating Action Button -->250  <div class="fab" aria-label="Add">251    <span class="h"></span>252    <span class="v"></span>253  </div>254 255  <!-- Bottom Ad Banner (placeholder image) -->256  <div class="ad-banner">257    [IMG: Grocery Ad Banner]258    <div class="close">×</div>259  </div>260 261  <!-- Home indicator area -->262  <div class="home-area">263    <div class="home-indicator"></div>264  </div>265</div>266</body>267</html>