GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #F6F8FA;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 130px;16    background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between;17    padding: 0 32px; box-sizing: border-box; font-size: 42px;18  }19  .status-right { display: flex; align-items: center; gap: 26px; }20  .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }21  .icon-circle { width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; opacity: 0.9; }22  .icon-battery { width: 40px; height: 24px; border: 2px solid #fff; border-radius: 4px; position: relative; }23  .icon-battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 8px; background: #fff; }24 25  /* Header */26  .header {27    position: absolute; top: 130px; left: 0; width: 100%; height: 160px;28    background: #2AA8DC; color: #fff; display: flex; align-items: center;29    padding: 0 40px; box-sizing: border-box;30  }31  .header .title { font-size: 64px; font-weight: 600; }32  .header .upload { margin-left: auto; font-size: 54px; font-weight: 600; opacity: 0.5; }33  .header .back { display: flex; align-items: center; gap: 28px; }34 35  /* Video preview */36  .video {37    position: absolute; top: 290px; left: 0; width: 100%; height: 600px;38    background: #E0E0E0; border: 1px solid #BDBDBD;39    display: flex; justify-content: center; align-items: center; color: #757575;40  }41  .image-label { font-size: 44px; color: #757575; }42 43  .play-overlay {44    position: absolute; top: 540px; left: 450px; width: 180px; height: 120px;45    background: rgba(0,0,0,0.35); border-radius: 12px;46    display: flex; align-items: center; justify-content: center;47  }48  .play-overlay svg { fill: #fff; }49 50  .video-time {51    position: absolute; top: 840px; left: 40px; font-size: 40px; color: #fff;52    text-shadow: 0 1px 2px rgba(0,0,0,0.6);53  }54  .progress {55    position: absolute; top: 900px; left: 40px; width: 1000px; height: 12px;56    background: rgba(255,255,255,0.6); border-radius: 6px;57  }58  .progress .knob {59    position: absolute; top: -10px; left: -2px; width: 28px; height: 28px;60    background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);61  }62 63  /* Form */64  .form { position: absolute; top: 970px; left: 0; width: 100%; padding: 0 40px; box-sizing: border-box; }65  .label { font-size: 40px; color: #6C7A80; margin-top: 40px; }66  .input { font-size: 96px; font-weight: 700; color: #111; margin-top: 16px; }67  .hr { height: 2px; background: #E3E5E8; margin: 24px 0; }68  .row { display: flex; align-items: center; justify-content: space-between; }69 70  .folder-row { display: flex; align-items: center; gap: 24px; font-size: 56px; color: #111; }71  .icon-folder { width: 72px; height: 56px; }72  .chevron { width: 36px; height: 36px; opacity: 0.6; }73  .privacy-value { font-size: 56px; color: #111; }74 75  /* Modal */76  .modal-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); }77  .modal {78    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);79    width: 880px; background: #fff; border-radius: 12px;80    box-shadow: 0 12px 32px rgba(0,0,0,0.3); padding: 60px; text-align: center;81  }82  .modal .text { font-size: 52px; color: #333; margin-bottom: 40px; }83  .spinner {84    width: 90px; height: 90px; border: 10px solid #E6F2F8; border-top-color: #2AA8DC;85    border-radius: 50%; margin: 0 auto; animation: spin 1.2s linear infinite;86  }87  @keyframes spin { to { transform: rotate(360deg); } }88 89  /* Bottom gesture bar */90  .bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: #000; }91  .home-pill {92    position: absolute; bottom: 36px; left: 50%; width: 280px; height: 12px;93    background: #fff; opacity: 0.85; border-radius: 8px; transform: translateX(-50%);94  }95</style>96</head>97<body>98<div id="render-target">99 100  <div class="status-bar">101    <div>8:53</div>102    <div class="status-right">103      <div style="width:28px;height:28px;background:#fff;border-radius:50%;opacity:0.9;"></div>104      <div>20°</div>105      <div class="icon-circle"></div>106      <div class="icon-battery"></div>107    </div>108  </div>109 110  <div class="header">111    <div class="back">112      <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#fff" d="M15.5 5l-7 7 7 7-1.4 1.4L5.7 12l8.4-8.4z"/></svg>113      <div class="title">Settings</div>114    </div>115    <div class="upload">UPLOAD</div>116  </div>117 118  <div class="video">119    <div class="image-label">[IMG: Yoga video preview]</div>120  </div>121 122  <div class="play-overlay">123    <svg width="60" height="60" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>124  </div>125 126  <div class="video-time">00:00 / 00:29</div>127  <div class="progress"><div class="knob"></div></div>128 129  <div class="form">130    <div class="label">Title</div>131    <div class="input">Home Yoga</div>132    <div class="hr"></div>133 134    <div class="label">Description</div>135    <div class="hr"></div>136 137    <div class="label">Folder</div>138    <div class="row">139      <div class="folder-row">140        <svg class="icon-folder" viewBox="0 0 24 24">141          <path fill="#56A6D6" d="M10 4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h6z"/>142        </svg>143        <div>Yoga</div>144      </div>145      <svg class="chevron" viewBox="0 0 24 24"><path fill="#000" d="M7 10l5 5 5-5z"/></svg>146    </div>147    <div class="hr"></div>148 149    <div class="label">Privacy</div>150    <div class="row">151      <div class="privacy-value">Anyone</div>152      <svg class="chevron" viewBox="0 0 24 24"><path fill="#000" d="M7 10l5 5 5-5z"/></svg>153    </div>154    <div class="hr"></div>155  </div>156 157  <div class="modal-mask"></div>158  <div class="modal">159    <div class="text">Preparing your upload...</div>160    <div class="spinner"></div>161  </div>162 163  <div class="bottom-bar"></div>164  <div class="home-pill"></div>165 166</div>167</body>168</html>