GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Backup & Restore - Share Sheet</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: #0f2436;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 18px;23 left: 32px;24 right: 32px;25 height: 60px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fff;30 opacity: 0.95;31 pointer-events: none;32 }33 .status-time { font-size: 34px; font-weight: 600; letter-spacing: 0.5px; }34 .battery {35 width: 36px; height: 40px;36 }37 38 /* App bar / header */39 .app-bar {40 position: absolute;41 top: 84px;42 left: 0;43 right: 0;44 padding: 24px 36px 28px 24px;45 display: flex;46 align-items: flex-start;47 gap: 16px;48 }49 .back-btn {50 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;51 }52 .titles { color: #e6eef7; }53 .title {54 font-size: 58px; font-weight: 700; line-height: 1.15; margin: 0;55 }56 .subtitle {57 margin: 6px 0 0; font-size: 30px; color: #c2cfdb;58 }59 60 /* Page content (behind sheet) */61 .page {62 position: absolute;63 top: 260px;64 left: 0;65 right: 0;66 bottom: 0;67 background: #ffffff;68 border-top-left-radius: 24px;69 border-top-right-radius: 24px;70 padding: 40px 48px 240px;71 }72 73 .section-title {74 color: #1e3a5f;75 font-weight: 800;76 font-size: 40px;77 margin: 24px 0 10px;78 }79 .paragraph {80 font-size: 34px; line-height: 1.5; color: #37474f; margin: 0 0 28px;81 }82 .btn-backup {83 width: 100%;84 background: #f3f5f7;85 border: 3px solid #b9c2c9;86 color: #1b2b36;87 border-radius: 60px;88 padding: 36px 24px;89 font-size: 44px;90 font-weight: 700;91 text-align: center;92 margin: 20px 0 40px;93 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);94 }95 96 /* Dim overlay when sheet is open */97 .overlay {98 position: absolute;99 inset: 0;100 background: rgba(0,0,0,0.4);101 }102 103 /* Bottom share sheet */104 .sheet {105 position: absolute;106 left: 0; right: 0; bottom: 0;107 height: 1420px;108 background: #f1f1f1;109 border-top-left-radius: 40px;110 border-top-right-radius: 40px;111 box-shadow: 0 -8px 24px rgba(0,0,0,0.25);112 }113 .sheet .handle {114 width: 140px; height: 12px; background: #d5d5d5; border-radius: 6px;115 margin: 18px auto 22px;116 }117 .file-row {118 display: flex; align-items: center; gap: 28px;119 padding: 8px 44px;120 }121 .doc-icon {122 width: 88px; height: 88px;123 }124 .file-name {125 font-size: 38px; letter-spacing: 0.5px; color: #5b5b5b;126 }127 128 .nearby {129 width: 220px;130 margin: 36px auto 30px;131 padding: 18px 22px;132 border-radius: 18px;133 border: 2px solid #9aa5af;134 color: #2a3a43;135 display: flex; align-items: center; justify-content: center; gap: 14px;136 background: #ffffff;137 font-size: 32px; font-weight: 600;138 }139 .nearby svg { width: 32px; height: 32px; }140 141 .note {142 text-align: center; color: #9aa0a6; font-size: 30px; margin-top: 18px;143 }144 145 .apps {146 display: flex; justify-content: center; gap: 120px;147 margin-top: 140px;148 }149 .app {150 display: flex; flex-direction: column; align-items: center; gap: 18px;151 }152 .app .icon-circle {153 width: 150px; height: 150px; border-radius: 50%;154 background: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.12);155 display: flex; align-items: center; justify-content: center;156 border: 1px solid #e4e4e4;157 color: #b0b0b0; font-weight: 700; font-size: 42px;158 }159 .app .label { font-size: 30px; color: #5b5b5b; }160 161 /* Home pill */162 .home-pill {163 position: absolute; bottom: 38px; left: 50%;164 transform: translateX(-50%);165 width: 300px; height: 16px; background: #bdbdbd; border-radius: 10px;166 opacity: 0.9;167 }168</style>169</head>170<body>171<div id="render-target">172 173 <!-- Status bar -->174 <div class="status-bar">175 <div class="status-time">8:33</div>176 <svg class="battery" viewBox="0 0 24 24">177 <rect x="2" y="5" width="18" height="14" rx="2" fill="#ffffff"/>178 <polygon points="11,7 8,13 12,13 9,19 16,11 12,11" fill="#0f2436"/>179 </svg>180 </div>181 182 <!-- App bar -->183 <div class="app-bar">184 <div class="back-btn">185 <svg width="48" height="48" viewBox="0 0 24 24">186 <path d="M14 5 L7 12 L14 19" stroke="#ffffff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>187 </svg>188 </div>189 <div class="titles">190 <h1 class="title">Backup & Restore</h1>191 <div class="subtitle">Manual</div>192 </div>193 </div>194 195 <!-- Page content (dimmed under the sheet) -->196 <div class="page">197 <div class="section-title">Backup:</div>198 <p class="paragraph">199 You can take backup and move the file anywhere you want, but do not modify it.200 </p>201 <div class="btn-backup">Take Backup</div>202 203 <div class="section-title">Restore:</div>204 <p class="paragraph">205 If you take a backup in the email, website etc.., then download backup file to your mobile.206 </p>207 <p class="paragraph">208 <strong>Option 1:</strong> Go to backup file in your mobile storage, then select the file and click "Send" (or) "Share", you will see the option to import.209 </p>210 </div>211 212 <div class="overlay"></div>213 214 <!-- Share sheet -->215 <div class="sheet">216 <div class="handle"></div>217 218 <div class="file-row">219 <svg class="doc-icon" viewBox="0 0 24 24">220 <path d="M6 2h8l4 4v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#9e9e9e"/>221 <path d="M14 2v4h4" fill="#cfcfcf"/>222 </svg>223 <div class="file-name">BACKUP_REMINDER_MADE_EASY.db</div>224 </div>225 226 <div class="nearby">227 <svg viewBox="0 0 24 24">228 <path d="M4 12c2-4 6-4 8 0s6 4 8 0" stroke="#2a3a43" stroke-width="2" fill="none" stroke-linecap="round"/>229 </svg>230 Nearby231 </div>232 233 <div class="note">No recommended people to share with</div>234 235 <div class="apps">236 <div class="app">237 <div class="icon-circle">M</div>238 <div class="label">Gmail</div>239 </div>240 <div class="app">241 <div class="icon-circle">D</div>242 <div class="label">Drive</div>243 </div>244 </div>245 246 <div class="home-pill"></div>247 </div>248 249</div>250</body>251</html>