GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;15    color: #1a1f2b;16  }17 18  /* Status bar */19  .statusbar {20    height: 96px;21    padding: 0 44px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 36px;26    color: #2c2f36;27  }28  .status-icons {29    display: flex;30    gap: 24px;31    align-items: center;32  }33  .status-icons svg { display: block; }34 35  /* Header with pill */36  .header {37    position: relative;38    height: 220px;39  }40  .back-btn {41    position: absolute;42    left: 32px;43    top: 84px;44    width: 56px;45    height: 56px;46  }47  .fav-btn {48    position: absolute;49    right: 32px;50    top: 90px;51    width: 56px;52    height: 56px;53  }54  .pill {55    width: 820px;56    height: 140px;57    margin: 34px auto 0;58    background: #EFF1F5;59    border-radius: 70px;60    display: flex;61    flex-direction: column;62    align-items: center;63    justify-content: center;64    text-align: center;65  }66  .pill .title {67    font-weight: 600;68    font-size: 46px;69    color: #2b2f39;70    margin-bottom: 8px;71  }72  .pill .subtitle {73    font-size: 30px;74    color: #8c94a1;75  }76  .divider {77    height: 2px;78    background: #E6E9EF;79    width: 100%;80  }81 82  /* Content area */83  .content {84    text-align: center;85    padding-top: 220px;86  }87  .img-placeholder {88    width: 580px;89    height: 420px;90    margin: 0 auto 60px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    display: flex;94    justify-content: center;95    align-items: center;96    color: #757575;97    border-radius: 12px;98    font-size: 28px;99  }100  .loading-text {101    font-size: 40px;102    color: #A3A9B4;103    letter-spacing: 0.2px;104  }105 106  /* Bottom gesture bar */107  .gesture {108    position: absolute;109    bottom: 0;110    left: 0;111    width: 1080px;112    height: 120px;113    background: #000000;114  }115  .gesture .handle {116    position: absolute;117    left: 50%;118    top: 32px;119    width: 240px;120    height: 12px;121    margin-left: -120px;122    background: #D8D8D8;123    border-radius: 8px;124  }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Status Bar -->131  <div class="statusbar">132    <div class="time">10:52</div>133    <div class="status-icons">134      <!-- Simple network/wifi icon -->135      <svg width="40" height="40" viewBox="0 0 40 40">136        <path d="M6 16c8-8 20-8 28 0" stroke="#57606f" stroke-width="3" fill="none" stroke-linecap="round"/>137        <path d="M10 20c6-6 14-6 20 0" stroke="#57606f" stroke-width="3" fill="none" stroke-linecap="round"/>138        <circle cx="20" cy="26" r="3" fill="#57606f"/>139      </svg>140      <!-- Battery icon -->141      <svg width="40" height="40" viewBox="0 0 40 40">142        <rect x="6" y="12" width="24" height="16" rx="3" stroke="#57606f" stroke-width="3" fill="none"/>143        <rect x="8" y="14" width="18" height="12" rx="2" fill="#57606f"/>144        <rect x="31" y="16" width="4" height="8" rx="1" fill="#57606f"/>145      </svg>146    </div>147  </div>148 149  <!-- Header with pill -->150  <div class="header">151    <!-- Back chevron -->152    <svg class="back-btn" viewBox="0 0 48 48">153      <path d="M30 12 L18 24 L30 36" stroke="#10131a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154    </svg>155 156    <!-- Favorite heart outline -->157    <svg class="fav-btn" viewBox="0 0 48 48">158      <path d="M24 40c-10-7-16-12-16-20 0-6 4-10 10-10 4 0 7 2 6 4 1-2 4-4 8-4 6 0 10 4 10 10 0 8-6 13-18 20z" stroke="#10131a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159    </svg>160 161    <div class="pill">162      <div class="title">Berlin</div>163      <div class="subtitle">23 Dec - 25 Dec • 1 room • 2 guests</div>164    </div>165  </div>166 167  <div class="divider"></div>168 169  <!-- Main content -->170  <div class="content">171    <div class="img-placeholder">[IMG: Hotel illustration]</div>172    <div class="loading-text">Fetching Hotel Results...</div>173  </div>174 175  <!-- Bottom gesture bar -->176  <div class="gesture">177    <div class="handle"></div>178  </div>179 180</div>181</body>182</html>