GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Rome to Florence - UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11  }12  #render-target {13    position: relative;14    width: 1080px;15    height: 2400px;16    overflow: hidden;17    background: #EEF2F7;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 110px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    color: #2e2e2e;32    font-size: 38px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39 40  /* Header */41  .header {42    position: absolute;43    top: 120px;44    left: 0;45    width: 1080px;46    height: 160px;47    display: flex;48    align-items: center;49    padding: 0 36px;50  }51  .back-btn {52    width: 80px;53    height: 80px;54    display: flex;55    align-items: center;56    justify-content: center;57  }58  .title-wrap {59    margin-left: 16px;60  }61  .title {62    font-size: 54px;63    font-weight: 700;64    color: #0f1850;65    display: inline-flex;66    align-items: center;67    gap: 14px;68  }69  .subtitle {70    margin-top: 10px;71    font-size: 36px;72    color: #7b7f90;73  }74  .edit-icon {75    width: 40px;76    height: 40px;77    border-radius: 8px;78    background: #e6e8f3;79    display: inline-flex;80    align-items: center;81    justify-content: center;82  }83 84  .filter-pill {85    position: absolute;86    right: 40px;87    top: 152px;88    height: 76px;89    padding: 0 30px;90    background: #8ED35E;91    color: #fff;92    border-radius: 38px;93    display: flex;94    align-items: center;95    gap: 16px;96    font-size: 36px;97    font-weight: 700;98    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;99  }100 101  /* Date tabs */102  .tabs {103    position: absolute;104    top: 300px;105    left: 0;106    width: 1080px;107    height: 120px;108    background: #F6F8FC;109    border-top: 1px solid #d7dbe7;110    border-bottom: 1px solid #d7dbe7;111    display: flex;112    align-items: center;113    padding: 0 20px;114    gap: 28px;115  }116  .tab {117    color: #8b8fa4;118    font-size: 38px;119    padding: 18px 26px;120    border-radius: 40px;121  }122  .tab.active {123    background: #4C74E5;124    color: #fff;125    padding: 22px 30px;126    font-weight: 700;127  }128 129  /* Loader arcs */130  .loader-wrap {131    position: absolute;132    top: 820px;133    left: 270px;134    width: 540px;135    height: 540px;136  }137 138  /* Bottom gesture bar (for visual similarity) */139  .gesture-bar {140    position: absolute;141    bottom: 40px;142    left: 300px;143    width: 480px;144    height: 12px;145    border-radius: 6px;146    background: #CFCFD4;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status Bar -->154  <div class="status-bar">155    <div>3:31</div>156    <div class="status-right">157      <!-- simple status icons -->158      <svg width="34" height="34" viewBox="0 0 24 24" fill="#6b6f7f"><path d="M2 8l10-6 10 6v8l-10 6-10-6V8zm10 10l6-3.6V9.5L12 6 6 9.5v4.9L12 18z"/></svg>159      <svg width="34" height="34" viewBox="0 0 24 24" fill="#6b6f7f"><path d="M20 8v8a2 2 0 0 1-2 2H7l-3 3V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/></svg>160      <svg width="34" height="34" viewBox="0 0 24 24" fill="#6b6f7f"><path d="M16 22H8a2 2 0 0 1-2-2V6h12v14a2 2 0 0 1-2 2zM9 2h6v2H9z"/></svg>161      <svg width="34" height="34" viewBox="0 0 24 24" fill="#6b6f7f"><path d="M20 7h-2V5a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2H4a1 1 0 0 0-1 1v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a1 1 0 0 0-1-1zm-4 0H8V6h8v1z"/></svg>162    </div>163  </div>164 165  <!-- Header -->166  <div class="header">167    <div class="back-btn">168      <svg width="48" height="48" viewBox="0 0 24 24" fill="#1E2459">169        <path d="M15.5 4.5l-8 7.5 8 7.5" stroke="#1E2459" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170      </svg>171    </div>172    <div class="title-wrap">173      <div class="title">174        <span>Rome</span>175        <svg width="36" height="36" viewBox="0 0 24 24" fill="#1E2459"><path d="M5 12h14M13 5l7 7-7 7" stroke="#1E2459" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>176        <span>Florence</span>177        <div class="edit-icon">178          <svg width="22" height="22" viewBox="0 0 24 24" fill="#1E2459"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>179        </div>180      </div>181      <div class="subtitle">no results</div>182    </div>183  </div>184 185  <!-- Filter pill -->186  <div class="filter-pill">187    <svg width="34" height="34" viewBox="0 0 24 24" fill="none">188      <path d="M4 6h16M8 12h8M11 18h2" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round"/>189    </svg>190    Departure191  </div>192 193  <!-- Date Tabs Row -->194  <div class="tabs">195    <div class="tab active">Wed 15, Nov</div>196    <div class="tab">Thu 16, Nov</div>197    <div class="tab">Fri 17, Nov</div>198    <div class="tab">Sat 18, Nov</div>199    <div class="tab">Sun 19, Nov</div>200  </div>201 202  <!-- Loader Arcs -->203  <div class="loader-wrap">204    <svg width="540" height="540" viewBox="0 0 400 400">205      <!-- green outer arc -->206      <path d="M80 270 A170 170 0 0 1 330 150" stroke="#8ED35E" stroke-width="34" fill="none" stroke-linecap="round"/>207      <!-- orange middle arc -->208      <path d="M140 280 A120 120 0 0 0 310 230" stroke="#E4A341" stroke-width="36" fill="none" stroke-linecap="round"/>209      <!-- blue inner arc -->210      <path d="M190 270 A70 70 0 0 1 245 210" stroke="#4C74E5" stroke-width="32" fill="none" stroke-linecap="round"/>211    </svg>212  </div>213 214  <!-- Bottom gesture bar -->215  <div class="gesture-bar"></div>216 217</div>218</body>219</html>