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>Mobile Code Editor Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0f1a21; /* app background */13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 color: #e6edf3;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 120px; background: #121619;21 display: flex; align-items: center; justify-content: space-between;22 padding: 0 48px; box-sizing: border-box;23 color: #f0f3f6; font-weight: 600; letter-spacing: 0.5px;24 }25 .status-left { display: flex; align-items: center; gap: 28px; font-size: 46px; }26 .status-right { display: flex; align-items: center; gap: 28px; }27 28 .sb-icon { width: 46px; height: 46px; opacity: 0.9; }29 .battery {30 width: 72px; height: 36px;31 border: 4px solid #e6edf3; border-radius: 8px; position: relative;32 }33 .battery::after {34 content: ""; position: absolute; right: -14px; top: 8px;35 width: 10px; height: 20px; background: #e6edf3; border-radius: 2px;36 }37 .battery .lvl { position: absolute; left: 6px; top: 6px; height: 20px; width: 44px; background: #55d17c; }38 39 /* App header */40 .editor-header {41 position: absolute; top: 120px; left: 0; right: 0;42 height: 210px; background: #16232b; border-bottom: 1px solid #23323a;43 padding: 0 36px; display: flex; align-items: center; justify-content: space-between;44 box-sizing: border-box;45 }46 .header-left { display: flex; align-items: center; gap: 28px; }47 .hamburger { width: 66px; height: 66px; }48 .hamburger span {49 display: block; height: 6px; background: #e6edf3; margin: 10px 0;50 border-radius: 3px; width: 56px;51 }52 .file-pill {53 display: inline-flex; align-items: center; gap: 16px;54 background: #20313a; color: #dbe3ea; padding: 18px 26px;55 border-radius: 16px; font-size: 42px; font-weight: 600;56 box-shadow: inset 0 0 0 2px #2a3c46;57 }58 .css-badge {59 width: 44px; height: 44px; background: #3e91f8; border-radius: 8px;60 }61 .header-right { display: flex; align-items: center; gap: 28px; }62 .tool-btn {63 width: 88px; height: 88px; background: #1e2e38; border-radius: 22px;64 display: flex; align-items: center; justify-content: center;65 box-shadow: inset 0 0 0 2px #2b3e49;66 }67 .play { background: #1f3928; }68 .play svg { fill: #31d37d; }69 70 /* Tabs */71 .tabs {72 position: absolute; top: 330px; left: 0; right: 0;73 height: 120px; background: #16232b; border-bottom: 1px solid #24333b;74 display: flex; align-items: center; gap: 12px; padding: 0 24px; box-sizing: border-box;75 }76 .tab {77 display: flex; align-items: center; gap: 16px;78 background: #1a2a33; color: #b9c6cf; padding: 20px 28px; border-radius: 16px;79 font-size: 38px; box-shadow: inset 0 0 0 2px #253743;80 }81 .tab.active { background: #0f1f28; color: #e6edf3; box-shadow: inset 0 0 0 2px #2f4653; }82 .tab .badge { width: 40px; height: 40px; border-radius: 8px; }83 .badge.css { background: #3e91f8; }84 .badge.js { background: #f7d243; }85 .badge.html { background: #f16f4a; }86 87 /* Code area */88 .code-area {89 position: absolute; top: 450px; left: 0; right: 0; bottom: 220px;90 background: #0f1a21; overflow: hidden;91 }92 .code-scroll {93 position: absolute; inset: 0 0 0 0;94 overflow: hidden;95 }96 .code {97 display: grid; grid-template-columns: 130px 1fr;98 padding: 20px 0 0 0; box-sizing: border-box;99 font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;100 font-size: 40px; line-height: 64px;101 }102 .line-num {103 color: #6e8294; text-align: right; padding-right: 24px; box-sizing: border-box;104 }105 .code-line { color: #cdd9e5; white-space: pre; padding-left: 12px; }106 107 /* Syntax colors (simple) */108 .sel { color: #7cc7ff; } /* selectors / property names */109 .kw { color: #c792ea; } /* keywords */110 .val { color: #a0e17e; } /* values */111 .num { color: #f9e06c; } /* numbers */112 .pun { color: #95a7b8; }113 .str { color: #f9e06c; }114 .fn { color: #7cc7ff; }115 116 /* Footer info line */117 .footer-info {118 position: absolute; left: 0; right: 0; bottom: 220px;119 height: 96px; background: #121c22; border-top: 1px solid #27353d;120 display: flex; align-items: center; padding: 0 28px; gap: 36px;121 color: #9fb0bd; font-size: 36px;122 }123 .footer-info .dot { width: 10px; height: 10px; background: #506371; border-radius: 50%; margin: 0 10px; }124 125 /* Bottom tool bar */126 .bottom-bar {127 position: absolute; left: 0; right: 0; bottom: 60px;128 height: 160px; background: #0f1a21; border-top: 1px solid #24333b;129 display: flex; align-items: center; justify-content: space-between;130 padding: 0 60px; box-sizing: border-box;131 }132 .bar-group { display: flex; align-items: center; gap: 40px; }133 .bar-btn {134 width: 120px; height: 120px; border-radius: 28px;135 background: #18262e; display: flex; align-items: center; justify-content: center;136 box-shadow: inset 0 0 0 2px #2a3a44;137 }138 .bar-btn svg { width: 56px; height: 56px; fill: #b9c6cf; }139 .home-indicator {140 position: absolute; left: 50%; transform: translateX(-50%);141 bottom: 18px; width: 220px; height: 10px; background: #ffffff;142 border-radius: 8px; opacity: 0.7;143 }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status bar -->150 <div class="status-bar">151 <div class="status-left">152 <div>8:30</div>153 <div>35°</div>154 <!-- simple weather breeze icon -->155 <svg class="sb-icon" viewBox="0 0 24 24">156 <path d="M2 9h14M4 14h10M6 19h8" stroke="#e6edf3" stroke-width="2" fill="none" stroke-linecap="round"/>157 </svg>158 <!-- wifi -->159 <svg class="sb-icon" viewBox="0 0 24 24">160 <path d="M2 8c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 20a2 2 0 1 0 0-0.01" stroke="#e6edf3" stroke-width="2" fill="none" stroke-linecap="round"/>161 </svg>162 <!-- signal -->163 <svg class="sb-icon" viewBox="0 0 24 24">164 <path d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2" stroke="#e6edf3" stroke-width="2" fill="none" stroke-linecap="round"/>165 </svg>166 </div>167 <div class="status-right">168 <div class="battery"><div class="lvl"></div></div>169 </div>170 </div>171 172 <!-- Editor header -->173 <div class="editor-header">174 <div class="header-left">175 <div class="hamburger">176 <span></span><span></span><span></span>177 </div>178 <div class="file-pill">179 <div class="css-badge"></div>180 <div>style.css</div>181 </div>182 </div>183 <div class="header-right">184 <div class="tool-btn">185 <!-- Preview (eye) -->186 <svg viewBox="0 0 24 24"><path d="M12 5c-6 0-10 7-10 7s4 7 10 7 10-7 10-7-4-7-10-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>187 </div>188 <div class="tool-btn play">189 <!-- Play -->190 <svg viewBox="0 0 24 24"><path d="M6 4v16l12-8-12-8z"/></svg>191 </div>192 </div>193 </div>194 195 <!-- Tabs -->196 <div class="tabs">197 <div class="tab active"><div class="badge css"></div><div>style.css</div></div>198 <div class="tab"><div class="badge css"></div><div>ta</div></div>199 <div class="tab"><div class="badge js"></div><div>game.js</div></div>200 <div class="tab"><div class="badge html"></div><div>index.ht</div></div>201 <div style="flex:1"></div>202 <!-- small download icon on far right -->203 <div class="tab" style="padding: 16px 22px;">204 <svg viewBox="0 0 24 24" width="40" height="40" fill="#b9c6cf"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" stroke="#b9c6cf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>205 </div>206 </div>207 208 <!-- Code area -->209 <div class="code-area">210 <div class="code-scroll">211 <div class="code">212 <div class="line-num">9</div><div class="code-line"><span class="sel">max-height</span><span class="pun">:</span><span class="num">500px</span><span class="pun">;</span></div>213 <div class="line-num">10</div><div class="code-line"><span class="sel">margin-left</span><span class="pun">:</span> <span class="val">auto</span><span class="pun">;</span></div>214 <div class="line-num">11</div><div class="code-line"><span class="sel">margin-right</span><span class="pun">:</span> <span class="val">auto</span><span class="pun">;</span></div>215 <div class="line-num">12</div><div class="code-line"><span class="pun">}</span></div>216 217 <div class="line-num">13</div><div class="code-line"></div>218 219 <div class="line-num">14</div><div class="code-line"><span class="sel">.keys</span> <span class="pun">{</span></div>220 <div class="line-num">15</div><div class="code-line"><span class="sel"> font-family</span><span class="pun">:</span> <span class="str">'Lato'</span><span class="pun">,</span> <span class="val">sans-serif</span><span class="pun">;</span></div>221 <div class="line-num">16</div><div class="code-line"><span class="sel"> text-align</span><span class="pun">:</span> <span class="val">center</span><span class="pun">;</span></div>222 <div class="line-num">17</div><div class="code-line"><span class="sel"> width</span><span class="pun">:</span> <span class="num">100%</span><span class="pun">;</span></div>223 <div class="line-num">18</div><div class="code-line"><span class="sel"> padding</span><span class="pun">:</span> <span class="num">10px</span><span class="pun">;</span></div>224 <div class="line-num">19</div><div class="code-line"><span class="sel"> box-sizing</span><span class="pun">:</span> <span class="val">border-box</span><span class="pun">;</span></div>225 <div class="line-num">20</div><div class="code-line"><span class="sel"> height</span><span class="pun">:</span> <span class="num">300px</span><span class="pun">;</span></div>226 <div class="line-num">21</div><div class="code-line"><span class="sel"> margin</span><span class="pun">:</span> <span class="val">auto</span><span class="pun">;</span></div>227 <div class="line-num">22</div><div class="code-line"><span class="pun">}</span></div>228 229 <div class="line-num">23</div><div class="code-line"></div>230 231 <div class="line-num">24</div><div class="code-line"><span class="sel">.up</span> <span class="pun">{</span></div>232 <div class="line-num">25</div><div class="code-line"><span class="sel"> position</span><span class="pun">:</span> <span class="val">relative</span><span class="pun">;</span></div>233 <div class="line-num">26</div><div class="code-line"><span class="sel"> top</span><span class="pun">:</span> <span class="num">-4px</span><span class="pun">;</span></div>234 <div class="line-num">27</div><div class="code-line"><span class="pun">}</span></div>235 236 <div class="line-num">28</div><div class="code-line"></div>237 238 <div class="line-num">29</div><div class="code-line"><span class="sel">.chevron::before</span> <span class="pun">{</span></div>239 <div class="line-num">30</div><div class="code-line"><span class="sel"> border-style</span><span class="pun">:</span> <span class="val">solid</span><span class="pun">;</span></div>240 <div class="line-num">31</div><div class="code-line"><span class="sel"> border-width</span><span class="pun">:</span> <span class="num">8px 8px 0 0</span><span class="pun">;</span></div>241 <div class="line-num">32</div><div class="code-line"><span class="sel"> content</span><span class="pun">:</span> <span class="str">''</span><span class="pun">;</span></div>242 <div class="line-num">33</div><div class="code-line"><span class="sel"> display</span><span class="pun">:</span> <span class="val">inline-block</span><span class="pun">;</span></div>243 <div class="line-num">34</div><div class="code-line"><span class="sel"> height</span><span class="pun">:</span> <span class="num">20px</span><span class="pun">;</span></div>244 <div class="line-num">35</div><div class="code-line"><span class="sel"> width</span><span class="pun">:</span> <span class="num">20px</span><span class="pun">;</span></div>245 <div class="line-num">36</div><div class="code-line"><span class="sel"> top</span><span class="pun">:</span> <span class="num">-10px</span><span class="pun">;</span></div>246 <div class="line-num">37</div><div class="code-line"><span class="sel"> position</span><span class="pun">:</span> <span class="val">relative</span><span class="pun">;</span></div>247 <div class="line-num">38</div><div class="code-line"><span class="sel"> transform</span><span class="pun">:</span> <span class="fn">rotate</span><span class="pun">(</span><span class="num">-45deg</span><span class="pun">);</span></div>248 <div class="line-num">39</div><div class="code-line"><span class="pun">}</span></div>249 250 <div class="line-num">40</div><div class="code-line"></div>251 252 <div class="line-num">41</div><div class="code-line"><span class="sel">.chevron.down::before</span> <span class="pun">{</span></div>253 <div class="line-num">42</div><div class="code-line"><span class="sel"> transform</span><span class="pun">:</span> <span class="fn">rotate</span><span class="pun">(</span><span class="num">135deg</span><span class="pun">);</span></div>254 <div class="line-num">43</div><div class="code-line"><span class="sel"> top</span><span class="pun">:</span> <span class="num">-22px</span><span class="pun">;</span></div>255 <div class="line-num">44</div><div class="code-line"><span class="pun">}</span></div>256 257 <div class="line-num">45</div><div class="code-line"></div>258 259 <div class="line-num">46</div><div class="code-line"><span class="sel">.chevron.right::before</span> <span class="pun">{</span></div>260 <div class="line-num">47</div><div class="code-line"><span class="sel"> transform</span><span class="pun">:</span> <span class="fn">rotate</span><span class="pun">(</span><span class="num">45deg</span><span class="pun">);</span></div>261 <div class="line-num">48</div><div class="code-line"><span class="sel"> top</span><span class="pun">:</span> <span class="num">-18px</span><span class="pun">;</span></div>262 <div class="line-num">49</div><div class="code-line"><span class="sel"> left</span><span class="pun">:</span> <span class="num">-5px</span><span class="pun">;</span></div>263 <div class="line-num">50</div><div class="code-line"><span class="pun">}</span></div>264 </div>265 </div>266 </div>267 268 <!-- Footer info -->269 <div class="footer-info">270 <div>Ln 1, Col 1</div>271 <span class="dot"></span>272 <div>Spaces: 2</div>273 <span class="dot"></span>274 <div>CSS</div>275 <span class="dot"></span>276 <div>UTF-8</div>277 </div>278 279 <!-- Bottom tool bar -->280 <div class="bottom-bar">281 <div class="bar-group">282 <div class="bar-btn">283 <!-- left chevron -->284 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>285 </div>286 <div class="bar-btn">287 <!-- right chevron -->288 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>289 </div>290 <div class="bar-btn">291 <!-- undo -->292 <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1-7 7H2l4-4 4 4H7"/></svg>293 </div>294 </div>295 <div class="bar-group">296 <div class="bar-btn">297 <!-- scissors -->298 <svg viewBox="0 0 24 24"><path d="M4 7a3 3 0 1 0 0 6M4 17a3 3 0 1 0 0 6M10 2l12 10-12 10" stroke="#b9c6cf" stroke-width="2" fill="none"/></svg>299 </div>300 <div class="bar-btn">301 <!-- clipboard -->302 <svg viewBox="0 0 24 24"><path d="M9 3h6v3H9V3zm-2 3h10v15H7V6z"/></svg>303 </div>304 </div>305 <div class="home-indicator"></div>306 </div>307 308</div>309</body>310</html>