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>Discover Screen Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background: linear-gradient(180deg, #2c6d8f 0%, #2c5f89 18%, #2a4f84 36%, #293e82 58%, #272f79 78%, #242461 100%);11    color:#ffffff;12  }13 14  /* Top search row */15  .top-area{ padding: 54px 44px 0 44px; }16  .top-row{17    display:flex; align-items:center; gap:28px;18  }19  .back-btn{20    width:96px; height:96px; border-radius:50%;21    background:rgba(0,0,0,0.22);22    border:1px solid rgba(255,255,255,0.18);23    display:flex; align-items:center; justify-content:center;24  }25  .back-btn svg{ width:40px; height:40px; fill:none; stroke:#fff; stroke-width:10; }26 27  .search-input{28    flex:1; height:110px; border:none; outline:none;29    background:transparent; color:#f4f7ff;30    font-size:54px; font-weight:500;31  }32  .search-input::placeholder{ color:rgba(255,255,255,0.85); }33 34  /* Filter chips */35  .filters{ display:flex; gap:28px; padding:30px 0 8px 140px; }36  .chip{37    display:inline-flex; align-items:center; gap:18px;38    padding:24px 34px; border-radius:60px;39    background:rgba(255,255,255,0.06);40    border:1px solid rgba(255,255,255,0.14);41    color:#eaf0ff; font-size:40px;42  }43  .chip svg{ width:28px; height:28px; stroke:#eaf0ff; fill:none; stroke-width:8; }44 45  /* Section tags */46  .section-tag{47    display:inline-flex; align-items:center; gap:20px;48    padding:20px 34px; border-radius:60px;49    background:rgba(255,255,255,0.06);50    border:1px solid rgba(255,255,255,0.12);51    color:#eaf0ff; font-size:42px; margin-left:44px; margin-top:28px;52  }53  .section-tag svg{ width:30px; height:30px; stroke:#eaf0ff; fill:none; stroke-width:8; }54 55  /* Lists */56  .list{ list-style:none; margin:22px 0 0 44px; padding:0; }57  .list li{58    font-size:54px; letter-spacing:0.2px;59    color:#ecf3ff;60    padding:26px 0;61  }62 63  /* Spacing between Recent and Trending */64  .spacer-xxl{ height:28px; }65  .spacer-lg{ height:34px; }66 67  /* Bottom navigation */68  .nav{69    position:absolute; bottom:0; left:0; width:100%; height:220px;70    background:rgba(7,12,35,0.55);71    border-top:1px solid rgba(255,255,255,0.12);72    display:flex; align-items:center; justify-content:space-around;73    backdrop-filter: blur(6px);74  }75  .nav-item{76    display:flex; flex-direction:column; align-items:center; gap:16px;77    color:#cfd8ff; font-size:42px;78  }79  .nav-item .icon{ width:64px; height:64px; }80  .nav-item.active{ color:#ffffff; }81  .nav-item.active .active-dot{82    width:72px; height:72px; border-radius:50%;83    background:rgba(255,255,255,0.18);84    display:flex; align-items:center; justify-content:center;85  }86  /* Simple icon strokes */87  .stroke{ fill:none; stroke:#cfd8ff; stroke-width:8; }88  .nav-item.active .stroke{ stroke:#ffffff; }89</style>90</head>91<body>92<div id="render-target">93 94  <div class="top-area">95    <div class="top-row">96      <div class="back-btn" role="button" aria-label="Back">97        <svg viewBox="0 0 24 24"><path d="M15.5 3.5L7 12l8.5 8.5" /></svg>98      </div>99      <input class="search-input" placeholder="Title, narrator, artist or topic" />100    </div>101 102    <div class="filters">103      <div class="chip">Category104        <svg viewBox="0 0 24 24"><path d="M4 8l8 8 8-8"/></svg>105      </div>106      <div class="chip">Time107        <svg viewBox="0 0 24 24"><path d="M4 8l8 8 8-8"/></svg>108      </div>109    </div>110  </div>111 112  <div class="section-tag" style="margin-top:26px;">113    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/></svg>114    Recent115  </div>116 117  <ul class="list">118    <li>the grand plan to rise and shine</li>119    <li>nature's bliss</li>120    <li>sounds of nature</li>121    <li>nature</li>122    <li>nature bliss</li>123  </ul>124 125  <div class="spacer-lg"></div>126 127  <div class="section-tag">128    <svg viewBox="0 0 24 24"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>129    Trending130  </div>131 132  <ul class="list" style="padding-bottom:360px;">133    <li>happiness</li>134    <li>anxiety</li>135    <li>erik braa</li>136    <li>harry styles</li>137    <li>rain</li>138    <li>soundscapes</li>139  </ul>140 141  <!-- Bottom Navigation -->142  <div class="nav">143    <div class="nav-item">144      <svg class="icon" viewBox="0 0 24 24">145        <path class="stroke" d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-5H9v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/>146      </svg>147      <div>Home</div>148    </div>149    <div class="nav-item">150      <svg class="icon" viewBox="0 0 24 24">151        <path class="stroke" d="M15 3c-4 3-5 6-5 9s2 6 5 9c-5-.5-9-4.5-9-9S10 3.5 15 3z"/>152      </svg>153      <div>Sleep</div>154    </div>155    <div class="nav-item active">156      <div class="active-dot">157        <svg class="icon" viewBox="0 0 24 24">158          <circle class="stroke" cx="12" cy="12" r="9"/>159          <path class="stroke" d="M12 7l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/>160        </svg>161      </div>162      <div>Discover</div>163    </div>164    <div class="nav-item">165      <svg class="icon" viewBox="0 0 24 24">166        <circle class="stroke" cx="12" cy="8.5" r="3.5"/>167        <path class="stroke" d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/>168      </svg>169      <div>Profile</div>170    </div>171    <div class="nav-item">172      <svg class="icon" viewBox="0 0 24 24">173        <path class="stroke" d="M12 2l3 6 6 1-4.5 4.2L18 21l-6-3.2L6 21l1.5-7.8L3 9l6-1z"/>174      </svg>175      <div>Premium</div>176    </div>177  </div>178 179</div>180</body>181</html>