GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #fff; border-radius: 0; box-shadow: none;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0; height: 110px;16 background: #0d0d0d; display: flex; align-items: center; padding: 0 36px;17 font-size: 38px; letter-spacing: 0.5px;18 }19 .status-left { flex: 1; }20 .status-right { display: flex; align-items: center; gap: 28px; }21 .icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }22 23 /* App toolbar */24 .app-bar {25 position: absolute; top: 110px; left: 0; right: 0; height: 160px;26 background: #1a1a1a; display: flex; align-items: center; padding: 0 28px; gap: 28px;27 }28 .app-actions { display: flex; align-items: center; gap: 34px; }29 .app-spacer { flex: 1; }30 31 /* Workspace */32 .workspace {33 position: absolute; top: 270px; left: 0; right: 0; bottom: 860px;34 background: #232323;35 }36 37 /* Save toast */38 .save-toast {39 position: absolute; top: 40px; left: 50%; transform: translateX(-50%);40 background: #c9f5d7; color: #0b3d1f; border-radius: 16px; padding: 24px 34px;41 display: flex; align-items: center; gap: 22px; box-shadow: 0 6px 14px rgba(0,0,0,0.3);42 font-size: 40px;43 }44 .toast-close { margin-left: 24px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }45 46 /* Canvas (white page) */47 .canvas {48 position: absolute; top: 140px; left: 50%; transform: translateX(-50%);49 width: 980px; height: 1160px; background: #ffffff; border-radius: 2px; box-shadow: 0 2px 0 rgba(255,255,255,0.12) inset;50 }51 .photo-placeholder {52 position: absolute; top: 220px; left: 300px; width: 420px; height: 720px;53 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex;54 align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;55 }56 57 /* Bottom sheet */58 .bottom-sheet {59 position: absolute; left: 0; right: 0; bottom: 0; height: 860px;60 background: #0f0f10; border-top-left-radius: 28px; border-top-right-radius: 28px;61 box-shadow: 0 -8px 24px rgba(0,0,0,0.5);62 }63 .sheet-header {64 display: flex; align-items: center; justify-content: center;65 padding: 34px 40px 24px; position: relative; font-size: 58px; font-weight: 700;66 }67 .sheet-header .close {68 position: absolute; right: 40px; top: 42px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;69 }70 .sheet-header .collapse {71 position: absolute; left: 24px; top: 48px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;72 }73 74 .sheet-content { padding: 10px 40px; }75 .checkbox-row {76 display: flex; align-items: center; gap: 22px; margin: 26px 0; font-size: 40px; color: #dcdcdc;77 }78 .checkbox {79 width: 50px; height: 50px; border: 2px solid #6a6a6a; border-radius: 10px;80 display: inline-flex; align-items: center; justify-content: center; color: #7a7a7a;81 }82 83 .action-grid {84 margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;85 }86 .pill-btn {87 border: 2px solid #e7e7e7; border-radius: 22px; padding: 28px 10px; text-align: center;88 color: #ffffff; font-size: 38px; background: transparent;89 }90 .pill-btn.active { border-color: #bcbcbc; background: rgba(255,255,255,0.06); }91 92 .bottom-nav {93 position: absolute; left: 0; right: 0; bottom: 32px; display: flex; align-items: center; justify-content: space-between;94 padding: 0 40px; font-size: 38px;95 }96 .nav-item { display: flex; align-items: center; gap: 18px; color: #cfcaff; }97 .count-badge { background: #2b2b2b; border: 2px solid #888; color: #fff; border-radius: 16px; padding: 8px 16px; font-size: 32px; }98 99 /* Floating "Done!" */100 .done-pill {101 position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);102 background: #1f2a22; color: #d8ffe1; padding: 20px 34px; border-radius: 26px; display: flex; align-items: center; gap: 16px;103 box-shadow: 0 8px 24px rgba(0,0,0,0.5); font-size: 42px;104 }105 .gesture-bar {106 position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);107 width: 360px; height: 8px; background: #ffffff; border-radius: 6px; opacity: 0.9;108 }109 110 /* Simple SVG icon styling */111 svg { width: 48px; height: 48px; }112 .small svg { width: 40px; height: 40px; }113 .white-stroke { stroke: #fff; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }114 .white-fill { fill: #fff; }115 .green-fill { fill: #1db954; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status bar -->122 <div class="status-bar">123 <div class="status-left">7:16</div>124 <div class="status-right">125 <div class="icon">126 <svg viewBox="0 0 24 24"><circle cx="4" cy="12" r="2" class="white-fill"/><circle cx="10" cy="12" r="2" class="white-fill"/><circle cx="16" cy="12" r="2" class="white-fill"/></svg>127 </div>128 <div class="icon">129 <svg viewBox="0 0 24 24"><path d="M2 18l10-12 10 12" class="white-stroke"/></svg>130 </div>131 <div class="icon">132 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="16" height="12" class="white-stroke"/><path d="M18 10h4v8h-4" class="white-stroke"/></svg>133 </div>134 <div>.</div>135 <div class="icon">136 <svg viewBox="0 0 24 24"><path d="M2 10l6-6 6 6" class="white-stroke"/><path d="M8 4v14" class="white-stroke"/></svg>137 </div>138 <div class="icon">139 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="14" height="12" class="white-stroke"/><path d="M20 8v8" class="white-stroke"/><path d="M18 10h4" class="white-stroke"/></svg>140 </div>141 </div>142 </div>143 144 <!-- App bar -->145 <div class="app-bar">146 <div class="app-actions">147 <!-- Back -->148 <div class="icon">149 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" class="white-stroke"/></svg>150 </div>151 <!-- Play (dashed circle) -->152 <div class="icon">153 <svg viewBox="0 0 24 24">154 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="3" stroke-dasharray="2 4" fill="none"/>155 <path d="M10 8l6 4-6 4z" class="white-fill"/>156 </svg>157 </div>158 <!-- Layers -->159 <div class="icon">160 <svg viewBox="0 0 24 24"><path d="M12 4l8 4-8 4-8-4 8-4z" class="white-stroke"/><path d="M4 12l8 4 8-4" class="white-stroke"/></svg>161 </div>162 <!-- Undo -->163 <div class="icon">164 <svg viewBox="0 0 24 24"><path d="M8 8H4l4-4" class="white-stroke"/><path d="M8 8a8 8 0 1 1 8 8" class="white-stroke"/></svg>165 </div>166 <!-- More (vertical dots) -->167 <div class="icon">168 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" class="white-fill"/><circle cx="12" cy="12" r="2" class="white-fill"/><circle cx="12" cy="19" r="2" class="white-fill"/></svg>169 </div>170 <!-- Print -->171 <div class="icon">172 <svg viewBox="0 0 24 24"><path d="M6 7V3h12v4" class="white-stroke"/><rect x="4" y="9" width="16" height="9" class="white-stroke"/><rect x="7" y="14" width="10" height="6" class="white-stroke"/></svg>173 </div>174 <!-- Share/Export -->175 <div class="icon">176 <svg viewBox="0 0 24 24"><path d="M12 3l6 6h-4v6h-4V9H6z" class="white-stroke"/><rect x="4" y="15" width="16" height="6" class="white-stroke"/></svg>177 </div>178 </div>179 <div class="app-spacer"></div>180 </div>181 182 <!-- Workspace -->183 <div class="workspace">184 <!-- Save toast -->185 <div class="save-toast">186 <svg viewBox="0 0 24 24" class="small"><circle cx="12" cy="12" r="10" fill="#9be8b2"/><path d="M7 12l3 3 7-7" stroke="#0b3d1f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>187 <div>All saved!</div>188 <div class="toast-close">189 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" class="white-stroke" stroke="#2c5f3d"/></svg>190 </div>191 </div>192 193 <!-- White canvas/page -->194 <div class="canvas">195 <div class="photo-placeholder">[IMG: Inserted photo]</div>196 </div>197 </div>198 199 <!-- Bottom sheet -->200 <div class="bottom-sheet">201 <div class="sheet-header">202 <div class="collapse">203 <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7" class="white-stroke"/></svg>204 </div>205 <div>Page Animations</div>206 <div class="close">207 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" class="white-stroke"/></svg>208 </div>209 </div>210 211 <div class="sheet-content">212 <div class="checkbox-row">213 <div class="checkbox"></div>214 <div>Apply same animation to all pages</div>215 </div>216 <div class="checkbox-row">217 <div class="checkbox"></div>218 <div>Animate elements together</div>219 </div>220 221 <div class="action-grid">222 <div class="pill-btn">Zoom Out</div>223 <div class="pill-btn active">Light Speed In</div>224 <div class="pill-btn">Back In Down</div>225 <div class="pill-btn">Pan</div>226 </div>227 </div>228 229 <div class="done-pill">230 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" class="green-fill"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>231 <span>Done!</span>232 </div>233 234 <div class="bottom-nav">235 <div class="nav-item">236 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="3" fill="#9c84ff"/><path d="M6 10h12M6 15h12" stroke="#9c84ff" stroke-width="2"/></svg>237 <span>Animations</span>238 </div>239 <div class="nav-item" style="color:#ffffff;">240 <svg viewBox="0 0 24 24"><path d="M12 5v7l5 3" stroke="#ffffff" stroke-width="2" fill="none"/></svg>241 <span>Duration</span>242 </div>243 <div class="nav-item">244 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" stroke="#9c84ff" stroke-width="2" fill="none"/><path d="M7 8h10M7 12h10" stroke="#9c84ff" stroke-width="2"/></svg>245 <span>Manage pages</span>246 <span class="count-badge">9+</span>247 </div>248 </div>249 </div>250 251 <!-- Gesture bar -->252 <div class="gesture-bar"></div>253 254</div>255</body>256</html>