GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Backup & Restore UI</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; position:relative; overflow:hidden;9    background:#e4e8ef;10    border-radius:0;11  }12 13  /* Top bars */14  .topbar {15    position:absolute; left:0; top:0; width:100%; height:220px; background:#2f3e5a;16    box-shadow:0 2px 8px rgba(0,0,0,0.25);17  }18  .status-row {19    height:80px; color:#fff; font-size:38px; display:flex; align-items:center; padding:0 36px; opacity:0.95;20  }21  .status-row .time { font-weight:700; }22  .status-icons { margin-left:auto; display:flex; gap:26px; align-items:center; }23  .status-icon { width:36px; height:36px; border-radius:6px; background:#cfd7e7; opacity:0.9; }24  /* App bar */25  .appbar {26    height:140px; display:flex; align-items:center; color:#fff; padding:0 34px;27  }28  .back-btn {29    width:84px; height:84px; display:flex; align-items:center; justify-content:center; margin-right:16px;30  }31  .title-wrap { display:flex; flex-direction:column; }32  .title { font-size:56px; font-weight:800; letter-spacing:0.3px; }33  .subtitle { font-size:34px; opacity:0.9; margin-top:8px; }34 35  /* Content */36  .content {37    position:absolute; left:0; top:220px; width:100%; height:2180px; background:#dfe3ea;38    padding:40px 42px;39  }40  .section-title {41    color:#2f3e5a; font-weight:800; font-size:48px; margin-top:18px; margin-bottom:18px;42  }43  .paragraph {44    color:#2a2f39; font-size:40px; line-height:62px;45    margin-bottom:28px;46  }47  .pill-btn {48    width:100%; max-width:960px; height:140px; border-radius:70px;49    background:linear-gradient(#c9d0d6,#b9c0c6); color:#2a2f39;50    display:flex; align-items:center; justify-content:center;51    font-size:52px; font-weight:800; margin:26px 0 36px 0;52    border:1px solid #90979f;53  }54  .option-title {55    font-size:42px; font-weight:800; color:#2f3e5a; margin-top:18px; margin-bottom:8px;56  }57  .small-note { color:#2a2f39; font-size:40px; line-height:62px; }58  .spacer { height:30px; }59  .auto-row {60    position:absolute; right:42px; bottom:120px; display:flex; align-items:center; gap:18px;61    color:#2a2f39; font-size:46px; font-weight:700;62  }63  .chev-right { width:36px; height:36px; }64</style>65</head>66<body>67<div id="render-target">68 69  <!-- Top navy header -->70  <div class="topbar">71    <div class="status-row">72      <div class="time">8:33</div>73      <div class="status-icons">74        <div class="status-icon"></div>75        <div class="status-icon"></div>76        <div class="status-icon"></div>77        <div class="status-icon"></div>78      </div>79    </div>80    <div class="appbar">81      <div class="back-btn">82        <!-- Back Arrow -->83        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">84          <path d="M15.5 5l-7 7 7 7" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>85        </svg>86      </div>87      <div class="title-wrap">88        <div class="title">Backup & Restore</div>89        <div class="subtitle">Manual</div>90      </div>91    </div>92  </div>93 94  <!-- Content area -->95  <div class="content">96    <div class="section-title">Backup:</div>97    <div class="paragraph">98      You can take backup and move the file anywhere you want, but do not modify it.99    </div>100    <div class="pill-btn">Take Backup</div>101 102    <div class="section-title">Restore:</div>103    <div class="paragraph">104      If you take a backup in the email, website etc.., then download backup file to your mobile.105    </div>106 107    <div class="option-title">Option 1:</div>108    <div class="small-note">109      Go to backup file in your mobile storage, then select the file and click "Send" (or) "Share", you will see the option to import.110    </div>111 112    <div class="spacer"></div>113 114    <div class="option-title">Option 2:</div>115    <div class="small-note">116      Click below "Restore from Backup" button and select the backup file to import/restore.117    </div>118 119    <div class="pill-btn">Restore from Backup</div>120 121    <div class="auto-row">122      <div>Auto Backup</div>123      <svg class="chev-right" viewBox="0 0 24 24">124        <path d="M9 6l6 6-6 6" fill="none" stroke="#2a2f39" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>125      </svg>126    </div>127  </div>128 129</div>130</body>131</html>