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 - Amsterdam</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; color:#1f1f1f; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height:96px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;17    color:#222; font-weight:600; font-size:34px;18  }19  .status-right { display:flex; align-items:center; gap:24px; color:#6b6b6b; }20  .icon { width:36px; height:36px; }21 22  /* Search bar */23  .search-wrap { padding:18px 32px 8px 32px; }24  .search-bar {25    height:120px; border:8px solid #FFC44D; border-radius:60px;26    display:flex; align-items:center; background:#fff; padding:0 28px; box-sizing:border-box;27  }28  .back-ic { margin-right:20px; }29  .search-text { font-size:44px; color:#333; flex:1; }30  .clear-btn {31    width:72px; height:72px; border-radius:36px; border:2px solid #D0D0D0;32    display:flex; align-items:center; justify-content:center; color:#888;33  }34 35  /* List */36  .list { padding-top:16px; padding-bottom:16px; }37  .item {38    display:flex; align-items:center;39    padding:24px 32px; gap:28px;40  }41  .thumb {42    width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;43    display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; text-align:center;44  }45  .meta { flex:1; border-bottom:1px solid #ECECEC; padding-bottom:32px; }46  .title { font-size:44px; font-weight:700; color:#111; margin-bottom:10px; }47  .subtitle { font-size:28px; color:#6f6f6f; }48 49  /* Keyboard mock */50  .keyboard {51    position:absolute; left:0; right:0; bottom:0;52    height:860px; background:#F1EEF8; border-top-left-radius:28px; border-top-right-radius:28px;53    box-shadow:0 -2px 6px rgba(0,0,0,0.06);54    padding:24px 26px 34px;55  }56  .kbd-top {57    display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:14px;58  }59  .kbd-title { font-size:40px; color:#333; }60  .mic {61    position:absolute; right:12px; width:72px; height:72px; background:#fff;62    border:1px solid #D6D6D6; border-radius:36px; display:flex; align-items:center; justify-content:center;63  }64  .rows { display:flex; flex-direction:column; gap:18px; }65  .row { display:flex; justify-content:center; gap:14px; }66  .key {67    width:88px; height:110px; background:#fff; border:1px solid #E0E0E0; border-radius:22px;68    display:flex; align-items:center; justify-content:center; font-size:36px; color:#333;69  }70  .key.wide { width:160px; }71  .key.space { flex:1; width:auto; min-width:420px; }72  .key.green { background:#CFE7BF; }73  .key.pink { background:#F5D5DF; }74  .gesture {75    position:absolute; left:50%; transform:translateX(-50%);76    bottom:16px; width:300px; height:10px; background:#CFCFCF; border-radius:6px;77  }78</style>79</head>80<body>81<div id="render-target">82 83  <!-- Status bar -->84  <div class="status-bar">85    <div>1:37</div>86    <div class="status-right">87      <!-- small placeholders resembling notifications -->88      <svg class="icon" viewBox="0 0 24 24">89        <circle cx="12" cy="12" r="10" fill="#bdbdbd"></circle>90      </svg>91      <svg class="icon" viewBox="0 0 24 24">92        <path d="M2 18h20L12 6 2 18z" fill="#9e9e9e"></path>93      </svg>94      <!-- Signal/Wi‑Fi -->95      <svg class="icon" viewBox="0 0 24 24">96        <path d="M12 20l4-4H8l4 4zm-7-7l2-2h12l2 2H5zM2 9l3-3h14l3 3H2z" fill="#7a7a7a"></path>97      </svg>98      <!-- Battery -->99      <svg class="icon" viewBox="0 0 32 24">100        <rect x="1" y="4" width="26" height="16" rx="2" fill="none" stroke="#7a7a7a" stroke-width="2"></rect>101        <rect x="3" y="6" width="18" height="12" rx="1" fill="#7a7a7a"></rect>102        <rect x="27" y="8" width="4" height="8" rx="1" fill="#7a7a7a"></rect>103      </svg>104    </div>105  </div>106 107  <!-- Search bar -->108  <div class="search-wrap">109    <div class="search-bar">110      <div class="back-ic">111        <svg width="56" height="56" viewBox="0 0 24 24">112          <path d="M15 5l-7 7 7 7" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>113        </svg>114      </div>115      <div class="search-text">Amsterdam</div>116      <div class="clear-btn" aria-label="clear">117        <svg width="34" height="34" viewBox="0 0 24 24">118          <path d="M6 6l12 12M18 6L6 18" stroke="#8c8c8c" stroke-width="2.2" stroke-linecap="round"></path>119        </svg>120      </div>121    </div>122  </div>123 124  <!-- Suggestions list -->125  <div class="list">126    <div class="item">127      <div class="thumb">[IMG: Amsterdam City]</div>128      <div