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 UI</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: #0E141B; /* app background applied to container */13 color: #E6EDF3; font-family: "SF Pro Text", "Inter", Arial, sans-serif;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 120px; background: #11161D;20 display: flex; align-items: center; padding: 0 36px;21 box-sizing: border-box; color: #D6DBE1; font-weight: 600;22 font-size: 44px;23 }24 .status-left { display: flex; align-items: center; gap: 24px; }25 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }26 .sb-small { font-size: 34px; color: #AAB4BF; font-weight: 500; }27 28 .icon-signal, .icon-wifi, .icon-fan, .icon-battery {29 width: 48px; height: 48px;30 }31 /* simple icons */32 .icon-signal path { fill: #9FB3C8; }33 .icon-wifi path { fill: none; stroke: #9FB3C8; stroke-width: 6; }34 .icon-fan path { fill: none; stroke: #9FB3C8; stroke-width: 6; }35 .icon-battery rect, .icon-battery path { fill: #9FB3C8; }36 37 /* App header */38 .app-header {39 position: absolute; top: 120px; left: 0; right: 0;40 height: 160px; background: #131A22;41 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;42 border-bottom: 1px solid #1E2732;43 }44 .hamburger { width: 72px; height: 72px; margin-right: 28px; }45 .hamburger span {46 display: block; height: 8px; background: #D6DBE1; margin: 10px 0; border-radius: 4px;47 }48 49 .title {50 display: flex; align-items: center; gap: 18px; font-size: 44px; font-weight: 600;51 }52 .badge-css {53 width: 54px; height: 54px; border-radius: 8px; background: #1E6DEB;54 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 28px;55 }56 57 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }58 .action {59 width: 72px; height: 72px; border-radius: 16px;60 display: flex; align-items: center; justify-content: center;61 background: #0F141B; border: 1px solid #243040;62 }63 .action svg { width: 42px; height: 42px; }64 .action.play { background: #0F141B; border-color: #1B7F3B; }65 .action.play path { fill: #35D46A; }66 67 /* Tabs */68 .tabs {69 position: absolute; top: 280px; left: 0; right: 0; height: 120px;70 display: flex; align-items: center; gap: 14px; padding: 0 28px; box-sizing: border-box;71 background: #0F141B;72 border-bottom: 1px solid #1E2732;73 }74 .tab {75 height: 86px; padding: 0 26px; border-radius: 18px;76 display: flex; align-items: center; gap: 16px; font-size: 34px; color: #C9D4DF;77 background: #121A23; border: 1px solid #263243;78 }79 .tab.active { background: #173253; border-color: #2B4E74; color: #EAF2FB; }80 .tab .tab-icon { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 26px; }81 .tab .css { background: #1E6DEB; }82 .tab .js { background: #E6A700; }83 .tab .html { background: #E34F26; }84 85 /* Editor */86 .editor {87 position: absolute; top: 400px; left: 0; right: 0; bottom: 200px;88 background: #0B1220;89 padding: 40px 30px 30px 30px; box-sizing: border-box;90 font-family: "SF Mono", Consolas, Menlo, monospace;91 overflow: hidden;92 }93 .code-area {94 width: 100%; height: 100%;95 overflow: hidden; border-radius: 12px;96 background: #0B1220;97 }98 .line {99 display: flex; gap: 24px; align-items: flex-start;100 font-size: 32px; line-height: 54px; color: #C8D3E0;101 }102 .ln {103 width: 90px; text-align: right; color: #6C7A89;104 user-select: none;105 }106 .code { white-space: pre; }107 .k { color: #79C0FF; } /* selector / property names */108 .p { color: #A5D6FF; } /* punctuation / braces */109 .v { color: #C7D2FE; } /* values */110 .num { color: #FFB86B; } /* numbers */111 .fn { color: #7EE787; } /* function names */112 .cm { color: #8B949E; } /* comments */113 .sel { color: #91D1FF; } /* selectors */114 115 /* Bottom utility bar */116 .bottom-bar {117 position: absolute; left: 0; right: 0; bottom: 110px; height: 120px;118 background: #101722; border-top: 1px solid #1E2732;119 display: flex; align-items: center; justify-content: space-between;120 padding: 0 36px; box-sizing: border-box;121 }122 .bottom-actions { display: flex; align-items: center; gap: 32px; }123 .tool {124 width: 90px; height: 90px; border-radius: 20px;125 display: flex; align-items: center; justify-content: center;126 background: #0F141B; border: 1px solid #263243;127 }128 .tool svg { width: 46px; height: 46px; stroke: #C9D4DF; fill: none; stroke-width: 6; }129 .status-text { color: #99A7B7; font-size: 34px; }130 131 /* Home indicator */132 .home-indicator {133 position: absolute; bottom: 32px; left: 0; right: 0;134 height: 8px; width: 180px; margin: 0 auto; border-radius: 8px;135 background: #FFFFFF; opacity: 0.9;136 }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Status Bar -->143 <div class="status-bar">144 <div class="status-left">145 <div>8:27</div>146 <div class="sb-small">35°</div>147 <svg class="icon-signal" viewBox="0 0 24 24">148 <path d="M3 18h3v3H3v-3zm5-5h3v8H8v-8zm5-4h3v12h-3V9zm5-5h3v17h-3V4z"></path>149 </svg>150 <svg class="icon-wifi" viewBox="0 0 24 24">151 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20a2 2 0 1 0 0.01 0"></path>152 </svg>153 <svg class="icon-fan" viewBox="0 0 24 24">154 <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M12 2c-3 0-3 4 0 4M22 12c0-3-4-3-4 0M12 22c3 0 3-4 0-4M2 12c0 3 4 3 4 0"></path>155 </svg>156 </div>157 <div class="status-right">158 <svg class="icon-battery" viewBox="0 0 28 18">159 <rect x="1" y="2" width="22" height="14" rx="2"></rect>160 <rect x="3" y="4" width="16" height="10" rx="1" fill="#35D46A"></rect>161 <path d="M25 6h2v6h-2z"></path>162 </svg>163 </div>164 </div>165 166 <!-- App Header -->167 <div class="app-header">168 <div class="hamburger">169 <span></span><span></span><span></span>170 </div>171 <div class="title">172 <div class="badge-css">CSS</div>173 <div>style.css</div>174 </div>175 <div class="header-actions">176 <div class="action">177 <svg viewBox="0 0 24 24">178 <path d="M10 3a7 7 0 0 1 7 7c0 1.81-.68 3.47-1.8 4.73l3.07 3.07-1.41 1.41-3.07-3.07A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z" fill="#C9D4DF"></path>179 </svg>180 </div>181 <div class="action play">182 <svg viewBox="0 0 24 24">183 <path d="M8 5l11 7-11 7V5z"></path>184 </svg>185 </div>186 </div>187 </div>188 189 <!-- Tabs -->190 <div class="tabs">191 <div class="tab active">192 <div class="tab-icon css">CSS</div>193 <div>style.css</div>194 </div>195 <div class="tab">196 <div class="tab-icon js">JS</div>197 <div>game.js</div>198 </div>199 <div class="tab">200 <div class="tab-icon html">HTML</div>201 <div>index.ht</div>202 </div>203 </div>204 205 <!-- Editor Area -->206 <div class="editor">207 <div class="code-area">208 <div class="line"><div class="ln">9</div><div class="code"><span class="k">max-height</span><span class="p">:</span><span class="num">500px</span><span class="p">;</span></div></div>209 <div class="line"><div class="ln">10</div><div class="code"><span class="k">margin-left</span><span class="p">:</span> <span class="k">auto</span><span class="p">;</span></div></div>210 <div class="line"><div class="ln">11</div><div class="code"><span class="k">margin-right</span><span class="p">:</span> <span class="k">auto</span><span class="p">;</span></div></div>211 <div class="line"><div class="ln">12</div><div class="code"><span class="p">}</span></div></div>212 213 <div class="line"><div class="ln">13</div><div class="code"><span class="sel">.keys</span> <span class="p">{</span></div></div>214 <div class="line"><div class="ln">14</div><div class="code"><span class="k">font-family</span><span class="p">:</span> <span class="v">'Lato', sans-serif</span><span class="p">;</span></div></div>215 <div class="line"><div class="ln">15</div><div class="code"><span class="k">text-align</span><span class="p">:</span> <span class="v">center</span><span class="p">;</span></div></div>216 <div class="line"><div class="ln">16</div><div class="code"><span class="k">width</span><span class="p">:</span> <span class="num">100%</span><span class="p">;</span></div></div>217 <div class="line"><div class="ln">17</div><div class="code"><span class="k">padding</span><span class="p">:</span> <span class="num">10px</span><span class="p">;</span></div></div>218 <div class="line"><div class="ln">18</div><div class="code"><span class="k">box-sizing</span><span class="p">:</span> <span class="v">border-box</span><span class="p">;</span></div></div>219 <div class="line"><div class="ln">19</div><div class="code"><span class="k">height</span><span class="p">:</span> <span class="num">300px</span><span class="p">;</span></div></div>220 <div class="line"><div class="ln">20</div><div class="code"><span class="k">margin</span><span class="p">:</span> <span class="v">auto</span><span class="p">;</span></div></div>221 <div class="line"><div class="ln">21</div><div class="code"><span class="p">}</span></div></div>222 223 <div class="line"><div class="ln">23</div><div class="code"><span class="sel">.up</span> <span class="p">{</span></div></div>224 <div class="line"><div class="ln">24</div><div class="code"><span class="k">position</span><span class="p">:</span> <span class="v">relative</span><span class="p">;</span></div></div>225 <div class="line"><div class="ln">25</div><div class="code"><span class="k">top</span><span class="p">:</span> <span class="num">-4px</span><span class="p">;</span></div></div>226 <div class="line"><div class="ln">26</div><div class="code"><span class="p">}</span></div></div>227 228 <div class="line"><div class="ln">28</div><div class="code"><span class="sel">.chevron::before</span> <span class="p">{</span></div></div>229 <div class="line"><div class="ln">29</div><div class="code"><span class="k">border-style</span><span class="p">:</span> <span class="v">solid</span><span class="p">;</span></div></div>230 <div class="line"><div class="ln">30</div><div class="code"><span class="k">border-width</span><span class="p">:</span> <span class="num">8px</span> <span class="num">8px</span> <span class="num">0</span> <span class="num">0</span><span class="p">;</span></div></div>231 <div class="line"><div class="ln">31</div><div class="code"><span class="k">content</span><span class="p">:</span> <span class="v">''</span><span class="p">;</span></div></div>232 <div class="line"><div class="ln">32</div><div class="code"><span class="k">display</span><span class="p">:</span> <span class="v">inline-block</span><span class="p">;</span></div></div>233 <div class="line"><div class="ln">33</div><div class="code"><span class="k">height</span><span class="p">:</span> <span class="num">20px</span><span class="p">;</span></div></div>234 <div class="line"><div class="ln">34</div><div class="code"><span class="k">width</span><span class="p">:</span> <span class="num">20px</span><span class="p">;</span></div></div>235 <div class="line"><div class="ln">35</div><div class="code"><span class="k">top</span><span class="p">:</span> <span class="num">-10px</span><span class="p">;</span></div></div>236 <div class="line"><div class="ln">36</div><div class="code"><span class="k">position</span><span class="p">:</span> <span class="v">relative</span><span class="p">;</span></div></div>237 <div class="line"><div class="ln">37</div><div class="code"><span class="k">transform</span><span class="p">:</span> <span class="fn">rotate</span><span class="p">(</span><span class="v">-45deg</span><span class="p">);</span></div></div>238 <div class="line"><div class="ln">38</div><div class="code"><span class="p">}</span></div></div>239 240 <div class="line"><div class="ln">41</div><div class="code"><span class="sel">.chevron.down::before</span> <span class="p">{</span></div></div>241 <div class="line"><div class="ln">42</div><div class="code"><span class="k">transform</span><span class="p">:</span> <span class="fn">rotate</span><span class="p">(</span><span class="v">135deg</span><span class="p">);</span></div></div>242 <div class="line"><div class="ln">43</div><div class="code"><span class="k">top</span><span class="p">:</span> <span class="num">-22px</span><span class="p">;</span></div></div>243 <div class="line"><div class="ln">44</div><div class="code"><span class="p">}</span></div></div>244 245 <div class="line"><div class="ln">46</div><div class="code"><span class="sel">.chevron.right::before</span> <span class="p">{</span></div></div>246 <div class="line"><div class="ln">47</div><div class="code"><span class="k">transform</span><span class="p">:</span> <span class="fn">rotate</span><span class="p">(</span><span class="v">45deg</span><span class="p">);</span></div></div>247 <div class="line"><div class="ln">48</div><div class="code"><span class="k">top</span><span class="p">:</span> <span class="num">-18px</span><span class="p">;</span></div></div>248 <div class="line"><div class="ln">49</div><div class="code"><span class="k">left</span><span class="p">:</span> <span class="num">-5px</span><span class="p">;</span></div></div>249 <div class="line"><div class="ln">50</div><div class="code"><span class="p">}</span></div></div>250 </div>251 </div>252 253 <!-- Bottom Utility Bar -->254 <div class="bottom-bar">255 <div class="bottom-actions">256 <div class="tool">257 <svg viewBox="0 0 24 24">258 <path d="M15 18l-6-6 6-6" />259 </svg>260 </div>261 <div class="tool">262 <svg viewBox="0 0 24 24">263 <path d="M9 6l6 6-6 6" />264 </svg>265 </div>266 <div class="tool">267 <svg viewBox="0 0 24 24">268 <path d="M4 4l6 6M10 4L4 10M14 6l6 6M20 6l-6 6" />269 </svg>270 </div>271 <div class="tool">272 <svg viewBox="0 0 24 24">273 <path d="M6 5h12v14H6zM9 8h6" />274 </svg>275 </div>276 <div class="tool">277 <svg viewBox="0 0 24 24">278 <path d="M12 5v14M5 12h14" />279 </svg>280 </div>281 </div>282 <div class="status-text">Spaces: 2 JSON UTF-8</div>283 </div>284 285 <!-- Home Indicator -->286 <div class="home-indicator"></div>287</div>288</body>289</html>