GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Generated Mobile UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(#0f2d55, #163b6a);10 border-radius: 24px;11 box-shadow: 0 20px 60px rgba(0,0,0,0.35);12 }13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:105px;16 color:#fff; font-size:36px; line-height:105px; padding:0 36px;17 display:flex; justify-content:space-between; align-items:center;18 opacity:0.95;19 }20 .status-right { display:flex; align-items:center; gap:26px; font-size:34px; }21 /* App bar */22 .app-bar {23 position:absolute; top:105px; left:0; height:140px; width:100%;24 background: #1b4e86; color:#fff;25 display:flex; align-items:center;26 padding:0 32px;27 }28 .app-title { font-size:56px; font-weight:600; margin-left:24px; }29 .app-actions { margin-left:auto; display:flex; gap:38px; }30 .circle-icon { width:72px; height:72px; border-radius:50%; border:2px solid rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center; }31 .icon { width:44px; height:44px; fill:#fff; }32 /* Overlay card */33 .overlay {34 position:absolute; left:30px; top:260px; width:1020px;35 background:#2e3136; border-radius:16px; color:#fff;36 box-shadow:0 12px 24px rgba(0,0,0,0.35);37 }38 .overlay-header {39 height:120px; background:#4a86e8; display:flex; align-items:center; padding:0 24px; border-top-left-radius:16px; border-top-right-radius:16px;40 }41 .overlay-header .title { font-size:48px; font-weight:700; margin-left:16px; }42 .close-btn {43 width:56px; height:56px; border-radius:8px; border:2px solid rgba(255,255,255,0.9);44 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;45 }46 .save-btn {47 margin-left:auto; background:#fff; color:#2d5ec7; font-weight:700; border-radius:12px; padding:18px 30px; font-size:36px;48 }49 .overlay-body { padding:16px 24px 24px; }50 .input-row {51 background:#3a3d43; border-radius:12px; margin:12px 0; padding:26px;52 display:flex; align-items:center; min-height:92px;53 }54 .input-title { font-size:42px; font-weight:600; flex:1; }55 .input-sub { font-size:38px; color:#d6d6d6; flex:1; }56 .row-label { font-size:42px; font-weight:600; }57 .row-value { margin-left:18px; font-size:40px; color:#eaeaea; }58 .right-actions { margin-left:auto; display:flex; align-items:center; gap:22px; }59 .action-link { color:#5fa8ff; font-size:36px; }60 .chevron { width:24px; height:24px; border:solid #fff 4px; border-left:none; border-top:none; transform:rotate(-45deg); margin-left:18px; }61 .note {62 font-size:32px; color:#ff6b6b; margin:18px 0 0 0;63 }64 .pill {65 float:right; background:#1f2328; color:#9fd0ff; padding:16px 24px; border-radius:24px; font-size:34px; margin-top:-12px;66 border:1px solid rgba(255,255,255,0.2);67 }68 /* Behind overlay: list header */69 .section-chip {70 position:absolute; left:0; right:0; top:1320px; height:70px; background:#88b400; color:#1b2f06; font-weight:700; font-size:48px; padding-left:24px; display:flex; align-items:center;71 }72 /* Keyboard mock */73 .keyboard {74 position:absolute; left:0; bottom:120px; width:100%; height:760px; background:#151718; border-top:2px solid #2c2f35;75 padding:26px 18px;76 }77 .key-row { display:flex; justify-content:center; gap:14px; margin-bottom:18px; }78 .key {79 width:92px; height:110px; background:#2a2d31; border-radius:16px; color:#fff; font-size:42px; display:flex; align-items:center; justify-content:center;80 box-shadow: inset 0 0 0 1px #3a3e45;81 }82 .key.wide { width:150px; }83 .key.extra-wide { width:210px; }84 .space-row { display:flex; justify-content:center; gap:16px; }85 .space { width:520px; height:110px; background:#2a2d31; border-radius:18px; box-shadow: inset 0 0 0 1px #3a3e45; }86 /* Home indicator */87 .home-indicator { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); width:420px; height:10px; background:#e8e8e8; border-radius:6px; opacity:0.85; }88 /* SVG helpers */89 .row-icon { width:44px; height:44px; margin-right:22px; }90 .muted { color:#bfbfbf; }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status Bar -->97 <div class="status-bar">98 <div>6:47</div>99 <div class="status-right">100 <span>• • • • • • •</span>101 <span>◦</span>102 <span>▸</span>103 <span>🔋</span>104 </div>105 </div>106 107 <!-- App Bar -->108 <div class="app-bar">109 <div class="circle-icon">110 <svg class="icon" viewBox="0 0 24 24">111 <rect x="3" y="5" width="18" height="2" fill="#fff"></rect>112 <rect x="3" y="11" width="18" height="2" fill="#fff"></rect>113 <rect x="3" y="17" width="18" height="2" fill="#fff"></rect>114 </svg>115 </div>116 <div class="app-title">Tasks</div>117 <div class="app-actions">118 <div class="circle-icon">119 <svg class="icon" viewBox="0 0 24 24">120 <rect x="11" y="4" width="2" height="16" fill="#fff"></rect>121 <rect x="4" y="11" width="16" height="2" fill="#fff"></rect>122 </svg>123 </div>124 <div class="circle-icon">125 <svg class="icon" viewBox="0 0 24 24">126 <circle cx="12" cy="12" r="11" stroke="#fff" stroke-width="2" fill="none"></circle>127 <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="2" fill="none"></path>128 </svg>129 </div>130 <div class="circle-icon">131 <svg class="icon" viewBox="0 0 24 24">132 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>133 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>134 </svg>135 </div>136 </div>137 </div>138 139 <!-- Overlay Add Reminder -->140 <div class="overlay">141 <div class="overlay-header">142 <div class="close-btn">✕</div>143 <div class="title">Add Reminder</div>144 <div class="save-btn">SAVE</div>145 </div>146 <div class="overlay-body">147 148 <!-- Title -->149 <div class="input-row">150 <svg class="row-icon" viewBox="0 0 24 24">151 <path d="M12 2a5 5 0 015 5v6a5 5 0 11-10 0V7a5 5 0 015-5z" fill="#bbb"></path>152 <rect x="10" y="15" width="4" height="6" fill="#bbb"></rect>153 </svg>154 <div class="input-title">Dance performance</div>155 <div class="right-actions">156 <svg class="icon" viewBox="0 0 24 24">157 <path d="M12 2a5 5 0 015 5v6a5 5 0 11-10 0V7a5 5 0 015-5z" fill="#fff"></path>158 <rect x="10" y="15" width="4" height="6" fill="#fff"></rect>159 </svg>160 </div>161 </div>162 163 <!-- Description -->164 <div class="input-row">165 <svg class="row-icon" viewBox="0 0 24 24">166 <rect x="3" y="4" width="18" height="4" fill="#bbb"></rect>167 <rect x="3" y="10" width="18" height="2" fill="#bbb"></rect>168 <rect x="3" y="15" width="14" height="2" fill="#bbb"></rect>169 </svg>170 <div class="input-sub">Contemporary dance performance at the Teatro Carignano</div>171 <div class="right-actions">172 <svg class="icon" viewBox="0 0 24 24">173 <path d="M12 2a5 5 0 015 5v6a5 5 0 11-10 0V7a5 5 0 015-5z" fill="#fff"></path>174 <rect x="10" y="15" width="4" height="6" fill="#fff"></rect>175 </svg>176 </div>177 </div>178 179 <!-- Date -->180 <div class="input-row">181 <svg class="row-icon" viewBox="0 0 24 24">182 <rect x="3" y="4" width="18" height="17" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>183 <rect x="3" y="7" width="18" height="4" fill="#fff"></rect>184 </svg>185 <div class="row-label">Wed, Sep 27, 2023</div>186 <div class="right-actions">187 <div class="close-btn" style="border-color:#888; color:#ddd; width:48px; height:48px;">✕</div>188 </div>189 </div>190 191 <!-- Time -->192 <div class="input-row">193 <svg class="row-icon" viewBox="0 0 24 24">194 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>195 <path d="M12 6v6l5 3" stroke="#fff" stroke-width="2" fill="none"></path>196 </svg>197 <div class="row-label">06:55 PM</div>198 <div class="right-actions">199 <div class="action-link">+Add more time</div>200 <div class="close-btn" style="border-color:#888; color:#ddd; width:48px; height:48px;">✕</div>201 </div>202 </div>203 204 <!-- Remind me before -->205 <div class="input-row">206 <svg class="row-icon" viewBox="0 0 24 24">207 <path d="M12 3l6 3v6c0 4-3 7-6 7s-6-3-6-7V6l6-3z" stroke="#fff" stroke-width="2" fill="none"></path>208 </svg>209 <div class="row-label">Remind me before</div>210 <div class="right-actions">211 <div class="chevron"></div>212 </div>213 </div>214 215 <!-- Repeat -->216 <div class="input-row">217 <svg class="row-icon" viewBox="0 0 24 24">218 <path d="M7 7h8l-2-2 5 4-5 4 2-2H7a4 4 0 000 8h2" stroke="#fff" stroke-width="2" fill="none"></path>219 </svg>220 <div class="row-label">Repeat: <span class="muted">No repeat</span></div>221 <div class="right-actions">222 <div class="chevron"></div>223 </div>224 </div>225 226 <div class="note">NOTE: You can change a Date Time picker from app settings.</div>227 <div class="pill">Got it</div>228 229 </div>230 </div>231 232 <!-- Section chip -->233 <div class="section-chip">Upcoming</div>234 235 <!-- Keyboard Mock -->236 <div class="keyboard">237 <div class="key-row">238 <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>239 </div>240 <div class="key-row">241 <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>242 </div>243 <div class="key-row">244 <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>245 </div>246 <div class="space-row">247 <div class="key wide">?123</div>248 <div class="key">,</div>249 <div class="key">🙂</div>250 <div class="space"></div>251 <div class="key">.</div>252 <div class="key extra-wide">↵</div>253 </div>254 </div>255 256 <div class="home-indicator"></div>257</div>258</body>259</html>