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>Travel Results UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #1F1F1F;14  }15 16  /* Top blue system bar */17  .top-blue {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 310px;21    background: #0D3D8B;22  }23  .status-row {24    height: 80px;25    display: flex; align-items: center;26    padding: 0 40px; color: #fff; font-weight: 600; font-size: 40px;27  }28  .status-icons {29    display: flex; align-items: center; gap: 22px; margin-left: 24px; color: #fff; font-size: 28px;30  }31  .icon-chip {32    width: 72px; height: 44px; background: rgba(255,255,255,0.9);33    border-radius: 6px; display: flex; align-items: center; justify-content: center;34    color: #0D3D8B; font-weight: 700; font-size: 26px;35  }36  .status-right {37    margin-left: auto; display: flex; align-items: center; gap: 20px;38  }39  .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }40  .battery {41    width: 28px; height: 50px; border: 3px solid #fff; border-radius: 4px; position: relative;42  }43  .battery::after {44    content: ""; position: absolute; top: -10px; left: 8px; width: 12px; height: 6px; background: #fff; border-radius: 2px;45  }46 47  /* Search bar */48  .search-wrapper {49    position: absolute; left: 54px; right: 54px; top: 170px;50    border: 12px solid #F5B642; border-radius: 28px; background: #fff;51    box-shadow: 0 4px 0 rgba(0,0,0,0.06);52  }53  .search-bar {54    height: 120px; display: flex; align-items: center; padding: 0 28px; gap: 24px;55    font-size: 40px; color: #333; font-weight: 600;56  }57  .back-icon {58    width: 56px; height: 56px;59  }60  .back-icon svg { width: 56px; height: 56px; }61  .search-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }62 63  /* Toolbar row */64  .toolbar {65    position: absolute; top: 330px; left: 0; right: 0;66    height: 120px; display: flex; align-items: center; justify-content: space-around;67    border-bottom: 1px solid #E5E5E5; color: #333;68  }69  .tool-item {70    display: flex; align-items: center; gap: 18px; font-size: 36px;71  }72  .tool-item svg { width: 44px; height: 44px; stroke: #333; fill: none; stroke-width: 5; }73 74  /* Result list area */75  .content {76    position: absolute; top: 450px; left: 36px; right: 36px; bottom: 160px;77    overflow: hidden;78  }79  .result {80    display: grid; grid-template-columns: 300px 1fr; gap: 36px;81    padding: 30px 8px; align-items: start;82  }83  .img-placeholder {84    width: 300px; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;85    border-radius: 18px; display: flex; justify-content: center; align-items: center;86    color: #757575; font-size: 30px; text-align: center;87  }88  .skeleton-line {89    height: 56px; background: #F1F1F1; border-radius: 16px; margin-bottom: 24px;90  }91  .skeleton-line.short { width: 46%; }92  .skeleton-line.mid { width: 78%; }93  .skeleton-line.long { width: 92%; }94  .divider {95    height: 1px; background: #E0E0E0; margin: 8px 0 26px 0;96  }97 98  /* Bottom gesture bar */99  .bottom-black {100    position: absolute; bottom: 0; left: 0; right: 0; height: 140px; background: #000;101  }102  .home-indicator {103    position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);104    width: 280px; height: 12px; background: #D8D8D8; border-radius: 8px;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Top blue area with status icons -->112  <div class="top-blue">113    <div class="status-row">114      <div>3:01</div>115      <div class="status-icons">116        <div class="icon-chip">oyo</div>117        <div class="icon-chip">ebay</div>118        <div class="icon-chip">▶︎</div>119        <div class="status-dot"></div>120      </div>121      <div class="status-right">122        <!-- Simple wifi icon -->123        <svg width="50" height="40" viewBox="0 0 50 40">124          <path d="M4 12c10-10 32-10 42 0" stroke="#fff" stroke-width="4" fill="none" />125          <path d="M10 18c7-7 23-7 30 0" stroke="#fff" stroke-width="4" fill="none" />126          <path d="M18 24c4-4 10-4 14 0" stroke="#fff" stroke-width="4" fill="none" />127          <circle cx="25" cy="30" r="3" fill="#fff"></circle>128        </svg>129        <div class="battery"></div>130      </div>131    </div>132 133    <!-- Search Bar -->134    <div class="search-wrapper">135      <div class="search-bar">136        <div class="back-icon">137          <svg viewBox="0 0 24 24">138            <path d="M15 5l-7 7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139          </svg>140        </div>141        <div class="search-text">Budapest · Aug 2 - Aug 6</div>142      </div>143    </div>144  </div>145 146  <!-- Toolbar -->147  <div class="toolbar">148    <div class="tool-item">149      <svg viewBox="0 0 24 24">150        <path d="M12 3v6M12 21v-6" stroke-linecap="round"/>151        <path d="M8 7l4-4 4 4" stroke-linecap="round"/>152        <path d="M8 17l4 4 4-4" stroke-linecap="round"/>153      </svg>154      <div>Sort</div>155    </div>156    <div class="tool-item">157      <svg viewBox="0 0 24 24">158        <path d="M4 6h12M4 12h16M4 18h10" stroke-linecap="round"/>159        <circle cx="18" cy="6" r="2" stroke-width="3"/>160        <circle cx="12" cy="12" r="2" stroke-width="3"/>161        <circle cx="16" cy="18" r="2" stroke-width="3"/>162      </svg>163      <div>Filter</div>164    </div>165    <div class="tool-item">166      <svg viewBox="0 0 24 24">167        <path d="M3 6l7-3 11 5-7 3-11-5z" />168        <path d="M3 6v10l11 5V14" />169        <path d="M17 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" />170      </svg>171      <div>Map</div>172    </div>173  </div>174 175  <!-- Content list -->176  <div class="content">177    <div class="result">178      <div class="img-placeholder">[IMG: Hotel Photo]</div>179      <div>180        <div class="skeleton-line short"></div>181        <div class="skeleton-line long"></div>182        <div class="skeleton-line long"></div>183        <div class="skeleton-line mid"></div>184      </div>185    </div>186    <div class="divider"></div>187 188    <div class="result">189      <div class="img-placeholder">[IMG: Hotel Photo]</div>190      <div>191        <div class="skeleton-line short"></div>192        <div class="skeleton-line long"></div>193        <div class="skeleton-line long"></div>194        <div class="skeleton-line mid"></div>195      </div>196    </div>197    <div class="divider"></div>198 199    <div class="result">200      <div class="img-placeholder">[IMG: Hotel Photo]</div>201      <div>202        <div class="skeleton-line short"></div>203        <div class="skeleton-line long"></div>204        <div class="skeleton-line long"></div>205        <div class="skeleton-line mid"></div>206      </div>207    </div>208  </div>209 210  <!-- Bottom gesture area -->211  <div class="bottom-black">212    <div class="home-indicator"></div>213  </div>214</div>215</body>216</html>