GD-ML/AndroidCode
13.4k
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<title>Young Adult - Grid</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Top app bar */15 .appbar {16 background: #1f5bd6;17 color: #fff;18 }19 .status-bar {20 height: 88px; display: flex; align-items: center; padding: 0 32px; font-size: 28px;21 opacity: 0.95;22 }23 .status-bar .right { margin-left: auto; display: flex; align-items: center; gap: 18px; }24 .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: .9; }25 .toolbar {26 height: 132px; display: flex; align-items: center; padding: 0 28px 0 20px;27 }28 .toolbar .title {29 display: flex; align-items: center; gap: 18px; color: #fff; font-size: 40px; font-weight: 600;30 }31 .round-icon {32 width: 72px; height: 72px; background: #f1f6ff; border-radius: 50%;33 border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center;34 color: #1f5bd6; font-size: 18px;35 }36 .toolbar .spacer { flex: 1; }37 .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; margin-left: 18px; }38 39 /* Sort / Filter bar */40 .controls {41 display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: #333;42 border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;43 }44 .controls .cell {45 height: 120px; display: flex; align-items: center; gap: 16px; padding: 0 40px; font-size: 34px; color: #555;46 }47 .controls .cell + .cell { border-left: 1px solid #E5E7EB; }48 49 /* Product grid */50 .products {51 display: grid; grid-template-columns: 1fr 1fr;52 }53 .card {54 padding: 28px 40px 34px;55 border-top: 1px solid #E5E7EB;56 position: relative;57 }58 .card:nth-child(odd){ border-right: 1px solid #E5E7EB; }59 .cover {60 height: 460px; background: #E0E0E0; border: 1px solid #BDBDBD;61 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;62 position: relative; border-radius: 4px;63 }64 .fav {65 position: absolute; right: -8px; top: -18px; width: 90px; height: 90px;66 background: #fff; border-radius: 50%; box-shadow: 0 6px 12px rgba(0,0,0,0.15);67 display: flex; align-items: center; justify-content: center;68 }69 .title-txt {70 margin: 26px 0 10px; font-size: 34px; color: #222; line-height: 1.2; font-weight: 600;71 }72 .author { font-size: 28px; color: #6b7280; margin: 6px 0 10px; }73 .author b { color: #333; font-weight: 500; }74 .price { font-size: 30px; margin: 8px 0 22px; color: #1f2937; }75 .price s { color: #9CA3AF; margin-right: 10px; }76 .green { color: #0a8a2a; }77 .btn {78 display: inline-flex; align-items: center; justify-content: center; gap: 14px;79 background: #4b6fdb; color: #fff; height: 100px; width: 440px; border-radius: 10px;80 font-size: 34px; font-weight: 600;81 }82 83 /* Bottom gesture bar */84 .gesture {85 position: absolute; left: 50%; transform: translateX(-50%);86 bottom: 26px; width: 340px; height: 14px; border-radius: 10px; background: #111;87 }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- App Bar -->94 <div class="appbar">95 <div class="status-bar">96 <div style="font-weight:600;">7:15</div>97 <div class="right">98 <div class="dot"></div>99 <div class="dot" style="opacity:.7;"></div>100 <div class="dot" style="opacity:.5;"></div>101 <div class="dot" style="opacity:.3;"></div>102 </div>103 </div>104 <div class="toolbar">105 <div class="icon-btn" aria-label="Back">106 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">107 <path d="M14 4 L6 12 L14 20" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>108 </svg>109 </div>110 <div class="title">111 <div class="round-icon">YA</div>112 <div>Young Adult</div>113 </div>114 <div class="spacer"></div>115 <div class="icon-btn" aria-label="Search">116 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">117 <circle cx="11" cy="11" r="6.5" stroke="#fff" stroke-width="2"></circle>118 <path d="M16.5 16.5 L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>119 </svg>120 </div>121 <div class="icon-btn" aria-label="Cart">122 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">123 <path d="M3 5 H6 L7.5 14 H18 L20 8 H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>124 <circle cx="9.5" cy="18.5" r="1.6" fill="#fff"/>125 <circle cx="16.5" cy="18.5" r="1.6" fill="#fff"/>126 </svg>127 </div>128 </div>129 </div>130 131 <!-- Sort / Filter -->132 <div class="controls">133 <div class="cell">134 <svg width="36" height="36" viewBox="0 0 24 24" fill="#555">135 <path d="M3 6 H21 L14 13 V19 L10 21 V13 Z"/>136 </svg>137 <span>Sort By</span>138 </div>139 <div class="cell" style="justify-content:flex-start;">140 <svg width="36" height="36" viewBox="0 0 24 24" fill="#555">141 <path d="M3 6 H21 L14 13 V19 L10 21 V13 Z"/>142 </svg>143 <span>Filter</span>144 </div>145 </div>146 147 <!-- Products Grid -->148 <div class="products">149 <!-- Card 1 -->150 <div class="card">151 <div class="cover">152 [IMG: Book Cover]153 <div class="fav">154 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">155 <path d="M12 20 C5 13,4 9,6.8 6.8 C8.6 5.2,11 6,12 7.8 C13 6,15.4 5.2,17.2 6.8 C20 9,19 13,12 20 Z" fill="#e53935"/>156 </svg>157 </div>158 </div>159 <div class="title-txt">Moss And Adams Heart Disease In Infants ...</div>160 <div class="author">By <b>Hugh D. Allen</b></div>161 <div class="price"><s>₹850</s> <span class="green">Free</span></div>162 <div class="btn">163 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">164 <path d="M3 5 H6 L7.5 14 H18 L20 8 H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>165 <circle cx="9.5" cy="18.5" r="1.6" fill="#fff"/>166 <circle cx="16.5" cy="18.5" r="1.6" fill="#fff"/>167 </svg>168 <span>Add to Cart</span>169 </div>170 </div>171 172 <!-- Card 2 -->173 <div class="card">174 <div class="cover">175 [IMG: Book Cover]176 <div class="fav">177 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">178 <path d="M12 20 C5 13,4 9,6.8 6.8 C8.6 5.2,11 6,12 7.8 C13 6,15.4 5.2,17.2 6.8 C20 9,19 13,12 20 Z" fill="#e53935"/>179 </svg>180 </div>181 </div>182 <div class="title-txt">Adulting</div>183 <div class="author">By <b>Neharika Gupta</b></div>184 <div class="price"><s>₹299</s> <span class="green">Free</span></div>185 <div class="btn">186 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">187 <path d="M3 5 H6 L7.5 14 H18 L20 8 H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>188 <circle cx="9.5" cy="18.5" r="1.6" fill="#fff"/>189 <circle cx="16.5" cy="18.5" r="1.6" fill="#fff"/>190 </svg>191 <span>Add to Cart</span>192 </div>193 </div>194 195 <!-- Card 3 -->196 <div class="card">197 <div class="cover">198 [IMG: Book Cover]199 <div class="fav">200 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">201 <path d="M12 20 C5 13,4 9,6.8 6.8 C8.6 5.2,11 6,12 7.8 C13 6,15.4 5.2,17.2 6.8 C20 9,19 13,12 20 Z" fill="#e53935"/>202 </svg>203 </div>204 </div>205 <div class="title-txt">Involvement Of Young People At Work</div>206 <div class="author">By <b>Jennifer Mckibben</b></div>207 <div class="price"><s>₹30</s> <span class="green">Free</span></div>208 <div class="btn">209 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">210 <path d="M3 5 H6 L7.5 14 H18 L20 8 H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>211 <circle cx="9.5" cy="18.5" r="1.6" fill="#fff"/>212 <circle cx="16.5" cy="18.5" r="1.6" fill="#fff"/>213 </svg>214 <span>Add to Cart</span>215 </div>216 </div>217 218 <!-- Card 4 -->219 <div class="card">220 <div class="cover">221 [IMG: Book Cover]222 <div class="fav">223 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">224 <path d="M12 20 C5 13,4 9,6.8 6.8 C8.6 5.2,11 6,12 7.8 C13 6,15.4 5.2,17.2 6.8 C20 9,19 13,12 20 Z" fill="#e53935"/>225 </svg>226 </div>227 </div>228 <div class="title-txt">Middle-Aged Teenagers</div>229 <div class="author">By <b>C. Rajshekhar Rao</b></div>230 <div class="price"><span class="green">₹201</span> <s>₹300</s> <span class="green">(33% Off)</span></div>231 <div class="btn">232 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">233 <path d="M3 5 H6 L7.5 14 H18 L20 8 H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>234 <circle cx="9.5" cy="18.5" r="1.6" fill="#fff"/>235 <circle cx="16.5" cy="18.5" r="1.6" fill="#fff"/>236 </svg>237 <span>Add to Cart</span>238 </div>239 </div>240 </div>241 242 <!-- Bottom gesture bar -->243 <div class="gesture"></div>244</div>245</body>246</html>