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>Who's flying UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12  }13 14  /* Top status bar */15  .status-bar {16    height: 120px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; color: #424242; font-size: 40px;17  }18  .status-icons { display: flex; align-items: center; gap: 22px; }19  .icon-dot { width: 12px; height: 12px; background: #616161; border-radius: 50%; display: inline-block; }20  .icon-shape { width: 28px; height: 20px; border-radius: 4px; border: 3px solid #616161; display: inline-block; }21 22  /* Title area */23  .title-area { position: relative; padding: 30px 56px 20px 56px; }24  .cancel-link { position: absolute; right: 56px; top: 30px; color: #1a73e8; font-size: 44px; text-decoration: none; }25  h1 { margin: 60px 0 30px 0; font-size: 68px; font-weight: 700; color: #212121; }26  .divider { height: 2px; background: #E0E0E0; width: 100%; }27 28  /* Content sections */29  .content { padding: 30px 56px; }30  .section-title { font-size: 42px; font-weight: 700; color: #212121; margin: 40px 0 30px 0; }31  .row { display: flex; align-items: center; justify-content: space-between; margin: 30px 0; }32  .row label { font-size: 40px; color: #212121; }33 34  /* Counter control */35  .counter {36    width: 360px; height: 128px; border: 4px solid #BDBDBD; border-radius: 18px;37    display: flex; align-items: center; justify-content: space-between; padding: 0 36px;38  }39  .counter .value { font-size: 48px; color: #212121; }40  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; cursor: default; }41  .icon-btn svg { width: 48px; height: 48px; }42  .icon-minus path { stroke: #1a73e8; stroke-width: 8; }43  .icon-plus path { stroke: #1a73e8; stroke-width: 8; }44 45  /* Cabin class radios */46  .radio-list { margin-top: 20px; }47  .radio-item { display: flex; align-items: center; gap: 28px; padding: 26px 0; }48  .radio-outer {49    width: 48px; height: 48px; border-radius: 50%;50    border: 6px solid #BDBDBD; box-sizing: border-box; position: relative;51  }52  .radio-item.selected .radio-outer { border-color: #1a73e8; }53  .radio-inner {54    width: 18px; height: 18px; background: transparent; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);55  }56  .radio-item.selected .radio-inner { background: #1a73e8; }57  .radio-text { font-size: 40px; color: #212121; }58 59  /* Bottom action bar */60  .bottom-bar {61    position: absolute; left: 0; right: 0; bottom: 160px;62    height: 220px; border-top: 2px solid #E0E0E0; background: #FFFFFF;63    display: flex; align-items: center; justify-content: flex-end; padding: 0 56px;64  }65  .primary-btn {66    width: 480px; height: 120px; border-radius: 22px; background: #0B66F5;67    color: #FFFFFF; font-size: 44px; font-weight: 600; display: flex; align-items: center; justify-content: center;68  }69 70  /* Device navigation pill area */71  .nav-area {72    position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #000000;73    display: flex; align-items: center; justify-content: center;74  }75  .nav-pill { width: 380px; height: 16px; background: #CFCFCF; border-radius: 12px; opacity: 0.9; }76</style>77</head>78<body>79<div id="render-target">80  <!-- Status bar -->81  <div class="status-bar">82    <div>3:37</div>83    <div class="status-icons">84      <span class="icon-dot"></span>85      <span class="icon-dot"></span>86      <span class="icon-dot"></span>87      <span class="icon-dot"></span>88      <span class="icon-shape"></span>89    </div>90  </div>91 92  <!