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>Search Locations UI</title>7<style>8  :root{9    --accent: #18C2D1;10    --text: #2E2E2E;11    --muted: #9FA6AD;12    --line: #20C4D6;13  }14  body{ margin:0; padding:0; background:transparent; }15  #render-target{16    width:1080px; height:2400px;17    position:relative; overflow:hidden;18    background:#FFFFFF;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;20    color: var(--text);21  }22  /* Top spacer to simulate status bar area */23  .status-spacer{ height:120px; }24 25  .search-bar{26    padding: 28px 60px 16px 60px;27  }28  .search-row{29    display:flex; align-items:center;30    gap:28px;31  }32  .icon-btn{33    width:72px; height:72px; display:flex; align-items:center; justify-content:center;34    color:#6B6F74;35  }36  .search-input{37    flex:1;38    font-size:48px; color:#5A5F64;39    border:none; outline:none;40    padding:16px 0 10px 0;41    background:transparent;42  }43  .underline{44    height:6px; background: var(--line); margin-left: 204px; /* after back + search icons */45    margin-top:-6px;46  }47 48  .section{49    padding: 18px 60px;50  }51  .row{52    display:flex; align-items:center;53    gap:28px; padding:28px 0;54  }55  .circle-icon{56    width:96px; height:96px; border-radius:50%;57    background: var(--accent);58    display:flex; align-items:center; justify-content:center;59  }60  .row-title{61    font-size:46px; font-weight:500; color:#2F3337;62  }63  .section-title{64    margin-top:18px;65    font-size:34px; font-weight:700; letter-spacing:3px;66    color:#B3BAC1;67  }68  .subtext{69    font-size:34px; color:#A6AEB5; margin-top:8px;70  }71 72  /* Powered by Google */73  .powered{74    position:absolute; right:60px; bottom:220px;75    display:flex; align-items:baseline; gap:14px;76  }77  .powered span.label{ color:#9EA6AD; font-size:34px; }78  .google{79    font-size:44px; font-weight:700; line-height:1;80    letter-spacing:0.2px;81  }82  .google .g{ color:#4285F4; }83  .google .o1{ color:#EA4335; }84  .google .o2{ color:#FBBC05; }85  .google .g2{ color:#4285F4; }86  .google .l{ color:#34A853; }87  .google .e{ color:#EA4335; }88</style>89</head>90<body>91<div id="render-target">92  <div class="status-spacer"></div>93 94  <div class="search-bar">95    <div class="search-row">96      <div class="icon-btn" aria-label="Back">97        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">98          <path d="M30 8 L14 24 L30 40"></path>99        </svg>100      </div>101      <div class="icon-btn" aria-label="Search">102        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">103          <circle cx="24" cy="24" r="14"></circle>104          <path d="M35 35 L48 48"></path>105        </svg>106      </div>107      <input class="search-input" value="Address, City or Landmark" />108    </div>109    <div class="underline"></div>110  </div>111 112  <div class="section">113    <div class="row">114      <div class="circle-icon">115        <!-- Target/Current location icon -->116        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">117          <circle cx="29" cy="29" r="10" fill="none"></circle>118          <circle cx="29" cy="29" r="20" fill="none"></circle>119          <path d="M29 6 L29 13"></path>120          <path d="M29 45 L29 52"></path>121          <path d="M6 29 L13 29"></path>122          <path d="M45 29 L52 29"></path>123        </svg>124      </div>125      <div class="row-title">Current Location</div>126    </div>127  </div>128 129  <div class="section">130    <div class="section-title">RECENT LOCATIONS</div>131 132    <div class="row">133      <div class="circle-icon">134        <!-- Clock/history icon -->135        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">136          <circle cx="29" cy="29" r="20"></circle>137          <path d="M29 16 L29 30 L40 34"></path>138        </svg>139      </div>140      <div class="row-title">Ulm</div>141    </div>142 143    <div class="row">144      <div class="circle-icon">145        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">146          <circle cx="29" cy="29" r="20"></circle>147          <path d="M29 16 L29 30 L40 34"></path>148        </svg>149      </div>150      <div class="row-title">Berlin</div>151    </div>152  </div>153 154  <div class="section">155    <div class="section-title">RECENT HISTORY</div>156    <div class="row" style="align-items:flex-start;">157      <div class="circle-icon" style="margin-top:8px;">158        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">159          <circle cx="29" cy="29" r="20"></circle>160          <path d="M29 16 L29 30 L40 34"></path>161        </svg>162      </div>163      <div>164        <div class="row-title">Ulm ➜ Berlin</div>165        <div class="subtext">Nov 5</div>166      </div>167    </div>168  </div>169 170  <div class="powered">171    <span class="label">powered by</span>172    <div class="google" aria-label="Google wordmark">173      <span class="g">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span>174    </div>175  </div>176</div>177</body>178</html>