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>Price Summary</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF; border-radius: 0; box-shadow: none;12    color: #17213A;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 48px;20    color: #6B7280;21    font-size: 38px; letter-spacing: 0.2px;22  }23  .status-right { display: flex; gap: 28px; align-items: center; }24 25  /* Header */26  .header {27    height: 160px;28    display: flex; align-items: center;29    padding: 0 48px;30    border-bottom: 1px solid #E5E7EB;31    gap: 28px;32  }33  .header-title {34    font-size: 56px; font-weight: 600; color: #1C2845;35  }36  .icon-btn {37    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;38  }39  .icon { width: 48px; height: 48px; }40 41  /* Content blocks */42  .content { padding: 40px 56px; }43  .traveler-block { display: flex; gap: 24px; padding: 28px 0 48px; }44  .t-left { flex: 1; }45  .t-right { width: 300px; text-align: right; }46  .traveler-title { font-size: 46px; font-weight: 700; margin-bottom: 12px; }47  .line { font-size: 40px; color: #4B5563; line-height: 1.5; }48  .amount { font-size: 44px; color: #17213A; line-height: 1.6; }49  .divider { height: 2px; background: #D1D5DB; margin: 36px 0 24px; }50 51  /* Totals */52  .total-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: 20px; }53  .total-label { font-size: 64px; font-weight: 700; color: #1C2845; }54  .total-amount { font-size: 72px; font-weight: 800; color: #0F1B33; }55  .caption { text-align: right; font-size: 32px; color: #5B6472; margin-top: 16px; }56 57  /* Bottom gesture bar (visual only) */58  .gesture-bar {59    position: absolute; bottom: 0; left: 0; width: 100%; height: 130px;60    background: #000000;61  }62  .gesture-pill {63    width: 400px; height: 12px; background: #E5E7EB; border-radius: 6px;64    position: absolute; left: 50%; transform: translateX(-50%); bottom: 56px;65  }66</style>67</head>68<body>69<div id="render-target">70 71  <!-- Status bar -->72  <div class="status-bar">73    <div>4:16</div>74    <div class="status-right">75      <!-- simple wifi icon -->76      <svg class="icon" viewBox="0 0 24 24" fill="#6B7280">77        <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6.5-5.2 1.4 1.4A7 7 0 0 1 12 13a7 7 0 0 1 5.1 1.7l1.4-1.4A8.9 8.9 0 0 0 12 11.2a8.9 8.9 0 0 0-6.5 2.1zm-3.3-3.6 1.4 1.4A12 12 0 0 1 12 8a12 12 0 0 1 8.4 3.1l1.4-1.4A14.1 14.1 0 0 0 12 6.2 14.1 14.1 0 0 0 2.2 9.7z"/>78      </svg>79      <!-- battery icon -->80      <svg class="icon" viewBox="0 0 24 24" fill="#6B7280">81        <rect x="2" y="6" width="18" height="12" rx="2"></rect>82        <rect x="21" y="9" width="2" height="6"></rect>83        <rect x="4" y="8" width="12" height="8" fill="#9CA3AF"></rect>84      </svg>85    </div>86  </div>87 88  <!-- Header -->89  <div class="header">90    <div class="icon-btn" aria-label="Close">91      <svg class="icon" viewBox="0 0 24 24" stroke="#1C2845" stroke-width="2" fill="none" stroke-linecap="round">92        <path d="M5 5l14 14M19 5L5 19"/>93      </svg>94    </div>95    <div class="header-title">Price summary</div>96  </div>97 98  <!-- Content -->99  <div class="content">100    <!-- Traveler 1 -->101    <div class="traveler-block">102      <div class="t-left">103        <div class="traveler-title">Traveler 1: Adult</div>104        <div class="line">Flight</div>105        <div class="line">Taxes and fees</div>106      </div>107      <div class="t-right">108        <div class="amount">$273.05</div>109        <div class="amount">$117.00</div>110        <div class="amount">$156.05</div>111      </div>112    </div>113 114    <!-- Traveler 2 -->115    <div class="traveler-block">116      <div class="t-left">117        <div class="traveler-title">Traveler 2: Adult</div>118        <div class="line">Flight</div>119        <div class="line">Taxes and fees</div>120      </div>121      <div class="t-right">122        <div class="amount">$273.05</div>123        <div class="amount">$117.00</div>124        <div class="amount">$156.05</div>125      </div>126    </div>127 128    <div class="divider"></div>129 130    <!-- Trip total -->131    <div class="total-row">132      <div class="total-label">Trip total</div>133      <div class="total-amount">$546.10</div>134    </div>135    <div class="caption">Rates are quoted in US dollars</div>136  </div>137 138  <!-- Bottom gesture bar -->139  <div class="gesture-bar">140    <div class="gesture-pill"></div>141  </div>142 143</div>144</body>145</html>