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 UI</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, "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18  /* Status bar (dark) */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #0f1417;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 38px;32    letter-spacing: 1px;33  }34  .status-left { flex: 1; }35  .status-center { width: 200px; text-align: center; opacity: 0.6; }36  .status-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .status-icon { display: inline-flex; align-items: center; justify-content: center; }42  /* Top app bar */43  .app-bar {44    position: absolute;45    top: 110px;46    left: 0;47    width: 1080px;48    height: 168px;49    background: #ffffff;50    box-shadow: 0 2px 6px rgba(0,0,0,0.08);51    display: flex;52    align-items: center;53    padding: 0 32px;54    box-sizing: border-box;55  }56  .close-btn {57    width: 88px;58    height: 88px;59    display: flex;60    align-items: center;61    justify-content: center;62    cursor: default;63  }64  .title {65    margin-left: 8px;66    font-size: 58px;67    font-weight: 700;68    color: #111;69  }70  /* List */71  .list {72    position: absolute;73    top: 278px; /* status + app bar */74    left: 0;75    right: 0;76  }77  .list-item {78    height: 160px;79    display: flex;80    align-items: center;81    padding: 0 36px;82    box-sizing: border-box;83    border-bottom: 1px solid #e6ebef;84    font-size: 46px;85    color: #1c1f22;86  }87  /* Bottom gesture area */88  .gesture-area {89    position: absolute;90    left: 0;91    bottom: 0;92    width: 1080px;93    height: 120px;94    background: #000000;95    display: flex;96    align-items: center;97    justify-content: center;98  }99  .gesture-pill {100    width: 280px;101    height: 12px;102    background: #d9d9d9;103    border-radius: 12px;104    opacity: 0.9;105  }106</style>107</head>108<body>109<div id="render-target">110  <!-- Dark status bar -->111  <div class="status-bar">112    <div class="status-left">6:01</div>113    <div class="status-center">•</div>114    <div class="status-right">115      <!-- Simple icons to mimic system status -->116      <span class="status-icon" title="Cellular">117        <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9" xmlns="http://www.w3.org/2000/svg">118          <rect x="3" y="14" width="3" height="7" rx="1"></rect>119          <rect x="8" y="12" width="3" height="9" rx="1"></rect>120          <rect x="13" y="9" width="3" height="12" rx="1"></rect>121          <rect x="18" y="6" width="3" height="15" rx="1"></rect>122        </svg>123      </span>124      <span class="status-icon" title="Wi‑Fi">125        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.9" xmlns="http://www.w3.org/2000/svg">126          <path d="M2 8c5.5-5 14.5-5 20 0"></path>127          <path d="M5 11c4-3.5 10-3.5 14 0"></path>128          <path d="M8 14c2.5-2 5.5-2 8 0"></path>129          <circle cx="12" cy="18" r="2" fill="#ffffff" stroke="none"></circle>130        </svg>131      </span>132      <span class="status-icon" title="Battery">133        <svg width="52" height="36" viewBox="0 0 28 16" xmlns="http://www.w3.org/2000/svg">134          <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>135          <rect x="3" y="5" width="14" height="6" rx="1" fill="#ffffff"/>136          <rect x="23" y="6" width="3" height="4" rx="1" fill="#ffffff"/>137        </svg>138      </span>139    </div>140  </div>141 142  <!-- App bar -->143  <div class="app-bar">144    <div class="close-btn" aria-label="Close">145      <svg width="56" height="56" viewBox="0 0 24 24" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg">146        <path d="M4 4 L20 20"></path>147        <path d="M20 4 L4 20"></path>148      </svg>149    </div>150    <div class="title">Add event</div>151  </div>152 153  <!-- List of event types -->154  <div class="list">155    <div class="list-item">Flight</div>156    <div class="list-item">Stay</div>157    <div class="list-item">Car rental</div>158    <div class="list-item">Train</div>159    <div class="list-item">Restaurant</div>160    <div class="list-item">Custom event</div>161  </div>162 163  <!-- Bottom gesture bar -->164  <div class="gesture-area">165    <div class="gesture-pill"></div>166  </div>167</div>168</body>169</html>