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: "Segoe UI", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#F5E9C3; /* pale keep-like canvas */10 color:#2b2b2b;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:110px; background:#0d0d0d; color:#fff;15 display:flex; align-items:center; padding:0 28px; font-size:34px;16 }17 .status-icons { margin-left:auto; display:flex; align-items:center; gap:22px; }18 .dot { width:18px; height:18px; background:#fff; border-radius:50%; opacity:.85; }19 /* Header actions */20 .header-actions {21 position:absolute; top:110px; left:0; right:0; height:120px;22 display:flex; align-items:center; padding:0 28px; gap:28px; color:#222;23 }24 .action-right { margin-left:auto; display:flex; gap:28px; }25 .icon-btn svg { width:50px; height:50px; fill:none; stroke:#323232; stroke-width:3px; }26 .content {27 position:absolute; top:230px; left:0; right:0; bottom:0;28 padding:0 40px;29 }30 /* Meta row */31 .meta-row {32 display:flex; align-items:center; font-size:34px; color:#5b5b5b; margin-top:10px;33 }34 .meta-row .left { display:flex; align-items:center; gap:14px; }35 .meta-row .right { margin-left:auto; display:flex; align-items:center; gap:16px; color:#3d3d3d; }36 .tag-pill {37 background:rgba(0,0,0,0.06); padding:12px 18px; border-radius:26px;38 display:flex; align-items:center; gap:12px;39 }40 /* Title & paragraphs */41 .title {42 font-size:58px; font-weight:600; margin-top:34px; margin-bottom:18px; color:#1c1c1c;43 }44 .para { font-size:36px; line-height:1.55; margin:14px 0; }45 .saving {46 text-align:right; font-size:34px; color:#7a7a7a; margin-top:32px;47 }48 /* Bottom tools pill */49 .tools-bar {50 position:absolute; left:24px; right:24px; bottom:970px;51 height:120px; background:#ffffff; border-radius:22px;52 box-shadow:0 2px 6px rgba(0,0,0,0.08);53 display:flex; align-items:center; justify-content:flex-start; padding:0 28px; gap:40px;54 }55 .tool svg { width:56px; height:56px; stroke:#333; fill:none; stroke-width:3px; }56 .tool.text { font-size:40px; color:#333; }57 /* Keyboard mock */58 .keyboard {59 position:absolute; left:0; right:0; bottom:0; height:930px; background:#1e1e1e; color:#fff;60 padding:24px;61 }62 .kbd-toprow { display:flex; align-items:center; gap:28px; margin-bottom:26px; }63 .kbd-toprow .pill {64 background:#2a2a2a; color:#ddd; border-radius:24px; padding:16px 24px; font-size:36px;65 }66 .keys { display:grid; grid-template-columns:repeat(10, 1fr); gap:18px; }67 .key {68 background:#2a2a2a; border-radius:18px; height:120px; display:flex; justify-content:center; align-items:center;69 font-size:48px; color:#f2f2f2;70 box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);71 }72 .keys.row2 { margin-top:18px; grid-template-columns:repeat(9, 1fr); padding:0 45px; }73 .keys.row3 { margin-top:18px; grid-template-columns:repeat(9, 1fr); padding:0 90px; }74 .kbd-bottom { margin-top:22px; display:flex; gap:18px; align-items:center; }75 .wide { flex:1; height:130px; background:#2a2a2a; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:48px; color:#ddd; }76 /* Simple caret/three dots sizing */77 .dots { width:10px; height:10px; background:#333; border-radius:50%; display:inline-block; margin:3px; }78</style>79</head>80<body>81<div id="render-target">82 83 <!-- Status Bar -->84 <div class="status-bar">85 <div>12:47</div>86 <div class="status-icons">87 <div class="dot" style="width:26px; height:26px; border-radius:6px;"></div>88 <div class="dot" style="opacity:.7;"></div>89 <div class="dot" style="opacity:.7;"></div>90 <div class="dot" style="width:18px; height:18px; border-radius:3px; background:#00cc66;"></div>91 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">92 <path d="M3 12h18M12 3v18"/>93 </svg>94 </div>95 </div>96 97 <!-- Header Actions -->98 <div class="header-actions">99 <div class="icon-btn">100 <!-- check -->101 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 9-9"/></svg>102 </div>103 <div class="icon-btn">104 <!-- undo -->105 <svg viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5"/><path d="M3 12h9a6 6 0 110 6"/></svg>106 </div>107 <div class="icon-btn">108 <!-- redo -->109 <svg viewBox="0 0 24 24"><path d="M16 7l5 5-5 5"/><path d="M21 12h-9a6 6 0 100 6"/></svg>110 </div>111 112 <div class="action-right">113 <div class="icon-btn">114 <!-- share -->115 <svg viewBox="0 0 24 24"><path d="M12 5l7 7-7 7"/><path d="M19 12H5"/></svg>116 </div>117 <div class="icon-btn">118 <!-- more -->119 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>120 </div>121 </div>122 </div>123 124 <!-- Content -->125 <div class="content">126 <div class="meta-row">127 <div class="left">128 <div>08-08, 12:31 pm</div>129 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">130 <path d="M4 20l5-1 9-9-4-4-9 9-1 5zM14 6l4 4"/>131 </svg>132 </div>133 <div class="right">134 <div class="tag-pill">135 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">136 <path d="M3 7l9 9 9-9-9-4z"/><circle cx="7" cy="9" r="1.5"/>137 </svg>138 <div>Categories</div>139 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">140 <path d="M6 9l6 6 6-6"/>141 </svg>142 </div>143 </div>144 </div>145 146 <div class="title">Fundamental unit of life</div>147 148 <div class="para">149 The smallest functional unit of life is cell, discovered by Robert Hooke in 1665. A cell can independently perform all necessary activities to sustain life. Hence cell is the basic unit of life.150 </div>151 <div class="para">152 There are two types of cells → plant cell and animal cell.153 </div>154 155 <div class="saving">Saving...</div>156 </div>157 158 <!-- Bottom tools bar -->159 <div class="tools-bar">160 <div class="tool">161 <!-- checkbox -->162 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12l3 3 5-6"/></svg>163 </div>164 <div class="tool">165 <!-- mic -->166 <svg viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="9" rx="3"/><path d="M5 11a7 7 0 0014 0"/><path d="M12 18v3"/></svg>167 </div>168 <div class="tool">169 <!-- paperclip -->170 <svg viewBox="0 0 24 24"><path d="M7 13l6-6a4 4 0 116 6l-7 7a6 6 0 11-9-9l8-8"/></svg>171 </div>172 <div class="tool">173 <!-- image with plus -->174 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="12" height="10" rx="2"/><path d="M3 13l3-3 3 3 3-3 3 3"/><path d="M18 7v8"/><path d="M14 11h8"/></svg>175 </div>176 <div class="tool">177 <!-- smile -->178 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 10h.01M16 10h.01"/><path d="M8 14c2 2 6 2 8 0"/></svg>179 </div>180 <div class="tool">181 <!-- palette -->182 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 100 18c1 0 2-1 2-2 0-1-1-2-2-2h-2a3 3 0 01-3-3c0-3 3-6 7-6"/></svg>183 </div>184 <div class="tool">185 <!-- bullets -->186 <svg viewBox="0 0 24 24"><circle cx="5" cy="6" r="2"/><path d="M10 6h10"/><circle cx="5" cy="12" r="2"/><path d="M10 12h10"/><circle cx="5" cy="18" r="2"/><path d="M10 18h10"/></svg>187 </div>188 <div class="tool">189 <!-- numbers -->190 <svg viewBox="0 0 24 24"><path d="M6 6h13M6 12h13M6 18h13"/><path d="M3 6h1M3 12h1M3 18h1"/></svg>191 </div>192 </div>193 194 <!-- Keyboard area -->195 <div class="keyboard">196 <div class="kbd-toprow">197 <div class="pill">Aa</div>198 <div class="pill">✔</div>199 <div class="pill">🎙</div>200 <div class="pill">GIF</div>201 <div class="pill">Translate</div>202 <div class="pill">⚙</div>203 <div class="pill">🎨</div>204 <div class="pill">⌾</div>205 <div class="pill">🎙</div>206 </div>207 208 <div class="keys">209 <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>210 <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>211 </div>212 <div class="keys row2">213 <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>214 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>215 </div>216 <div class="keys row3">217 <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>218 <div class="key">n</div><div class="key">m</div><div class="key">⌫</div><div class="key">↵</div>219 </div>220 221 <div class="kbd-bottom">222 <div class="key" style="width:140px;">?123</div>223 <div class="key" style="width:140px;">,</div>224 <div class="wide">😊</div>225 <div class="key" style="width:140px;">.</div>226 <div class="key" style="width:140px;">↩</div>227 </div>228 </div>229 230</div>231</body>232</html>