GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calendar Event - Transport</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #FFFFFF;11 }12 /* Status bar */13 .status-bar {14 height: 92px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;15 color: #EDEDED; font-size: 34px; letter-spacing: 0.5px;16 }17 .status-icons { display: flex; align-items: center; gap: 22px; }18 .icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }19 .icon svg { width: 100%; height: 100%; fill: none; stroke: #EDEDED; stroke-width: 4; }20 /* App bar */21 .app-bar {22 height: 160px; display: flex; align-items: center; padding: 0 30px;23 }24 .back-btn {25 width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;26 margin-right: 12px;27 }28 .back-btn svg { stroke: #BEB7C8; stroke-width: 12; }29 .title {30 font-size: 64px; font-weight: 500; flex: 1;31 }32 .save-btn {33 background: #CFA7F5; color: #1A1324; border-radius: 46px; padding: 22px 40px; font-size: 40px; font-weight: 600;34 }35 /* Account row */36 .account {37 padding: 22px 36px; display: flex; align-items: center; gap: 26px; border-top: 1px solid rgba(255,255,255,0.06);38 border-bottom: 1px solid rgba(255,255,255,0.06);39 }40 .avatar {41 width: 80px; height: 80px; border-radius: 40px; background: #D87EA0; display: flex; align-items: center; justify-content: center;42 color: #2B0D16; font-weight: 700; font-size: 40px;43 }44 .account-text { line-height: 1.4; }45 .account-top { display: flex; align-items: center; gap: 12px; }46 .blue-dot { width: 18px; height: 18px; background: #4FA8FF; border-radius: 9px; }47 .account-title { font-size: 38px; }48 .account-sub { font-size: 30px; color: #A3A3A3; }49 /* List items */50 .section { }51 .item {52 display: flex; align-items: center; padding: 28px 36px; border-bottom: 1px solid rgba(255,255,255,0.06);53 }54 .item .lead-icon { width: 68px; height: 68px; margin-right: 30px; }55 .item .lead-icon svg { width: 100%; height: 100%; stroke: #CFCFCF; stroke-width: 4; fill: none; }56 .item .label { font-size: 38px; color: #EDEDED; }57 .item .value { margin-left: auto; font-size: 38px; color: #EDEDED; }58 .subtext { font-size: 30px; color: #A3A3A3; margin-top: 6px; }59 /* Toggle */60 .toggle {61 width: 170px; height: 86px; border-radius: 43px; background: #3A3A3A; margin-left: auto; position: relative;62 }63 .toggle::before {64 content: ""; width: 74px; height: 74px; border-radius: 37px; background: #9B9B9B; position: absolute; top: 6px; left: 8px;65 }66 /* Buttons */67 .pill-btn {68 margin-left: 22px; padding: 22px 36px; background: #2E2E2E; border-radius: 38px; font-size: 34px; color: #DCDCDC; border: 1px solid rgba(255,255,255,0.12);69 }70 /* Google Meet row */71 .meet-icon {72 width: 68px; height: 68px; border-radius: 12px; background: #1F7A3E; display: flex; align-items: center; justify-content: center;73 margin-right: 30px;74 }75 .meet-icon div {76 width: 40px; height: 40px; background: #E0E0E0; border: 2px solid #BDBDBD; color: #222; display: flex; align-items: center; justify-content: center; font-size: 18px;77 }78 .row-end-x {79 width: 54px; height: 54px; margin-left: auto; display: flex; align-items: center; justify-content: center;80 }81 .row-end-x svg { stroke: #CFCFCF; stroke-width: 8; }82 /* Footer color row mock */83 .color-row { padding: 28px 36px; display: flex; align-items: center; gap: 26px; }84 .color-dot { width: 34px; height: 34px; background: #5C6BC0; border-radius: 17px; }85 .bottom-fade {86 position: absolute; bottom: 0; left: 0; right: 0; height: 120px;87 background: linear-gradient(to bottom, rgba(18,18,18,0), rgba(18,18,18,1));88 }89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status bar -->95 <div class="status-bar">96 <div>8:42</div>97 <div class="status-icons">98 <div class="icon">99 <!-- Train / transport icon simplified -->100 <svg viewBox="0 0 24 24">101 <rect x="5" y="6" width="14" height="10" rx="2" />102 <circle cx="8" cy="19" r="2" />103 <circle cx="16" cy="19" r="2" />104 </svg>105 </div>106 <div class="icon">107 <!-- Signal bars -->108 <svg viewBox="0 0 24 24">109 <rect x="2" y="14" width="3" height="8"/>110 <rect x="8" y="10" width="3" height="12"/>111 <rect x="14" y="6" width="3" height="16"/>112 <rect x="20" y="2" width="3" height="20"/>113 </svg>114 </div>115 <div class="icon">116 <!-- Wifi -->117 <svg viewBox="0 0 24 24">118 <path d="M2 8c5-4 15-4 20 0"/>119 <path d="M5 12c4-3 10-3 14 0"/>120 <path d="M8 16c3-2 5-2 8 0"/>121 <circle cx="12" cy="20" r="1.5" />122 </svg>123 </div>124 <div class="icon">125 <!-- Notification dot -->126 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>127 </div>128 <div class="icon">129 <!-- Battery -->130 <svg viewBox="0 0 24 24">131 <rect x="2" y="6" width="18" height="12" rx="2"/>132 <rect x="21" y="9" width="2" height="6"/>133 <rect x="4" y="8" width="10" height="8" fill="#EDEDED"/>134 </svg>135 </div>136 </div>137 </div>138 139 <!-- App bar with title and save -->140 <div class="app-bar">141 <div class="back-btn">142 <svg viewBox="0 0 24 24">143 <path d="M4 4 L20 20" />144 <path d="M20 4 L4 20" />145 </svg>146 </div>147 <div class="title">Transport</div>148 <div class="save-btn">Save</div>149 </div>150 151 <!-- Account row -->152 <div class="account">153 <div class="avatar">C</div>154 <div class="account-text">155 <div class="account-top">156 <div class="blue-dot"></div>157 <div class="account-title">Events</div>158 </div>159 <div class="account-sub">dbwscratch.test.id4@gmail.com</div>160 </div>161 </div>162 163 <!-- All-day toggle -->164 <div class="section">165 <div class="item">166 <div class="lead-icon">167 <!-- Clock icon -->168 <svg viewBox="0 0 24 24">169 <circle cx="12" cy="12" r="9"/>170 <path d="M12 6 L12 12 L17 14"/>171 </svg>172 </div>173 <div class="label">All-day</div>174 <div class="toggle"></div>175 </div>176 177 <!-- Start date and time -->178 <div class="item">179 <div class="label" style="margin-left: 98px;">Tue, Jul 25, 2023</div>180 <div class="value">2:00 PM</div>181 </div>182 183 <!-- End date and time -->184 <div class="item">185 <div class="label" style="margin-left: 98px;">Tue, Jul 25, 2023</div>186 <div class="value">3:00 PM</div>187 </div>188 189 <!-- Time zone -->190 <div class="item">191 <div class="lead-icon">192 <!-- Globe icon -->193 <svg viewBox="0 0 24 24">194 <circle cx="12" cy="12" r="10"/>195 <path d="M2 12 H22"/>196 <path d="M12 2 V22"/>197 <path d="M5 5 C8 7 16 7 19 5"/>198 <path d="M5 19 C8 17 16 17 19 19"/>199 </svg>200 </div>201 <div class="label">India Standard Time</div>202 </div>203 204 <!-- Repeat -->205 <div class="item">206 <div class="lead-icon">207 <!-- Refresh icon -->208 <svg viewBox="0 0 24 24">209 <path d="M6 9 A6 6 0 0 1 18 9 L20 7 M6 15 A6 6 0 0 0 18 15 L16 17"/>210 </svg>211 </div>212 <div class="label">Does not repeat</div>213 </div>214 215 <!-- Add people -->216 <div class="item">217 <div class="lead-icon">218 <!-- Person icon -->219 <svg viewBox="0 0 24 24">220 <circle cx="12" cy="8" r="4"/>221 <path d="M4 20 C4 14 20 14 20 20"/>222 </svg>223 </div>224 <div class="label">Add people</div>225 <div class="pill-btn">View schedules</div>226 </div>227 228 <!-- Google Meet -->229 <div class="item">230 <div class="meet-icon">231 <div>[IMG: Google Meet]</div>232 </div>233 <div>234 <div class="label" style="margin-right: 18px;">Google Meet</div>235 <div class="subtext">Video conferencing details added</div>236 </div>237 <div class="row-end-x">238 <svg viewBox="0 0 24 24">239 <path d="M5 5 L19 19 M19 5 L5 19"/>240 </svg>241 </div>242 </div>243 244 <!-- Add location -->245 <div class="item">246 <div class="lead-icon">247 <!-- Pin icon -->248 <svg viewBox="0 0 24 24">249 <path d="M12 3 C8 3 6 6 6 9 C6 13 12 21 12 21 C12 21 18 13 18 9 C18 6 16 3 12 3 Z"/>250 <circle cx="12" cy="9" r="3"/>251 </svg>252 </div>253 <div class="label">Add location</div>254 </div>255 256 <!-- Notification -->257 <div class="item" style="align-items: flex-start; flex-direction: column;">258 <div style="width:100%; display:flex; align-items:center;">259 <div class="lead-icon" style="margin-right:30px;">260 <!-- Bell icon -->261 <svg viewBox="0 0 24 24">262 <path d="M12 3 C9 5 8 7 8 10 V15 H4 V16 H20 V15 H16 V10 C16 7 15 5 12 3 Z"/>263 <circle cx="12" cy="20" r="2"/>264 </svg>265 </div>266 <div class="label">30 minutes before</div>267 <div class="row-end-x" style="margin-left:auto;">268 <svg viewBox="0 0 24 24">269 <path d="M5 5 L19 19 M19 5 L5 19"/>270 </svg>271 </div>272 </div>273 <div class="subtext" style="padding-left: 98px;">Add notification</div>274 </div>275 276 <!-- Default color row (partial) -->277 <div class="color-row">278 <div class="lead-icon" style="width:68px;height:68px;">279 <svg viewBox="0 0 24 24">280 <circle cx="12" cy="12" r="10"/>281 </svg>282 </div>283 <div class="label">Default color</div>284 <div class="color-dot"></div>285 </div>286 </div>287 288 <div class="bottom-fade"></div>289</div>290</body>291</html>