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; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* App/Status bar */18 .topbar {19 position: absolute;20 left: 0;21 top: 0;22 width: 1080px;23 height: 200px;24 background: #00bcd4; /* cyan */25 color: #fff;26 box-sizing: border-box;27 padding-top: 24px;28 }29 .status {30 height: 70px;31 padding: 0 28px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 font-weight: 600;36 font-size: 38px;37 opacity: 0.95;38 }39 .status .right-icons {40 display: flex;41 align-items: center;42 gap: 26px;43 }44 .appbar {45 height: 130px;46 display: flex;47 align-items: center;48 padding: 0 28px;49 gap: 22px;50 }51 .title {52 font-size: 46px;53 font-weight: 700;54 letter-spacing: 0.5px;55 text-transform: lowercase;56 }57 .icon {58 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;59 }60 .icon svg { width: 60px; height: 60px; fill: #ffffff; }61 62 /* Overflow menu */63 .menu-sheet {64 position: absolute;65 right: 22px;66 top: 180px;67 width: 460px;68 background: #ffffff;69 border-radius: 18px;70 box-shadow: 0 20px 40px rgba(0,0,0,0.25);71 overflow: hidden;72 z-index: 3;73 }74 .menu-item {75 padding: 34px 40px;76 font-size: 40px;77 color: #333;78 border-bottom: 1px solid #eee;79 }80 .menu-item:last-child { border-bottom: none; }81 82 /* Code editor */83 .editor {84 position: absolute;85 top: 200px;86 left: 0;87 width: 1080px;88 height: 1220px;89 background: #1e1e1e;90 color: #c7c7c7;91 font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;92 overflow: hidden;93 }94 .gutter {95 position: absolute;96 left: 0;97 top: 0;98 width: 120px;99 height: 100%;100 background: #1a1a1a;101 color: #666;102 text-align: right;103 padding-top: 22px;104 box-sizing: border-box;105 }106 .code-lines {107 position: absolute;108 left: 120px;109 right: 0;110 top: 0;111 bottom: 0;112 padding: 22px 28px;113 box-sizing: border-box;114 line-height: 72px;115 font-size: 40px;116 overflow: hidden;117 }118 .ln { display: block; height: 72px; padding-right: 22px; }119 .line { white-space: nowrap; }120 .kw { color: #90caf9; } /* keywords */121 .num { color: #ffb74d; } /* numbers */122 .com { color: #8d8d8d; } /* comments */123 .ident { color: #f07178; border-bottom: 4px solid #d32f2f; display: inline-block; padding-bottom: 2px; } /* underlined identifiers */124 125 /* Ad placeholder */126 .ad {127 position: absolute;128 left: 0;129 top: 1420px;130 width: 1080px;131 height: 120px;132 background: #E0E0E0;133 border-top: 1px solid #BDBDBD;134 border-bottom: 1px solid #BDBDBD;135 color: #757575;136 display: flex;137 align-items: center;138 justify-content: center;139 font-size: 36px;140 letter-spacing: 0.5px;141 }142 143 /* Keyboard */144 .keyboard {145 position: absolute;146 left: 0;147 bottom: 60px;148 width: 1080px;149 height: 820px;150 background: #eef1ea;151 border-top: 1px solid #dcdcdc;152 box-sizing: border-box;153 padding: 22px 22px 0 22px;154 }155 .kbd-toprow {156 height: 88px;157 display: flex;158 align-items: center;159 gap: 22px;160 }161 .kbd-pill {162 height: 70px;163 min-width: 70px;164 padding: 0 26px;165 border-radius: 36px;166 background: #dde2d8;167 }168 .keys {169 display: grid;170 grid-template-columns: repeat(10, 1fr);171 gap: 14px;172 margin-top: 20px;173 }174 .key {175 height: 118px;176 background: #ffffff;177 border-radius: 22px;178 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05);179 display: flex;180 align-items: center;181 justify-content: center;182 font-size: 44px;183 color: #333;184 }185 .key.gray { background: #e7ecdF; }186 .key.green { background: #bfe6c0; }187 .row {188 display: grid;189 grid-template-columns: 1.2fr repeat(8, 1fr) 1.2fr;190 gap: 14px;191 margin-top: 14px;192 }193 .row2 { grid-template-columns: 1.5fr repeat(7, 1fr) 1.5fr; }194 .row3 { grid-template-columns: 1.8fr repeat(6, 1fr) 1.8fr; }195 .spacer-row {196 display: grid;197 grid-template-columns: 1fr 5fr 1fr 1.2fr;198 gap: 14px;199 margin-top: 14px;200 }201 202 /* Gesture bar */203 .gesture {204 position: absolute;205 left: 50%;206 bottom: 12px;207 width: 210px;208 height: 10px;209 margin-left: -105px;210 background: #a8a8a8;211 border-radius: 6px;212 opacity: 0.9;213 }214</style>215</head>216<body>217<div id="render-target">218 <!-- Top bar (status + app bar) -->219 <div class="topbar">220 <div class="status">221 <div>8:26</div>222 <div class="right-icons">223 <span style="font-size:32px; opacity:.9;">35°</span>224 <span class="icon" title="Wi-Fi">225 <svg viewBox="0 0 24 24"><path d="M12 20.5l3.5-3.5a5 5 0 0 0-7 0zM2 9a15 15 0 0 1 20 0l-2 2a12 12 0 0 0-16 0zM5 12a10 10 0 0 1 14 0l-2 2a7 7 0 0 0-10 0z"/></svg>226 </span>227 <span class="icon" title="Battery">228 <svg viewBox="0 0 24 24"><path d="M17 6h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-2v2h-2v-2H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12zm-1 2H6v8h10V8z"/></svg>229 </span>230 </div>231 </div>232 <div class="appbar">233 <div class="icon" title="Menu">234 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>235 </div>236 <div class="title">code</div>237 </div>238 </div>239 240 <!-- Overflow menu sheet -->241 <div class="menu-sheet">242 <div class="menu-item">Rename</div>243 <div class="menu-item">Go to Line...</div>244 <div class="menu-item">View it on the web</div>245 <div class="menu-item">Info</div>246 </div>247 248 <!-- Editor -->249 <div class="editor">250 <div class="gutter">251 <div class="ln">1</div>252 <div class="ln">2</div>253 <div class="ln">3</div>254 <div class="ln">4</div>255 <div class="ln">5</div>256 <div class="ln">6</div>257 <div class="ln">7</div>258 <div class="ln">8</div>259 <div class="ln">9</div>260 <div class="ln">10</div>261 <div class="ln">11</div>262 <div class="ln">12</div>263 </div>264 <div class="code-lines">265 <div class="line"><span class="com"># Python program to find the largest number among the three</span></div>266 <div class="line"> </div>267 <div class="line"><span class="com"># change the values of</span> <span class="ident">num3</span> <span class="com">for a different result</span></div>268 <div class="line"> </div>269 <div class="line"><span class="ident">num1</span> = <span class="num">20</span></div>270 <div class="line"><span class="ident">num2</span> = <span class="num">14</span></div>271 <div class="line"><span class="ident">num3</span> = <span class="num">12</span></div>272 <div class="line"> </div>273 <div class="line"><span class="com"># uncomment following lines to take three numbers from user</span></div>274 <div class="line"><span class="com">#</span><span class="ident">num1</span> <span class="com">= float(input("Enter first number: "))</span></div>275 <div class="line"><span class="com">#</span><span class="ident">num2</span> <span class="com">= float(input("Enter second number: "))</span></div>276 <div class="line"><span class="com">#</span><span class="ident">num3</span> <span class="com">= float(input("Enter third number: "))</span></div>277 </div>278 </div>279 280 <!-- Ad banner placeholder -->281 <div class="ad">[IMG: Advertising Banner]</div>282 283 <!-- Keyboard -->284 <div class="keyboard">285 <div class="kbd-toprow">286 <div class="kbd-pill" style="width:70px;"></div>287 <div class="kbd-pill" style="width:70px;"></div>288 <div class="kbd-pill" style="width:70px;"></div>289 <div class="kbd-pill" style="width:70px;"></div>290 <div class="kbd-pill" style="width:70px;"></div>291 <div class="kbd-pill" style="width:70px;"></div>292 </div>293 294 <div class="keys">295 <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>296 </div>297 <div class="row">298 <div class="key gray">⇧</div>299 <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>300 <div class="key gray">⌫</div>301 </div>302 <div class="row2">303 <div class="key gray">?123</div>304 <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>305 <div class="key green">⏎</div>306 </div>307 <div class="spacer-row">308 <div class="key gray">,</div>309 <div class="key">space</div>310 <div class="key gray">.</div>311 <div class="key green">↩</div>312 </div>313 </div>314 315 <div class="gesture"></div>316</div>317</body>318</html>