GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Favourite Book - Mock</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:#0f0f10; color:#eaeaea;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; left:0; top:0; width:100%; height:80px;16    color:#cfcfcf; font-size:34px; letter-spacing:1px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px;19  }20 21  /* App bar */22  .app-bar{23    position:absolute; top:90px; left:0; width:100%; height:110px;24    display:flex; align-items:center; justify-content:space-between;25    padding:0 32px;26  }27  .icon-btn{ width:80px; height:80px; display:flex; align-items:center; justify-content:center; }28 29  /* Title */30  .title{31    position:absolute; top:210px; left:32px;32    font-size:86px; font-weight:700; color:#fff;33  }34  .subtitle{35    position:absolute; top:330px; left:32px; color:#a7a7a7; font-size:34px;36  }37 38  /* Action buttons row */39  .actions{40    position:absolute; top:410px; left:32px; right:32px;41    display:flex; gap:28px;42  }43  .action{44    flex:1; height:140px; border-radius:18px;45    display:flex; align-items:center; gap:22px; padding:0 34px;46    background:#232326; color:#eaeaea;47  }48  .action.primary{ background:#2c62ff; }49  .action .label{ font-size:44px; font-weight:600; }50  .action svg{ width:54px; height:54px; fill:#eaeaea; }51 52  /* Header row */53  .list-header{54    position:absolute; top:600px; left:32px; right:32px;55    display:flex; align-items:center; justify-content:space-between;56    color:#eaeaea; font-size:44px; font-weight:700;57    padding:20px 0;58    border-bottom:1px solid #2a2a2a;59  }60  .list-header .name{ display:flex; align-items:center; gap:12px; }61 62  /* File item */63  .file-item{64    position:absolute; top:720px; left:32px; right:32px;65    display:flex; align-items:center; gap:28px;66    padding:28px 0;67    border-bottom:1px solid #1f1f1f;68  }69  .thumb{70    width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;71    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;72  }73  .file-text{ flex:1; }74  .file-title{ font-size:46px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:820px; }75  .file-sub{ font-size:34px; color:#b7b7b7; margin-top:8px; }76 77  /* Bottom nav */78  .bottom-nav{79    position:absolute; left:0; bottom:0; width:100%; height:180px;80    background:#121214; border-top:1px solid #1f1f1f;81    display:flex; justify-content:space-around; align-items:center;82  }83  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#bdbdbd; font-size:36px; }84  .nav-item.active{ color:#ffffff; }85  .nav-item svg{ width:58px; height:58px; fill:currentColor; }86 87  /* FAB */88  .fab{89    position:absolute; right:48px; bottom:220px; width:170px; height:170px; border-radius:50%;90    background:#3a6dfd; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.45);91  }92  .fab svg{ width:88px; height:88px; fill:#fff; }93 94  /* Misc small icon dots */95  .kebab{ width:18px; height:18px; border-radius:50%; background:#d9d9d9; display:inline-block; margin:5px 0; }96  .kebab-wrap{ width:28px; display:flex; flex-direction:column; align-items:center; gap:10px; }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div>8:48</div>105    <div style="display:flex; align-items:center; gap:22px;">106      <span>📶</span>107      <span>🔋 74%</span>108    </div>109  </div>110 111  <!-- App bar -->112  <div class="app-bar">113    <div class="icon-btn">114      <!-- hamburger -->115      <svg viewBox="0 0 24 24" width="64" height="64" fill="#eaeaea"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="17" width="18" height="2"/></svg>116    </div>117    <div style="display:flex; gap:26px;">118      <!-- search -->119      <div class="icon-btn"><svg viewBox="0 0 24 24" fill="#eaeaea"><circle cx="11" cy="11" r="6" stroke="none"/><rect x="16" y="16" width="7" height="2" transform="rotate(45 16 16)"/></svg></div>120      <!-- checkbox -->121      <div class="icon-btn"><svg viewBox="0 0 24 24" fill="#eaeaea"><rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"/><path d="M7 12l3 3 7-7" stroke="#eaeaea" stroke-width="2" fill="none"/></svg></div>122      <!-- overflow -->123      <div class="icon-btn"><svg viewBox="0 0 24 24" fill="#eaeaea"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></div>124    </div>125  </div>126 127  <!-- Title -->128  <div class="title">Favourite Book</div>129  <div class="subtitle">Only you</div>130 131  <!-- Actions -->132  <div class="actions">133    <div class="action primary">134      <svg viewBox="0 0 24 24"><path d="M12 3l4 4h-3v6h-2V7H8l4-4z"/><path d="M5 13h2v5h10v-5h2v7H5z"/></svg>135      <div class="label">Share</div>136    </div>137    <div class="action">138      <svg viewBox="0 0 24 24"><path d="M5 20h14v2H5zM11 2h2v12h-2z"/><path d="M7 8h10v2H7z"/></svg>139      <div class="label">Upload</div>140    </div>141    <div class="action">142      <svg viewBox="0 0 24 24"><path d="M4 4h16v14H4z" fill="none" stroke="#eaeaea" stroke-width="2"/><path d="M4 9h16" stroke="#eaeaea" stroke-width="2"/></svg>143      <div class="label">Folder</div>144    </div>145    <div class="action">146      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#eaeaea" stroke-width="2"/><rect x="7" y="8" width="10" height="8" fill="none" stroke="#eaeaea" stroke-width="2"/></svg>147      <div class="label">Scan</div>148    </div>149  </div>150 151  <!-- List Header -->152  <div class="list-header">153    <div class="name">154      <span>Name</span>155      <svg viewBox="0 0 24 24" width="34" height="34" fill="#eaeaea"><path d="M7 10l5 5 5-5z"/></svg>156    </div>157    <div>158      <svg viewBox="0 0 24 24" width="44" height="44" fill="#eaeaea"><path d="M4 4h16v2H4zM4 11h16v2H4zM4 18h16v2H4z"/></svg>159    </div>160  </div>161 162  <!-- File item -->163  <div class="file-item">164    <div class="thumb">[IMG: Book Cover]</div>165    <div class="file-text">166      <div class="file-title">JRR Tolkien - Lord ...gs Collection.pdf</div>167      <div class="file-sub">13 MB, modified 2 seconds ago</div>168    </div>169    <div class="kebab-wrap">170      <span class="kebab"></span>171      <span class="kebab"></span>172      <span class="kebab"></span>173    </div>174  </div>175 176  <!-- Floating Action Button -->177  <div class="fab">178    <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2z"/><path d="M5 11h14v2H5z"/></svg>179  </div>180 181  <!-- Bottom Navigation -->182  <div class="bottom-nav">183    <div class="nav-item">184      <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v8H6v-8H3z"/></svg>185      <div>Home</div>186    </div>187    <div class="nav-item active">188      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/></svg>189      <div>Files</div>190    </div>191    <div class="nav-item">192      <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="7" y="8" width="10" height="6" /></svg>193      <div>Photos</div>194    </div>195    <div class="nav-item">196      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>197      <div>Account</div>198    </div>199  </div>200 201</div>202</body>203</html>