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>Upcoming Events - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1E1F21;13    font-family: Arial, Helvetica, sans-serif;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 32px 36px 0 36px;21    display: flex;22    justify-content: space-between;23    box-sizing: border-box;24    color: #fff;25    font-size: 38px;26    opacity: 0.95;27  }28  .status-left, .status-right {29    display: flex; align-items: center; gap: 20px;30  }31  .status-icon {32    width: 38px; height: 38px; border-radius: 50%;33    border: 2px solid rgba(255,255,255,0.7);34    opacity: 0.8;35  }36  .wifi svg, .battery svg { display: block; }37  .wifi { width: 44px; height: 44px; }38  .battery { width: 50px; height: 44px; }39 40  /* Top app bar */41  .top-appbar {42    height: 120px;43    display: flex; align-items: center; justify-content: space-between;44    padding: 0 30px;45  }46  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }47  .actions { display: flex; align-items: center; gap: 36px; }48  .icon-btn svg { width: 54px; height: 54px; }49  .icon-btn .accent { stroke: #E2B319; fill: none; stroke-width: 6; }50  .icon-btn .white { stroke: #FFFFFF; fill: none; stroke-width: 6; }51 52  /* Content */53  .content {54    padding: 26px 40px 0 40px;55  }56  .title-tag {57    display: inline-block;58    background: #8A6A1A;59    color: #FFFFFF;60    font-weight: 800;61    font-size: 64px;62    padding: 18px 24px;63    margin-top: 26px;64  }65  .edited-row {66    margin-top: 24px;67    display: flex; align-items: center; justify-content: space-between;68  }69  .edited-row .edited {70    color: #9AA0A6; font-size: 34px;71  }72  .calendar-icon svg { width: 56px; height: 56px; opacity: 0.7; }73  .divider {74    height: 2px; background: #2C2E31; margin: 34px 0 26px 0;75  }76  .list .item {77    font-size: 52px; color: #EDEDED; line-height: 1.3;78    margin-bottom: 26px;79  }80 81  /* Bottom bar */82  .bottom-bar {83    position: absolute; left: 0; right: 0; bottom: 120px;84    height: 140px; background: #242629;85    display: flex; align-items: center; justify-content: flex-end;86    padding: 0 36px; box-sizing: border-box;87  }88  .pencil svg { width: 56px; height: 56px; opacity: 0.9; }89 90  /* Home indicator */91  .home-indicator {92    position: absolute; bottom: 40px; left: 50%;93    transform: translateX(-50%);94    width: 240px; height: 12px; border-radius: 12px;95    background: #E6E6E6; opacity: 0.9;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status Bar -->103  <div class="status-bar">104    <div class="status-left">105      <div class="time">7:07</div>106      <div class="status-icon"></div>107      <div class="status-icon"></div>108      <div class="status-icon"></div>109      <div class="status-icon"></div>110      <div style="width:8px;height:8px;border-radius:50%;background:#BDBDBD;opacity:0.6;"></div>111    </div>112    <div class="status-right">113      <div class="wifi">114        <svg viewBox="0 0 24 24">115          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.5"/>116          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.7"/>117          <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>118          <circle cx="12" cy="19" r="1.8" fill="#fff"/>119        </svg>120      </div>121      <div class="battery">122        <svg viewBox="0 0 28 16">123          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>124          <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"/>125          <rect x="3" y="4" width="14" height="8" fill="#fff" opacity="0.8"/>126        </svg>127      </div>128    </div>129  </div>130 131  <!-- Top App Bar -->132  <div class="top-appbar">133    <div class="back-btn">134      <svg viewBox="0 0 24 24">135        <path d="M15 5L8 12l7 7" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>136      </svg>137    </div>138    <div class="actions">139      <div class="icon-btn">140        <svg viewBox="0 0 24 24">141          <circle cx="12" cy="12" r="7" class="accent"/>142          <circle cx="12" cy="12" r="3" class="accent"/>143        </svg>144      </div>145      <div class="icon-btn">146        <svg viewBox="0 0 24 24">147          <path d="M8 4l8 5-4 2-4-2z" class="white"/>148          <path d="M12 11l-2 7" class="white"/>149        </svg>150      </div>151      <div class="icon-btn">152        <svg viewBox="0 0 24 24">153          <circle cx="12" cy="5" r="2.2" fill="#FFFFFF"/>154          <circle cx="12" cy="12" r="2.2" fill="#FFFFFF"/>155          <circle cx="12" cy="19" r="2.2" fill="#FFFFFF"/>156        </svg>157      </div>158    </div>159  </div>160 161  <!-- Content -->162  <div class="content">163    <div class="title-tag">Upcoming Events</div>164 165    <div class="edited-row">166      <div class="edited">Edited: 09-25 17:27</div>167      <div class="calendar-icon">168        <svg viewBox="0 0 24 24">169          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#9AA0A6" stroke-width="2"/>170          <rect x="3" y="5" width="18" height="4" fill="#9AA0A6" opacity="0.5"/>171          <line x1="7" y1="2.5" x2="7" y2="6" stroke="#9AA0A6" stroke-width="2"/>172          <line x1="17" y1="2.5" x2="17" y2="6" stroke="#9AA0A6" stroke-width="2"/>173        </svg>174      </div>175    </div>176 177    <div class="divider"></div>178 179    <div class="list">180      <div class="item">International Education week</div>181      <div class="item">EMPLOYMENT FAIR</div>182    </div>183  </div>184 185  <!-- Bottom bar and home indicator -->186  <div class="bottom-bar">187    <div class="pencil">188      <svg viewBox="0 0 24 24">189        <path d="M4 18l1-4 9-9 4 4-9 9-4 1z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>190        <path d="M13 5l4 4" stroke="#fff" stroke-width="2"/>191      </svg>192    </div>193  </div>194 195  <div class="home-indicator"></div>196</div>197</body>198</html>