GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; color: #1a2b36;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13 14  /* Top status bar */15  .topbar { position: absolute; top: 0; left: 0; width: 100%; height: 140px; background: #0A86C9; color: #fff; }16  .status { display: flex; align-items: center; gap: 18px; padding: 28px 30px; }17  .status .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }18 19  /* Header area */20  .header { position: absolute; top: 140px; left: 0; width: 100%; background: #fff; padding: 30px 32px 20px; }21  .header-row { display: flex; justify-content: space-between; align-items: center; }22  .bell-wrap { position: relative; width: 48px; height: 48px; display: flex; align-items: center; }23  .badge { position: absolute; top: -6px; left: 24px; background: #E53935; color: #fff; font-size: 24px; width: 44px; height: 44px; border-radius: 22px; display: flex; justify-content: center; align-items: center; border: 3px solid #fff; }24  .icon-btn { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; }25  .avatar { width: 64px; height: 64px; border: 4px solid #76D1F4; border-radius: 32px; display: flex; align-items: center; justify-content: center; margin-left: 16px; }26  .search-and-avatar { display: flex; align-items: center; gap: 16px; }27  .title { font-size: 84px; font-weight: 800; margin: 36px 0 18px; color: #203241; }28 29  /* Content */30  .content { position: absolute; top: 260px; left: 0; width: 100%; padding: 0 32px; }31  .section { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }32  .section h2 { margin: 0; font-size: 48px; font-weight: 700; color: #2f3b44; }33  .section a { font-size: 40px; color: #0A86C9; text-decoration: none; font-weight: 700; }34 35  .cards { margin-top: 36px; display: flex; gap: 32px; padding-bottom: 240px; }36  .card { width: 640px; background: #fff; border-radius: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow: hidden; }37  .thumb {38    height: 360px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;39    display: flex; justify-content: center; align-items: center; color: #757575; position: relative;40    font-size: 32px;41  }42  .duration { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.8); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 28px; }43  .card-body { padding: 26px; }44  .card-title { font-size: 44px; font-weight: 800; margin: 0 0 12px; color: #21313d; }45  .card-sub { font-size: 32px; color: #8ea0ad; }46  .card-meta { display: flex; justify-content: space-between; align-items: flex-start; }47  .dots { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }48 49  /* Bottom navigation */50  .bottom-nav {51    position: absolute; bottom: 0; left: 0; width: 100%; height: 170px;52    background: #ffffff; border-top: 1px solid #e5e5e5;53    display: flex; align-items: center; justify-content: space-around; padding: 0 40px;54  }55  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 30px; color: #7187A0; }56  .nav-item.active { color: #152633; font-weight: 700; }57  .fab {58    position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%);59    width: 120px; height: 120px; background: #00B6E6; border-radius: 60px;60    display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 16px rgba(0,0,0,0.2);61  }62</style>63</head>64<body>65<div id="render-target">66 67  <!-- Top status bar -->68  <div class="topbar">69    <div class="status">70      <div style="font-size:36px; font-weight:700;">8:56</div>71      <!-- Simple status icons -->72      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6h6v-2h-4V7z"/></svg>73      <div style="font-size:36px;">24°</div>74      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l9 5-9 5-9-5 9-5zm0 12l9-5v10l-9 5-9-5V9l9 5z"/></svg>75      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z"/></svg>76      <div class="dot"></div>77      <div style="margin-left:auto; display:flex; align-items:center; gap:16px;">78        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M17 7h-10l-1 9h12l-1-9zm-5 14a2 2 0 002-2h-4a2 2 0 002 2z"/></svg>79        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M7 6h10v12H7z"/><path d="M9 4h6v2H9z" fill="#fff"/></svg>80      </div>81    </div>82  </div>83 84  <!-- Header -->85  <div class="header">86    <div class="header-row">87      <div class="bell-wrap">88        <svg width="40" height="40" viewBox="0 0 24 24" fill="#2a3a46">89          <path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z" />90        </svg>91        <div class="badge">4</div>92      </div>93      <div class="search-and-avatar">94        <div class="icon-btn">95          <svg width="40" height="40" viewBox="0 0 24 24" stroke="#1f2d3a" fill="none" stroke-width="2">96            <circle cx="11" cy="11" r="7"></circle>97            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>98          </svg>99        </div>100        <div class="avatar">101          <svg width="40" height="40" viewBox="0 0 24 24" fill="#76D1F4">102            <circle cx="12" cy="9" r="3"></circle>103            <path d="M4 19c2-4 14-4 16 0" stroke="#76D1F4" stroke-width="2" fill="none"/>104          </svg>105        </div>106      </div>107    </div>108    <div class="title">Home</div>109  </div>110 111  <!-- Content -->112  <div class="content">113    <div class="section">114      <h2>Recent Videos</h2>115      <a href="#">View all</a>116    </div>117 118    <div class="cards">119      <!-- Card 1 -->120      <div class="card">121        <div class="thumb">122          <div style="width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Color bars video thumbnail]</div>123          <div class="duration">00:29</div>124        </div>125        <div class="card-body">126          <div class="card-meta">127            <div>128              <div class="card-title">Home Yoga</div>129              <div class="card-sub">0 views • 2 minutes ago</div>130            </div>131            <div class="dots">132              <svg width="24" height="24" viewBox="0 0 24 24" fill="#8ea0ad">133                <circle cx="12" cy="5" r="2"></circle>134                <circle cx="12" cy="12" r="2"></circle>135                <circle cx="12" cy="19" r="2"></circle>136              </svg>137            </div>138          </div>139        </div>140      </div>141 142      <!-- Card 2 -->143      <div class="card">144        <div class="thumb">145          <div style="width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Mountain landscape thumbnail]</div>146        </div>147        <div class="card-body">148          <div class="card-meta">149            <div>150              <div class="card-title">Untitled</div>151              <div class="card-sub">4 views • 3 weeks ago</div>152            </div>153            <div class="dots">154              <svg width="24" height="24" viewBox="0 0 24 24" fill="#8ea0ad">155                <circle cx="12" cy="5" r="2"></circle>156                <circle cx="12" cy="12" r="2"></circle>157                <circle cx="12" cy="19" r="2"></circle>158              </svg>159            </div>160          </div>161        </div>162      </div>163    </div>164  </div>165 166  <!-- Floating action button -->167  <div class="fab">168    <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">169      <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>170    </svg>171  </div>172 173  <!-- Bottom navigation -->174  <div class="bottom-nav">175    <div class="nav-item active">176      <svg width="54" height="54" viewBox="0 0 24 24" fill="#152633"><path d="M12 3l9 8-1.5 1.8L18 11v8h-5v-5H11v5H6v-8l-1.5 1.8L3 11l9-8z"/></svg>177      <div>Home</div>178    </div>179    <div class="nav-item">180      <svg width="54" height="54" viewBox="0 0 24 24" fill="#7187A0"><path d="M4 5h16v14H4V5zm2 2v10h12V7H6zm4 2l6 3-6 3V9z"/></svg>181      <div>Library</div>182    </div>183    <div class="nav-item" style="opacity:0;">184      <div>Spacer</div>185    </div>186    <div class="nav-item">187      <svg width="54" height="54" viewBox="0 0 24 24" fill="#7187A0"><path d="M5 3h3v18H5V3zm11 6h3v12h-3V9zm-6 4h3v8h-3v-8z"/></svg>188      <div>Analytics</div>189    </div>190    <div class="nav-item">191      <svg width="54" height="54" viewBox="0 0 24 24" fill="#7187A0"><path d="M4 6h16v12H4V6zm8 3l5 3-5 3V9z"/></svg>192      <div>Watch</div>193    </div>194  </div>195 196</div>197</body>198</html>