GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Arts and humanities - List</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#212121; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #8c8c8c;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-size: 36px;26 letter-spacing: 1px;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 gap: 22px;32 align-items: center;33 }34 .dot { width: 14px; height: 14px; background:#eaeaea; border-radius:50%; opacity:.9; }35 .battery {36 width: 46px; height: 24px; border:2px solid #fff; border-radius:4px; position: relative;37 }38 .battery::after {39 content:""; position:absolute; right:-8px; top:7px; width:6px; height:10px; background:#fff; border-radius:1px;40 }41 .battery-fill { width: 28px; height: 16px; background:#fff; position:absolute; top:2px; left:2px; }42 43 /* Header */44 .app-header {45 height: 170px;46 background: #ffffff;47 display: flex;48 align-items: center;49 padding: 0 34px;50 box-shadow: 0 2px 6px rgba(0,0,0,0.08);51 }52 .back-btn {53 width: 90px; height: 90px; display:flex; align-items:center; justify-content:center;54 }55 .header-title {56 font-size: 54px;57 font-weight: 600;58 color:#333;59 margin-left: 10px;60 }61 62 /* List */63 .content {64 position: absolute;65 top: 290px; /* status (120) + header (170) */66 bottom: 230px; /* bottom nav height */67 left: 0; right: 0;68 overflow: hidden; /* static mock; no scrolling */69 }70 .list {71 padding-top: 10px;72 }73 .row {74 height: 170px;75 display: flex;76 align-items: center;77 padding: 0 40px;78 position: relative;79 }80 .thumb {81 width: 116px;82 height: 116px;83 border-radius: 50%;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 color: #757575;87 display: flex;88 align-items: center;89 justify-content: center;90 font-size: 22px;91 }92 .title {93 font-size: 38px;94 color:#1e1e1e;95 margin-left: 30px;96 }97 .divider {98 position: absolute;99 left: 196px; right: 0; bottom: 0;100 height: 1px; background: #e9e9e9;101 }102 103 /* Bottom navigation */104 .bottom-nav {105 position: absolute;106 left: 0; right: 0; bottom: 0;107 height: 220px;108 background: #ffffff;109 border-top: 1px solid #e5e5e5;110 display: flex;111 align-items: center;112 justify-content: space-around;113 padding-bottom: 30px;114 }115 .nav-item {116 width: 33.33%;117 text-align: center;118 color: #9e9e9e;119 font-size: 30px;120 }121 .nav-item.active { color: #1976d2; }122 .nav-icon {123 width: 60px; height: 60px; margin: 0 auto 16px;124 display: block;125 }126 127 /* Gesture bar */128 .gesture {129 position: absolute;130 bottom: 18px;131 left: 50%;132 transform: translateX(-50%);133 width: 280px;134 height: 10px;135 background: #111;136 border-radius: 10px;137 opacity: .9;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <div class="status-bar">145 8:49146 <div class="status-icons">147 <div class="dot"></div>148 <div class="dot"></div>149 <div class="dot"></div>150 <div class="battery"><div class="battery-fill"></div></div>151 <span style="font-size:30px;">43%</span>152 </div>153 </div>154 155 <div class="app-header">156 <div class="back-btn">157 <svg width="56" height="56" viewBox="0 0 24 24">158 <path d="M15.5 19L8.5 12l7-7" fill="none" stroke="#1a73e8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>159 </svg>160 </div>161 <div class="header-title">Arts and humanities</div>162 </div>163 164 <div class="content">165 <div class="list">166 167 <div class="row">168 <div class="thumb">[IMG]</div>169 <div class="title">Big History Project</div>170 <div class="divider"></div>171 </div>172 173 <div class="row">174 <div class="thumb">[IMG]</div>175 <div class="title">World History Project - Origins to the Present</div>176 <div class="divider"></div>177 </div>178 179 <div class="row">180 <div class="thumb">[IMG]</div>181 <div class="title">World History Project - 1750 to the Present</div>182 <div class="divider"></div>183 </div>184 185 <div class="row">186 <div class="thumb">[IMG]</div>187 <div class="title">US history</div>188 <div class="divider"></div>189 </div>190 191 <div class="row">192 <div class="thumb">[IMG]</div>193 <div class="title">AP®/College US History</div>194 <div class="divider"></div>195 </div>196 197 <div class="row">198 <div class="thumb">[IMG]</div>199 <div class="title">US government and civics</div>200 <div class="divider"></div>201 </div>202 203 <div class="row">204 <div class="thumb">[IMG]</div>205 <div class="title">AP®/College US Government and Politics</div>206 <div class="divider"></div>207 </div>208 209 <div class="row">210 <div class="thumb">[IMG]</div>211 <div class="title">AP®/College Art History</div>212 <div class="divider"></div>213 </div>214 215 <div class="row">216 <div class="thumb">[IMG]</div>217 <div class="title">Storytelling</div>218 <div class="divider"></div>219 </div>220 221 </div>222 </div>223 224 <div class="bottom-nav">225 <div class="nav-item">226 <svg class="nav-icon" viewBox="0 0 24 24">227 <path d="M12 3l7 5v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8l7-5z" fill="none" stroke="#9e9e9e" stroke-width="2"/>228 </svg>229 Home230 </div>231 <div class="nav-item active">232 <svg class="nav-icon" viewBox="0 0 24 24">233 <circle cx="11" cy="11" r="7" fill="none" stroke="#1976d2" stroke-width="2"/>234 <path d="M20 20l-3-3" stroke="#1976d2" stroke-width="2" fill="none" stroke-linecap="round"/>235 </svg>236 Explore237 </div>238 <div class="nav-item">239 <svg class="nav-icon" viewBox="0 0 24 24">240 <path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#9e9e9e" stroke-width="2"/>241 </svg>242 Bookmarks243 </div>244 </div>245 246 <div class="gesture"></div>247</div>248</body>249</html>