GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Calendar Event UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #11161B; color: #FFFFFF;12  }13 14  /* Status bar */15  .statusbar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px;18    padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #DADFE6; font-size: 42px; letter-spacing: 0.5px;21  }22  .status-icons { display: flex; align-items: center; gap: 26px; }23  .icon { display: inline-flex; align-items: center; justify-content: center; }24  .icon svg { fill: none; stroke: #DADFE6; stroke-width: 3px; }25 26  /* Close button near header */27  .close-btn {28    position: absolute; top: 160px; left: 40px;29    width: 64px; height: 64px; border-radius: 6px;30    display: flex; align-items: center; justify-content: center;31  }32  .close-btn svg { stroke: #C9CDD3; stroke-width: 5px; }33 34  /* Event content area */35  .content {36    position: absolute; top: 220px; left: 40px; right: 40px;37  }38  .title-row {39    display: flex; align-items: center; justify-content: space-between;40  }41  .title-left {42    display: flex; align-items: center; gap: 26px;43  }44  .event-dot {45    width: 40px; height: 40px; border-radius: 8px; background: #4DA3FF;46  }47  .title {48    font-size: 66px; line-height: 78px; font-weight: 600; color: #F4F6F8;49  }50  .title-actions { display: flex; align-items: center; gap: 28px; }51  .action-btn { width: 60px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }52  .action-btn svg { stroke: #C9CDD3; stroke-width: 3.5px; }53 54  .subline {55    margin-top: 26px;56    font-size: 36px; color: #B8BDC4;57  }58 59  .share-wrap {60    margin-top: 36px;61  }62  .share-pill {63    display: inline-flex; align-items: center; gap: 20px;64    padding: 20px 34px;65    border: 2px solid #2B3137; border-radius: 60px;66    background: #1A2026;67    color: #D5DBE2; font-size: 36px; font-weight: 600;68  }69  .share-pill svg { stroke: #8EB2FF; stroke-width: 3px; }70 71  .divider-space { height: 40px; }72 73  .row {74    display: flex; align-items: center; gap: 24px;75    padding: 26px 0;76    border-bottom: 1px solid transparent; /* visual spacing only */77  }78  .row .label { font-size: 38px; color: #E8EBEF; }79  .row .value { font-size: 36px; color: #B8BDC4; }80 81  .row-icon svg { stroke: #C9CDD3; stroke-width: 3px; }82 83  .section {84    margin-top: 26px;85  }86  .section-title {87    font-size: 40px; color: #E8EBEF; margin-bottom: 8px;88  }89  .section-detail {90    font-size: 34px; color: #B8BDC4;91  }92 93  /* Bottom safe area visual blank space */94  .bottom-blank {95    position: absolute; left: 0; right: 0; bottom: 0;96    height: 120px;97    background: #11161B;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Android-style status bar -->105  <div class="statusbar">106    <div>12:54</div>107    <div class="status-icons">108      <!-- Calendar small badge -->109      <div class="icon">110        <svg width="36" height="36" viewBox="0 0 36 36">111          <rect x="5" y="8" width="26" height="22" rx="3" stroke="#DADFE6"></rect>112          <line x1="10" y1="5" x2="10" y2="12"></line>113          <line x1="26" y1="5" x2="26" y2="12"></line>114        </svg>115      </div>116      <!-- Play/triangle icon -->117      <div class="icon">118        <svg width="32" height="32" viewBox="0 0 32 32">119          <polygon points="10,6 26,16 10,26" stroke="#DADFE6"></polygon>120        </svg>121      </div>122      <!-- Do Not Disturb circle -->123      <div class="icon">124        <svg width="32" height="32" viewBox="0 0 32 32">125          <circle cx="16" cy="16" r="12" stroke="#DADFE6"></circle>126          <line x1="10" y1="16" x2="22" y2="16"></line>127        </svg>128      </div>129      <!-- WiFi -->130      <div class="icon">131        <svg width="40" height="28" viewBox="0 0 40 28">132          <path d="M4 10c8-8 24-8 32 0" />133          <path d="M10 16c6-6 14-6 20 0" />134          <path d="M16 22c4-4 8-4 12 0" />135          <circle cx="22" cy="24" r="2" fill="#DADFE6" stroke="none"></circle>136        </svg>137      </div>138      <!-- Notifications -->139      <div class="icon">140        <svg width="32" height="32" viewBox="0 0 32 32">141          <path d="M8 24h16l-2-4v-6a6 6 0 0 0-12 0v6l-2 4z"></path>142          <path d="M14 26a2 2 0 0 0 4 0"></path>143        </svg>144      </div>145      <!-- Battery -->146      <div class="icon">147        <svg width="46" height="28" viewBox="0 0 46 28">148          <rect x="2" y="6" width="36" height="16" rx="3"></rect>149          <rect x="6" y="9" width="26" height="10" rx="2" fill="#DADFE6" stroke="none"></rect>150          <rect x="38" y="10" width="6" height="8" rx="1"></rect>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Close button -->157  <div class="close-btn">158    <svg width="44" height="44" viewBox="0 0 44 44">159      <line x1="10" y1="10" x2="34" y2="34"></line>160      <line x1="34" y1="10" x2="10" y2="34"></line>161    </svg>162  </div>163 164  <!-- Main content -->165  <div class="content">166    <div class="title-row">167      <div class="title-left">168        <div class="event-dot"></div>169        <div class="title">Evansville EMT Conference.</div>170      </div>171      <div class="title-actions">172        <!-- Edit pencil -->173        <div class="action-btn">174          <svg width="42" height="42" viewBox="0 0 42 42">175            <path d="M10 28l0 4 4 0 16-16-4-4-16 16z"></path>176            <path d="M24 12l4 4"></path>177          </svg>178        </div>179        <!-- Vertical ellipsis -->180        <div class="action-btn">181          <svg width="42" height="42" viewBox="0 0 42 42">182            <circle cx="21" cy="10" r="3" fill="#C9CDD3" stroke="none"></circle>183            <circle cx="21" cy="21" r="3" fill="#C9CDD3" stroke="none"></circle>184            <circle cx="21" cy="32" r="3" fill="#C9CDD3" stroke="none"></circle>185          </svg>186        </div>187      </div>188    </div>189 190    <div class="subline">Today • 1:00 – 2:00 AM</div>191 192    <div class="share-wrap">193      <div class="share-pill">194        <svg width="42" height="42" viewBox="0 0 42 42">195          <circle cx="10" cy="21" r="4"></circle>196          <circle cx="32" cy="10" r="4"></circle>197          <circle cx="32" cy="32" r="4"></circle>198          <line x1="14" y1="19" x2="28" y2="12"></line>199          <line x1="14" y1="23" x2="28" y2="30"></line>200        </svg>201        <span>Share</span>202      </div>203    </div>204 205    <div class="divider-space"></div>206 207    <!-- Reminder row -->208    <div class="row">209      <div class="row-icon icon">210        <svg width="46" height="46" viewBox="0 0 46 46">211          <path d="M12 32h22l-2-4v-9a9 9 0 0 0-18 0v9l-2 4z"></path>212          <path d="M20 34a3 3 0 0 0 6 0"></path>213        </svg>214      </div>215      <div class="label">30 minutes before</div>216    </div>217 218    <!-- Calendar / account section -->219    <div class="section">220      <div class="row">221        <div class="row-icon icon">222          <svg width="44" height="44" viewBox="0 0 44 44">223            <rect x="6" y="10" width="32" height="24" rx="4"></rect>224            <line x1="14" y1="6" x2="14" y2="14"></line>225            <line x1="30" y1="6" x2="30" y2="14"></line>226            <line x1="6" y1="18" x2="38" y2="18"></line>227          </svg>228        </div>229        <div>230          <div class="section-title">Events</div>231          <div class="section-detail">lucaskramer733@gmail.com</div>232        </div>233      </div>234    </div>235  </div>236 237  <div class="bottom-blank"></div>238</div>239</body>240</html>