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>Skyscanner Mock UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0d1a22;15    color: #eaf3f6;16  }17 18  /* General layout */19  .screen-padding { padding: 0 60px; }20  .status-bar { height: 90px; display: flex; align-items: center; padding: 0 40px; color: #c9d7de; font-weight: 600; font-size: 36px; opacity: 0.75; }21  .status-bar .right { margin-left: auto; display: flex; gap: 26px; align-items: center; }22  .logo-wrap { margin-top: 40px; display: flex; align-items: center; gap: 24px; }23  .brand { font-size: 72px; font-weight: 700; color: #7fe8f6; letter-spacing: 0.5px; }24 25  /* Services row */26  .services { margin-top: 80px; display: flex; justify-content: space-between; }27  .service { width: 300px; text-align: center; }28  .service .circle {29    width: 180px; height: 180px; margin: 0 auto 24px auto;30    background: #7fe8f6; border-radius: 50%;31    display: flex; align-items: center; justify-content: center;32  }33  .service .label { font-size: 42px; font-weight: 700; color: #e9f3f6; }34 35  /* Info cards */36  .card-row { margin-top: 70px; display: flex; justify-content: space-between; }37  .info-card {38    width: 300px; height: 260px; background: #2c3a45; border-radius: 34px;39    padding: 28px; box-sizing: border-box;40    display: flex; flex-direction: column; gap: 24px;41    box-shadow: 0 6px 0 rgba(0,0,0,0.2) inset;42  }43  .card-icon { width: 86px; height: 86px; border-radius: 50%; background: #badfdc; display: flex; align-items: center; justify-content: center; }44  .info-card .title { font-size: 40px; font-weight: 800; line-height: 1.1; }45 46  /* Featured card */47  .featured { margin-top: 70px; background: #0e2231; border-radius: 40px; overflow: hidden; }48  .featured .copy { padding: 60px; }49  .featured h2 { margin: 0 0 24px 0; font-size: 80px; line-height: 1.05; }50  .featured p { margin: 0; font-size: 40px; color: #c9d7de; }51  .featured .photo {52    margin-top: 20px; width: 100%; height: 420px;53    background: #E0E0E0; border-top: 1px solid #BDBDBD;54    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;55  }56 57  /* Bottom navigation */58  .bottom-nav {59    position: absolute; left: 0; bottom: 0;60    width: 1080px; height: 220px; background: #0f171e; border-top: 1px solid #1e2a35;61    display: flex; justify-content: space-around; align-items: center;62  }63  .nav-item { width: 280px; text-align: center; position: relative; }64  .nav-icon { width: 86px; height: 86px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; color: #c9d7de; }65  .nav-label { font-size: 36px; color: #c9d7de; }66  .nav-item.active .nav-icon { color: #7fe8f6; }67  .nav-item.active .nav-label { color: #7fe8f6; }68  .blue-dot { position: absolute; right: 130px; top: 34px; width: 18px; height: 18px; background: #1e86ff; border-radius: 50%; }69  .home-indicator {70    position: absolute; left: 50%; transform: translateX(-50%);71    bottom: 24px; width: 340px; height: 16px; background: #2a3642; border-radius: 10px; opacity: 0.8;72  }73 74  /* SVG helpers */75  .circle svg, .card-icon svg { width: 72px; height: 72px; }76  .circle svg, .card-icon svg, .nav-icon svg { display: block; }77  .circle svg { color: #0d1a22; }78  .card-icon svg { color: #0d1a22; }79</style>80</head>81<body>82<div id="render-target">83 84  <!-- Status bar (simplified) -->85  <div class="status-bar">86    1:4387    <div class="right">88      <span>◯</span>89      <span>⌂</span>90      <span>🔋</span>91    </div>92  </div>93 94  <div class="screen-padding">95    <!-- Logo -->96    <div class="logo-wrap">97      <svg width="120" height="60" viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">98        <g fill="#7fe8f6">99          <path d="M10 40c18-14 36-14 54 0H10z"/>100          <circle cx="16" cy="24" r="3"/>101          <circle cx="28" cy="20" r="3"/>102          <circle cx="40" cy="18" r="3"/>103          <circle cx="52" cy="20" r="3"/>104          <circle cx="64" cy="24" r="3"/>105        </g>106      </svg>107      <div class="brand">Skyscanner</div>108    </div>109 110    <!-- Services -->111    <div class="services">112      <div class="service">113        <div class="circle">114          <!-- Plane icon -->115          <svg viewBox="0 0 24 24">116            <path d="M2 13l7-2 3-7 2 1-2 6 8 2-1 2-7-1-5 5-2-1 4-5-7-1z" fill="currentColor"></path>117          </svg>118        </div>119        <div class="label">Flights</div>120      </div>121      <div class="service">122        <div class="circle">123          <!-- Bed icon -->124          <svg viewBox="0 0 24 24">125            <rect x="2" y="11" width="20" height="5" rx="1" fill="currentColor"></rect>126            <rect x="4" y="8" width="8" height="3" rx="1" fill="currentColor"></rect>127            <rect x="14" y="8" width="6" height="3" rx="1" fill="currentColor"></rect>128            <rect x="3" y="16" width="2" height="4" fill="currentColor"></rect>129            <rect x="19" y="16" width="2" height="4" fill="currentColor"></rect>130          </svg>131        </div>132        <div class="label">Hotels</div>133      </div>134      <div class="service">135        <div class="circle">136          <!-- Car icon -->137          <svg viewBox="0 0 24 24">138            <rect x="4" y="10" width="16" height="6" rx="2" fill="currentColor"></rect>139            <path d="M6 10l2-3h8l2 3" stroke="currentColor" stroke-width="2" fill="none"></path>140            <circle cx="8" cy="17" r="2" fill="currentColor"></circle>141            <circle cx="16" cy="17" r="2" fill="currentColor"></circle>142          </svg>143        </div>144        <div class="label">Car Rental</div>145      </div>146    </div>147 148    <!-- Info cards -->149    <div class="card-row">150      <div class="info-card">151        <div class="card-icon">152          <!-- Globe icon -->153          <svg viewBox="0 0 24 24">154            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"></circle>155            <path d="M3 12h18M12 3c3 3 3 15 0 18M7 6c2 2 8 2 10 0M7 18c2-2 8-2 10 0" stroke="currentColor" stroke-width="1.6" fill="none"></path>156          </svg>157        </div>158        <div class="title">Explore everywhere</div>159      </div>160      <div class="info-card">161        <div class="card-icon">162          <!-- Tag icon -->163          <svg viewBox="0 0 24 24">164            <path d="M3 7v6l8 8 10-10-8-8H7a4 4 0 0 0-4 4z" stroke="currentColor" stroke-width="2" fill="none"></path>165            <circle cx="9" cy="9" r="1.8" fill="currentColor"></circle>166          </svg>167        </div>168        <div class="title">Hot hotel deals</div>169      </div>170      <div class="info-card">171        <div class="card-icon">172          <!-- Question icon -->173          <svg viewBox="0 0 24 24">174            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle>175            <path d="M9 9a3 3 0 1 1 5 2c-1 1-2 1.5-2 3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></path>176            <circle cx="12" cy="17.5" r="1.3" fill="currentColor"></circle>177          </svg>178        </div>179        <div class="title">12 ways we help you</div>180      </div>181    </div>182 183    <!-- Featured block -->184    <div class="featured" style="margin-bottom: 240px;">185      <div class="copy">186        <h2>Where should I go in 2024?</h2>187        <p>Stay on-budget but don’t compromise on adventure this year.</p>188        <div class="photo">189          [IMG: Ocean city skyline]190        </div>191      </div>192    </div>193  </div>194 195  <!-- Bottom navigation -->196  <div class="bottom-nav">197    <div class="nav-item active">198      <div class="nav-icon">199        <!-- Explore icon (sunrise + wave) -->200        <svg viewBox="0 0 24 24">201          <path d="M3 16c3 2 7 2 10 0 3 2 5 2 8 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></path>202          <path d="M12 6a4 4 0 0 1 4 4H8a4 4 0 0 1 4-4z" fill="currentColor"></path>203          <path d="M4 12h16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.7"></path>204        </svg>205      </div>206      <div class="nav-label">Explore</div>207    </div>208    <div class="nav-item">209      <div class="nav-icon">210        <!-- Trips icon (suitcase) -->211        <svg viewBox="0 0 24 24">212          <rect x="5" y="7" width="14" height="12" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect>213          <rect x="9" y="5" width="6" height="2" rx="1" fill="currentColor"></rect>214        </svg>215      </div>216      <div class="nav-label">Trips</div>217    </div>218    <div class="nav-item">219      <div class="nav-icon">220        <!-- Profile icon (user) -->221        <svg viewBox="0 0 24 24">222          <circle cx="12" cy="9" r="4" fill="currentColor"></circle>223          <path d="M4 20c2.5-4 13.5-4 16 0" stroke="currentColor" stroke-width="2" fill="none"></path>224        </svg>225      </div>226      <div class="nav-label">Profile</div>227      <span class="blue-dot"></span>228    </div>229  </div>230 231  <div class="home-indicator"></div>232</div>233</body>234</html>