GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Save As Dialog Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif;}7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #0d0c10; /* dark app background */11 color: #fff;12 }13 14 /* Top action bar (icons only for context) */15 .topbar {16 position: absolute;17 top: 96px;18 left: 40px;19 right: 40px;20 height: 80px;21 display: flex;22 align-items: center;23 gap: 46px;24 }25 .icon {26 width: 62px; height: 62px;27 border-radius: 12px;28 display: flex; align-items: center; justify-content: center;29 color: #c8c3d7;30 }31 .icon svg { width: 46px; height: 46px; fill: none; stroke: #c8c3d7; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }32 33 /* Dimmed slide canvas behind dialog */34 .canvas-area {35 position: absolute;36 top: 300px;37 left: 60px;38 right: 60px;39 bottom: 320px;40 background: #0b0a0f;41 border-radius: 12px;42 }43 44 /* Thumbnails strip */45 .thumb-strip {46 position: absolute;47 left: 0; right: 0; bottom: 160px;48 height: 220px;49 background: transparent;50 display: flex; align-items: center; gap: 22px;51 padding: 0 24px;52 }53 .thumb {54 width: 170px; height: 170px;55 border-radius: 16px;56 background: #101319;57 border: 2px solid #1f2430;58 box-shadow: inset 0 0 0 2px #0e121a;59 }60 .thumb.large {61 width: 360px; height: 170px;62 background: #11353b;63 border-color: #1a4b52;64 }65 66 /* Dialog */67 .dialog {68 position: absolute;69 left: 90px;70 top: 520px;71 width: 900px;72 background: #2a2631;73 border-radius: 36px;74 box-shadow: 0 40px 120px rgba(0,0,0,0.65);75 padding: 56px 60px 130px 60px;76 }77 .dialog h1 {78 margin: 0 0 22px 0;79 font-size: 64px;80 font-weight: 700;81 letter-spacing: 0.3px;82 color: #efe7ff;83 }84 .subtitle {85 color: #b9b2c8;86 font-size: 32px;87 margin-bottom: 26px;88 }89 90 .option {91 display: flex; align-items: center;92 gap: 28px;93 padding: 22px 6px;94 font-size: 44px;95 color: #eae6f3;96 }97 .option .radio {98 width: 44px; height: 44px; border-radius: 50%;99 border: 4px solid #cfc8da;100 position: relative;101 box-sizing: border-box;102 }103 .option.selected .radio {104 border-color: #b38bff;105 }106 .option .radio:after {107 content: "";108 position: absolute; inset: 9px;109 border-radius: 50%; background: transparent;110 }111 .option.selected .radio:after {112 background: #b38bff;113 }114 115 .muted {116 color: #dcd6ea;117 }118 119 .actions {120 position: absolute;121 right: 60px; bottom: 40px;122 display: flex; gap: 60px;123 align-items: center;124 }125 .btn {126 font-size: 44px;127 background: transparent;128 border: none;129 color: #d6cbe9;130 padding: 14px 10px;131 cursor: default;132 }133 .btn.primary {134 color: #b38bff;135 font-weight: 600;136 }137 138 /* Simple status icons at the very top (optional visual) */139 .statusbar {140 position: absolute;141 top: 24px; right: 24px; height: 40px;142 display: flex; align-items: center; gap: 18px; color: #fff;143 opacity: .8;144 }145 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; }146 .battery {147 width: 44px; height: 22px; border: 3px solid #fff; border-radius: 3px; position: relative;148 }149 .battery:after {150 content:""; position:absolute; right:-7px; top:6px; width:5px; height:10px; background:#fff; border-radius:1px;151 }152 .battery .level { position:absolute; left:3px; top:3px; bottom:3px; width:26px; background:#fff; }153 154</style>155</head>156<body>157<div id="render-target">158 159 <!-- simple mock status indicators -->160 <div class="statusbar">161 <div class="dot"></div>162 <div class="dot"></div>163 <div class="battery"><div class="level"></div></div>164 </div>165 166 <!-- top action bar icons -->167 <div class="topbar">168 <div class="icon">169 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>170 </div>171 <div class="icon">172 <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 00-7 7H3l3.5 3.5L10 12H8a4 4 0 014-4"/></svg>173 </div>174 <div class="icon">175 <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 017 7h2l-3.5 3.5L14 12h2a4 4 0 00-4-4"/></svg>176 </div>177 <div class="icon">178 <svg viewBox="0 0 24 24"><path d="M6 8l12 4-12 4z"/></svg>179 </div>180 <div class="icon">181 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>182 </div>183 <div class="icon">184 <svg viewBox="0 0 24 24"><path d="M4 5h16v10H9l-5 4V5z"/></svg>185 </div>186 <div class="icon">187 <svg viewBox="0 0 24 24"><path d="M5 7h14M5 12h14M5 17h14"/></svg>188 </div>189 </div>190 191 <!-- dark content area behind dialog -->192 <div class="canvas-area"></div>193 194 <!-- Save As dialog -->195 <div class="dialog">196 <h1>Save As</h1>197 <div class="subtitle">Choose format</div>198 199 <div class="option">200 <div class="radio"></div>201 <div class="label">PowerPoint (.pptx)</div>202 </div>203 204 <div class="option">205 <div class="radio"></div>206 <div class="label">PDF Document (.pdf)</div>207 </div>208 209 <div class="option selected">210 <div class="radio"></div>211 <div class="label">OpenDocument format (.odp)</div>212 </div>213 214 <div class="option">215 <div class="radio"></div>216 <div class="label">Plain Text (.txt)</div>217 </div>218 219 <div class="option">220 <div class="radio"></div>221 <div class="label">JPEG image (.jpg, current slide)</div>222 </div>223 224 <div class="option">225 <div class="radio"></div>226 <div class="label">PNG image (.png, current slide)</div>227 </div>228 229 <div class="option">230 <div class="radio"></div>231 <div class="label">SVG (.svg, current slide)</div>232 </div>233 234 <div class="actions">235 <button class="btn">Cancel</button>236 <button class="btn primary">OK</button>237 </div>238 </div>239 240 <!-- thumbnail strip for slides -->241 <div class="thumb-strip">242 <div class="thumb"></div>243 <div class="thumb large"></div>244 <div class="thumb large"></div>245 <div class="thumb large"></div>246 </div>247 248</div>249</body>250</html>