GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Dark Note with Bottom Sheet</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">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:#121616;15 color:#dfe5e3;16 }17 18 /* Status bar */19 .status-bar{20 position:absolute;21 top:0;22 left:0;23 right:0;24 height:120px;25 padding:0 34px;26 display:flex;27 align-items:center;28 justify-content:space-between;29 color:#cdd6d4;30 font-size:40px;31 opacity:0.95;32 }33 .status-right{34 display:flex;35 align-items:center;36 gap:24px;37 font-size:34px;38 }39 .status-icon{40 width:34px;height:34px; fill:#cdd6d4; stroke:#cdd6d4;41 }42 43 /* Header icons and title */44 .back-btn{45 position:absolute; left:36px; top:210px; width:60px; height:60px; color:#7e8785; opacity:0.9;46 }47 .header-actions{48 position:absolute; right:36px; top:210px; display:flex; gap:48px; color:#7e8785;49 }50 .header-actions svg{ width:56px; height:56px; fill:none; stroke:#7e8785; stroke-width:4; }51 52 .title{53 position:absolute; left:80px; top:360px;54 font-size:86px; font-weight:600; color:#6f7a78; letter-spacing:0.5px;55 }56 .subtitle{57 position:absolute; left:82px; top:470px;58 font-size:44px; color:#96a09e;59 }60 61 /* Bottom sheet */62 .sheet{63 position:absolute; left:0; right:0; bottom:120px;64 height:980px;65 background:#203a36;66 border-top-left-radius:26px;67 border-top-right-radius:26px;68 box-shadow:0 -8px 20px rgba(0,0,0,0.45) inset;69 color:#d6ebe6;70 }71 .sheet .item{72 display:flex; align-items:center; gap:34px;73 padding:36px 44px;74 border-bottom:1px solid rgba(255,255,255,0.04);75 font-size:52px; color:#d6ebe6;76 }77 .sheet .icon{78 width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center;79 }80 .sheet svg{ width:64px; height:64px; stroke:#cfe6df; fill:none; stroke-width:4; }81 82 /* Nav pill */83 .nav-pill{84 position:absolute; left:50%; transform:translateX(-50%);85 bottom:28px; width:360px; height:12px; background:#ffffff; opacity:0.9; border-radius:10px;86 }87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Top status bar -->93 <div class="status-bar">94 <div class="status-left">11:45</div>95 <div class="status-right">96 <!-- simple placeholders for status icons -->97 <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 3l9 9h-6v9H9v-9H3z"/></svg>98 <svg class="status-icon" viewBox="0 0 24 24"><path d="M21 8v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8"/></svg>99 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="10" width="18" height="10" rx="2"/><path d="M5 10V7a7 7 0 0 1 14 0v3"/></svg>100 <div style="display:flex; align-items:center; gap:8px;">101 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="4" height="14"/><rect x="9" y="11" width="4" height="10"/><rect x="15" y="5" width="4" height="16"/></svg>102 <span>100%</span>103 </div>104 </div>105 </div>106 107 <!-- Back arrow -->108 <svg class="back-btn" viewBox="0 0 24 24">109 <path d="M15 5L7 12l8 7" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>110 </svg>111 112 <!-- Right header actions -->113 <div class="header-actions">114 <!-- bell -->115 <svg viewBox="0 0 24 24">116 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/>117 <path d="M18 16V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"/>118 </svg>119 <!-- lock -->120 <svg viewBox="0 0 24 24">121 <rect x="4" y="10" width="16" height="10" rx="2"/>122 <path d="M8 10V7a4 4 0 0 1 8 0v3"/>123 </svg>124 <!-- download -->125 <svg viewBox="0 0 24 24">126 <path d="M12 3v12"/>127 <path d="M8 11l4 4 4-4" />128 <rect x="4" y="18" width="16" height="3" rx="1.5"/>129 </svg>130 </div>131 132 <!-- Title -->133 <div class="title">My book recommendation</div>134 <div class="subtitle">Chetan Bhagat</div>135 136 <!-- Bottom sheet with actions -->137 <div class="sheet">138 <div class="item">139 <div class="icon">140 <svg viewBox="0 0 24 24">141 <path d="M3 6h18"/>142 <path d="M7 6v14h10V6"/>143 <path d="M9 6V4h6v2"/>144 </svg>145 </div>146 <div>Delete</div>147 </div>148 149 <div class="item">150 <div class="icon">151 <svg viewBox="0 0 24 24">152 <rect x="4" y="4" width="10" height="14" rx="2"/>153 <rect x="10" y="6" width="10" height="14" rx="2"/>154 </svg>155 </div>156 <div>Make a copy</div>157 </div>158 159 <div class="item">160 <div class="icon">161 <svg viewBox="0 0 24 24">162 <circle cx="6" cy="12" r="3"/>163 <circle cx="18" cy="6" r="3"/>164 <circle cx="18" cy="18" r="3"/>165 <path d="M8.5 10.5l7-3"/>166 <path d="M8.5 13.5l7 3"/>167 </svg>168 </div>169 <div>Send</div>170 </div>171 172 <div class="item">173 <div class="icon">174 <svg viewBox="0 0 24 24">175 <circle cx="9" cy="9" r="4"/>176 <path d="M17 11v-2m0 0v-2m0 2h2m-2 0h-2"/>177 <path d="M4 22a7 7 0 0 1 10-5"/>178 </svg>179 </div>180 <div>Collaborator</div>181 </div>182 183 <div class="item">184 <div class="icon">185 <svg viewBox="0 0 24 24">186 <path d="M20 12l-8 8-8-8 8-8 8 8z"/>187 <path d="M8 12h8"/>188 </svg>189 </div>190 <div>Labels</div>191 </div>192 193 <div class="item" style="border-bottom:none;">194 <div class="icon">195 <svg viewBox="0 0 24 24">196 <circle cx="12" cy="12" r="9"/>197 <path d="M12 8v2m0 8v-6"/>198 </svg>199 </div>200 <div>Help & feedback</div>201 </div>202 </div>203 204 <!-- Navigation pill -->205 <div class="nav-pill"></div>206</div>207</body>208</html>