GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Explore UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #222;16 }17 .header {18 padding: 90px 64px 0 64px;19 position: relative;20 }21 .title {22 font-size: 72px;23 font-weight: 700;24 letter-spacing: -0.5px;25 }26 .az-link {27 position: absolute;28 right: 64px;29 top: 100px;30 color: #4E8C86;31 font-weight: 600;32 font-size: 40px;33 letter-spacing: 2px;34 }35 36 .search-wrap {37 margin: 40px 64px 0 64px;38 height: 128px;39 border: 1px solid #E5E7EB;40 border-radius: 28px;41 background: #F7F7F7;42 display: flex;43 align-items: center;44 padding: 0 36px;45 box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;46 }47 .search-icon {48 width: 56px;49 height: 56px;50 margin-right: 24px;51 }52 .search-text {53 font-size: 40px;54 color: #6B7280;55 }56 57 .cards-grid {58 display: grid;59 grid-template-columns: 1fr 1fr;60 column-gap: 48px;61 row-gap: 48px;62 padding: 48px 64px 0 64px;63 }64 .card {65 position: relative;66 height: 300px;67 border-radius: 28px;68 overflow: hidden;69 box-shadow: 0 2px 8px rgba(0,0,0,0.04);70 }71 .img-placeholder {72 position: absolute;73 inset: 0;74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 display: flex;77 justify-content: center;78 align-items: center;79 color: #757575;80 font-size: 34px;81 text-align: center;82 padding: 16px;83 }84 .card-label {85 position: absolute;86 left: 28px;87 bottom: 24px;88 color: #FFFFFF;89 font-size: 56px;90 font-weight: 700;91 text-shadow: 0 2px 6px rgba(0,0,0,0.35);92 }93 94 .section-title {95 margin: 64px 64px 20px 64px;96 font-size: 48px;97 font-weight: 700;98 }99 100 .bottom-nav {101 position: absolute;102 left: 0; right: 0; bottom: 0;103 height: 180px;104 border-top: 1px solid #E5E7EB;105 background: #FFFFFF;106 display: flex;107 align-items: center;108 justify-content: space-around;109 padding-bottom: 30px;110 }111 .nav-item {112 display: flex;113 flex-direction: column;114 align-items: center;115 gap: 14px;116 color: #0F172A;117 font-size: 32px;118 }119 .nav-icon {120 width: 64px;121 height: 64px;122 }123 .plus {124 font-size: 52px;125 color: #C7A049;126 font-weight: 700;127 font-style: italic;128 }129 130 .home-indicator {131 position: absolute;132 left: 50%;133 transform: translateX(-50%);134 bottom: 12px;135 width: 480px;136 height: 12px;137 background: #D1D5DB;138 border-radius: 6px;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <div class="header">146 <div class="title">Explore</div>147 <div class="az-link">A - Z</div>148 </div>149 150 <div class="search-wrap">151 <svg class="search-icon" viewBox="0 0 24 24" fill="none">152 <circle cx="11" cy="11" r="7" stroke="#6B7280" stroke-width="2"></circle>153 <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#6B7280" stroke-width="2" stroke-linecap="round"></line>154 </svg>155 <div class="search-text">Search 210,000 free tracks</div>156 </div>157 158 <div class="cards-grid">159 <!-- Row 1 -->160 <div class="card">161 <div class="img-placeholder">[IMG: Leaf close-up with dew]</div>162 <div class="card-label">Beginner</div>163 </div>164 <div class="card">165 <div class="img-placeholder">[IMG: Sunset over mountains]</div>166 <div class="card-label">Meditation</div>167 </div>168 169 <!-- Row 2 -->170 <div class="card">171 <div class="img-placeholder">[IMG: Person practicing breathwork]</div>172 <div class="card-label">Breathwork</div>173 </div>174 <div class="card">175 <div class="img-placeholder">[IMG: Night sky with stars]</div>176 <div class="card-label">Sleep</div>177 </div>178 179 <!-- Row 3 -->180 <div class="card">181 <div class="img-placeholder">[IMG: Cymbals and sound bowls]</div>182 <div class="card-label">Music</div>183 </div>184 <div class="card">185 <div class="img-placeholder">[IMG: Yoga pose at sunset]</div>186 <div class="card-label">Yoga</div>187 </div>188 189 <!-- Row 4 -->190 <div class="card">191 <div class="img-placeholder">[IMG: Abstract light streaks]</div>192 <div class="card-label">Live events</div>193 </div>194 <div class="card">195 <div class="img-placeholder">[IMG: Stacked stones]</div>196 <div class="card-label">Courses</div>197 </div>198 </div>199 200 <div class="section-title">Interests</div>201 202 <!-- Bottom Navigation -->203 <div class="bottom-nav">204 <div class="nav-item">205 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">206 <path d="M3 10.5L12 3l9 7.5v9a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5H9v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-9z" stroke="#0F172A" stroke-width="2" stroke-linejoin="round"></path>207 </svg>208 <div>Home</div>209 </div>210 <div class="nav-item">211 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">212 <path d="M6 3h12a1 1 0 0 1 1 1v16l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#0F172A" stroke-width="2" stroke-linejoin="round"></path>213 </svg>214 <div>Save</div>215 </div>216 <div class="nav-item">217 <div class="plus">Plus</div>218 </div>219 <div class="nav-item">220 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">221 <circle cx="11" cy="11" r="7" stroke="#0F172A" stroke-width="2"></circle>222 <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#0F172A" stroke-width="2" stroke-linecap="round"></line>223 </svg>224 <div>Search</div>225 </div>226 <div class="nav-item">227 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">228 <circle cx="12" cy="12" r="10" stroke="#0F172A" stroke-width="2"></circle>229 <path d="M2 12h20M12 2a16 16 0 0 1 0 20M12 2a16 16 0 0 0 0 20" stroke="#0F172A" stroke-width="2" stroke-linecap="round"></path>230 </svg>231 <div>World</div>232 </div>233 </div>234 235 <div class="home-indicator"></div>236 237</div>238</body>239</html>