GD-ML/AndroidCode
13.4k
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>Dark Note Detail with Bottom Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #0E0E0E;16 font-family: "Roboto", Arial, sans-serif;17 color: #FFFFFF;18 }19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 padding: 0 32px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #F5F5F5;31 font-weight: 500;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 16px;37 font-size: 42px;38 }39 .status-right {40 display: flex;41 align-items: center;42 gap: 18px;43 font-size: 36px;44 }45 /* Header/back and actions */46 .header {47 position: absolute;48 top: 140px;49 left: 32px;50 right: 32px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 color: #BDBDBD;55 }56 .back {57 display: flex;58 align-items: center;59 gap: 12px;60 }61 .header-actions {62 display: flex;63 align-items: center;64 gap: 40px;65 }66 .icon {67 width: 48px;68 height: 48px;69 opacity: 0.8;70 }71 /* Title section */72 .content {73 position: absolute;74 top: 260px;75 left: 56px;76 right: 56px;77 }78 .title {79 font-size: 76px;80 line-height: 1.2;81 font-weight: 500;82 color: #EDEDED;83 margin-bottom: 20px;84 }85 .subtitle {86 font-size: 42px;87 color: #9E9E9E;88 margin-bottom: 50px;89 }90 .pill {91 display: inline-flex;92 align-items: center;93 gap: 20px;94 background: #2A2A2A;95 color: #CFCFCF;96 border-radius: 28px;97 padding: 18px 26px;98 font-size: 40px;99 }100 .pill .icon {101 width: 44px;102 height: 44px;103 opacity: 1;104 }105 /* Bottom sheet */106 .bottom-sheet {107 position: absolute;108 bottom: 0;109 left: 0;110 width: 1080px;111 height: 880px;112 background: #2B2F31;113 color: #EEEEEE;114 padding: 40px 40px 120px;115 }116 .sheet-item {117 display: flex;118 align-items: center;119 gap: 28px;120 padding: 34px 0;121 font-size: 44px;122 color: #E0E0E0;123 }124 .sheet-item .icon {125 width: 60px;126 height: 60px;127 color: #E0E0E0;128 }129 .gesture-bar {130 position: absolute;131 bottom: 26px;132 left: 50%;133 transform: translateX(-50%);134 width: 280px;135 height: 10px;136 border-radius: 10px;137 background: #FFFFFF;138 opacity: 0.9;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="status-bar">147 <div class="status-left">148 <span>1:44</span>149 <!-- tiny doc icon -->150 <svg class="icon" viewBox="0 0 24 24" style="width:34px;height:34px;">151 <rect x="5" y="4" width="14" height="16" fill="none" stroke="#E0E0E0" stroke-width="2"/>152 <line x1="8" y1="9" x2="16" y2="9" stroke="#E0E0E0" stroke-width="2"/>153 <line x1="8" y1="13" x2="16" y2="13" stroke="#E0E0E0" stroke-width="2"/>154 </svg>155 </div>156 <div class="status-right">157 <!-- WiFi -->158 <svg class="icon" viewBox="0 0 24 24" style="width:40px;height:40px;">159 <path d="M3 8c4.5-4 13.5-4 18 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>160 <path d="M6 12c3.2-2.8 8.8-2.8 12 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>161 <circle cx="12" cy="16" r="2" fill="#FFFFFF"/>162 </svg>163 <!-- Battery -->164 <svg class="icon" viewBox="0 0 28 16" style="width:44px;height:26px;">165 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>166 <rect x="3" y="4" width="18" height="8" fill="#FFFFFF"/>167 <rect x="23" y="6" width="4" height="4" fill="#FFFFFF"/>168 </svg>169 <span>100%</span>170 </div>171 </div>172 173 <!-- Header -->174 <div class="header">175 <div class="back">176 <svg class="icon" viewBox="0 0 24 24">177 <path d="M15 5 L7 12 L15 19" stroke="#BDBDBD" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 </div>180 <div class="header-actions">181 <!-- Bell -->182 <svg class="icon" viewBox="0 0 24 24">183 <path d="M12 3c-3 0-5 2-5 5v3l-1 2h12l-1-2V8c0-3-2-5-5-5z" stroke="#7A7A7A" fill="none" stroke-width="2"/>184 <circle cx="12" cy="20" r="2" fill="#7A7A7A"/>185 </svg>186 <!-- Lock -->187 <svg class="icon" viewBox="0 0 24 24">188 <rect x="5" y="10" width="14" height="10" rx="2" fill="none" stroke="#7A7A7A" stroke-width="2"/>189 <path d="M8 10V7c0-2 2-3 4-3s4 1 4 3v3" stroke="#7A7A7A" stroke-width="2" fill="none"/>190 </svg>191 <!-- Download -->192 <svg class="icon" viewBox="0 0 24 24">193 <path d="M12 5v8" stroke="#7A7A7A" stroke-width="2" fill="none" stroke-linecap="round"/>194 <path d="M8 10l4 4 4-4" stroke="#7A7A7A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195 <rect x="5" y="18" width="14" height="2" fill="#7A7A7A"/>196 </svg>197 </div>198 </div>199 200 <!-- Content -->201 <div class="content">202 <div class="title">Title</div>203 <div class="subtitle">Meet and Greet</div>204 205 <div class="pill">206 <svg class="icon" viewBox="0 0 24 24">207 <circle cx="12" cy="12" r="9" stroke="#CFCFCF" fill="none" stroke-width="2"/>208 <path d="M12 7v6l4 2" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"/>209 </svg>210 <span>Aug 10, 8:00 AM</span>211 </div>212 </div>213 214 <!-- Bottom sheet -->215 <div class="bottom-sheet">216 <div class="sheet-item">217 <!-- Delete -->218 <svg class="icon" viewBox="0 0 24 24">219 <path d="M5 7h14" stroke="#E0E0E0" stroke-width="2"/>220 <rect x="6" y="7" width="12" height="13" fill="none" stroke="#E0E0E0" stroke-width="2"/>221 <rect x="9" y="3" width="6" height="3" fill="#E0E0E0"/>222 </svg>223 <span>Delete</span>224 </div>225 226 <div class="sheet-item">227 <!-- Copy -->228 <svg class="icon" viewBox="0 0 24 24">229 <rect x="8" y="8" width="11" height="11" fill="none" stroke="#E0E0E0" stroke-width="2"/>230 <rect x="5" y="5" width="11" height="11" fill="none" stroke="#E0E0E0" stroke-width="2"/>231 </svg>232 <span>Make a copy</span>233 </div>234 235 <div class="sheet-item">236 <!-- Send/share -->237 <svg class="icon" viewBox="0 0 24 24">238 <path d="M4 12l16-8-6 16-3-6-7-2z" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linejoin="round"/>239 </svg>240 <span>Send</span>241 </div>242 243 <div class="sheet-item">244 <!-- Collaborator -->245 <svg class="icon" viewBox="0 0 24 24">246 <circle cx="10" cy="9" r="4" fill="none" stroke="#E0E0E0" stroke-width="2"/>247 <path d="M3 20c1.5-3 5-4 7-4s5.5 1 7 4" stroke="#E0E0E0" stroke-width="2" fill="none"/>248 <path d="M18 8v4M20 10h-4" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"/>249 </svg>250 <span>Collaborator</span>251 </div>252 253 <div class="sheet-item">254 <!-- Labels -->255 <svg class="icon" viewBox="0 0 24 24">256 <path d="M3 7h11l7 5-7 5H3z" fill="none" stroke="#E0E0E0" stroke-width="2"/>257 <circle cx="7" cy="12" r="2" fill="#E0E0E0"/>258 </svg>259 <span>Labels</span>260 </div>261 262 <div class="sheet-item">263 <!-- Help -->264 <svg class="icon" viewBox="0 0 24 24">265 <circle cx="12" cy="12" r="9" fill="none" stroke="#E0E0E0" stroke-width="2"/>266 <path d="M9.5 9.5c.4-1.5 2.2-2.2 3.6-1.5 1 .5 1.4 1.2 1.4 2 0 1.2-1 1.8-2 2.3-.8.4-1.2.9-1.2 1.7" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/>267 <circle cx="12" cy="17.5" r="1.2" fill="#E0E0E0"/>268 </svg>269 <span>Help & feedback</span>270 </div>271 </div>272 273 <!-- Gesture bar -->274 <div class="gesture-bar"></div>275</div>276</body>277</html>