GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Backup & Restore Manual</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #d8dee8;19  }20 21  /* Top status and header */22  .topbar {23    position: absolute;24    left: 0;25    top: 0;26    width: 1080px;27    height: 370px;28    background: #2f4f6f;29    color: #ffffff;30  }31  .status-bar {32    height: 100px;33    padding: 0 40px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #ffffff;38    font-size: 36px;39    letter-spacing: 1px;40  }41  .app-header {42    padding: 30px 40px 40px 40px;43  }44  .header-row {45    display: flex;46    align-items: center;47    gap: 24px;48  }49  .title {50    font-size: 54px;51    font-weight: 700;52    color: #ffffff;53  }54  .subtitle {55    font-size: 28px;56    color: rgba(255,255,255,0.8);57    margin-left: 92px; /* aligns under title text after arrow */58    margin-top: 8px;59  }60 61  /* Content area */62  .content {63    position: absolute;64    top: 370px;65    left: 0;66    width: 100%;67    height: calc(2400px - 370px);68    background: #d8dee8;69    padding: 40px 60px 120px 60px;70    box-sizing: border-box;71    color: #262f39;72  }73  .section-title {74    font-size: 42px;75    font-weight: 700;76    color: #3f5f81;77    margin: 24px 0 10px 0;78  }79  .paragraph {80    font-size: 36px;81    line-height: 1.55;82    margin: 0 0 30px 0;83    color: #2b3138;84  }85  .option-title {86    font-size: 34px;87    font-weight: 700;88    color: #3f5f81;89    margin-top: 24px;90    margin-bottom: 6px;91  }92 93  .pill-btn {94    width: 960px;95    height: 132px;96    border-radius: 66px;97    border: 3px solid #8b949b;98    background: #c8d1d6;99    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);100    color: #2c3338;101    font-size: 44px;102    font-weight: 700;103    display: flex;104    align-items: center;105    justify-content: center;106    margin: 26px auto 40px auto;107  }108 109  .link-row {110    margin-top: 40px;111    display: flex;112    justify-content: flex-end;113    align-items: center;114    gap: 14px;115    color: #5a6a7a;116    font-size: 38px;117  }118  .bottom-gesture {119    position: absolute;120    bottom: 36px;121    left: 50%;122    transform: translateX(-50%);123    width: 420px;124    height: 16px;125    background: #6f6f72;126    border-radius: 12px;127    opacity: 0.9;128  }129  /* Simple icon styles */130  .icon {131    width: 48px;132    height: 48px;133    fill: none;134    stroke: #ffffff;135    stroke-width: 6;136  }137  .battery {138    width: 46px;139    height: 26px;140  }141  .chevron {142    width: 34px;143    height: 34px;144    stroke: #5a6a7a;145    stroke-width: 8;146  }147</style>148</head>149<body>150<div id="render-target">151  <!-- Top bar -->152  <div class="topbar">153    <div class="status-bar">154      <div>8:33</div>155      <svg class="battery" viewBox="0 0 50 30">156        <rect x="2" y="4" width="40" height="22" rx="4" ry="4" fill="none" stroke="#ffffff" stroke-width="4"></rect>157        <rect x="6" y="8" width="30" height="14" fill="#ffffff"></rect>158        <rect x="44" y="10" width="4" height="10" rx="2" fill="#ffffff"></rect>159      </svg>160    </div>161    <div class="app-header">162      <div class="header-row">163        <svg class="icon" viewBox="0 0 24 24">164          <path d="M15 5 L7 12 L15 19" stroke-linecap="round" stroke-linejoin="round"></path>165        </svg>166        <div class="title">Backup &amp; Restore</div>167      </div>168      <div class="subtitle">Manual</div>169    </div>170  </div>171 172  <!-- Content -->173  <div class="content">174    <div class="section-title">Backup:</div>175    <p class="paragraph">You can take backup and move the file anywhere you want, but do not modify it.</p>176 177    <div class="pill-btn">Take Backup</div>178 179    <div class="section-title" style="margin-top: 30px;">Restore:</div>180    <p class="paragraph">If you take a backup in the email, website etc.., then download backup file to your mobile.</p>181 182    <div class="option-title">Option 1:</div>183    <p class="paragraph">Go to backup file in your mobile storage, then select the file and click "Send" (or) "Share", you will see the option to import.</p>184 185    <div class="option-title">Option 2:</div>186    <p class="paragraph">Click below "Restore from Backup" button and select the backup file to import/restore.</p>187 188    <div class="pill-btn">Restore from Backup</div>189 190    <div class="link-row">191      <div>Auto Backup</div>192      <svg class="chevron" viewBox="0 0 24 24">193        <path d="M8 5 L16 12 L8 19" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>194      </svg>195    </div>196  </div>197 198  <div class="bottom-gesture"></div>199</div>200</body>201</html>