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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #E0E0E0; font-size: 36px; letter-spacing: 0.5px;21  }22  .status-icons { display: flex; align-items: center; gap: 26px; }23  .icon { width: 48px; height: 48px; }24  .small-icon { width: 40px; height: 40px; }25 26  /* Header / Title section */27  .header {28    margin-top: 140px;29    padding: 0 44px 24px 44px;30    position: relative;31  }32  .close-btn {33    position: absolute; left: 44px; top: -4px;34    width: 72px; height: 72px;35    display: flex; align-items: center; justify-content: center;36    opacity: 0.9;37  }38  .title-line {39    display: flex; align-items: center; gap: 24px;40    margin-top: 36px;41  }42  .blue-dot {43    width: 48px; height: 48px; border-radius: 10px; background: #4A90E2;44  }45  .title-text {46    font-size: 72px; font-weight: 600; line-height: 1.2; color: #F5F5F5;47  }48  .subtitle {49    margin-left: 72px;50    font-size: 40px; color: #BDBDBD; margin-top: 12px;51  }52  .header-actions {53    position: absolute; right: 40px; top: 20px; display: flex; gap: 30px; opacity: 0.9;54  }55 56  /* Content rows */57  .row {58    display: flex; align-items: center;59    padding: 34px 44px;60    border-top: 1px solid rgba(255,255,255,0.04);61  }62  .row .left-icon { margin-right: 28px; }63  .row-title {64    font-size: 44px; color: #8BC34A; font-weight: 600;65  }66  .row-sub {67    font-size: 36px; color: #BDBDBD; margin-top: 10px;68  }69  .grow { flex: 1; }70  .share-icon { margin-left: 10px; }71 72  .row-neutral .row-title {73    color: #EEEEEE; font-weight: 500;74  }75  .row-neutral .row-sub {76    color: #AFAFAF;77  }78 79  /* Google Meet placeholder image */80  .img-placeholder {81    width: 88px; height: 88px;82    background: #E0E0E0; border: 1px solid #BDBDBD;83    display: flex; align-items: center; justify-content: center;84    color: #757575; font-size: 24px; border-radius: 10px;85  }86 87  /* Bottom gesture bar */88  .gesture-bar {89    position: absolute; bottom: 60px; left: 50%;90    transform: translateX(-50%);91    width: 360px; height: 16px; border-radius: 8px; background: #E8E8E8; opacity: 0.9;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status Bar -->99  <div class="status-bar">100    <div>11:47</div>101    <div class="status-icons">102      <!-- Simple status glyphs -->103      <svg class="small-icon" viewBox="0 0 24 24" fill="#E0E0E0"><circle cx="12" cy="12" r="10"/></svg>104      <svg class="small-icon" viewBox="0 0 24 24" fill="#E0E0E0"><rect x="4" y="8" width="16" height="8" rx="2"/></svg>105      <svg class="small-icon" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>106      <svg class="small-icon" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2"><path d="M3 12h18"/></svg>107      <div style="display:flex;align-items:center;gap:10px;">108        <svg class="small-icon" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2"><path d="M19 7v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7"/><path d="M7 7V5h10v2"/></svg>109        <span style="font-size:34px;color:#E0E0E0;">100%</span>110      </div>111    </div>112  </div>113 114  <!-- Header -->115  <div class="header">116    <!-- Close X -->117    <div class="close-btn">118      <svg class="icon" viewBox="0 0 24 24" stroke="#E0E0E0" stroke-width="2" fill="none">119        <path d="M6 6l12 12M18 6L6 18"/>120      </svg>121    </div>122 123    <!-- Title -->124    <div class="title-line">125      <div class="blue-dot"></div>126      <div class="title-text">Book events</div>127    </div>128    <div class="subtitle">Saturday, Sep 30 • 12:00 – 1:00 AM</div>129 130    <!-- Header actions -->131    <div class="header-actions">132      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">133        <path d="M3 21l6-2 9-9-4-4-9 9-2 6z"/>134      </svg>135      <svg class="icon" viewBox="0 0 24 24" fill="#E0E0E0">136        <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>137      </svg>138    </div>139  </div>140 141  <!-- Google Meet Row -->142  <div class="row">143    <div class="img-placeholder left-icon">[IMG: Google Meet]</div>144    <div class="grow">145      <div class="row-title">Join with Google Meet</div>146      <div class="row-sub">meet.google.com/tyr-wgyw-myc</div>147    </div>148    <div class="share-icon">149      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">150        <path d="M14 9l5-5v8M19 4l-7 7"/>151        <path d="M5 12v8h14"/>152      </svg>153    </div>154  </div>155 156  <!-- Reminder Row -->157  <div class="row row-neutral">158    <div class="left-icon">159      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">160        <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/>161        <path d="M18 16V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/>162      </svg>163    </div>164    <div class="grow">165      <div class="row-title" style="color:#EEEEEE;font-weight:500;">30 minutes before</div>166    </div>167  </div>168 169  <!-- Calendar Row -->170  <div class="row row-neutral">171    <div class="left-icon">172      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">173        <rect x="3" y="5" width="18" height="16" rx="2"/>174        <path d="M8 3v4M16 3v4M3 9h18"/>175      </svg>176    </div>177    <div class="grow">178      <div class="row-title">Events</div>179      <div class="row-sub">kariniversen641@gmail.com</div>180    </div>181  </div>182 183  <!-- Spacer area (rest of dark screen) -->184  <div style="height: 1600px;"></div>185 186  <!-- Bottom gesture bar -->187  <div class="gesture-bar"></div>188</div>189</body>190</html>