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>JRR Tolkien Folder</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;10    position:relative; overflow:hidden;11    background:#121212; color:#fff;12  }13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; right:0;16    height:90px; padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#eaeaea; font-size:36px; letter-spacing:0.5px;19  }20  .status-left{ display:flex; align-items:center; gap:20px; }21  .status-icons{ display:flex; gap:16px; align-items:center; }22  .tiny-ico{ width:30px; height:30px; background:#9e9e9e; border-radius:6px; opacity:.8; }23  .status-right{ display:flex; align-items:center; gap:16px; }24  .battery{25    display:flex; align-items:center; gap:10px; font-weight:600;26  }27  .battery svg{ width:52px; height:28px; }28  /* App bar */29  .app-bar{30    position:absolute; top:90px; left:0; right:0;31    height:140px; background:#2f342a; display:flex; align-items:center;32    padding:0 28px;33  }34  .app-title{ font-size:46px; font-weight:600; margin-left:18px; }35  .app-actions{ margin-left:auto; display:flex; align-items:center; gap:30px; }36  .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }37  .icon-btn svg{ fill:#fff; width:44px; height:44px; }38  /* Content area */39  .content{40    position:absolute; top:260px; left:0; right:0; bottom:0;41    padding:40px 60px;42  }43  .cards{44    display:grid;45    grid-template-columns: repeat(2, 1fr);46    gap:60px;47    width:100%;48  }49  .card{50    background:#232323; border-radius:28px; padding:20px;51    position:relative; min-height:420px;52  }53  .thumb{54    height:230px; border-radius:20px; background:#E0E0E0; border:1px solid #BDBDBD;55    display:flex; align-items:center; justify-content:center; color:#757575;56    font-size:32px; text-align:center; padding:10px;57  }58  .meta{ display:flex; align-items:flex-start; gap:18px; margin-top:28px; }59  .chip{60    background:#d9534f; color:#fff; font-weight:700;61    border-radius:10px; padding:10px 16px; font-size:26px;62  }63  .file-title{64    flex:1; color:#fff; font-size:34px; line-height:1.2;65    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;66  }67  .menu{68    position:absolute; right:18px; top:18px; width:54px; height:54px;69    display:flex; align-items:center; justify-content:center; opacity:.9;70  }71  .menu svg{ fill:#cfcfcf; width:14px; height:36px; }72  /* Bottom gesture bar */73  .gesture{74    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);75    width:500px; height:10px; background:#e6e6e6; border-radius:6px; opacity:.9;76  }77</style>78</head>79<body>80<div id="render-target">81  <!-- Status bar -->82  <div class="status-bar">83    <div class="status-left">84      <div>9:38</div>85      <div class="status-icons">86        <div class="tiny-ico"></div>87        <div class="tiny-ico"></div>88        <div class="tiny-ico"></div>89        <div class="tiny-ico"></div>90      </div>91    </div>92    <div class="status-right">93      <svg width="40" height="32" viewBox="0 0 24 24" fill="#eaeaea"><path d="M2 18h20L12 6 2 18z"/></svg>94      <div class="battery">95        <svg viewBox="0 0 24 24"><path d="M16 7h1a1 1 0 0 1 1 1v1h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H18v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h12z" fill="#eaeaea"/></svg>96        <span>100%</span>97      </div>98    </div>99  </div>100 101  <!-- App bar -->102  <div class="app-bar">103    <div class="icon-btn">104      <svg viewBox="0 0 24 24"><path d="M15.5 19.5 8 12l7.5-7.5-1.5-1.5L5 12l9 9 1.5-1.5z"/></svg>105    </div>106    <div class="app-title">JRR Tolkien</div>107    <div class="app-actions">108      <div class="icon-btn">109        <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z"/></svg>110      </div>111    </div>112  </div>113 114  <!-- Content -->115  <div class="content">116    <div class="cards">117      <!-- Card 1 -->118      <div class="card">119        <div class="thumb">[IMG: The Hobbit cover]</div>120        <div class="meta">121          <div class="chip">PDF</div>122          <div class="file-title">Copy of JRR Tolkien - L...</div>123        </div>124        <div class="menu" title="More">125          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>126        </div>127      </div>128      <!-- Card 2 -->129      <div class="card">130        <div class="thumb">[IMG: The Hobbit cover]</div>131        <div class="meta">132          <div class="chip">PDF</div>133          <div class="file-title">JRR Tolkien - Lord of th...</div>134        </div>135        <div class="menu" title="More">136          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>137        </div>138      </div>139    </div>140  </div>141 142  <div class="gesture"></div>143</div>144</body>145</html>