GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Save to Drive UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; color: #333; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF; border-radius: 24px;13    box-shadow: 0 8px 24px rgba(0,0,0,0.08);14  }15 16  /* Top area */17  .topbar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 220px;21    background: #F5F5F5;22    border-bottom: 1px solid #E0E0E0;23  }24  .status {25    height: 60px; padding: 16px 28px 0 28px;26    display: flex; align-items: center; justify-content: space-between;27    color: #444;28    font-size: 30px;29  }30  .title-row {31    margin-top: 22px;32    padding: 0 28px;33    display: flex; align-items: center; justify-content: space-between;34  }35  .title-left {36    display: flex; align-items: center;37  }38  .icon-button {39    width: 56px; height: 56px; border: none; background: transparent; padding: 0; margin-right: 16px; cursor: pointer;40  }41  .title-text {42    font-size: 48px; font-weight: 600; color: #222;43  }44  .save-btn {45    background: #4A5562; color: #fff; border: none; cursor: pointer;46    padding: 22px 48px; font-size: 36px; border-radius: 40px;47    box-shadow: 0 2px 0 rgba(0,0,0,0.08);48  }49 50  /* Content area */51  .content {52    position: absolute; left: 0; right: 0; top: 220px; bottom: 0;53    padding: 40px 40px 120px 40px;54    overflow: hidden;55  }56  .preview-box {57    width: 100%; height: 430px;58    background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center;60    color: #757575; font-size: 34px; border-radius: 10px;61    margin-bottom: 46px;62  }63 64  .form-group {65    margin-bottom: 42px;66  }67  .label {68    font-size: 28px; color: #666; margin: 4px 0 12px 8px;69  }70  .input {71    height: 120px; border: 2px solid #DADADA; border-radius: 14px;72    display: flex; align-items: center; padding: 0 22px;73    background: #fff;74  }75  .input .icon {76    width: 56px; height: 56px; margin-right: 18px;77  }78  .input .text {79    font-size: 36px; color: #222; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;80  }81  .input .suffix {82    width: 48px; height: 48px;83  }84 85  /* Bottom gesture bar */86  .gesture {87    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);88    width: 210px; height: 10px; background: #9E9E9E; border-radius: 8px;89    opacity: 0.9;90  }91</style>92</head>93<body>94<div id="render-target">95 96  <div class="topbar">97    <div class="status">98      <div>8:35</div>99      <div>100        <!-- Battery icon -->101        <svg width="48" height="28" viewBox="0 0 48 28">102          <rect x="1" y="5" width="40" height="18" rx="3" fill="#696969" />103          <rect x="4" y="8" width="34" height="12" rx="2" fill="#C9C9C9" />104          <rect x="42" y="10" width="5" height="8" rx="2" fill="#696969" />105        </svg>106      </div>107    </div>108 109    <div class="title-row">110      <div class="title-left">111        <button class="icon-button" aria-label="Close">112          <!-- X icon -->113          <svg class="icon" viewBox="0 0 24 24">114            <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2.8" stroke-linecap="round" fill="none"/>115          </svg>116        </button>117        <div class="title-text">Save to Drive</div>118      </div>119      <button class="save-btn">Save</button>120    </div>121  </div>122 123  <div class="content">124    <div class="preview-box">No preview available</div>125 126    <div class="form-group">127      <div class="label">File name</div>128      <div class="input">129        <!-- File icon -->130        <svg class="icon" viewBox="0 0 24 24">131          <path d="M6 2 h7 l5 5 v15 a2 2 0 0 1 -2 2 h-10 a2 2 0 0 1 -2 -2 v-18 a2 2 0 0 1 2 -2z" fill="#4285F4"/>132          <path d="M13 2 v5 h5" fill="#90CAF9"/>133        </svg>134        <div class="text">BACKUP_REMINDER_MADE_EASY.db</div>135        <!-- Clear icon -->136        <svg class="suffix" viewBox="0 0 24 24">137          <circle cx="12" cy="12" r="10" fill="none" stroke="#8A8A8A" stroke-width="2"/>138          <path d="M8 8 L16 16 M16 8 L8 16" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>139        </svg>140      </div>141    </div>142 143    <div class="form-group">144      <div class="label">Location</div>145      <div class="input">146        <!-- Drive icon (simple) -->147        <svg class="icon" viewBox="0 0 24 24">148          <path d="M12 3 L21 18 L3 18 Z" fill="#616161"/>149        </svg>150        <div class="text">My Drive</div>151        <!-- Dropdown chevron -->152        <svg class="suffix" viewBox="0 0 24 24">153          <path d="M6 9 L12 15 L18 9" stroke="#777" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154        </svg>155      </div>156    </div>157 158    <div class="form-group">159      <div class="label">Account</div>160      <div class="input">161        <div class="text">dbwscratch.test.id8@gmail.com</div>162        <!-- Dropdown chevron -->163        <svg class="suffix" viewBox="0 0 24 24">164          <path d="M6 9 L12 15 L18 9" stroke="#777" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165        </svg>166      </div>167    </div>168  </div>169 170  <div class="gesture"></div>171</div>172</body>173</html>