GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Search Placeholder UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #F2F2F2;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #212121;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; width: 100%; height: 140px;19    background: #0A3A78; color: #FFFFFF;20    display: flex; align-items: center; justify-content: space-between;21    padding: 0 36px; box-sizing: border-box;22  }23  .sb-left { display: flex; align-items: center; gap: 22px; }24  .sb-right { display: flex; align-items: center; gap: 28px; }25  .time { font-size: 44px; font-weight: 700; }26 27  .icon { width: 44px; height: 44px; }28  .icon svg { width: 100%; height: 100%; fill: none; stroke: #FFFFFF; stroke-width: 4; }29 30  /* Illustration placeholders */31  .img-box {32    background: #E0E0E0; border: 1px solid #BDBDBD;33    display: flex; justify-content: center; align-items: center;34    color: #757575; font-size: 36px; text-align: center;35    box-sizing: border-box;36    position: absolute;37  }38  .airplane { left: 60px; top: 200px; width: 560px; height: 200px; }39  .cloud-big { right: 80px; top: 250px; width: 280px; height: 160px; }40  .cloud-mid { right: 100px; top: 1280px; width: 220px; height: 120px; }41  .person { left: 80px; top: 1000px; width: 720px; height: 820px; }42 43  /* Bottom card */44  .bottom-card {45    position: absolute; left: 0; right: 0; bottom: 120px;46    background: #FFFFFF; border-top-left-radius: 36px; border-top-right-radius: 36px;47    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);48    padding: 90px 80px 120px; box-sizing: border-box;49    text-align: center;50  }51  .bottom-card h1 {52    margin: 0 0 40px 0;53    font-size: 56px; line-height: 1.2; font-weight: 800; color: #333333;54  }55  .bottom-card a {56    color: #1976D2; font-size: 44px; font-weight: 600; text-decoration: none;57  }58 59  /* Home indicator */60  .home-indicator {61    position: absolute; left: 50%; transform: translateX(-50%);62    bottom: 28px; width: 260px; height: 16px;63    background: #000000; opacity: 0.25; border-radius: 10px;64  }65</style>66</head>67<body>68<div id="render-target">69 70  <!-- Status bar -->71  <div class="status-bar">72    <div class="sb-left">73      <div class="time">3:38</div>74      <!-- simple dot indicator -->75      <div class="icon">76        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#FFFFFF" stroke="none"/></svg>77      </div>78      <!-- alarm icon -->79      <div class="icon">80        <svg viewBox="0 0 24 24">81          <path d="M6 8a6 6 0 1 0 12 0a6 6 0 1 0-12 0Z"/>82          <path d="M12 6v3l2 2" stroke-linecap="round" stroke-linejoin="round"/>83        </svg>84      </div>85    </div>86    <div class="sb-right">87      <!-- Wi-Fi -->88      <div class="icon">89        <svg viewBox="0 0 24 24">90          <path d="M3 9c5-5 13-5 18 0"/>91          <path d="M6 12c3.5-3.5 8-3.5 11.9 0"/>92          <path d="M9 15c2-2 4.9-2 7 0"/>93          <circle cx="12" cy="18" r="1.8" fill="#FFFFFF" stroke="none"/>94        </svg>95      </div>96      <!-- Battery -->97      <div class="icon">98        <svg viewBox="0 0 28 24">99          <rect x="2" y="6" width="20" height="12" rx="2" />100          <rect x="22" y="9" width="4" height="6" rx="1" />101          <rect x="4" y="8" width="12" height="8" rx="1" fill="#FFFFFF" stroke="none"/>102        </svg>103      </div>104    </div>105  </div>106 107  <!-- Illustration placeholders -->108  <div class="img-box airplane">[IMG: Airplane illustration]</div>109  <div class="img-box cloud-big">[IMG: Cloud graphic]</div>110  <div class="img-box cloud-mid">[IMG: Small cloud]</div>111  <div class="img-box person">[IMG: Person with binoculars illustration]</div>112 113  <!-- Bottom card with message -->114  <div class="bottom-card">115    <h1>Look out for flexible ticket options...</h1>116    <a href="#">Change search</a>117  </div>118 119  <!-- Home indicator -->120  <div class="home-indicator"></div>121</div>122</body>123</html>