GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:24px;12 box-shadow:0 8px 24px rgba(0,0,0,0.18);13 }14 15 /* Top status + toolbar */16 .status-bar {17 height:110px;18 background:#968f8b;19 color:#fff;20 display:flex;21 align-items:center;22 justify-content:space-between;23 padding:0 36px;24 font-weight:600;25 font-size:38px;26 letter-spacing:0.5px;27 }28 .status-right {29 display:flex; align-items:center; gap:24px;30 }31 .toolbar {32 height:120px;33 background:#b2aba7;34 display:flex; align-items:center; justify-content:space-between;35 padding:0 24px;36 color:#2b2b2b;37 }38 .tool-left, .tool-right { display:flex; align-items:center; gap:28px; }39 .tool-btn {40 display:flex; align-items:center; justify-content:center;41 width:88px; height:88px; border-radius:18px; background:#cfc9c6;42 }43 .tool-text { font-size:44px; font-weight:600; margin-left:10px; }44 45 /* Page badge */46 .page-badge {47 width:72px; height:60px; border:2px solid #6f6a67; border-radius:10px;48 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:36px;49 }50 51 /* Document canvas */52 .doc-area {53 position:absolute; top:230px; left:0;54 width:100%; height:1010px; background:#ffffff;55 }56 57 /* Bottom Write sheet */58 .write-sheet {59 position:absolute; left:0; bottom:900px;60 width:100%; height:310px;61 background:linear-gradient(0deg,#fbf5ff,#ffffff 60%);62 border-top-left-radius:30px; border-top-right-radius:30px;63 box-shadow:0 -8px 24px rgba(0,0,0,0.12);64 padding:26px 28px;65 }66 .write-header {67 display:flex; align-items:center; justify-content:center; position:relative; height:70px;68 color:#7a4ea3; font-size:48px; font-weight:700;69 }70 .write-header .left, .write-header .right {71 position:absolute; top:8px; width:70px; height:70px; display:flex; align-items:center; justify-content:center;72 border-radius:16px; background:#efe7fb;73 }74 .write-header .left { left:0; }75 .write-header .right { right:0; }76 77 .write-input {78 margin-top:10px; margin-left:4px; margin-right:4px;79 height:100px; border:4px solid #8c4fd7; border-radius:54px;80 display:flex; align-items:center; padding:0 26px;81 font-size:42px; color:#333; background:#ffffff;82 box-shadow:inset 0 0 0 2px rgba(140,79,215,0.08);83 }84 .pill {85 background:#f3eefe; color:#6c38c7; padding:10px 16px; border-radius:999px; font-weight:700; margin-right:16px;86 }87 .input-flex { display:flex; align-items:center; gap:14px; flex:1; }88 .input-actions { display:flex; align-items:center; gap:18px; }89 90 /* Keyboard */91 .keyboard {92 position:absolute; left:0; bottom:0;93 width:100%; height:900px;94 background:#f7e3dc;95 border-top-left-radius:42px; border-top-right-radius:42px;96 box-shadow:0 -6px 18px rgba(0,0,0,0.12);97 }98 .k-suggestions {99 height:86px; display:flex; align-items:center; justify-content:flex-start;100 padding:0 36px; gap:44px; color:#7a5e55; font-size:40px; font-weight:600;101 }102 .mic {103 margin-left:auto; width:84px; height:84px; background:#f0cfc3; border-radius:42px;104 display:flex; align-items:center; justify-content:center;105 }106 107 .k-rows { padding:16px 18px 10px 18px; }108 .row { display:flex; justify-content:center; gap:14px; margin:16px 0; }109 .key {110 width:92px; height:110px; background:#fffaf7; border:2px solid #e9d6cf; border-radius:24px;111 display:flex; align-items:center; justify-content:center; font-size:48px; color:#333; font-weight:600;112 }113 .key.wide { width:140px; }114 .key.back { width:160px; }115 .bottom-row { display:flex; align-items:center; gap:14px; padding:8px 18px; }116 .key.space { flex:1; height:118px; }117 .special { background:#f3ddd5; }118 .dot { width:100px; }119 120 /* Simple icons */121 svg { width:42px; height:42px; }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Status Bar -->128 <div class="status-bar">129 <div>9:40</div>130 <div class="status-right">131 <!-- signal -->132 <svg viewBox="0 0 24 24">133 <path d="M3 18h2v2H3zm4-4h2v6H7zm4-3h2v9h-2zm4-4h2v13h-2z" fill="#ffffff"/>134 </svg>135 <!-- wifi -->136 <svg viewBox="0 0 24 24">137 <path d="M12 18.5l-2-2c1.2-1.2 2.8-1.2 4 0l-2 2zm-6-6c3.4-3.4 10.6-3.4 14 0l-1.6 1.6c-2.7-2.7-8.1-2.7-10.8 0L6 12.5zm-3-3c5.2-5.2 16.8-5.2 22 0l-1.7 1.7c-4.3-4.3-14.3-4.3-18.6 0L3 9.5z" fill="#ffffff"/>138 </svg>139 <!-- battery -->140 <svg viewBox="0 0 24 24">141 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>142 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>143 <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>144 </svg>145 <div style="font-size:32px; opacity:0.9;">87%</div>146 </div>147 </div>148 149 <!-- Toolbar -->150 <div class="toolbar">151 <div class="tool-left">152 <div class="tool-text">Done</div>153 <div class="tool-btn">154 <!-- save/floppy -->155 <svg viewBox="0 0 24 24">156 <path d="M4 4h12l4 4v12H4z" fill="#6b6763"/>157 <rect x="6" y="6" width="8" height="6" fill="#c8c3bf"/>158 <rect x="6" y="14" width="12" height="6" fill="#8b8682"/>159 </svg>160 </div>161 <div class="tool-btn">162 <!-- undo -->163 <svg viewBox="0 0 24 24">164 <path d="M9 7v4H5l5 5 5-5h-4V7H9z" fill="#6b6763"/>165 </svg>166 </div>167 <div class="tool-btn">168 <!-- redo -->169 <svg viewBox="0 0 24 24">170 <path d="M15 7v4h4l-5 5-5-5h4V7h2z" fill="#6b6763"/>171 </svg>172 </div>173 </div>174 <div class="tool-right">175 <div class="page-badge">1</div>176 <div class="tool-btn">177 <!-- close X -->178 <svg viewBox="0 0 24 24">179 <path d="M5 5l14 14M19 5L5 19" stroke="#6b6763" stroke-width="2" fill="none"/>180 </svg>181 </div>182 </div>183 </div>184 185 <!-- Document area -->186 <div class="doc-area"></div>187 188 <!-- Write sheet -->189 <div class="write-sheet">190 <div class="write-header">191 <div class="left">192 <!-- back arrow -->193 <svg viewBox="0 0 24 24">194 <path d="M14 5l-7 7 7 7" stroke="#7a4ea3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 <div>Write</div>198 <div class="right">199 <!-- close -->200 <svg viewBox="0 0 24 24">201 <path d="M5 5l14 14M19 5L5 19" stroke="#7a4ea3" stroke-width="2" fill="none"/>202 </svg>203 </div>204 </div>205 <div class="write-input">206 <div class="input-flex">207 <span class="pill">@AI</span>208 <span>Write a meeting agenda about</span>209 </div>210 <div class="input-actions">211 <!-- history swirl -->212 <svg viewBox="0 0 24 24">213 <path d="M4 11H1l3 3 3-3H4zm8-7a8 8 0 100 16 8 8 0 000-16zm0 3v4l3 3" stroke="#8c4fd7" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214 </svg>215 <!-- send paper plane -->216 <svg viewBox="0 0 24 24">217 <path d="M2 12l20-9-6 18-4-7-7-2z" fill="#8c4fd7"/>218 </svg>219 </div>220 </div>221 </div>222 223 <!-- Keyboard -->224 <div class="keyboard">225 <div class="k-suggestions">226 <div>to</div>227 <div>and</div>228 <div>in</div>229 <div class="mic">230 <!-- microphone -->231 <svg viewBox="0 0 24 24">232 <rect x="9" y="5" width="6" height="8" rx="3" fill="#7a5e55"/>233 <path d="M12 13v3m-5-3a5 5 0 0010 0" stroke="#7a5e55" stroke-width="2" fill="none"/>234 </svg>235 </div>236 </div>237 238 <div class="k-rows">239 <!-- Row 1 -->240 <div class="row">241 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>242 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>243 <div class="key">o</div><div class="key">p</div>244 </div>245 <!-- Row 2 -->246 <div class="row">247 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>248 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>249 <div class="key">l</div>250 </div>251 <!-- Row 3 -->252 <div class="row">253 <div class="key wide special">⇧</div>254 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>255 <div class="key">b</div><div class="key">n</div><div class="key">m</div>256 <div class="key back special">257 <!-- backspace icon -->258 <svg viewBox="0 0 24 24">259 <path d="M3 12l6-7h10v14H9z" fill="#c59c90"></path>260 <path d="M12 9l6 6M18 9l-6 6" stroke="#7a5e55" stroke-width="2" fill="none"></path>261 </svg>262 </div>263 </div>264 <!-- Bottom Row -->265 <div class="bottom-row">266 <div class="key wide special">?123</div>267 <div class="key special">,</div>268 <div class="key wide special">😊</div>269 <div class="key space"> </div>270 <div class="key dot">.</div>271 <div class="key wide special">272 <!-- enter arrow -->273 <svg viewBox="0 0 24 24">274 <path d="M5 5v8h13l-4 4m4-4l-4-4" stroke="#7a5e55" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275 </svg>276 </div>277 </div>278 </div>279 </div>280 281</div>282</body>283</html>