GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Arts and humanities - Explore</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; font-family: "Segoe UI", Roboto, Arial, sans-serif; color:#222;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:128px;15 background:#7a7a7a; color:#fff; font-size:36px;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 36px;18 }19 .status-left { display:flex; align-items:center; gap:18px; }20 .status-right { display:flex; align-items:center; gap:18px; }21 .status-dot { width:16px; height:16px; background:#fff; border-radius:50%; opacity:0.9; }22 .battery {23 display:flex; align-items:center; gap:10px; font-size:32px;24 }25 .battery-icon {26 width:40px; height:24px; border:3px solid #fff; border-radius:4px; position:relative;27 }28 .battery-icon::after {29 content:""; position:absolute; right:-10px; top:6px; width:8px; height:12px; background:#fff; border-radius:2px;30 }31 .battery-fill { position:absolute; left:3px; top:3px; height:18px; width:26px; background:#fff; }32 /* App bar */33 .app-bar {34 position:absolute; top:128px; left:0; width:100%; height:140px;35 background:#ffffff; display:flex; align-items:center; border-bottom:1px solid #e6e6e6;36 padding:0 24px;37 }38 .back-btn {39 width:84px; height:84px; display:flex; align-items:center; justify-content:center; margin-right:12px;40 }41 .app-title { font-size:56px; font-weight:600; color:#333; }42 /* List */43 .content {44 position:absolute; top:268px; left:0; right:0; bottom:220px; overflow:auto;45 padding-top:8px;46 }47 .list-row {48 display:flex; align-items:center;49 padding:30px 36px;50 height:180px;51 border-bottom:1px solid #eee;52 }53 .avatar {54 width:120px; height:120px; border-radius:60px;55 background:#E0E0E0; border:1px solid #BDBDBD;56 display:flex; align-items:center; justify-content:center;57 color:#757575; font-size:24px; text-align:center; line-height:1.2;58 margin-right:28px;59 }60 .row-title { font-size:44px; color:#222; }61 /* Bottom tab bar */62 .tab-bar {63 position:absolute; left:0; right:0; bottom:140px; height:180px;64 background:#fff; border-top:1px solid #e6e6e6;65 display:flex; align-items:center; justify-content:space-around;66 }67 .tab {68 width:33.33%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#8a8a8a; font-size:34px;69 }70 .tab.active { color:#1877f2; }71 .tab svg { width:64px; height:64px; }72 /* System navigation / gesture area */73 .system-nav {74 position:absolute; left:0; right:0; bottom:0; height:140px; background:#000;75 display:flex; align-items:center; justify-content:center;76 }77 .home-indicator {78 width:240px; height:12px; background:#fff; border-radius:8px; opacity:0.9;79 }80</style>81</head>82<body>83<div id="render-target">84 85 <!-- Status bar -->86 <div class="status-bar">87 <div class="status-left">88 <div>8:49</div>89 <div class="status-dot"></div>90 <div class="status-dot"></div>91 <div class="status-dot"></div>92 <div class="status-dot"></div>93 </div>94 <div class="status-right">95 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" opacity="0.2"></circle><path d="M18 6l-8.5 8.6L6 11.2 4.6 12.6l5 5L19.4 7.6z" fill="#fff"/></svg>96 <div class="battery">97 <div class="battery-icon"><div class="battery-fill"></div></div>98 <div>43%</div>99 </div>100 </div>101 </div>102 103 <!-- App bar -->104 <div class="app-bar">105 <div class="back-btn">106 <svg viewBox="0 0 24 24">107 <path d="M15 6l-6 6 6 6" stroke="#1a73e8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>108 </svg>109 </div>110 <div class="app-title">Arts and humanities</div>111 </div>112 113 <!-- Content list -->114 <div class="content">115 <div class="list-row">116 <div class="avatar">[IMG: AP logo]</div>117 <div class="row-title">AP®/College Art History</div>118 </div>119 120 <div class="list-row">121 <div class="avatar">[IMG: Column icon]</div>122 <div class="row-title">Storytelling</div>123 </div>124 125 <div class="list-row">126 <div class="avatar">[IMG: Column icon]</div>127 <div class="row-title">World history</div>128 </div>129 130 <div class="list-row">131 <div class="avatar">[IMG: Grammar photo]</div>132 <div class="row-title">Grammar</div>133 </div>134 135 <div class="list-row">136 <div class="avatar">[IMG: Column icon]</div>137 <div class="row-title">Special topics in art history</div>138 </div>139 140 <div class="list-row">141 <div class="avatar">[IMG: Column icon]</div>142 <div class="row-title">The Seeing America Project</div>143 </div>144 145 <div class="list-row">146 <div class="avatar">[IMG: Column icon]</div>147 <div class="row-title">Start here</div>148 </div>149 150 <div class="list-row">151 <div class="avatar">[IMG: Prehistoric art photo]</div>152 <div class="row-title">Prehistoric art</div>153 </div>154 155 <div class="list-row" style="border-bottom:none;">156 <div class="avatar">[IMG: African art photo]</div>157 <div class="row-title">Art of Africa</div>158 </div>159 </div>160 161 <!-- Bottom tabs -->162 <div class="tab-bar">163 <div class="tab">164 <svg viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2">165 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>166 </svg>167 <div>Home</div>168 </div>169 <div class="tab active">170 <svg viewBox="0 0 24 24" fill="none" stroke="#1877f2" stroke-width="2">171 <circle cx="11" cy="11" r="7"/>172 <path d="M20 20l-4-4"/>173 </svg>174 <div>Explore</div>175 </div>176 <div class="tab">177 <svg viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2">178 <path d="M6 3h12v18l-6-4-6 4z"/>179 </svg>180 <div>Bookmarks</div>181 </div>182 </div>183 184 <!-- System gesture area -->185 <div class="system-nav">186 <div class="home-indicator"></div>187 </div>188 189</div>190</body>191</html>