GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Backup & Restore Manual</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #d8dee9; /* light bluish gray */14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #2e3e50;16 }17 18 /* Header / Status + App Bar */19 .header {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 340px;25 background: #2f4b6d;26 box-sizing: border-box;27 }28 .status-bar {29 height: 110px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 padding: 0 40px;34 color: #ffffff;35 font-size: 36px;36 letter-spacing: 0.5px;37 }38 .battery {39 width: 38px;40 height: 24px;41 border: 3px solid #fff;42 border-radius: 4px;43 position: relative;44 margin-left: 8px;45 }46 .battery::after {47 content: "";48 position: absolute;49 top: 6px;50 right: -10px;51 width: 6px;52 height: 12px;53 background: #fff;54 border-radius: 2px;55 }56 .battery .level {57 position: absolute;58 top: 4px;59 left: 4px;60 right: 4px;61 bottom: 4px;62 background: #ffffff;63 }64 65 .appbar {66 padding: 20px 40px;67 color: #fff;68 }69 .appbar-row {70 display: flex;71 align-items: center;72 gap: 20px;73 }74 .back-icon {75 width: 56px;76 height: 56px;77 }78 .title {79 font-size: 56px;80 font-weight: 700;81 margin: 0;82 line-height: 1.2;83 }84 .subtitle {85 font-size: 32px;86 color: #c7d3df;87 margin-top: 8px;88 }89 90 /* Content */91 .content {92 position: absolute;93 top: 340px;94 left: 0;95 right: 0;96 padding: 40px 48px 120px;97 }98 .section-title {99 font-size: 40px;100 font-weight: 700;101 color: #3e5876;102 margin: 20px 0 16px;103 }104 .text {105 font-size: 34px;106 line-height: 1.55;107 color: #263543;108 margin: 0 0 24px;109 }110 .option {111 font-size: 34px;112 font-weight: 700;113 color: #3e5876;114 margin: 26px 0 8px;115 }116 117 /* Pill Buttons */118 .pill-btn {119 width: 984px;120 height: 152px;121 margin: 24px auto 36px;122 border-radius: 80px;123 background: #c1c9cf;124 border: 4px solid #8a939c;125 box-shadow: inset 0 3px 0 rgba(255,255,255,0.6);126 display: flex;127 align-items: center;128 justify-content: center;129 color: #2f3e4c;130 font-size: 44px;131 font-weight: 700;132 letter-spacing: 0.5px;133 }134 135 /* Footer link */136 .footer-link {137 margin-top: 40px;138 display: flex;139 justify-content: flex-end;140 align-items: center;141 gap: 10px;142 color: #55687d;143 font-size: 36px;144 padding-right: 24px;145 }146 .chevron {147 width: 28px;148 height: 28px;149 }150 151 /* Home indicator */152 .home-indicator {153 position: absolute;154 bottom: 38px;155 left: 50%;156 transform: translateX(-50%);157 width: 300px;158 height: 12px;159 background: #6b6f75;160 border-radius: 8px;161 opacity: 0.9;162 }163</style>164</head>165<body>166<div id="render-target">167 <div class="header">168 <div class="status-bar">169 <div>8:36</div>170 <div style="display:flex; align-items:center;">171 <div class="battery"><div class="level"></div></div>172 </div>173 </div>174 <div class="appbar">175 <div class="appbar-row">176 <svg class="back-icon" viewBox="0 0 24 24">177 <path d="M15.5 4.5L6 12l9.5 7.5" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 <div>180 <h1 class="title">Backup & Restore</h1>181 <div class="subtitle">Manual</div>182 </div>183 </div>184 </div>185 </div>186 187 <div class="content">188 <div class="section-title">Backup:</div>189 <p class="text">190 You can take backup and move the file anywhere you want, but do not modify it.191 </p>192 193 <div class="pill-btn">Take Backup</div>194 195 <div class="section-title">Restore:</div>196 <p class="text">197 If you take a backup in the email, website etc.., then download backup file to your mobile.198 </p>199 200 <div class="option">Option 1:</div>201 <p class="text">202 Go to backup file in your mobile storage, then select the file and click "Send" (or) "Share", you will see the option to import.203 </p>204 205 <div class="option">Option 2:</div>206 <p class="text">207 Click below "Restore from Backup" button and select the backup file to import/restore.208 </p>209 210 <div class="pill-btn">Restore from Backup</div>211 212 <div class="footer-link">213 <span>Auto Backup</span>214 <svg class="chevron" viewBox="0 0 24 24">215 <path d="M8 5l8 7-8 7" fill="none" stroke="#55687d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>216 </svg>217 </div>218 </div>219 220 <div class="home-indicator"></div>221</div>222</body>223</html>