GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Note Editor Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target{8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#F4EFD3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;10 color:#222;11 }12 13 /* Status bar */14 .status{15 position:absolute; top:0; left:0; width:100%; height:110px;16 background:#0E0E0E; color:#fff; display:flex; align-items:center; justify-content:space-between;17 padding:0 28px; box-sizing:border-box; font-size:36px; letter-spacing:0.5px;18 }19 .status .right-icons{ display:flex; gap:22px; align-items:center; }20 .dot{ width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.9; }21 .bar{ width:36px; height:18px; border:2px solid #fff; border-radius:4px; position:relative; }22 .bar:after{ content:""; position:absolute; right:-8px; top:4px; width:6px; height:10px; background:#fff; border-radius:1px; }23 .battery-fill{ position:absolute; left:2px; top:2px; bottom:2px; width:60%; background:#fff; }24 25 /* App bar */26 .appbar{27 position:absolute; top:110px; left:0; width:100%; height:140px;28 background:#F2DE98; display:flex; align-items:center; justify-content:space-between; padding:0 26px;29 box-sizing:border-box;30 }31 .app-actions{ display:flex; align-items:center; gap:36px; }32 .icon{ width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; }33 .icon svg{ width:42px; height:42px; }34 35 /* Note area */36 .note{37 position:absolute; top:250px; left:0; right:0; bottom:900px;38 padding:36px 36px 0 36px; box-sizing:border-box; color:#2B2B2B;39 }40 .meta-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }41 .meta{ color:#6c6c6c; font-size:34px; display:flex; align-items:center; gap:12px; }42 .chip{43 background:#EFE6BB; border:1px solid #D6C98A; color:#4b4b4b;44 padding:14px 20px; border-radius:28px; display:flex; align-items:center; gap:14px; font-size:34px;45 }46 .title{ font-size:64px; line-height:1.2; margin:18px 0 32px 0; font-weight:600; }47 .placeholder{ color:#B3AE98; font-size:40px; }48 49 .saving{ position:absolute; right:36px; bottom:940px; color:#8c8c8c; font-size:36px; }50 51 /* Bottom editing toolbar above keyboard */52 .edit-toolbar{53 position:absolute; left:24px; right:24px; bottom:880px; height:140px;54 background:#FFFFFF; border:1px solid #E5E5E5; border-radius:26px;55 display:flex; align-items:center; gap:36px; padding:0 26px; box-sizing:border-box;56 }57 .tool{ display:flex; align-items:center; gap:16px; color:#222; }58 .tool .lbl{ font-size:42px; }59 .tiny{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; }60 .tiny svg{ width:40px; height:40px; }61 62 /* Keyboard */63 .keyboard{64 position:absolute; left:0; bottom:0; width:100%; height:860px; background:#1E1B20;65 color:#fff; box-sizing:border-box; padding:22px 22px 26px 22px;66 }67 .suggest{ display:flex; gap:26px; padding:8px 6px 16px 6px; align-items:center; }68 .suggest .pill{69 background:#2B2830; color:#EDEAF1; padding:12px 26px; border-radius:22px; font-size:36px;70 }71 .krow{ display:flex; gap:12px; margin:10px 6px; }72 .key{73 flex:1; height:118px; background:#2B2830; border-radius:22px; display:flex; align-items:center; justify-content:center;74 font-size:48px;75 }76 .key.wide{ flex:1.6; }77 .key.space{ flex:4.5; font-size:40px; color:#C9C5CE; }78 .krow.indent{ padding-left:40px; padding-right:40px; }79 .kbd-top{ display:flex; align-items:center; justify-content:space-between; padding:10px 8px 0 8px; color:#C9C5CE; font-size:34px; opacity:0.9;}80 .round-btn{81 width:112px; height:112px; background:#2B2830; border-radius:28px; display:flex; align-items:center; justify-content:center;82 }83 .enter{ background:#E7C7C9; color:#1E1B20; }84 85</style>86</head>87<body>88<div id="render-target">89 90 <!-- Status bar -->91 <div class="status">92 <div>12:45</div>93 <div class="right-icons">94 <div class="dot"></div>95 <div class="dot"></div>96 <div class="dot"></div>97 <div class="bar"><div class="battery-fill"></div></div>98 </div>99 </div>100 101 <!-- App bar -->102 <div class="appbar">103 <div class="app-actions">104 <!-- Check -->105 <div class="icon">106 <svg viewBox="0 0 24 24" fill="none" stroke="#2A2A2A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">107 <polyline points="3,13 9,19 21,5"></polyline>108 </svg>109 </div>110 <!-- Undo -->111 <div class="icon">112 <svg viewBox="0 0 24 24" fill="none" stroke="#2A2A2A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">113 <path d="M9 10H3v6"></path>114 <path d="M3 16a9 9 0 1 0 3-6"></path>115 </svg>116 </div>117 <!-- Redo -->118 <div class="icon">119 <svg viewBox="0 0 24 24" fill="none" stroke="#2A2A2A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">120 <path d="M15 10h6v6"></path>121 <path d="M21 16a9 9 0 1 1-3-6"></path>122 </svg>123 </div>124 </div>125 <div class="app-actions">126 <!-- Share -->127 <div class="icon">128 <svg viewBox="0 0 24 24" fill="none" stroke="#2A2A2A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">129 <path d="M7 12v7h10v-7"></path>130 <path d="M12 3v13"></path>131 <path d="M8 6l4-3 4 3"></path>132 </svg>133 </div>134 <!-- More -->135 <div class="icon">136 <svg viewBox="0 0 24 24" fill="#2A2A2A">137 <circle cx="12" cy="5" r="2.2"></circle>138 <circle cx="12" cy="12" r="2.2"></circle>139 <circle cx="12" cy="19" r="2.2"></circle>140 </svg>141 </div>142 </div>143 </div>144 145 <!-- Note area -->146 <div class="note">147 <div class="meta-row">148 <div class="meta">149 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#6c6c6c" stroke-width="2">150 <path d="M3 21v-4l12-12 4 4-12 12H3z"></path>151 </svg>152 <span>08-08, 12:31 pm</span>153 </div>154 <div class="chip">155 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2">156 <path d="M4 6h16v12H4z"></path>157 <path d="M8 9h8"></path>158 <path d="M8 13h8"></path>159 </svg>160 <span>Categories</span>161 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2">162 <polyline points="6,9 12,15 18,9"></polyline>163 </svg>164 </div>165 </div>166 167 <div class="title">Fundamental unit of life</div>168 <div class="placeholder">Note here</div>169 </div>170 171 <div class="saving">Saving...</div>172 173 <!-- Editing toolbar -->174 <div class="edit-toolbar">175 <div class="tool">176 <div class="lbl">Aa</div>177 </div>178 <div class="tiny">179 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">180 <rect x="4" y="4" width="16" height="16" rx="3"></rect>181 <path d="M7 12h10"></path>182 </svg>183 </div>184 <div class="tiny">185 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">186 <path d="M12 18c3 0 5-2 5-5V8a5 5 0 1 0-10 0v5c0 3 2 5 5 5z"></path>187 </svg>188 </div>189 <div class="tiny">190 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">191 <path d="M21 15l-8-8-5 5 8 8h5v-5z"></path>192 <path d="M7 12l-4 4"></path>193 </svg>194 </div>195 <div class="tiny">196 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">197 <rect x="3" y="5" width="18" height="14" rx="2"></rect>198 <circle cx="8" cy="11" r="2"></circle>199 <path d="M21 17l-6-6-4 4-2-2-4 4"></path>200 </svg>201 </div>202 <div class="tiny">203 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">204 <circle cx="9" cy="10" r="1.8"></circle>205 <circle cx="15" cy="10" r="1.8"></circle>206 <path d="M7 16c3 2 7 2 10 0"></path>207 </svg>208 </div>209 <div class="tiny">210 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">211 <path d="M4 20h16"></path>212 <path d="M12 4v10"></path>213 <circle cx="12" cy="4" r="3"></circle>214 </svg>215 </div>216 <div class="tiny">217 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">218 <path d="M8 6h12"></path>219 <path d="M8 12h12"></path>220 <path d="M8 18h12"></path>221 <circle cx="4" cy="6" r="1.5"></circle>222 <circle cx="4" cy="12" r="1.5"></circle>223 <circle cx="4" cy="18" r="1.5"></circle>224 </svg>225 </div>226 <div class="tiny">227 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">228 <path d="M6 6h14"></path>229 <path d="M6 12h14"></path>230 <path d="M6 18h14"></path>231 <path d="M3 6h1"></path>232 <path d="M3 12h1"></path>233 <path d="M3 18h1"></path>234 </svg>235 </div>236 </div>237 238 <!-- Keyboard -->239 <div class="keyboard">240 <div class="kbd-top">241 <div>life</div>242 <div>Life</div>243 <div>Life</div>244 <div style="display:flex; gap:12px; align-items:center;">245 <svg width="30" height="30" viewBox="0 0 24 24" fill="#C9C5CE"><circle cx="12" cy="12" r="4"/></svg>246 <svg width="30" height="30" viewBox="0 0 24 24" fill="#C9C5CE"><path d="M12 2l3 6 6 .5-4.5 4 1.5 6-6-3-6 3 1.5-6L3 8.5 9 8z"/></svg>247 <svg width="30" height="30" viewBox="0 0 24 24" fill="#C9C5CE"><path d="M12 3l3 3-3 3-3-3 3-3zM4 20h16"/></svg>248 </div>249 </div>250 <div class="suggest">251 <div class="pill">life</div>252 <div class="pill">Life</div>253 <div class="pill">life</div>254 </div>255 256 <!-- Row 1 -->257 <div class="krow">258 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>259 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>260 </div>261 262 <!-- Row 2 -->263 <div class="krow indent">264 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>265 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>266 </div>267 268 <!-- Row 3 -->269 <div class="krow">270 <div class="key wide">⇧</div>271 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>272 <div class="key">n</div><div class="key">m</div>273 <div class="key wide">⌫</div>274 </div>275 276 <!-- Row 4 -->277 <div class="krow">278 <div class="key wide">?123</div>279 <div class="key">,</div>280 <div class="key">😊</div>281 <div class="key space">Space</div>282 <div class="key">.</div>283 <div class="round-btn enter">284 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#1E1B20" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">285 <path d="M4 4v6h12"></path>286 <path d="M11 17l5-5-5-5"></path>287 </svg>288 </div>289 </div>290 </div>291 292</div>293</body>294</html>