GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Backup & Restore - Manual</title>5<style>6  body { margin:0; padding:0; background: transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#E3E6EC; /* light screen background */11    font-family: Arial, Helvetica, sans-serif;12    color:#2b3d59;13  }14 15  /* Top bars */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:100px;19    background:#2f3e59;20    color:#fff;21    display:flex; align-items:center; justify-content:space-between;22    padding:0 40px;23    font-size:36px; letter-spacing:0.5px;24  }25  .status-icons {26    display:flex; align-items:center; gap:24px;27  }28  .icon-dot { width:12px; height:12px; border-radius:50%; background:#fff; opacity:0.8; }29  .icon-rect { width:28px; height:18px; border:2px solid #fff; border-radius:4px; }30  .battery { width:42px; height:22px; border:2px solid #fff; border-radius:4px; position:relative; }31  .battery::after { content:""; position:absolute; right:-6px; top:6px; width:4px; height:10px; background:#fff; border-radius:2px; }32  .battery-fill { position:absolute; left:4px; top:4px; height:12px; width:26px; background:#fff; }33 34  .app-bar {35    position:absolute; top:100px; left:0; right:0;36    height:200px; background:#2f3e59; color:#fff;37    padding:30px 40px;38  }39  .app-bar .title-row {40    display:flex; align-items:center; gap:24px;41  }42  .back-btn {43    width:56px; height:56px; display:flex; align-items:center; justify-content:center;44  }45  .app-title {46    font-size:56px; font-weight:700;47  }48  .app-subtitle {49    margin-left:92px; margin-top:12px;50    font-size:34px; opacity:0.9;51  }52 53  /* Content */54  .content {55    position:absolute; top:300px; left:0; right:0; bottom:0;56    padding:40px 60px 160px;57  }58  h3.section-title {59    margin:20px 0 12px;60    font-size:42px; color:#2b3d59;61  }62  p {63    margin:10px 0; font-size:34px; line-height:1.45; color:#2b3d59;64  }65  .option-title { font-weight:700; font-size:36px; margin-top:26px; }66 67  .pill-btn {68    width:960px; height:140px;69    margin:26px 0 40px;70    background:#cfd5db;71    border-radius:80px;72    border:2px solid #aeb6bf;73    display:flex; align-items:center; justify-content:center;74    color:#24374f; font-size:44px; font-weight:700;75    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);76  }77 78  .auto-row {79    margin-top:40px;80    width:960px; height:100px;81    display:flex; align-items:center; justify-content:flex-end;82    color:#5a6576; font-size:38px; gap:20px;83  }84  .right-arrow {85    width:28px; height:28px;86    border-right:6px solid #5a6576; border-top:6px solid #5a6576;87    transform:rotate(45deg);88    margin-right:10px;89  }90 91  /* Snackbar */92  .snackbar {93    position:absolute; left:90px; bottom:170px;94    width:900px; min-height:140px;95    background:#ffffff; color:#222;96    border-radius:80px; box-shadow:0 14px 26px rgba(0,0,0,0.15);97    display:flex; align-items:center; gap:30px;98    padding:26px 40px;99  }100  .drive-icon {101    width:84px; height:84px; border-radius:42px; background:#f5f5f5;102    display:flex; align-items:center; justify-content:center;103    box-shadow: inset 0 0 0 1px #d0d0d0;104  }105  .snackbar-text {106    font-size:36px; line-height:1.25;107  }108  .snackbar-text .sub { display:block; font-size:32px; color:#5a6576; margin-top:8px; }109 110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status bar -->116  <div class="status-bar">117    <div>8:36</div>118    <div class="status-icons">119      <div class="icon-dot"></div>120      <div class="icon-rect"></div>121      <div class="icon-dot"></div>122      <div class="battery">123        <div class="battery-fill"></div>124      </div>125    </div>126  </div>127 128  <!-- App bar -->129  <div class="app-bar">130    <div class="title-row">131      <div class="back-btn">132        <svg width="56" height="56" viewBox="0 0 24 24">133          <path d="M15 4 L7 12 L15 20" stroke="#ffffff" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134        </svg>135      </div>136      <div class="app-title">Backup & Restore</div>137    </div>138    <div class="app-subtitle">Manual</div>139  </div>140 141  <!-- Content -->142  <div class="content">143    <h3 class="section-title">Backup:</h3>144    <p>You can take backup and move the file anywhere you want, but do not modify it.</p>145 146    <div class="pill-btn">Take Backup</div>147 148    <h3 class="section-title">Restore:</h3>149    <p>If you take a backup in the email, website etc.., then download backup file to your mobile.</p>150 151    <div class="option-title">Option 1:</div>152    <p>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>153 154    <div class="option-title">Option 2:</div>155    <p>Click below "Restore from Backup" button and select the backup file to import/restore.</p>156 157    <div class="pill-btn">Restore from Backup</div>158 159    <div class="auto-row">160      <div>Auto Backup</div>161      <div class="right-arrow"></div>162    </div>163  </div>164 165  <!-- Snackbar / Upload indicator -->166  <div class="snackbar">167    <div class="drive-icon">168      <svg width="60" height="60" viewBox="0 0 24 24">169        <!-- simplified Google Drive triangle -->170        <polygon points="7,3 12,3 17,12 12,12" fill="#43A047"/>171        <polygon points="17,12 12,12 8,21 13,21" fill="#FFC107"/>172        <polygon points="7,3 2,12 8,21 12,12" fill="#1E88E5"/>173      </svg>174    </div>175    <div class="snackbar-text">176      Your 1 file is being uploaded to: My Drive177      <span class="sub">Drive</span>178    </div>179  </div>180 181</div>182</body>183</html>