GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Mobile UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#121212; color:#fff;12    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14 15  /* Top status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0; height:120px;18    background:#0f0f0f; color:#eaeaea;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 36px; box-sizing:border-box;21  }22  .status-time { font-size:38px; letter-spacing:1px; }23  .status-right { display:flex; align-items:center; gap:26px; }24  .status-right svg { width:38px; height:38px; fill:#eaeaea; opacity:0.9; }25 26  /* Filter chips row */27  .chips {28    position:absolute; left:34px; right:34px; top:140px;29    display:flex; align-items:center; gap:22px;30  }31  .avatar {32    width:96px; height:96px; border-radius:50%;33    background:#ff6d3a; color:#111; font-weight:700; font-size:46px;34    display:flex; align-items:center; justify-content:center;35  }36  .chip {37    padding:18px 34px; border-radius:36px; font-size:38px;38    background:#2b2b2b; color:#f2f2f2;39    white-space:nowrap;40  }41  .chip.green { background:#1DB954; color:#0f0f0f; font-weight:700; }42  .chip-outline {43    padding:3px; border-radius:40px;44    background:linear-gradient(45deg,#ff5a3d,#ffd54f,#1db954,#6a5af9,#ff5a3d);45  }46  .chip-outline .inner {47    background:#232323; color:#ffffff; padding:16px 34px; border-radius:36px; font-size:38px;48  }49 50  /* Loading spinner */51  .spinner {52    position:absolute; left:50%; top:58%;53    width:140px; height:140px; transform:translate(-50%,-50%);54    border-radius:50%;55    border:16px solid rgba(29,185,84,0.12);56    border-top-color:#1DB954;57    animation:spin 1.1s linear infinite;58    opacity:0.5;59  }60  @keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }61 62  /* Bottom navigation */63  .bottom-nav {64    position:absolute; left:0; right:0; bottom:0; height:220px;65    background:#000000; border-top:1px solid #1f1f1f;66    display:flex; justify-content:space-around; align-items:flex-start;67    padding-top:30px; box-sizing:border-box;68  }69  .nav-item {70    position:relative;71    display:flex; flex-direction:column; align-items:center; gap:18px;72    color:#cfcfcf; font-size:34px;73  }74  .nav-item.active { color:#ffffff; }75  .nav-item svg { width:64px; height:64px; fill:currentColor; }76  .dot {77    position:absolute; right:24px; top:-2px; width:16px; height:16px;78    background:#4ea8ff; border-radius:50%; border:2px solid #000;79  }80 81  /* Gesture bar */82  .gesture {83    position:absolute; left:50%; bottom:18px; transform:translateX(-50%);84    width:300px; height:10px; background:#e6e6e6; border-radius:8px; opacity:0.9;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="status-bar">93    <div class="status-time">5:29</div>94    <div class="status-right">95      <!-- Do not disturb -->96      <svg viewBox="0 0 24 24" aria-hidden="true">97        <circle cx="12" cy="12" r="9"></circle>98        <rect x="7" y="11" width="10" height="2" fill="#0f0f0f"></rect>99      </svg>100      <!-- Wi‑Fi -->101      <svg viewBox="0 0 24 24" aria-hidden="true">102        <path d="M12 18a2 2 0 1 0 0.001 0z"></path>103        <path d="M2 9c5.5-4.5 14.5-4.5 20 0" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>104        <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>105        <path d="M8 15c2.5-2 5.5-2 8 0" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>106        <circle cx="12" cy="18" r="1.8" fill="#eaeaea"></circle>107      </svg>108      <!-- Battery -->109      <svg viewBox="0 0 28 24" aria-hidden="true">110        <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>111        <rect x="22" y="9" width="3" height="6" rx="1"></rect>112      </svg>113    </div>114  </div>115 116  <!-- Filter chips -->117  <div class="chips">118    <div class="avatar">L</div>119    <div class="chip green">All</div>120    <div class="chip">Music</div>121    <div class="chip">Podcasts</div>122    <div class="chip-outline"><div class="inner">Wrapped</div></div>123  </div>124 125  <!-- Loading spinner -->126  <div class="spinner"></div>127 128  <!-- Bottom navigation -->129  <div class="bottom-nav">130    <div class="nav-item active">131      <!-- Home -->132      <svg viewBox="0 0 24 24" aria-hidden="true">133        <path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"></path>134      </svg>135      <div>Home</div>136    </div>137    <div class="nav-item">138      <!-- Search -->139      <svg viewBox="0 0 24 24" aria-hidden="true">140        <circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"></circle>141        <path d="M15 15l5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>142      </svg>143      <div>Search</div>144    </div>145    <div class="nav-item">146      <!-- Your Library -->147      <svg viewBox="0 0 24 24" aria-hidden="true">148        <rect x="4" y="4" width="3" height="16" rx="1"></rect>149        <rect x="10.5" y="6" width="3" height="14" rx="1"></rect>150        <rect x="17" y="8" width="3" height="12" rx="1"></rect>151      </svg>152      <div>Your Library</div>153    </div>154    <div class="nav-item">155      <!-- Premium (simplified Spotify-like) -->156      <svg viewBox="0 0 24 24" aria-hidden="true">157        <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>158        <path d="M6 10c4-1.5 8-1.5 12 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>159        <path d="M7 13c3.3-1 6.7-1 10 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>160        <path d="M8 16c2.7-.7 5.3-.7 8 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>161      </svg>162      <div class="dot"></div>163      <div>Premium</div>164    </div>165  </div>166 167  <!-- Gesture bar -->168  <div class="gesture"></div>169</div>170</body>171</html>