GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Slides List - Mock</title>5<meta name="viewport" content="width=device-width, initial-scale=1">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:#0f1412; color:#e9efe8;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; left:0; top:0; width:100%; height:120px; 16    padding:20px 32px 0 32px; box-sizing:border-box;17    color:#e7ece7; font-weight:600; letter-spacing:0.5px;18  }19  .status-content{display:flex; align-items:center; justify-content:space-between;}20  .status-left{font-size:40px;}21  .status-right{display:flex; gap:26px; align-items:center;}22  .mini-ico{width:30px;height:30px;border-radius:6px;background:#cfd8cf;opacity:.9;}23 24  /* Search / header row */25  .search-row{26    position:absolute; left:0; top:120px; width:100%;27    padding:20px 40px; box-sizing:border-box;28  }29  .search-pill{30    height:110px; border-radius:60px; 31    background:#2d3a31; /* dark olive */32    display:flex; align-items:center; padding:0 24px; gap:24px;33    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);34  }35  .hamburger, .folder-ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center;}36  .search-text{flex:1; color:#cfd6cf; font-size:40px;}37  .avatar{38    position:absolute; right:40px; top:130px;39    width:98px;height:98px;border-radius:50%;40    background:#4e35a6; display:flex;align-items:center;justify-content:center;41    font-weight:700; font-size:42px; color:#ffffff;42    box-shadow:0 6px 18px rgba(0,0,0,.35);43  }44 45  /* Section title */46  .section-title{47    position:absolute; left:40px; top:290px; color:#cfe0d2; 48    font-size:42px; display:flex; align-items:center; gap:14px;49  }50  .chev{width:26px;height:26px; opacity:.8;}51 52  /* Cards grid */53  .cards{54    position:absolute; left:40px; right:40px; top:370px;55    display:flex; flex-wrap:wrap; gap:70px;56  }57  .card{width:480px;}58  .thumb{59    width:100%; height:300px; border-radius:26px;60    background:#E0E0E0; border:1px solid #BDBDBD;61    display:flex; align-items:center; justify-content:center;62    color:#757575; font-size:34px;63    box-shadow:0 10px 24px rgba(0,0,0,.35);64  }65  .meta{66    display:flex; align-items:center; margin-top:24px;67  }68  .slide-square{69    width:44px; height:44px; border-radius:8px; 70    background:#f0a02b; box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);71    margin-right:20px;72  }73  .title{74    flex:1; font-size:44px; color:#e9efe8; font-weight:600;75  }76  .kebab{width:20px;height:60px; display:flex; align-items:center; justify-content:center;}77  .kebab svg{fill:#d7ded6; opacity:.9;}78  79  /* Floating action button */80  .fab{81    position:absolute; right:48px; bottom:140px;82    width:150px; height:150px; border-radius:34px;83    background:#3a4e3e; display:flex; align-items:center; justify-content:center;84    box-shadow:0 18px 40px rgba(0,0,0,.55);85  }86  .plus{width:72px;height:72px;}87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status bar -->93  <div class="status-bar">94    <div class="status-content">95      <div class="status-left">12:39</div>96      <div class="status-right">97        <div class="mini-ico"></div>98        <div class="mini-ico"></div>99        <div class="mini-ico"></div>100        <div class="mini-ico" style="border-radius:50%"></div>101        <div class="mini-ico"></div>102      </div>103    </div>104  </div>105 106  <!-- Search / header -->107  <div class="search-row">108    <div class="search-pill">109      <div class="hamburger">110        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfe0d2">111          <rect x="3" y="5" width="18" height="2" rx="1"></rect>112          <rect x="3" y="11" width="18" height="2" rx="1"></rect>113          <rect x="3" y="17" width="18" height="2" rx="1"></rect>114        </svg>115      </div>116      <div class="search-text">Search Slides</div>117      <div class="folder-ico">118        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfe0d2">119          <path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7z"></path>120        </svg>121      </div>122    </div>123    <div class="avatar">C</div>124  </div>125 126  <!-- Section title -->127  <div class="section-title">128    <div>Last opened by me</div>129    <svg class="chev" viewBox="0 0 24 24" fill="#cfe0d2">130      <path d="M7 10l5 5 5-5z"></path>131    </svg>132  </div>133 134  <!-- Cards grid -->135  <div class="cards">136    <!-- Card 1 -->137    <div class="card">138      <div class="thumb">[IMG: Slide thumbnail]</div>139      <div class="meta">140        <div class="slide-square"></div>141        <div class="title">Book report</div>142        <div class="kebab">143          <svg width="8" height="36" viewBox="0 0 8 36">144            <circle cx="4" cy="6" r="4"></circle>145            <circle cx="4" cy="18" r="4"></circle>146            <circle cx="4" cy="30" r="4"></circle>147          </svg>148        </div>149      </div>150    </div>151 152    <!-- Card 2 -->153    <div class="card">154      <div class="thumb">[IMG: Slide thumbnail]</div>155      <div class="meta">156        <div class="slide-square"></div>157        <div class="title">Flash cards</div>158        <div class="kebab">159          <svg width="8" height="36" viewBox="0 0 8 36">160            <circle cx="4" cy="6" r="4"></circle>161            <circle cx="4" cy="18" r="4"></circle>162            <circle cx="4" cy="30" r="4"></circle>163          </svg>164        </div>165      </div>166    </div>167  </div>168 169  <!-- Floating action button -->170  <div class="fab">171    <svg class="plus" viewBox="0 0 24 24" fill="#e8f6e8">172      <path d="M11 5h2v14h-2z"></path>173      <path d="M5 11h14v2H5z"></path>174    </svg>175  </div>176 177</div>178</body>179</html>