GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; color:#202124; }8  #render-target { width:1080px; height:2400px; position:relative; overflow:hidden; background:#F6F5FA; }9 10  /* Status bar */11  .top-status { height:96px; display:flex; align-items:center; padding:0 32px; color:#5f6368; font-size:34px; }12  .top-status .right { margin-left:auto; display:flex; align-items:center; gap:22px; }13  .status-dot { width:14px; height:14px; background:#8a8a8a; border-radius:50%; opacity:.9; }14 15  /* Search */16  .search-wrap { padding:0 28px; }17  .search-bar { background:#E9ECE4; border-radius:48px; height:112px; display:flex; align-items:center; padding:0 26px; color:#5f6368; font-size:38px; }18  .icon-btn { width:72px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#5f6368; }19  .search-input { margin-left:20px; flex:1; color:#5f6368; }20  .avatar { width:88px; height:88px; border-radius:44px; background:#0FA6A0; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }21 22  /* Tabs */23  .tabs { display:flex; gap:72px; padding:26px 32px 0; font-size:42px; color:#6f6f6f; }24  .tabs .tab.active { color:#4A5E23; font-weight:600; }25  .tab-indicator { height:10px; width:168px; background:#6B8F2F; border-radius:10px; margin-left:32px; margin-top:16px; }26  .divider { height:2px; background:#E0E0E0; margin-top:18px; }27 28  /* Section header */29  .section-header { display:flex; align-items:center; padding:36px 32px 12px; color:#5f6368; font-size:40px; }30  .section-header .chev { margin-left:12px; }31  .section-header .right { margin-left:auto; }32 33  /* List */34  .list { padding:8px 0; }35  .item { display:flex; align-items:flex-start; padding:30px 32px; gap:28px; }36  .paper-icon { width:70px; height:70px; background:#1A73E8; border-radius:12px; display:flex; align-items:center; justify-content:center; }37  .paper-icon svg { width:44px; height:44px; }38  .item-content { flex:1; }39  .item-title { font-size:50px; color:#1F1F1F; margin-bottom:14px; }40  .item-sub { font-size:34px; color:#5f6368; display:flex; align-items:center; gap:12px; }41  .dot-menu { width:60px; height:60px; display:flex; align-items:center; justify-content:center; color:#7a7a7a; }42  .kebab { font-size:60px; transform:translateY(-6px); }43 44  /* FAB and gesture */45  .fab { position:absolute; right:56px; bottom:200px; width:150px; height:150px; background:#F7CBEA; border-radius:36px; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 24px rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.15); }46  .fab svg { width:64px; height:64px; stroke:#2C2030; stroke-width:12; fill:none; }47  .gesture { position:absolute; bottom:84px; left:50%; transform:translateX(-50%); width:420px; height:14px; background:#7a7a7a; border-radius:8px; opacity:.9; }48</style>49</head>50<body>51<div id="render-target">52 53  <!-- Status bar -->54  <div class="top-status">55    <div>8:26</div>56    <div class="right">57      <span class="status-dot"></span>58      <span class="status-dot"></span>59      <span class="status-dot"></span>60      <span class="status-dot"></span>61    </div>62  </div>63 64  <!-- Search bar -->65  <div class="search-wrap">66    <div class="search-bar">67      <div class="icon-btn">68        <svg viewBox="0 0 24 24" width="48" height="48">69          <path d="M3 6h18M3 12h18M3 18h12" stroke="#5f6368" stroke-width="2.4" stroke-linecap="round" fill="none"/>70        </svg>71      </div>72      <div class="search-input">Search Docs</div>73      <div class="icon-btn">74        <svg viewBox="0 0 24 24" width="48" height="48">75          <path d="M3 7h7l2 2h9v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7z" fill="none" stroke="#5f6368" stroke-width="2"/>76        </svg>77      </div>78      <div class="avatar">N</div>79    </div>80  </div>81 82  <!-- Tabs -->83  <div class="tabs">84    <div class="tab active">Drive files</div>85    <div class="tab">Device files</div>86  </div>87  <div class="tab-indicator"></div>88  <div class="divider"></div>89 90  <!-- Section header -->91  <div class="section-header">92    <div>Last opened by me</div>93    <svg class="chev" viewBox="0 0 24 24" width="40" height="40">94      <path d="M6 9l6 6 6-6" stroke="#5f6368" stroke-width="2.2" stroke-linecap="round" fill="none"/>95    </svg>96    <div class="right">97      <svg viewBox="0 0 24 24" width="48" height="48">98        <g fill="#5f6368">99          <rect x="3" y="3" width="6" height="6" rx="1"></rect>100          <rect x="10.5" y="3" width="6" height="6" rx="1"></rect>101          <rect x="18" y="3" width="3" height="6" rx="1"></rect>102          <rect x="3" y="10.5" width="6" height="6" rx="1"></rect>103          <rect x="10.5" y="10.5" width="6" height="6" rx="1"></rect>104          <rect x="18" y="10.5" width="3" height="6" rx="1"></rect>105        </g>106      </svg>107    </div>108  </div>109 110  <!-- List -->111  <div class="list">112    <div class="item">113      <div class="paper-icon">114        <svg viewBox="0 0 24 24">115          <rect x="4" y="3" width="16" height="18" rx="2" fill="#ffffff"></rect>116          <path d="M7 8h10M7 12h10M7 16h8" stroke="#1A73E8" stroke-width="2"></path>117        </svg>118      </div>119      <div class="item-content">120        <div class="item-title">Daily routine</div>121        <div class="item-sub">122          <svg viewBox="0 0 24 24" width="28" height="28">123            <circle cx="12" cy="12" r="10" stroke="#9AA0A6" stroke-width="2" fill="none"></circle>124            <path d="M7 12l3 3 7-7" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>125          </svg>126          <span>Opened by me 8:21 AM</span>127        </div>128      </div>129      <div class="dot-menu"><span class="kebab">⋮</span></div>130    </div>131 132    <div class="item">133      <div class="paper-icon">134        <svg viewBox="0 0 24 24">135          <rect x="4" y="3" width="16" height="18" rx="2" fill="#ffffff"></rect>136          <path d="M7 8h10M7 12h10M7 16h8" stroke="#1A73E8" stroke-width="2"></path>137        </svg>138      </div>139      <div class="item-content">140        <div class="item-title">Places to visit</div>141        <div class="item-sub">142          <svg viewBox="0 0 24 24" width="28" height="28">143            <circle cx="12" cy="12" r="10" stroke="#9AA0A6" stroke-width="2" fill="none"></circle>144            <path d="M7 12l3 3 7-7" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>145          </svg>146          <span>Opened by me Oct 27</span>147        </div>148      </div>149      <div class="dot-menu"><span class="kebab">⋮</span></div>150    </div>151 152    <div class="item">153      <div class="paper-icon">154        <svg viewBox="0 0 24 24">155          <rect x="4" y="3" width="16" height="18" rx="2" fill="#ffffff"></rect>156          <path d="M7 8h10M7 12h10M7 16h8" stroke="#1A73E8" stroke-width="2"></path>157        </svg>158      </div>159      <div class="item-content">160        <div class="item-title">Renewable energy</div>161        <div class="item-sub">162          <svg viewBox="0 0 24 24" width="28" height="28">163            <circle cx="12" cy="12" r="10" stroke="#9AA0A6" stroke-width="2" fill="none"></circle>164            <path d="M7 12l3 3 7-7" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>165          </svg>166          <span>Opened by me Oct 26</span>167        </div>168      </div>169      <div class="dot-menu"><span class="kebab">⋮</span></div>170    </div>171  </div>172 173  <!-- FAB -->174  <div class="fab">175    <svg viewBox="0 0 24 24">176      <path d="M12 5v14M5 12h14"></path>177    </svg>178  </div>179 180  <!-- Gesture pill -->181  <div class="gesture"></div>182</div>183</body>184</html>