GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Notein - Add Bottom Sheet</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target{9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#0b0d10;12    color:#e9edf2;13  }14 15  /* Status bar */16  .statusbar{17    position:absolute; top:0; left:0; right:0; height:96px;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 36px; color:#fff; font-weight:600; letter-spacing:0.5px;20  }21  .status-right{ display:flex; align-items:center; gap:22px; }22  .icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:#fff; opacity:0.95; }23  .battery{24    width:48px; height:24px; border:2px solid #fff; border-radius:4px; position:relative;25  }26  .battery:after{27    content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px;28  }29  .battery .level{ position:absolute; left:2px; top:2px; bottom:2px; right:12px; background:#bde07a; border-radius:2px; }30 31  /* Header/App bar */32  .appbar{33    position:absolute; left:32px; right:32px; top:120px; height:84px;34    display:flex; align-items:center; justify-content:space-between;35  }36  .title{ font-size:64px; font-weight:700; color:#d7dde4; }37  .actions{ display:flex; gap:30px; align-items:center; }38  .action{39    width:64px; height:64px; border-radius:14px; background:transparent;40    display:flex; align-items:center; justify-content:center;41    color:#dce3ea;42  }43 44  /* Search */45  .search{46    position:absolute; left:36px; right:36px; top:220px; height:120px;47    background:#14171b; border-radius:26px; display:flex; align-items:center; padding:0 28px; color:#8f98a3;48  }49  .search svg{ margin-right:18px; opacity:0.9; }50  .search .placeholder{ font-size:44px; color:#9aa3ad; }51 52  /* Empty area illustration + caption */53  .empty-wrap{54    position:absolute; left:0; right:0; top:620px; text-align:center;55  }56  .illus{57    width:420px; height:420px; margin:0 auto; background:#20252b; border:1px solid #2c3239;58    color:#8a93a0; display:flex; align-items:center; justify-content:center; border-radius:16px;59  }60  .tagline{61    margin-top:80px; font-size:56px; color:#9aa3ad; font-weight:700;62  }63 64  /* Bottom sheet */65  .sheet{66    position:absolute; left:0; right:0; bottom:0; height:520px; background:#1c2127;67    border-top-left-radius:38px; border-top-right-radius:38px; box-shadow:0 -10px 40px rgba(0,0,0,0.6);68    padding:36px 40px;69  }70  .sheet h3{ margin:10px 0 30px 10px; font-size:56px; color:#e7ebf0; }71  .cards{ display:flex; gap:36px; padding:18px 10px; }72  .card{73    flex:1; height:270px; background:#343a44; border-radius:28px;74    display:flex; align-items:center; gap:34px; padding:34px; color:#e8ecf2;75  }76  .card .tile{77    width:130px; height:130px; border-radius:22px; background:#2a3dff; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:64px;78    box-shadow:0 8px 22px rgba(42,61,255,0.35);79  }80  .card .label{81    font-size:48px; font-weight:700; color:#e7ecf5;82  }83 84  /* Grid colored dots */85  .dots{ width:44px; height:44px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }86  .dots span{ width:18px; height:18px; border-radius:50%; display:block; }87  .dots .d1{ background:#3daaf8; }88  .dots .d2{ background:#f5a623; }89  .dots .d3{ background:#7ed321; }90  .dots .d4{ background:#d04df5; }91 92  /* Nav indicator */93  .nav-indicator{94    position:absolute; left:50%; transform:translateX(-50%);95    bottom:16px; width:360px; height:10px; background:#e7e7ea; border-radius:8px; opacity:0.85; z-index:5;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status Bar -->103  <div class="statusbar">104    <div style="font-size:40px;">10:42</div>105    <div class="status-right">106      <!-- WiFi -->107      <svg class="icon" viewBox="0 0 24 24">108        <path fill="#fff" d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-6.6-5.1 1.4 1.4A7 7 0 0 1 12 13a7 7 0 0 1 5.2 1.8l1.4-1.4A9 9 0 0 0 12 11a9 9 0 0 0-6.6 2.4Zm-3.1-4.2 1.4 1.4A14 14 0 0 1 12 8a14 14 0 0 1 8.3 2.2l1.4-1.4A16 16 0 0 0 12 6a16 16 0 0 0-9.7 3.2Z"/>109      </svg>110      <!-- Battery -->111      <div class="battery"><div class="level"></div></div>112    </div>113  </div>114 115  <!-- App Bar -->116  <div class="appbar">117    <div class="title">Notein</div>118    <div class="actions">119      <div class="action">120        <div class="dots">121          <span class="d1"></span>122          <span class="d2"></span>123          <span class="d3"></span>124          <span class="d4"></span>125        </div>126      </div>127      <div class="action">128        <svg width="40" height="40" viewBox="0 0 24 24" fill="#e9edf2">129          <path d="M5 20h14v2H5zM11 4h2v9l3.5-3.5L18 11l-6 6-6-6 1.5-1.5L11 13z"/>130        </svg>131      </div>132      <div class="action">133        <svg width="34" height="34" viewBox="0 0 24 24" fill="#e9edf2">134          <circle cx="12" cy="5" r="2.2"></circle>135          <circle cx="12" cy="12" r="2.2"></circle>136          <circle cx="12" cy="19" r="2.2"></circle>137        </svg>138      </div>139    </div>140  </div>141 142  <!-- Search Bar -->143  <div class="search">144    <svg width="48" height="48" viewBox="0 0 24 24" fill="#9aa3ad">145      <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9Z"/>146    </svg>147    <div class="placeholder">Search...</div>148  </div>149 150  <!-- Empty state illustration -->151  <div class="empty-wrap">152    <div class="illus">[IMG: Notebook Illustration]</div>153    <div class="tagline">Keep your life organized.</div>154  </div>155 156  <!-- Bottom Sheet -->157  <div class="sheet">158    <h3>Add</h3>159    <div class="cards">160      <div class="card">161        <div class="tile">T</div>162        <div class="label">TXT</div>163      </div>164      <div class="card">165        <div class="tile">166          <svg width="76" height="76" viewBox="0 0 24 24" fill="#fff">167            <path d="M9.2 16.2 6 13l1.4-1.4 1.8 1.8 4.5-4.5L15 10.4 9.2 16.2z"/>168          </svg>169        </div>170        <div class="label">Checklist</div>171      </div>172    </div>173  </div>174 175  <!-- Navigation indicator -->176  <div class="nav-indicator"></div>177 178</div>179</body>180</html>