GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8" />4<meta name="viewport" content="width=1080, initial-scale=1.0" />5<title>Document Viewer Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Top dark bars */17  .status-bar {18    position: absolute;19    left: 0; top: 0;20    width: 1080px; height: 100px;21    background: #121212;22    color: #fff;23    font-size: 36px;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .status-right {30    margin-left: auto;31    display: flex; align-items: center; gap: 18px;32  }33  .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.85; }34 35  .app-bar {36    position: absolute;37    left: 0; top: 100px;38    width: 1080px; height: 140px;39    background: #1E1E1E;40    color: #fff;41    display: flex; align-items: center;42    padding: 0 32px;43    box-sizing: border-box;44    gap: 28px;45  }46  .title {47    color: #EDEDED;48    font-size: 44px;49    white-space: nowrap;50    overflow: hidden;51    text-overflow: ellipsis;52    max-width: 560px;53  }54  .app-actions {55    margin-left: auto;56    display: flex; align-items: center; gap: 36px;57  }58  .icon-btn {59    width: 60px; height: 60px;60    display: inline-flex; align-items: center; justify-content: center;61    color: #ffffff;62  }63  .icon-btn svg { width: 48px; height: 48px; fill: currentColor; }64 65  /* Document area */66  .doc-area {67    position: absolute;68    left: 0; top: 240px;69    width: 1080px; height: 1760px;70    background: #FFFFFF;71  }72 73  .spinner {74    position: absolute;75    left: 50%; top: 50%;76    transform: translate(-50%,-50%);77    width: 42px; height: 42px;78    border-radius: 50%;79    border: 7px solid transparent;80    border-top-color: #3D6FF5;81  }82 83  /* Bottom action bar */84  .bottom-bar {85    position: absolute;86    left: 0; bottom: 80px;87    width: 1080px; height: 220px;88    background: #222222;89    padding: 36px 40px;90    box-sizing: border-box;91    display: flex; align-items: center; justify-content: space-between;92  }93  .left-actions {94    display: flex; align-items: center; gap: 28px;95  }96  .edit-btn {97    display: inline-flex; align-items: center; gap: 18px;98    background: #2E2E2E;99    color: #EDEDED;100    padding: 22px 30px;101    border-radius: 60px;102    font-size: 40px;103  }104  .square-btn {105    width: 150px; height: 150px;106    background: #2B2B2B;107    border-radius: 12px;108    display: flex; align-items: center; justify-content: center;109    color: #EDEDED;110  }111  .square-btn svg { width: 64px; height: 64px; fill: currentColor; }112  .share-btn {113    background: #3D78FF;114    color: #fff;115    padding: 34px 44px;116    border-radius: 18px;117    font-size: 48px;118    font-weight: 600;119  }120 121  /* Gesture bar */122  .gesture {123    position: absolute;124    left: 0; bottom: 20px;125    width: 1080px; height: 60px;126    display: flex; align-items: center; justify-content: center;127  }128  .gesture .pill {129    width: 350px; height: 10px; border-radius: 6px; background: #EDEDED;130    opacity: 0.9;131  }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status bar -->138  <div class="status-bar">139    <div>9:12</div>140    <div class="status-right">141      <div class="dot"></div>142      <div class="dot" style="width:12px;height:12px;opacity:.6;"></div>143      <div class="dot" style="width:12px;height:12px;opacity:.6;"></div>144      <div class="dot" style="width:16px;height:16px;"></div>145    </div>146  </div>147 148  <!-- App bar -->149  <div class="app-bar">150    <!-- back arrow -->151    <div class="icon-btn">152      <svg viewBox="0 0 24 24">153        <path d="M15.5 4.5 7 12l8.5 7.5-1.6 1.9L3.8 12l10.1-9.4 1.6 1.9z"/>154      </svg>155    </div>156    <div class="title">Structured query lan...</div>157    <div class="app-actions">158      <!-- star outline -->159      <div class="icon-btn">160        <svg viewBox="0 0 24 24">161          <path d="M12 17.3 6.5 20l1-6L3 9.3l6.1-.9L12 3l2.9 5.4 6.1.9-4.5 4.7 1 6L12 17.3zM8.6 18l3.4-1.8L15.4 18l-.6-3.7 2.7-2.8-3.8-.5L12 7l-1.7 4-3.8.5 2.7 2.8-.6 3.7z"/>162        </svg>163      </div>164      <!-- search -->165      <div class="icon-btn">166        <svg viewBox="0 0 24 24">167          <path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-5.5 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>168        </svg>169      </div>170      <!-- kebab menu -->171      <div class="icon-btn">172        <svg viewBox="0 0 24 24">173          <circle cx="12" cy="5" r="2"></circle>174          <circle cx="12" cy="12" r="2"></circle>175          <circle cx="12" cy="19" r="2"></circle>176        </svg>177      </div>178    </div>179  </div>180 181  <!-- Document white area -->182  <div class="doc-area">183    <div class="spinner"></div>184  </div>185 186  <!-- Bottom action bar -->187  <div class="bottom-bar">188    <div class="left-actions">189      <div class="edit-btn">190        <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED">191          <path d="M3 17.3V21h3.7L18 9.7 14.3 6 3 17.3zM21 6.2l-3.2-3.2-2.1 2.1L19 8.3 21 6.2z"/>192        </svg>193        <span>Edit</span>194      </div>195 196      <div class="square-btn">197        <!-- comment bubble -->198        <svg viewBox="0 0 24 24">199          <path d="M4 4h16v12H7l-3 3V4z"/>200        </svg>201      </div>202      <div class="square-btn">203        <!-- open in new -->204        <svg viewBox="0 0 24 24">205          <path d="M14 3h7v7h-2V6.4l-7.6 7.6-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/>206        </svg>207      </div>208      <div class="square-btn">209        <!-- link -->210        <svg viewBox="0 0 24 24">211          <path d="M10 13a5 5 0 0 1 0-7l2-2a5 5 0 0 1 7 7l-1 1h-3l2-2a3 3 0 0 0-4-4l-2 2a3 3 0 0 0 0 4H10zm4 0h3l-2 2a3 3 0 0 0 4 4l2-2a3 3 0 0 0 0-4h3a5 5 0 0 1-1 6l-2 2a5 5 0 0 1-7-7l1-1z"/>212        </svg>213      </div>214    </div>215 216    <div class="share-btn">Share</div>217  </div>218 219  <!-- Gesture nav indicator -->220  <div class="gesture">221    <div class="pill"></div>222  </div>223 224</div>225</body>226</html>