GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Settings - Upload</title>7<style>8  :root{9    --accent:#64B5F6;10    --text:#263238;11    --muted:#90A4AE;12    --divider:#ECEFF1;13    --icon:#1F2937;14  }15  body{ margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }16  #render-target{17    position:relative; overflow:hidden;18    width:1080px; height:2400px;19    background:#fff;20    color:var(--text);21  }22  /* Status bar */23  .status-bar{24    position:absolute; top:0; left:0; width:100%; height:115px;25    background:#000; color:#fff; font-size:36px;26    display:flex; align-items:center; padding:0 40px; box-sizing:border-box;27    justify-content:space-between;28  }29  .status-left{ display:flex; align-items:center; gap:25px; }30  .status-right{ display:flex; align-items:center; gap:30px; }31  .status-dot{ width:12px; height:12px; background:#fff; border-radius:50%; opacity:.8; }32  .icon-signal, .icon-battery{33    width:44px; height:44px;34  }35 36  /* App bar */37  .app-bar{38    position:absolute; top:115px; left:0; width:100%; height:160px;39    background:var(--accent); color:#fff;40    display:flex; align-items:center; justify-content:space-between;41    padding:0 36px; box-sizing:border-box;42  }43  .app-left{ display:flex; align-items:center; gap:24px; }44  .app-title{ font-size:54px; font-weight:600; }45  .upload-btn{ font-size:44px; font-weight:600; letter-spacing:.5px; }46 47  .back-icon{ width:56px; height:56px; }48  .upload-btn{ text-transform:uppercase; }49 50  /* Video placeholder */51  .video-area{52    position:absolute; top:275px; left:0; width:100%; height:640px;53  }54  .video-placeholder{55    width:100%; height:100%;56    background:#E0E0E0; border:1px solid #BDBDBD;57    display:flex; align-items:center; justify-content:center;58    color:#757575; font-size:40px;59    position:relative;60  }61  .play-overlay{62    position:absolute; width:160px; height:160px; border-radius:14px;63    background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;64  }65  .play-icon{ width:80px; height:80px; }66  .video-time{67    position:absolute; left:36px; bottom:78px; font-size:34px; color:#fff;68    text-shadow:0 1px 2px rgba(0,0,0,.35);69  }70  .progress{71    position:absolute; left:36px; right:36px; bottom:36px; height:6px; background:#B0BEC5;72    border-radius:3px;73  }74  .progress .knob{75    position:absolute; width:28px; height:28px; border-radius:50%; background:#fff;76    top:-12px; left:0px; box-shadow:0 1px 2px rgba(0,0,0,.3);77  }78 79  /* Form content */80  .content{81    position:absolute; top:915px; left:0; right:0; bottom:140px;82    overflow:auto;83    padding:20px 36px 36px 36px; box-sizing:border-box;84  }85  .field{86    padding:34px 0;87    border-bottom:1px solid var(--divider);88  }89  .field-title{90    font-size:68px; color:#90A4AE; font-weight:500;91  }92  .field-label{93    font-size:34px; color:var(--muted); margin-bottom:18px;94  }95  .row{96    display:flex; align-items:center; justify-content:space-between;97  }98  .left-row{ display:flex; align-items:center; gap:22px; }99  .value-large{ font-size:52px; font-weight:600; color:var(--text); }100  .chev{ width:44px; height:44px; fill:var(--icon); }101 102  .folder-icon{103    width:58px; height:44px;104  }105 106  /* Bottom gesture bar */107  .bottom-bar{108    position:absolute; left:0; right:0; bottom:0;109    height:135px; background:#000;110    display:flex; align-items:center; justify-content:center;111  }112  .home-pill{113    width:180px; height:12px; border-radius:8px; background:#fff; opacity:.9;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status Bar -->121  <div class="status-bar">122    <div class="status-left">123      <span>8:52</span>124      <span>20°</span>125      <!-- simple app indicators -->126      <svg class="icon-signal" viewBox="0 0 24 24">127        <rect x="2" y="14" width="3" height="8" fill="#fff"></rect>128        <rect x="7" y="10" width="3" height="12" fill="#fff" opacity=".85"></rect>129        <rect x="12" y="6" width="3" height="16" fill="#fff" opacity=".7"></rect>130        <rect x="17" y="2" width="3" height="20" fill="#fff" opacity=".55"></rect>131      </svg>132      <div class="status-dot"></div>133    </div>134    <div class="status-right">135      <svg class="icon-signal" viewBox="0 0 24 24">136        <path d="M3 18h18" stroke="#fff" stroke-width="2"></path>137        <path d="M6 14h12" stroke="#fff" stroke-width="2" opacity=".8"></path>138        <path d="M9 10h6" stroke="#fff" stroke-width="2" opacity=".6"></path>139      </svg>140      <svg class="icon-battery" viewBox="0 0 28 16">141        <rect x="1" y="2" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>142        <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"></rect>143        <rect x="3" y="4" width="16" height="8" fill="#fff"></rect>144      </svg>145    </div>146  </div>147 148  <!-- App Bar -->149  <div class="app-bar">150    <div class="app-left">151      <svg class="back-icon" viewBox="0 0 24 24">152        <path d="M15 18L9 12l6-6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>153      </svg>154      <div class="app-title">Settings</div>155    </div>156    <div class="upload-btn">UPLOAD</div>157  </div>158 159  <!-- Video Area -->160  <div class="video-area">161    <div class="video-placeholder">162      [IMG: Yoga video preview]163      <div class="play-overlay" style="left:50%; top:50%; transform:translate(-50%,-50%);">164        <svg class="play-icon" viewBox="0 0 24 24">165          <path d="M8 5l11 7-11 7V5z" fill="#fff"></path>166        </svg>167      </div>168      <div class="video-time">00:00 / 00:29</div>169      <div class="progress">170        <div class="knob"></div>171      </div>172    </div>173  </div>174 175  <!-- Content Form -->176  <div class="content">177    <div class="field">178      <div class="field-title">Title</div>179    </div>180 181    <div class="field">182      <div class="field-title">Description</div>183    </div>184 185    <div class="field">186      <div class="field-label">Folder</div>187      <div class="row">188        <div class="left-row">189          <svg class="folder-icon" viewBox="0 0 24 24">190            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#90CAF9"></path>191          </svg>192          <div class="value-large">Yoga</div>193        </div>194        <svg class="chev" viewBox="0 0 24 24">195          <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>196        </svg>197      </div>198    </div>199 200    <div class="field">201      <div class="field-label">Privacy</div>202      <div class="row">203        <div class="value-large">Anyone</div>204        <svg class="chev" viewBox="0 0 24 24">205          <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>206        </svg>207      </div>208    </div>209  </div>210 211  <!-- Bottom Gesture Bar -->212  <div class="bottom-bar">213    <div class="home-pill"></div>214  </div>215 216</div>217</body>218</html>