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;9    position:relative; overflow:hidden;10    background:#0e0f13; /* dark app background */11    color:#fff;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; width:100%; height:84px;17    color:#cfd8dc; font-size:32px; letter-spacing:1px;18    display:flex; align-items:center; justify-content:flex-start;19    padding:0 36px;20  }21  .status-icons { margin-left:auto; display:flex; gap:22px; align-items:center; }22  .status-dot { width:24px; height:24px; background:#cfd8dc; border-radius:50%; opacity:0.6; }23  .wifi { width:30px; height:22px; border:2px solid #cfd8dc; border-radius:16px; position:relative; }24  .wifi::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:#cfd8dc; transform:translate(-50%,-50%); }25 26  /* Header */27  .app-bar {28    position:absolute; top:84px; left:0; width:100%; height:140px;29    display:flex; align-items:center; padding:0 32px;30    background:#14161c; box-shadow:0 2px 0 rgba(255,255,255,0.05);31  }32  .back-btn {33    width:72px; height:72px; display:flex; align-items:center; justify-content:center;34    margin-right:12px;35  }36  .back-btn svg { width:40px; height:40px; fill:#ffffff; opacity:0.9; }37  .title-group { line-height:1.25; }38  .title { font-size:48px; font-weight:700; color:#ffffff; }39  .subtitle { font-size:30px; color:#b0bec5; margin-top:6px; }40 41  /* Main content (behind sheet) */42  .content {43    position:absolute; top:224px; left:0; right:0; bottom:0;44    background:#fafafa; color:#1f2933;45    padding:40px 48px 180px 48px;46  }47  .section-title { font-size:42px; font-weight:800; color:#334155; margin:12px 0 24px; }48  .para { font-size:36px; line-height:1.45; color:#374151; margin-bottom:24px; }49  .cta-btn {50    width:950px; height:120px; margin:18px 0 36px;51    border:2px solid #cfd8dc; border-radius:60px;52    background:#ffffff;53    display:flex; align-items:center; justify-content:center;54    font-size:44px; font-weight:700; color:#1f2933;55    box-shadow:0 2px 6px rgba(0,0,0,0.06) inset;56  }57 58  /* Bottom share sheet */59  .overlay { position:absolute; inset:0; background:rgba(0,0,0,0.45); }60  .sheet {61    position:absolute; left:0; bottom:0; width:100%; height:1120px;62    background:#f3f1f4; color:#1f2933;63    border-top-left-radius:32px; border-top-right-radius:32px;64    box-shadow:0 -8px 24px rgba(0,0,0,0.4);65  }66  .sheet .handle {67    width:120px; height:14px; background:#d8d6db; border-radius:10px;68    margin:26px auto 34px;69  }70  .file-row { display:flex; align-items:center; padding:0 40px; }71  .file-icon {72    width:72px; height:72px; border-radius:8px; background:#d9d9de;73    border:1px solid #bdbdc2; margin-right:24px;74    display:flex; align-items:center; justify-content:center; color:#616161; font-size:22px;75  }76  .file-name { font-size:38px; color:#2c2f33; flex:1; }77  .nearby-chip {78    margin:40px auto 24px; width:290px; height:90px;79    border-radius:18px; border:2px solid #8a8ea3; color:#2f3140;80    background:#ffffff; display:flex; align-items:center; justify-content:center; gap:16px;81    font-size:34px; font-weight:600;82  }83  .nearby-chip svg { width:40px; height:40px; fill:none; stroke:#2f3140; stroke-width:3; }84  .subtext { text-align:center; font-size:34px; color:#6b7280; margin-top:40px; }85 86  .share-icons { position:absolute; bottom:160px; width:100%; display:flex; justify-content:center; gap:160px; }87  .share-item { display:flex; flex-direction:column; align-items:center; }88  .circle {89    width:150px; height:150px; border-radius:50%; background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,0.1);90    display:flex; align-items:center; justify-content:center; overflow:hidden;91    border:1px solid #d3d3d7;92  }93  /* Simple brand color blocks */94  .drive-logo { width:100px; height:100px; background:#e0e0e0; position:relative; }95  .drive-logo::before { content:""; position:absolute; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:80px solid #43a047; left:0; top:10px; }96  .drive-logo::after { content:""; position:absolute; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:80px solid #1e88e5; left:0; bottom:10px; }97  .gmail-logo { width:100px; height:70px; background:#fff; border:8px solid #ef5350; border-radius:8px; position:relative; }98  .gmail-logo::before { content:""; position:absolute; left:8px; right:8px; top:-8px; height:0; border-top:30px solid #ef5350; border-left:40px solid transparent; border-right:40px solid transparent; }99  .share-label { margin-top:16px; font-size:34px; color:#374151; }100 101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status bar -->107  <div class="status-bar">108    8:34109    <div class="status-icons">110      <div class="status-dot"></div>111      <div class="status-dot"></div>112      <div class="status-dot"></div>113      <div class="wifi"></div>114      <div class="status-dot" style="background:#ffffff;"></div>115    </div>116  </div>117 118  <!-- Header -->119  <div class="app-bar">120    <div class="back-btn">121      <svg viewBox="0 0 24 24"><path d="M15.5 4l-9 8 9 8v-4.5L9.5 12 15.5 8.5V4z"/></svg>122    </div>123    <div class="title-group">124      <div class="title">Backup & Restore</div>125      <div class="subtitle">Manual</div>126    </div>127  </div>128 129  <!-- Main content area -->130  <div class="content">131    <div class="section-title">Backup:</div>132    <div class="para">133      You can take backup and move the file anywhere you want, but do not modify it.134    </div>135 136    <div class="cta-btn">Take Backup</div>137 138    <div class="section-title" style="margin-top:30px;">Restore:</div>139    <div class="para">140      If you take a backup in the email, website etc.., then download backup file to your mobile.141    </div>142 143    <div class="para" style="font-weight:700;">Option 1:</div>144    <div class="para">145      Go to backup file in your mobile storage, then select the file and click "Send" (or) "Share", you will see the option to import.146    </div>147  </div>148 149  <!-- Bottom sheet overlay & share sheet -->150  <div class="overlay"></div>151  <div class="sheet">152    <div class="handle"></div>153 154    <div class="file-row">155      <div class="file-icon">FILE</div>156      <div class="file-name">BACKUP_REMINDER_MADE_EASY.db</div>157    </div>158 159    <div class="nearby-chip">160      <svg viewBox="0 0 24 24">161        <path d="M4 12c4-6 12-6 16 0M6 15c3-4 9-4 12 0M8 18c2-2 6-2 8 0"/>162      </svg>163      Nearby164    </div>165 166    <div class="subtext">No recommended people to share with</div>167 168    <div class="share-icons">169      <div class="share-item">170        <div class="circle">171          <div class="drive-logo"></div>172        </div>173        <div class="share-label">Drive</div>174      </div>175 176      <div class="share-item">177        <div class="circle">178          <div class="gmail-logo"></div>179        </div>180        <div class="share-label">Gmail</div>181      </div>182    </div>183  </div>184 185</div>186</body>187</html>