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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1f1f1f;15 color: #eaeaea;16 font-family: Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 110px;26 padding: 0 32px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #dcdcdc;32 font-size: 34px;33 letter-spacing: 0.2px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .icon {41 width: 44px;42 height: 44px;43 fill: #dcdcdc;44 }45 46 /* App bar */47 .app-bar {48 position: absolute;49 top: 110px;50 left: 0;51 width: 100%;52 height: 150px;53 background: #242526;54 border-bottom: 1px solid #333;55 box-sizing: border-box;56 padding: 0 28px;57 display: flex;58 align-items: center;59 justify-content: space-between;60 }61 .app-left {62 display: flex;63 align-items: center;64 gap: 24px;65 }66 .app-title {67 font-size: 46px;68 font-weight: 500;69 color: #e6e6e6;70 }71 .app-right {72 display: flex;73 align-items: center;74 gap: 36px;75 }76 77 /* Filter chips */78 .chips-wrap {79 position: absolute;80 top: 260px;81 left: 0;82 width: 100%;83 padding: 16px 24px;84 box-sizing: border-box;85 }86 .chips {87 display: flex;88 gap: 22px;89 flex-wrap: nowrap;90 }91 .chip {92 display: inline-flex;93 align-items: center;94 gap: 14px;95 padding: 18px 26px;96 border: 2px solid #6f6f6f;97 border-radius: 28px;98 color: #d9d9d9;99 font-size: 34px;100 background: transparent;101 white-space: nowrap;102 }103 .chip .icon {104 width: 36px;105 height: 36px;106 fill: #cfcfcf;107 }108 109 /* Empty state content */110 .empty-state {111 position: absolute;112 top: 1320px;113 left: 0;114 width: 100%;115 text-align: center;116 }117 .img-placeholder {118 width: 280px;119 height: 200px;120 margin: 0 auto 28px auto;121 background: #E0E0E0;122 border: 1px solid #BDBDBD;123 color: #757575;124 display: flex;125 align-items: center;126 justify-content: center;127 font-size: 28px;128 border-radius: 12px;129 }130 .stars {131 font-size: 40px;132 color: #F4B400; /* yellow-ish stars */133 margin-bottom: 12px;134 }135 .empty-text {136 font-size: 44px;137 color: #e5e5e5;138 }139 140 /* Gesture pill */141 .gesture {142 position: absolute;143 bottom: 30px;144 left: 50%;145 transform: translateX(-50%);146 width: 280px;147 height: 12px;148 background: #e6e6e6;149 border-radius: 20px;150 opacity: 0.9;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Status bar -->158 <div class="status-bar">159 <div class="status-left">10:48</div>160 <div class="status-icons">161 <!-- simple wifi -->162 <svg class="icon" viewBox="0 0 24 24">163 <path d="M12 18.5c.9 0 1.7.8 1.7 1.7S12.9 22 12 22s-1.7-.8-1.7-1.7.8-1.8 1.7-1.8zM3 9.8c5.6-4.6 12.4-4.6 18 0l-1.4 1.4c-4.6-3.6-10.6-3.6-15.2 0L3 9.8zm3.6 3.6c3.8-3 9-3 12.8 0l-1.5 1.5c-2.8-2.2-7-2.2-9.8 0l-1.5-1.5zm3.8 3.8c1.9-1.4 4.3-1.4 6.2 0l-1.4 1.4c-1.1-.8-2.3-.8-3.4 0l-1.4-1.4z"/>164 </svg>165 <!-- battery -->166 <svg class="icon" viewBox="0 0 24 24">167 <path d="M20 8h1.5c.3 0 .5.2.5.5v6c0 .3-.2.5-.5.5H20v-7zM4 7h14c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2zm2 3v6h10v-6H6z"/>168 </svg>169 </div>170 </div>171 172 <!-- App bar -->173 <div class="app-bar">174 <div class="app-left">175 <!-- back arrow -->176 <svg class="icon" viewBox="0 0 24 24">177 <path d="M20 11H7.8l4.6-4.6L11 4l-7 7 7 7 1.4-2.4L7.8 13H20v-2z"/>178 </svg>179 <div class="app-title">doc x (1)</div>180 </div>181 <div class="app-right">182 <!-- close X -->183 <svg class="icon" viewBox="0 0 24 24">184 <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>185 </svg>186 <!-- grid icon -->187 <svg class="icon" viewBox="0 0 24 24">188 <path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/>189 </svg>190 <!-- kebab menu -->191 <svg class="icon" viewBox="0 0 24 24">192 <path d="M12 5.5c1 0 1.8.8 1.8 1.8S13 9 12 9s-1.8-.8-1.8-1.8S11 5.5 12 5.5zm0 5.5c1 0 1.8.8 1.8 1.8S13 14.6 12 14.6s-1.8-.8-1.8-1.8S11 11 12 11zm0 5.5c1 0 1.8.8 1.8 1.8S13 20.1 12 20.1s-1.8-.8-1.8-1.8S11 16.5 12 16.5z"/>193 </svg>194 </div>195 </div>196 197 <!-- Chips -->198 <div class="chips-wrap">199 <div class="chips">200 <div class="chip">201 <svg class="icon" viewBox="0 0 24 24">202 <path d="M6 16.5C4.1 16.5 2.5 14.9 2.5 13S4.1 9.5 6 9.5h.5V8c0-3.3 2.7-6 6-6s6 2.7 6 6v1.5h.5c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5H18V14h1.5c.8 0 1.5-.7 1.5-1.5S20.3 11 19.5 11H18V8c0-2.2-1.8-4-4-4s-4 1.8-4 4v3H8.5c-.8 0-1.5.7-1.5 1.5S7.7 14 8.5 14H10v2.5H6z"/>203 </svg>204 Audio205 </div>206 <div class="chip">207 <svg class="icon" viewBox="0 0 24 24">208 <path d="M6 2h9l5 5v13c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm8 2v5h5l-5-5zM7 9h10v2H7V9zm0 4h10v2H7v-2zm0 4h7v2H7v-2z"/>209 </svg>210 Documents & other211 </div>212 <div class="chip">213 <svg class="icon" viewBox="0 0 24 24">214 <path d="M4 5h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2zm8 3c-1.9 0-3.5 1.6-3.5 3.5S10.1 15 12 15s3.5-1.6 3.5-3.5S13.9 8 12 8zm-8 9h16l-4.5-6-3.5 4.5-2.5-3.5L4 17z"/>215 </svg>216 Images217 </div>218 </div>219 </div>220 221 <!-- Empty state -->222 <div class="empty-state">223 <div class="stars">★ ★ ★</div>224 <div class="img-placeholder">[IMG: Empty state illustration with stars]</div>225 <div class="empty-text">There's nothing here.</div>226 </div>227 228 <!-- Gesture pill -->229 <div class="gesture"></div>230</div>231</body>232</html>