GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Note UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #f6efd9;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0;16 height: 130px; background: #000000;17 color: #ffffff; display: flex; align-items: center;18 padding: 0 32px; font-size: 36px; letter-spacing: 0.5px;19 }20 .status-icons { margin-left: auto; display: flex; gap: 26px; align-items: center; opacity: 0.9; }21 .status-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.85; }22 23 /* Header (app bar) */24 .app-bar {25 position: absolute; top: 130px; left: 0; right: 0;26 height: 180px; background: #efd89f;27 display: flex; align-items: center; padding: 0 36px; color: #5b4c2d;28 }29 .app-bar .actions { display: flex; align-items: center; gap: 54px; margin-left: 12px; }30 .app-bar .spacer { flex: 1; }31 .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }32 .icon-btn svg { width: 46px; height: 46px; }33 34 /* Note area */35 .note-area {36 position: absolute; top: 310px; left: 0; right: 0; bottom: 0;37 background: #f3ecd3;38 }39 .meta {40 display: flex; align-items: center; padding: 34px 36px 12px 36px; color: #6c6c6c;41 font-size: 34px;42 }43 .meta .time { margin-right: 16px; }44 .pill {45 margin-left: auto; display: flex; align-items: center; gap: 12px;46 background: #e9e0c5; color: #6b6b6b;47 border-radius: 48px; padding: 14px 26px; font-size: 34px;48 border: 1px solid rgba(0,0,0,0.08);49 }50 .pill svg { width: 40px; height: 40px; }51 .title {52 color: #c8c0ad; font-size: 58px; padding: 22px 36px 8px 36px; font-weight: 500;53 }54 .body-placeholder {55 color: #c8c0ad; font-size: 44px; padding: 6px 36px 26px 36px;56 }57 58 /* Bottom toolbar above keyboard */59 .bottom-tools {60 position: absolute; left: 24px; right: 24px; bottom: 1080px;61 background: #ffffff; border-radius: 22px; height: 120px;62 display: flex; align-items: center; gap: 40px; padding: 0 28px;63 border: 1px solid rgba(0,0,0,0.08);64 }65 .tool-chip {66 min-width: 74px; height: 74px; border-radius: 18px;67 display: flex; align-items: center; justify-content: center;68 color: #28313c; font-size: 36px; background: #f8fafb; border: 1px solid #e5e8ea;69 }70 .tool-chip svg { width: 40px; height: 40px; }71 72 /* Keyboard */73 .keyboard {74 position: absolute; left: 0; right: 0; bottom: 0;75 height: 1050px; background: #1e1a1a; color: #e9e9e9;76 box-shadow: 0 -6px 18px rgba(0,0,0,0.25);77 }78 .kbd-top {79 height: 96px; display: flex; align-items: center; gap: 38px;80 padding: 0 36px; color: #dcdcdc; font-size: 36px;81 }82 .kbd-top .small-icon {83 width: 56px; height: 56px; border-radius: 16px; background: #2a2424;84 display: flex; align-items: center; justify-content: center; border: 1px solid #3a3434;85 }86 .keys {87 padding: 12px 24px 18px 24px;88 }89 .row {90 display: grid; grid-template-columns: repeat(10, 1fr); gap: 22px; margin-bottom: 26px;91 }92 .key {93 height: 116px; background: #2a2424; border-radius: 22px;94 display: flex; align-items: center; justify-content: center;95 border: 1px solid #3a3434; font-size: 42px;96 }97 .row2 { grid-template-columns: repeat(9, 1fr); }98 .row3 { grid-template-columns: repeat(7, 1fr); }99 .bottom-row {100 display: grid; grid-template-columns: 1.2fr 0.8fr 3fr 0.8fr 1.6fr; gap: 22px;101 }102 .key.pink { background: #f1cfc8; color: #3a2a2a; border-color: #e5b7af; }103 .space { font-size: 38px; color: #cfcfcf; }104 105 /* Simple helper */106 .svg-stroke { stroke: #5b4c2d; stroke-width: 2.5; fill: none; }107 .svg-dark { stroke: #3a3a3a; stroke-width: 2.2; fill: none; }108 .svg-blue { stroke: #28313c; stroke-width: 2.2; fill: none; }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="status-bar">116 12:31117 <div class="status-icons">118 <div class="status-dot"></div>119 <div class="status-dot" style="width:22px;height:22px;border-radius:4px;"></div>120 <div class="status-dot"></div>121 <div class="status-dot"></div>122 </div>123 </div>124 125 <!-- App bar -->126 <div class="app-bar">127 <div class="icon-btn">128 <svg viewBox="0 0 24 24">129 <path class="svg-stroke" d="M4 12l5 5 11-11"/>130 </svg>131 </div>132 <div class="actions">133 <div class="icon-btn">134 <svg viewBox="0 0 24 24">135 <path class="svg-stroke" d="M8 16c0-5 6-6 8-4"/><path class="svg-stroke" d="M9 7l-4 4 4 4"/>136 </svg>137 </div>138 <div class="icon-btn">139 <svg viewBox="0 0 24 24">140 <path class="svg-stroke" d="M16 8c0 5-6 6-8 4"/><path class="svg-stroke" d="M15 17l4-4-4-4"/>141 </svg>142 </div>143 </div>144 <div class="spacer"></div>145 <div class="icon-btn">146 <svg viewBox="0 0 24 24">147 <rect class="svg-stroke" x="4" y="4" width="12" height="12" rx="2"/>148 <path class="svg-stroke" d="M10 8h6M16 8v6"/>149 <path class="svg-stroke" d="M18 6l4-4"/>150 </svg>151 </div>152 <div class="icon-btn">153 <svg viewBox="0 0 24 24">154 <circle cx="12" cy="4" r="2" fill="#5b4c2d"/>155 <circle cx="12" cy="12" r="2" fill="#5b4c2d"/>156 <circle cx="12" cy="20" r="2" fill="#5b4c2d"/>157 </svg>158 </div>159 </div>160 161 <!-- Note area -->162 <div class="note-area">163 <div class="meta">164 <span class="time">08-08, 12:31 pm</span>165 <svg viewBox="0 0 24 24" style="width:34px;height:34px;margin-right:10px;">166 <path class="svg-dark" d="M3 21l4-1 10-10-3-3L4 17l-1 4z"/>167 <path class="svg-dark" d="M14 7l3 3"/>168 </svg>169 170 <div class="pill">171 <svg viewBox="0 0 24 24">172 <path class="svg-dark" d="M3 5h8v14H3zM13 5h8v14h-8z"/>173 </svg>174 Categories175 <svg viewBox="0 0 24 24" style="width:34px;height:34px;">176 <path class="svg-dark" d="M6 9l6 6 6-6"/>177 </svg>178 </div>179 </div>180 181 <div class="title">Title</div>182 <div class="body-placeholder">Note here</div>183 184 <!-- Bottom tools row -->185 <div class="bottom-tools">186 <div class="tool-chip">Aa</div>187 <div class="tool-chip">188 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#28313c" stroke-width="2.2"/><path d="M7 12l3 3 7-7" stroke="#28313c" stroke-width="2.2" fill="none"/></svg>189 </div>190 <div class="tool-chip">191 <svg viewBox="0 0 24 24"><path d="M12 3c2 0 3 2 3 4v7c0 2-1 4-3 4s-3-2-3-4V7c0-2 1-4 3-4z" stroke="#28313c" stroke-width="2.2" fill="none"/><circle cx="12" cy="19" r="2" fill="#28313c"/></svg>192 </div>193 <div class="tool-chip">194 <svg viewBox="0 0 24 24"><path d="M4 20l6-2 8-8-4-4-8 8-2 6z" stroke="#28313c" stroke-width="2.2" fill="none"/></svg>195 </div>196 <div class="tool-chip">197 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#28313c" stroke-width="2.2"/><path d="M7 13l3-3 3 3 3-3" stroke="#28313c" stroke-width="2.2" fill="none"/><path d="M15 6l5-5" stroke="#28313c" stroke-width="2.2"/></svg>198 </div>199 <div class="tool-chip">200 <svg viewBox="0 0 24 24"><circle cx="12" cy="10" r="4" fill="none" stroke="#28313c" stroke-width="2.2"/><path d="M5 19c3-4 11-4 14 0" stroke="#28313c" stroke-width="2.2" fill="none"/></svg>201 </div>202 <div class="tool-chip">203 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#28313c"/><circle cx="12" cy="12" r="3" fill="#8aa"/><circle cx="18" cy="12" r="3" fill="#b96"/></svg>204 </div>205 <div class="tool-chip">206 <svg viewBox="0 0 24 24"><path d="M5 7h10M5 12h10M5 17h10" stroke="#28313c" stroke-width="2.2"/><circle cx="18" cy="7" r="1.8" fill="#28313c"/><circle cx="18" cy="12" r="1.8" fill="#28313c"/><circle cx="18" cy="17" r="1.8" fill="#28313c"/></svg>207 </div>208 <div class="tool-chip">209 <svg viewBox="0 0 24 24"><path d="M6 7h12M6 12h9M6 17h6" stroke="#28313c" stroke-width="2.2"/><text x="2" y="9" font-size="6" fill="#28313c">1</text><text x="2" y="14" font-size="6" fill="#28313c">2</text><text x="2" y="19" font-size="6" fill="#28313c">3</text></svg>210 </div>211 </div>212 </div>213 214 <!-- Keyboard -->215 <div class="keyboard">216 <div class="kbd-top">217 <div class="small-icon">GIF</div>218 <div class="small-icon">G</div>219 <div class="small-icon">220 <svg viewBox="0 0 24 24"><path d="M4 14h16M4 10h16" stroke="#cfcfcf" stroke-width="2"/></svg>221 </div>222 <div class="small-icon">223 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="none" stroke="#cfcfcf" stroke-width="2"/><path d="M12 5v14M5 12h14" stroke="#cfcfcf" stroke-width="2"/></svg>224 </div>225 <div class="small-icon">226 <svg viewBox="0 0 24 24"><path d="M12 3c2 0 3 2 3 4v7c0 2-1 4-3 4s-3-2-3-4V7c0-2 1-4 3-4z" stroke="#cfcfcf" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="2" fill="#cfcfcf"/></svg>227 </div>228 </div>229 230 <div class="keys">231 <div class="row">232 <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><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>233 </div>234 <div class="row row2">235 <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><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>236 </div>237 <div class="row row3">238 <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><div class="key">N</div><div class="key">M</div>239 </div>240 <div class="bottom-row">241 <div class="key">?123</div>242 <div class="key">,</div>243 <div class="key space">Space</div>244 <div class="key">.</div>245 <div class="key pink">↵</div>246 </div>247 </div>248 </div>249 250</div>251</body>252</html>