GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Event Detail - Holi</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #E7EDF5; /* light bluish-gray */15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 28px;22    left: 36px;23    right: 36px;24    height: 60px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-size: 32px;29    color: #ffffff;30    opacity: 0.85;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 16px;36  }37  .battery {38    display: inline-flex;39    align-items: center;40    gap: 10px;41    color: #ffffff;42  }43  .battery svg { display: block; }44 45  /* Header with close and action icons */46  .header {47    position: absolute;48    top: 160px;49    left: 36px;50    right: 36px;51    display: flex;52    align-items: center;53    justify-content: space-between;54  }55  .close-btn svg { width: 72px; height: 72px; }56  .actions {57    display: inline-flex;58    align-items: center;59    gap: 40px;60  }61  .actions svg { width: 56px; height: 56px; }62 63  /* Content */64  .content {65    position: absolute;66    left: 60px;67    right: 60px;68    top: 360px;69  }70  .title {71    font-size: 88px;72    font-weight: 700;73    margin-bottom: 20px;74    letter-spacing: -0.5px;75  }76  .date {77    font-size: 38px;78    color: #8A99A8;79    margin-bottom: 28px;80  }81  .divider {82    height: 2px;83    background: #B5C0CA;84    margin: 30px 0;85  }86  .label {87    font-size: 42px;88    color: #222;89    margin-bottom: 24px;90  }91 92  .row {93    display: flex;94    align-items: center;95    gap: 24px;96    padding: 22px 0;97  }98  .row .text {99    font-size: 44px;100    color: #111;101  }102  .row svg { width: 52px; height: 52px; }103 104  /* Bottom gesture bar */105  .gesture {106    position: absolute;107    bottom: 0;108    left: 0;109    right: 0;110    height: 140px;111    background: #000;112  }113  .gesture .pill {114    position: absolute;115    width: 240px;116    height: 12px;117    background: #CFCFCF;118    border-radius: 12px;119    left: 50%;120    bottom: 40px;121    transform: translateX(-50%);122    opacity: 0.9;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="status-bar">131    <div class="status-left">8:36</div>132    <div class="status-right">133      <div class="battery">134        <svg width="38" height="22" viewBox="0 0 38 22">135          <rect x="2" y="4" width="30" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"></rect>136          <rect x="5" y="7" width="24" height="8" rx="2" fill="#fff"></rect>137          <rect x="34" y="8" width="3" height="6" rx="1" fill="#fff"></rect>138        </svg>139        <span>100%</span>140      </div>141    </div>142  </div>143 144  <!-- Header -->145  <div class="header">146    <div class="close-btn" aria-label="Close">147      <svg viewBox="0 0 72 72">148        <line x1="12" y1="12" x2="60" y2="60" stroke="#000" stroke-width="6" stroke-linecap="round"></line>149        <line x1="60" y1="12" x2="12" y2="60" stroke="#000" stroke-width="6" stroke-linecap="round"></line>150      </svg>151    </div>152    <div class="actions">153      <!-- Radio ring icon -->154      <svg viewBox="0 0 56 56" aria-label="Mark as complete">155        <circle cx="28" cy="28" r="18" fill="none" stroke="#4A7FF2" stroke-width="6"></circle>156        <circle cx="28" cy="28" r="8" fill="#79A7FF"></circle>157      </svg>158      <!-- Pencil icon -->159      <svg viewBox="0 0 56 56" aria-label="Edit">160        <path d="M38 10l8 8-24 24-10 2 2-10z" fill="#000"></path>161        <path d="M32 16l8 8" stroke="#000" stroke-width="2"></path>162      </svg>163      <!-- Vertical dots -->164      <svg viewBox="0 0 12 56" aria-label="More options">165        <circle cx="6" cy="10" r="3" fill="#000"></circle>166        <circle cx="6" cy="28" r="3" fill="#000"></circle>167        <circle cx="6" cy="46" r="3" fill="#000"></circle>168      </svg>169    </div>170  </div>171 172  <!-- Main content -->173  <div class="content">174    <div class="title">Holi</div>175    <div class="date">Wed 23 Aug 2023</div>176 177    <div class="divider"></div>178 179    <div class="label">Description</div>180 181    <div class="divider"></div>182 183    <div class="row">184      <!-- Location pin icon -->185      <svg viewBox="0 0 52 52" aria-hidden="true">186        <path d="M26 6c-8 0-14 6-14 14 0 10 14 26 14 26s14-16 14-26c0-8-6-14-14-14z" fill="none" stroke="#000" stroke-width="3"></path>187        <circle cx="26" cy="20" r="5" fill="none" stroke="#000" stroke-width="3"></circle>188      </svg>189      <div class="text">India</div>190    </div>191 192    <div class="row">193      <!-- Bell icon -->194      <svg viewBox="0 0 52 52" aria-hidden="true">195        <path d="M26 44c3 0 6-3 6-6H20c0 3 3 6 6 6z" fill="none" stroke="#000" stroke-width="3"></path>196        <path d="M40 34H12c0-10 4-16 14-16s14 6 14 16z" fill="none" stroke="#000" stroke-width="3"></path>197        <path d="M16 34l-4 0" stroke="#000" stroke-width="3" stroke-linecap="round"></path>198      </svg>199      <div class="text">5 minutes before</div>200    </div>201  </div>202 203  <!-- Bottom gesture bar -->204  <div class="gesture">205    <div class="pill"></div>206  </div>207</div>208</body>209</html>