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>Add event</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111827;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    background: #12171A;27    color: #E5E7EB;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    font-size: 36px;33    letter-spacing: 1px;34  }35  .status-left { flex: 1; }36  .status-right {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .status-dot {42    width: 18px; height: 18px; border-radius: 50%; background: #D1D5DB; opacity: .9;43  }44  .status-pill {45    width: 34px; height: 20px; border-radius: 10px; background: #D1D5DB;46  }47 48  /* App bar */49  .app-bar {50    position: absolute;51    top: 120px;52    left: 0;53    width: 100%;54    height: 160px;55    background: #FFFFFF;56    box-shadow: 0 2px 6px rgba(0,0,0,0.12);57    display: flex;58    align-items: center;59    padding: 0 30px;60    box-sizing: border-box;61  }62  .back-btn {63    width: 96px; height: 96px;64    display: flex; align-items: center; justify-content: center;65    margin-right: 18px;66  }67  .title {68    font-size: 64px;69    font-weight: 700;70    color: #0F172A;71  }72  .list {73    position: absolute;74    top: 280px; /* below app bar */75    left: 0;76    right: 0;77    bottom: 140px; /* above gesture bar */78    overflow: hidden;79    background: #FFFFFF;80  }81  .list-item {82    height: 150px;83    display: flex;84    align-items: center;85    padding: 0 30px;86    box-sizing: border-box;87    font-size: 48px;88    color: #111827;89    border-bottom: 2px solid #E5EAF0;90  }91 92  /* Gesture bar */93  .gesture-area {94    position: absolute;95    left: 0; right: 0; bottom: 0;96    height: 140px;97    background: #000000;98    display: flex;99    align-items: center;100    justify-content: center;101  }102  .gesture-pill {103    width: 320px;104    height: 12px;105    background: #E5E7EB;106    border-radius: 8px;107    opacity: 0.9;108  }109 110  /* SVG icon sizing helper */111  svg { display: block; }112</style>113</head>114<body>115  <div id="render-target">116    <!-- Status Bar -->117    <div class="status-bar">118      <div class="status-left">6:02</div>119      <div class="status-right">120        <div class="status-dot"></div>121        <div class="status-dot" style="width: 22px; height: 22px;"></div>122        <div class="status-dot"></div>123        <div class="status-dot"></div>124        <div class="status-pill"></div>125      </div>126    </div>127 128    <!-- App Bar -->129    <div class="app-bar">130      <div class="back-btn" aria-label="Close">131        <!-- X icon -->132        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2.2" stroke-linecap="round">133          <path d="M6 6l12 12M18 6L6 18"/>134        </svg>135      </div>136      <div class="title">Add event</div>137    </div>138 139    <!-- List -->140    <div class="list">141      <div class="list-item">Flight</div>142      <div class="list-item">Stay</div>143      <div class="list-item">Car rental</div>144      <div class="list-item">Train</div>145      <div class="list-item">Restaurant</div>146      <div class="list-item">Custom event</div>147    </div>148 149    <!-- Gesture Bar -->150    <div class="gesture-area">151      <div class="gesture-pill"></div>152    </div>153  </div>154</body>155</html>