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>Notes UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #1F1F1F; color: #EAEAEA;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 100%; height: 120px;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 36px; color: #DADADA; font-size: 40px; letter-spacing: 0.5px;20 }21 .status-right { display: flex; align-items: center; gap: 24px; }22 .status-dot { width: 8px; height: 8px; background: #9E9E9E; border-radius: 50%; display: inline-block; margin: 0 3px; }23 24 /* Top row with back and actions */25 .top-row {26 position: absolute; top: 120px; left: 0; width: 100%; height: 96px;27 display: flex; align-items: center; justify-content: space-between;28 padding: 0 36px;29 }30 .icon-btn {31 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;32 color: #CFCFCF;33 }34 .icon-btn svg { width: 40px; height: 40px; stroke: #CFCFCF; fill: none; stroke-width: 2.5; }35 36 /* Title and subtitle */37 .title-area {38 position: absolute; top: 240px; left: 36px; right: 36px;39 }40 .note-title {41 font-size: 80px; line-height: 1.2; margin: 0 0 18px 0; color: #EEEEEE;42 display: inline-flex; align-items: baseline; gap: 16px;43 }44 .caret {45 width: 4px; height: 84px; background: #EEEEEE; border-radius: 2px; display: inline-block;46 }47 .subtitle {48 font-size: 42px; color: #9E9E9E;49 }50 51 /* Bottom utility cluster (tools, suggestions, keyboard, home pill) */52 .bottom-ui {53 position: absolute; bottom: 0; left: 0; width: 100%; height: 1280px;54 display: flex; flex-direction: column; justify-content: flex-start;55 }56 57 /* Tools row */58 .tools-row {59 height: 120px; display: flex; align-items: center; gap: 28px;60 padding: 0 36px; color: #CFCFCF;61 }62 .tool-btn {63 width: 84px; height: 84px; border-radius: 14px;64 display: flex; align-items: center; justify-content: center;65 background: rgba(255,255,255,0.04);66 }67 .tool-btn svg { width: 40px; height: 40px; stroke: #CFCFCF; fill: none; stroke-width: 2.5; }68 .edited-text {69 font-size: 36px; color: #A7A7A7; margin-left: 12px; flex: 1;70 text-align: center;71 }72 .more-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; color: #CFCFCF; }73 74 /* Suggestions row */75 .suggestions {76 height: 110px; display: flex; align-items: center; padding: 0 24px; gap: 22px;77 }78 .mini-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255,255,255,0.05); }79 .mini-icon svg { width: 36px; height: 36px; stroke: #CFCFCF; fill: none; stroke-width: 2.5; }80 .chip-bar { display: flex; align-items: center; gap: 26px; flex: 1; }81 .chip {82 padding: 18px 26px; border-radius: 30px; background: rgba(255,255,255,0.06);83 color: #E0E0E0; font-size: 36px;84 }85 .divider { width: 2px; height: 36px; background: #555; }86 87 /* Keyboard */88 .keyboard {89 height: 940px; padding: 14px 24px 0 24px; display: flex; flex-direction: column; gap: 18px;90 }91 .kb-row { display: flex; gap: 16px; justify-content: center; }92 .key {93 width: 88px; height: 130px; border-radius: 24px; background: #2B2B2B;94 color: #E9E9E9; font-size: 42px; display: flex; align-items: center; justify-content: center;95 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);96 }97 .key.small { width: 120px; }98 .key.medium { width: 140px; }99 .key.wide { width: 520px; }100 101 .key.icon svg { width: 40px; height: 40px; stroke: #E9E9E9; fill: none; stroke-width: 2.8; }102 .key.light { background: #3A3A3A; color: #FAFAFA; }103 104 /* Home indicator */105 .home-indicator {106 height: 24px; display: flex; align-items: center; justify-content: center; padding-bottom: 20px;107 }108 .pill {109 width: 240px; height: 10px; background: #A6A6A6; border-radius: 6px;110 }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- Status bar -->117 <div class="status-bar">118 <div>9:14</div>119 <div class="status-right">120 <span class="status-dot"></span><span class="status-dot"></span><span class="status-dot"></span>121 <svg viewBox="0 0 24 24">122 <path d="M3 10h18M5 14h14" stroke="#CFCFCF"/>123 </svg>124 <svg viewBox="0 0 24 24">125 <path d="M2 17h20" stroke="#CFCFCF"/>126 <rect x="6" y="5" width="12" height="10" rx="2" stroke="#CFCFCF" />127 </svg>128 <svg viewBox="0 0 24 24">129 <rect x="3" y="5" width="18" height="14" rx="3" stroke="#CFCFCF"/>130 <path d="M20 5l-1 14" stroke="#CFCFCF"/>131 </svg>132 </div>133 </div>134 135 <!-- Back and actions -->136 <div class="top-row">137 <div class="icon-btn">138 <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" /></svg>139 </div>140 <div style="display:flex; gap:26px;">141 <div class="icon-btn">142 <svg viewBox="0 0 24 24">143 <path d="M12 3c-3 0-5 2-5 5v5c0 2-2 2-2 3h14c0-1-2-1-2-3V8c0-3-2-5-5-5z" />144 <path d="M9 20h6" />145 </svg>146 </div>147 <div class="icon-btn">148 <svg viewBox="0 0 24 24">149 <rect x="5" y="9" width="14" height="11" rx="2" />150 <path d="M8 9V7a4 4 0 0 1 8 0v2" />151 </svg>152 </div>153 <div class="icon-btn">154 <svg viewBox="0 0 24 24">155 <rect x="4" y="4" width="16" height="16" rx="3" />156 <path d="M12 7v8M8 11l4 4 4-4" />157 </svg>158 </div>159 </div>160 </div>161 162 <!-- Title -->163 <div class="title-area">164 <div class="note-title">165 <span>New Gardening Tools</span>166 <span class="caret"></span>167 </div>168 <div class="subtitle">Note</div>169 </div>170 171 <!-- Bottom Interface -->172 <div class="bottom-ui">173 174 <!-- Tools row above keyboard -->175 <div class="tools-row">176 <div class="tool-btn">177 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>178 </div>179 <div class="tool-btn">180 <svg viewBox="0 0 24 24">181 <circle cx="12" cy="12" r="6"/>182 <path d="M4 20l4-2" />183 </svg>184 </div>185 <div class="tool-btn">186 <svg viewBox="0 0 24 24"><path d="M6 18l6-12 6 12M8.5 15h7"/></svg>187 </div>188 <div class="edited-text">Edited 9:13 PM</div>189 <div class="more-btn">190 <svg viewBox="0 0 24 24">191 <circle cx="12" cy="5" r="2.2" fill="#CFCFCF" />192 <circle cx="12" cy="12" r="2.2" fill="#CFCFCF" />193 <circle cx="12" cy="19" r="2.2" fill="#CFCFCF" />194 </svg>195 </div>196 </div>197 198 <!-- Suggestions row -->199 <div class="suggestions">200 <div class="mini-icon">201 <svg viewBox="0 0 24 24">202 <rect x="4" y="4" width="6" height="6" rx="1"/>203 <rect x="14" y="4" width="6" height="6" rx="1"/>204 <rect x="4" y="14" width="6" height="6" rx="1"/>205 <rect x="14" y="14" width="6" height="6" rx="1"/>206 </svg>207 </div>208 <div class="chip-bar">209 <div class="chip">Tools</div>210 <div class="divider"></div>211 <div class="chip">Toolset</div>212 <div class="divider"></div>213 <div class="chip">Rools</div>214 </div>215 <div class="mini-icon">216 <svg viewBox="0 0 24 24">217 <rect x="9" y="4" width="6" height="10" rx="3"/>218 <path d="M5 12c0 4 3 6 7 6s7-2 7-6" />219 </svg>220 </div>221 </div>222 223 <!-- Keyboard -->224 <div class="keyboard">225 <!-- Row 1 -->226 <div class="kb-row">227 <div class="key">q</div>228 <div class="key">w</div>229 <div class="key">e</div>230 <div class="key">r</div>231 <div class="key">t</div>232 <div class="key">y</div>233 <div class="key">u</div>234 <div class="key">i</div>235 <div class="key">o</div>236 <div class="key">p</div>237 </div>238 <!-- Row 2 -->239 <div class="kb-row">240 <div class="key">a</div>241 <div class="key">s</div>242 <div class="key">d</div>243 <div class="key">f</div>244 <div class="key">g</div>245 <div class="key">h</div>246 <div class="key">j</div>247 <div class="key">k</div>248 <div class="key">l</div>249 <div class="key icon">250 <svg viewBox="0 0 24 24"><path d="M4 12h16M14 6l6 6-6 6"/></svg>251 </div>252 </div>253 <!-- Row 3 -->254 <div class="kb-row">255 <div class="key small">⇧</div>256 <div class="key">z</div>257 <div class="key">x</div>258 <div class="key">c</div>259 <div class="key">v</div>260 <div class="key">b</div>261 <div class="key">n</div>262 <div class="key">m</div>263 <div class="key icon medium">264 <svg viewBox="0 0 24 24"><path d="M4 12h16M14 6l6 6-6 6"/></svg>265 </div>266 </div>267 <!-- Row 4 -->268 <div class="kb-row">269 <div class="key small light">?123</div>270 <div class="key small light">☺</div>271 <div class="key wide">space</div>272 <div class="key">.</div>273 <div class="key icon medium">274 <svg viewBox="0 0 24 24"><path d="M6 4v10a4 4 0 0 0 4 4h2l-3 3M10 18l3-3"/></svg>275 </div>276 </div>277 </div>278 279 <!-- Home indicator -->280 <div class="home-indicator">281 <div class="pill"></div>282 </div>283 </div>284 285</div>286</body>287</html>