GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Leave Approval - Gmail Thread</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #eaeaea;11 }12 13 /* Status bar */14 .status-bar {15 height: 88px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16 color: #ffffff; font-size: 34px;17 }18 .status-icons { display: flex; gap: 28px; align-items: center; }19 .icon-dot { width: 22px; height: 22px; background: #fff; border-radius: 50%; opacity: 0.9; }20 .battery {21 width: 60px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;22 }23 .battery::after {24 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #fff; border-radius: 2px;25 }26 .battery .level { position: absolute; left: 4px; top: 4px; width: 40px; height: 16px; background: #4caf50; }27 28 /* Subject bar */29 .subject-bar {30 padding: 28px 36px; border-bottom: 1px solid #2a2a2a;31 }32 .subject-top { display: flex; align-items: center; justify-content: space-between; }33 .subject-left { display: flex; align-items: center; gap: 26px; }34 .subject-title { font-size: 52px; font-weight: 600; }35 .badge {36 margin-left: 18px; padding: 10px 18px; background: #30343a; color: #bfc9d7; border-radius: 22px; font-size: 28px;37 }38 .subject-actions { display: flex; gap: 36px; align-items: center; }39 .star { margin-left: 12px; }40 41 /* Generic icon style */42 svg { display: block; }43 .ico { width: 56px; height: 56px; }44 45 /* Thread area */46 .thread { padding: 24px 36px 160px; }47 .msg { padding: 30px 0 38px; border-bottom: 1px solid #262626; }48 .msg-header { display: flex; align-items: center; justify-content: space-between; }49 .msg-left { display: flex; align-items: center; gap: 26px; }50 .avatar { width: 110px; height: 110px; border-radius: 55px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 46px; color: #111; }51 .avatar.purple { background: #b39ddb; }52 .avatar.gray { background: #9aa4aa; }53 .sender { font-size: 44px; font-weight: 700; color: #eaeaea; }54 .time { font-size: 30px; color: #9da4aa; margin-left: 16px; }55 .to-line { font-size: 32px; color: #b2b6bb; display: flex; align-items: center; gap: 8px; }56 .msg-actions { display: flex; gap: 32px; align-items: center; }57 .msg-body { margin: 28px 0 0 136px; font-size: 44px; line-height: 1.4; color: #e6e6e6; }58 59 .link { color: #66a1ff; font-size: 36px; margin: 24px 0 0 136px; }60 61 /* Quoted block */62 .quoted { margin: 28px 0 0 136px; color: #c4c4c4; font-size: 34px; line-height: 1.5; }63 .quote-line { border-left: 5px solid #5e75a6; padding-left: 20px; margin-top: 16px; color: #cbd5ff; font-size: 36px; }64 65 /* Bottom action buttons */66 .actions-bar {67 position: absolute; bottom: 180px; left: 36px; right: 36px;68 display: flex; justify-content: space-between; gap: 28px;69 }70 .action-btn {71 flex: 1; min-height: 120px; border-radius: 70px;72 background: #1f1f1f; border: 2px solid #3a3a3a; color: #eaeaea;73 display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 40px; font-weight: 600;74 }75 .floating-mail {76 position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);77 background: #2b2f36; border: 2px solid #3c4250; color: #fff; height: 90px; padding: 0 28px; border-radius: 45px;78 display: flex; align-items: center; gap: 18px;79 }80 .badge-count {81 background: #e56c6c; color: #fff; min-width: 58px; height: 58px; padding: 0 18px; border-radius: 29px;82 display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700;83 }84 .camera-ico {85 position: absolute; bottom: 86px; right: 60px; width: 90px; height: 90px; border: 2px solid #4c4c4c;86 border-radius: 18px; background: #1b1b1b; display: flex; align-items: center; justify-content: center;87 }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- Status bar -->94 <div class="status-bar">95 <div>2:38</div>96 <div class="status-icons">97 <div class="icon-dot" title="Notifications"></div>98 <div class="icon-dot" title="Signal"></div>99 <div class="icon-dot" title="Wi‑Fi"></div>100 <div class="battery"><div class="level"></div></div>101 </div>102 </div>103 104 <!-- Subject/Header bar -->105 <div class="subject-bar">106 <div class="subject-top">107 <div class="subject-left">108 <!-- Back chevron -->109 <svg class="ico" viewBox="0 0 48 48">110 <path d="M30 10 L12 24 L30 38" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>111 </svg>112 <div class="subject-title">Leave Approval <span class="badge">Inbox</span></div>113 </div>114 <div class="subject-actions">115 <!-- Download -->116 <svg class="ico" viewBox="0 0 48 48">117 <path d="M24 8 V28" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round"/>118 <path d="M16 22 L24 30 L32 22" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round"/>119 <rect x="10" y="34" width="28" height="6" rx="2" fill="#ffffff"/>120 </svg>121 <!-- Trash -->122 <svg class="ico" viewBox="0 0 48 48">123 <rect x="12" y="16" width="24" height="24" rx="4" stroke="#ffffff" stroke-width="4" fill="none"/>124 <rect x="18" y="10" width="12" height="4" fill="#ffffff"/>125 </svg>126 <!-- Mail -->127 <svg class="ico" viewBox="0 0 48 48">128 <rect x="8" y="12" width="32" height="24" rx="4" stroke="#ffffff" stroke-width="4" fill="none"/>129 <path d="M10 14 L24 24 L38 14" stroke="#ffffff" stroke-width="4" fill="none"/>130 </svg>131 <!-- Kebab -->132 <svg class="ico" viewBox="0 0 48 48">133 <circle cx="24" cy="12" r="4" fill="#ffffff"/>134 <circle cx="24" cy="24" r="4" fill="#ffffff"/>135 <circle cx="24" cy="36" r="4" fill="#ffffff"/>136 </svg>137 <!-- Star -->138 <svg class="ico star" viewBox="0 0 48 48">139 <path d="M24 6 L29 18 L42 18 L31 26 L35 38 L24 30 L13 38 L17 26 L6 18 L19 18 Z" stroke="#ffffff" stroke-width="3" fill="none"/>140 </svg>141 </div>142 </div>143 </div>144 145 <!-- Thread -->146 <div class="thread">147 <!-- Message 1 -->148 <div class="msg">149 <div class="msg-header">150 <div class="msg-left">151 <div class="avatar purple">C</div>152 <div>153 <div class="sender">Cerebra Research <span class="time">12:44 PM</span></div>154 <div class="to-line">to me155 <svg width="24" height="24" viewBox="0 0 24 24">156 <path d="M6 9 L12 15 L18 9" stroke="#b2b2b2" stroke-width="3" fill="none" stroke-linecap="round"/>157 </svg>158 </div>159 </div>160 </div>161 <div class="msg-actions">162 <!-- Reply quick icon -->163 <svg class="ico" viewBox="0 0 48 48">164 <path d="M28 12 L14 24 L28 36" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165 <path d="M18 24 H35" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round"/>166 </svg>167 <!-- More -->168 <svg class="ico" viewBox="0 0 48 48">169 <circle cx="24" cy="12" r="4" fill="#ffffff"/>170 <circle cx="24" cy="24" r="4" fill="#ffffff"/>171 <circle cx="24" cy="36" r="4" fill="#ffffff"/>172 </svg>173 </div>174 </div>175 <div class="msg-body">176 Approve my three days of leave177 </div>178 </div>179 180 <!-- Message 2 -->181 <div class="msg">182 <div class="msg-header">183 <div class="msg-left">184 <div class="avatar gray">C</div>185 <div>186 <div class="sender">Cerebra Research <span class="time">2:08 PM</span></div>187 <div class="to-line">to Cerebra188 <svg width="24" height="24" viewBox="0 0 24 24">189 <path d="M6 9 L12 15 L18 9" stroke="#b2b2b2" stroke-width="3" fill="none" stroke-linecap="round"/>190 </svg>191 </div>192 </div>193 </div>194 <div class="msg-actions">195 <!-- Reply quick icon -->196 <svg class="ico" viewBox="0 0 48 48">197 <path d="M28 12 L14 24 L28 36" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198 <path d="M18 24 H35" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round"/>199 </svg>200 <!-- More -->201 <svg class="ico" viewBox="0 0 48 48">202 <circle cx="24" cy="12" r="4" fill="#ffffff"/>203 <circle cx="24" cy="24" r="4" fill="#ffffff"/>204 <circle cx="24" cy="36" r="4" fill="#ffffff"/>205 </svg>206 </div>207 </div>208 <div class="msg-body">209 As per Business requirements, your leave cannot be approved for now210 </div>211 212 <div class="link">Hide quoted text</div>213 214 <div class="quoted">215 On Tue, Aug 8, 2023, 12:44 PM Cerebra Research216 <dbwscratch.test.id4@gmail.com> wrote:217 <div class="quote-line">Approve my three days of leave</div>218 </div>219 </div>220 </div>221 222 <!-- Bottom Actions -->223 <div class="actions-bar">224 <div class="action-btn">225 <svg width="56" height="56" viewBox="0 0 48 48">226 <path d="M30 12 L16 24 L30 36" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227 </svg>228 Reply229 </div>230 <div class="action-btn">231 <svg width="56" height="56" viewBox="0 0 48 48">232 <path d="M32 12 L18 24 L32 36" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>233 <path d="M22 12 L8 24 L22 36" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 Reply all236 </div>237 <div class="action-btn">238 <svg width="56" height="56" viewBox="0 0 48 48">239 <path d="M18 12 L32 24 L18 36" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 Forward242 </div>243 </div>244 245 <!-- Floating mail pill -->246 <div class="floating-mail">247 <svg width="44" height="44" viewBox="0 0 48 48">248 <rect x="8" y="12" width="32" height="24" rx="4" stroke="#ffffff" stroke-width="4" fill="none"/>249 <path d="M10 14 L24 24 L38 14" stroke="#ffffff" stroke-width="4" fill="none"/>250 </svg>251 <div class="badge-count">99</div>252 </div>253 254 <div class="camera-ico">255 <svg width="52" height="52" viewBox="0 0 48 48">256 <rect x="8" y="12" width="32" height="24" rx="6" stroke="#ffffff" stroke-width="3" fill="none"/>257 <circle cx="24" cy="24" r="8" stroke="#ffffff" stroke-width="3" fill="none"/>258 </svg>259 </div>260 261</div>262</body>263</html>