GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Inbox UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#0f0f12; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,0.35);10 color:#fff;11 }12 13 /* Top area */14 .topbar {15 position:absolute; left:0; top:0; width:100%; height:220px;16 background:#5b45c9;17 }18 .status {19 height:80px; display:flex; align-items:center; padding:0 32px; color:#fff; font-size:34px;20 }21 .status .icons { margin-left:auto; display:flex; align-items:center; gap:22px; }22 .appbar {23 height:140px; display:flex; align-items:center; padding:0 28px;24 color:#fff;25 }26 .appbar .title { font-size:56px; font-weight:700; margin-left:24px; }27 .appbar .right { margin-left:auto; display:flex; align-items:center; gap:36px; }28 29 /* List */30 .list {31 position:absolute; left:0; right:0; top:220px; bottom:210px;32 background:#101010; overflow:hidden; /* static mock, no scroll */33 }34 .item {35 position:relative;36 padding:34px 40px 30px 40px;37 border-bottom:1px solid #1d1d1d;38 background:#000;39 }40 .item.dim { background:#2b2b2f; }41 .sender-row {42 display:flex; align-items:center; gap:18px; margin-bottom:14px;43 color:#e5e5e5; font-weight:700; font-size:40px;44 }45 .dot {46 width:16px; height:16px; border-radius:50%; background:#3da7ff; display:inline-block;47 }48 .subject {49 font-size:44px; font-weight:800; color:#fff; line-height:1.2; margin-bottom:10px;50 }51 .sub-dark { color:#ddd; font-weight:700; }52 .preview-time {53 display:flex; align-items:center; justify-content:space-between;54 color:#b7b7b7; font-size:32px;55 }56 .time { color:#bcbcbc; margin-left:12px; white-space:nowrap; }57 58 .star {59 position:absolute; right:40px; top:36px;60 }61 .star svg { width:46px; height:46px; }62 .star.outline svg path { fill:none; stroke:#bfbfbf; stroke-width:3; }63 .star.filled svg path { fill:#ff8f3a; stroke:#ff8f3a; }64 65 /* Bottom nav */66 .bottom-nav {67 position:absolute; left:0; right:0; bottom:0; height:190px;68 background:#1b1b1d; display:flex; align-items:center; justify-content:space-around;69 padding:0 40px;70 }71 .nav-icon { width:92px; height:92px; display:flex; align-items:center; justify-content:center; }72 .nav-icon svg { width:72px; height:72px; }73 .nav-icon .circle {74 width:100px; height:100px; border-radius:50%; border:2px solid #666; display:flex; align-items:center; justify-content:center;75 }76 .gesture {77 position:absolute; bottom:210px; left:50%; transform:translateX(-50%);78 width:320px; height:14px; background:#e9e9e9; border-radius:12px; opacity:0.9;79 }80</style>81</head>82<body>83<div id="render-target">84 85 <!-- Top purple area -->86 <div class="topbar">87 <div class="status">88 <div>12:34</div>89 <div class="icons">90 <!-- small status icons -->91 <svg viewBox="0 0 24 24" width="30" height="30">92 <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>93 <path d="M8 12h8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>94 </svg>95 <svg viewBox="0 0 24 24" width="30" height="30">96 <path d="M4 8h16M4 12h12M4 16h8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>97 </svg>98 <svg viewBox="0 0 24 24" width="30" height="30">99 <path d="M5 14l4-4 4 4 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>100 </svg>101 <svg viewBox="0 0 24 24" width="30" height="30">102 <path d="M3 12h14l4-3v6l-4-3H3z" fill="none" stroke="#fff" stroke-width="2"></path>103 </svg>104 </div>105 </div>106 <div class="appbar">107 <!-- hamburger -->108 <svg viewBox="0 0 24 24" width="48" height="48">109 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none"></path>110 </svg>111 <div class="title">All Mail</div>112 <div class="right">113 <!-- pulse/zigzag icon -->114 <svg viewBox="0 0 24 24" width="48" height="48">115 <path d="M3 14l4-6 4 8 4-5 6 3" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>116 </svg>117 <!-- search icon -->118 <svg viewBox="0 0 24 24" width="48" height="48">119 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2.5" fill="none"></circle>120 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2.5" stroke-linecap="round"></path>121 </svg>122 </div>123 </div>124 </div>125 126 <!-- List items -->127 <div class="list">128 <!-- Email 1 -->129 <div class="item">130 <div class="sender-row">131 <span class="dot"></span>132 <span>Raghav Himatsingka</span>133 </div>134 <div class="subject">Secret 1 of Upcoming Masterclass For Your Child</div>135 <div class="preview-time">136 <div class="preview">Sneak Preview of your upcoming Masterclass!</div>137 <div class="time">14m</div>138 </div>139 <div class="star outline">140 <svg viewBox="0 0 24 24">141 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>142 </svg>143 </div>144 </div>145 146 <!-- Email 2 -->147 <div class="item">148 <div class="sender-row">149 <span>Me & dbwscratch.test.id6</span>150 </div>151 <div class="subject sub-dark">Re: Working from office</div>152 <div class="preview-time">153 <div class="preview">I will come office from 1 Sep 2023.</div>154 <div class="time">1h</div>155 </div>156 <div class="star outline">157 <svg viewBox="0 0 24 24">158 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>159 </svg>160 </div>161 </div>162 163 <!-- Email 3 -->164 <div class="item">165 <div class="sender-row">166 <span>Me & Cerebra</span>167 </div>168 <div class="subject">OFFICIAL WEEKEND PARTY</div>169 <div class="preview-time">170 <div class="preview">Thanks a lot.</div>171 <div class="time">2h</div>172 </div>173 <div class="star outline">174 <svg viewBox="0 0 24 24">175 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>176 </svg>177 </div>178 </div>179 180 <!-- Email 4 (Dim background + orange star) -->181 <div class="item dim">182 <div class="sender-row">183 <span class="dot"></span>184 <span>Glow Nurture</span>185 </div>186 <div class="subject">Your baby on Day 302</div>187 <div class="preview-time">188 <div class="preview"></div>189 <div class="time">2h</div>190 </div>191 <div class="star filled">192 <svg viewBox="0 0 24 24">193 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>194 </svg>195 </div>196 </div>197 198 <!-- Email 5 -->199 <div class="item">200 <div class="sender-row">201 <span>Cerebra Research</span>202 </div>203 <div class="subject sub-dark">Event organiser</div>204 <div class="preview-time">205 <div class="preview">Hello, I am organising a small event on 14th August...</div>206 <div class="time">2h</div>207 </div>208 <div class="star outline">209 <svg viewBox="0 0 24 24">210 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>211 </svg>212 </div>213 </div>214 215 <!-- Email 6 -->216 <div class="item">217 <div class="sender-row">218 <span>Me to Cerebra</span>219 </div>220 <div class="subject sub-dark">Business meeting with the Clients</div>221 <div class="preview-time">222 <div class="preview">We have a business meeting on August 30, 2023, s...</div>223 <div class="time">2h</div>224 </div>225 <div class="star outline">226 <svg viewBox="0 0 24 24">227 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>228 </svg>229 </div>230 </div>231 232 <!-- Email 7 -->233 <div class="item">234 <div class="sender-row">235 <span>Google</span>236 </div>237 <div class="subject sub-dark">Security alert</div>238 <div class="preview-time">239 <div class="preview">Newton by CloudMagic was granted access to your...</div>240 <div class="time">4h</div>241 </div>242 <div class="star outline">243 <svg viewBox="0 0 24 24">244 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>245 </svg>246 </div>247 </div>248 249 <!-- Email 8 -->250 <div class="item">251 <div class="sender-row">252 <span>Webex</span>253 </div>254 <div class="subject">Limited Spots. Unlimited Potential.</div>255 <div class="preview-time">256 <div class="preview"></div>257 <div class="time"></div>258 </div>259 <div class="star outline">260 <svg viewBox="0 0 24 24">261 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z"></path>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Bottom navigation -->268 <div class="bottom-nav">269 <!-- Inbox tray -->270 <div class="nav-icon">271 <svg viewBox="0 0 24 24">272 <path d="M3 5h18v10l-4 4H7l-4-4V5zm4 10h10" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linejoin="round"></path>273 </svg>274 </div>275 <!-- Star -->276 <div class="nav-icon">277 <svg viewBox="0 0 24 24">278 <path d="M12 3l3.1 6.3 7 1-5.1 4.7 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5.1-4.7 7-1z" fill="none" stroke="#e6e6e6" stroke-width="2"></path>279 </svg>280 </div>281 <!-- Envelope -->282 <div class="nav-icon">283 <svg viewBox="0 0 24 24">284 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#e6e6e6" stroke-width="2"></rect>285 <path d="M3 8l9 6 9-6" stroke="#e6e6e6" stroke-width="2" fill="none"></path>286 </svg>287 </div>288 <!-- Feed/Waves -->289 <div class="nav-icon">290 <svg viewBox="0 0 24 24">291 <path d="M3 16c3-3 6-3 9 0s6 3 9 0" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round"></path>292 <path d="M5 10c2-2 4-2 6 0s4 2 6 0" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round"></path>293 </svg>294 </div>295 <!-- Compose pencil -->296 <div class="nav-icon">297 <div class="circle">298 <svg viewBox="0 0 24 24">299 <path d="M4 18l1-5 9-9 5 5-9 9-6 0z" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linejoin="round"></path>300 </svg>301 </div>302 </div>303 </div>304 305 <!-- Gesture bar -->306 <div class="gesture"></div>307</div>308</body>309</html>