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>Blue Sky Contact Form</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0D1C5B; /* deep navy app chrome */15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0;23 width: 1080px;24 height: 90px;25 padding: 0 32px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 box-sizing: border-box;30 }31 .status-left, .status-right {32 display: flex; align-items: center; gap: 20px;33 font-weight: 600;34 }35 .status-icons { display: flex; align-items: center; gap: 18px; opacity: 0.95; }36 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }37 .status-time { font-size: 36px; letter-spacing: 0.5px; }38 39 /* Simple icons */40 .icon {41 width: 34px; height: 34px;42 display: inline-flex; align-items: center; justify-content: center;43 }44 .battery-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; }45 46 /* Header bar */47 .app-header {48 position: absolute;49 top: 90px; left: 0;50 width: 1080px;51 height: 130px;52 display: flex; align-items: center;53 padding: 0 32px;54 box-sizing: border-box;55 background: #0D1C5B;56 border-bottom: 0;57 }58 .back-btn {59 width: 80px; height: 80px;60 display: inline-flex; align-items: center; justify-content: center;61 margin-right: 20px;62 }63 .header-title {64 font-size: 60px; font-weight: 700; letter-spacing: 0.4px;65 }66 67 /* Sky form area */68 .form-wrap {69 position: absolute;70 top: 220px; left: 0;71 width: 1080px; height: 1200px;72 padding: 0 32px;73 box-sizing: border-box;74 }75 .sky-panel {76 width: 1016px; height: 1200px; margin: 0 auto;77 box-sizing: border-box;78 padding: 40px 36px 160px;79 color: #1d2a35;80 background: radial-gradient(1200px 900px at 25% 20%, #E7F3FF 0%, #D6ECFF 30%, #CFE6FA 60%, #B7DAF4 100%);81 /* subtle sky feel */82 }83 .field-label {84 font-size: 36px; font-weight: 600; color: #2e3b4a; margin-bottom: 16px;85 }86 .field-label .req { color: #E53935; margin-left: 8px; }87 88 .textarea {89 width: 944px; height: 420px;90 background: rgba(255,255,255,0.25);91 border: 2px solid rgba(255,255,255,0.9);92 border-radius: 22px;93 box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;94 padding: 28px;95 font-size: 34px; color: #111;96 line-height: 1.45;97 }98 99 .date-block { margin-top: 40px; }100 .input {101 width: 560px; height: 90px;102 background: rgba(255,255,255,0.25);103 border: 2px solid rgba(255,255,255,0.9);104 border-radius: 18px;105 padding: 0 24px;106 display: flex; align-items: center;107 font-size: 36px; color: #111;108 box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;109 }110 .date-meta {111 display: flex; align-items: center; gap: 14px;112 margin-top: 14px; color: #6a7a88;113 font-size: 28px;114 }115 .calendar-icon { width: 52px; height: 52px; }116 117 .submit-wrap {118 position: absolute;119 left: 50%; transform: translateX(-50%);120 bottom: 70px;121 width: 880px; height: 120px;122 background: #ffffff;123 border-radius: 60px;124 display: flex; align-items: center; justify-content: center;125 color: #6a6a6a; font-size: 42px; font-weight: 600;126 box-shadow: 0 6px 18px rgba(0,0,0,0.08);127 }128 129 /* Jotform banner */130 .jotform-banner {131 position: absolute;132 left: 0; bottom: 700px;133 width: 1080px; height: 140px;134 padding: 0 36px; box-sizing: border-box;135 background: #0D1C5B;136 display: flex; align-items: center; justify-content: space-between;137 color: #fff;138 }139 .jot-left { display: flex; align-items: center; gap: 16px; font-size: 40px; font-weight: 700; }140 .jf-logo {141 width: 44px; height: 44px; position: relative;142 }143 .jf-logo::before, .jf-logo::after {144 content: ""; position: absolute; left: 0; top: 0;145 width: 44px; height: 44px; border-radius: 10px;146 background: linear-gradient(135deg, #FF6D00, #FF8F00);147 transform: rotate(20deg);148 opacity: 0.9;149 }150 .jf-logo::after {151 background: linear-gradient(135deg, #2962FF, #00BCD4);152 transform: rotate(-20deg);153 opacity: 0.7;154 }155 .jot-btn {156 background: #63C132; color: #fff; font-size: 32px; font-weight: 700;157 padding: 20px 30px; border-radius: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.18);158 }159 160 /* Keyboard mock */161 .keyboard {162 position: absolute;163 left: 0; bottom: 70px;164 width: 1080px; height: 560px;165 background: #1E2428;166 padding: 26px; box-sizing: border-box;167 }168 .key-row {169 display: flex; gap: 16px; justify-content: center;170 margin-bottom: 22px;171 }172 .key {173 background: #2D3439; color: #d9e1e8;174 border-radius: 16px;175 padding: 26px 32px; font-size: 34px; min-width: 72px;176 text-align: center;177 }178 .key.wide { min-width: 140px; }179 .key.space { min-width: 560px; }180 181 /* Home indicator */182 .home-pill {183 position: absolute; left: 50%; transform: translateX(-50%);184 bottom: 20px; width: 300px; height: 10px;185 background: rgba(255,255,255,0.5); border-radius: 6px;186 }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status bar -->193 <div class="status-bar">194 <div class="status-left">195 <div class="status-time">2:47</div>196 <div class="status-icons">197 <div class="icon">198 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#fff" stroke-width="2">199 <path d="M4 16c2.5-3 5.5-5 8-5s5.5 2 8 5"></path>200 <circle cx="12" cy="16" r="2" fill="#fff"></circle>201 </svg>202 </div>203 <div class="dot"></div>204 <div class="dot"></div>205 <div class="dot"></div>206 </div>207 </div>208 <div class="status-right">209 <div class="icon" title="wifi">210 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#fff" stroke-width="2">211 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0"></path>212 <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>213 </svg>214 </div>215 <div class="battery-wrap">216 <div class="icon">217 <svg viewBox="0 0 28 16" width="40" height="26">218 <rect x="1" y="2" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>219 <rect x="3" y="4" width="18" height="8" rx="1" fill="#fff"></rect>220 <rect x="23" y="6" width="3" height="4" rx="1" fill="#fff"></rect>221 </svg>222 </div>223 <div>100%</div>224 </div>225 </div>226 </div>227 228 <!-- App header -->229 <div class="app-header">230 <div class="back-btn">231 <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">232 <path d="M15 18l-6-6 6-6"></path>233 </svg>234 </div>235 <div class="header-title">Blue Sky Contact Form</div>236 </div>237 238 <!-- Sky form area -->239 <div class="form-wrap">240 <div class="sky-panel">241 <div class="field">242 <div class="field-label">Message <span class="req">*</span></div>243 <div class="textarea">Amselweg 27, Ulm, Germany - 89075</div>244 </div>245 246 <div class="date-block">247 <div class="field-label">Date of Birth <span class="req">*</span></div>248 <div class="input">02-22-1958</div>249 <div class="date-meta">250 <svg class="calendar-icon" viewBox="0 0 24 24" fill="none" stroke="#6a7a88" stroke-width="2">251 <rect x="3" y="5" width="18" height="16" rx="2"></rect>252 <path d="M3 9h18M8 3v4M16 3v4"></path>253 </svg>254 <span>Date</span>255 </div>256 </div>257 258 <div class="submit-wrap">Submit</div>259 </div>260 </div>261 262 <!-- Jotform banner -->263 <div class="jotform-banner">264 <div class="jot-left">265 <div class="jf-logo" aria-hidden="true"></div>266 <div>Jotform</div>267 </div>268 <div class="jot-btn">Create your own Jotform</div>269 </div>270 271 <!-- Keyboard mock -->272 <div class="keyboard">273 <div class="key-row">274 <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>275 </div>276 <div class="key-row">277 <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><div class="key">l</div>278 </div>279 <div class="key-row">280 <div class="key wide">shift</div><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><div class="key wide">⌫</div>281 </div>282 <div class="key-row">283 <div class="key wide">?123</div>284 <div class="key">,</div>285 <div class="key space"></div>286 <div class="key">.</div>287 <div class="key wide">↵</div>288 </div>289 </div>290 291 <!-- Home indicator -->292 <div class="home-pill"></div>293 294</div>295</body>296</html>