GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>My Favorite Trip - Mobile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #1f1f1f;13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #eaeaea;28    font-size: 36px;29  }30  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }31  .status-pill {32    background: #2a2a2a;33    color: #cfcfcf;34    border: 1px solid #3a3a3a;35    border-radius: 16px;36    padding: 6px 12px;37    font-size: 28px;38  }39  .icon { display: inline-flex; align-items: center; justify-content: center; }40  .icon svg { fill: #e0e0e0; }41 42  /* Top app bar */43  .app-bar {44    position: absolute;45    top: 96px;46    left: 0;47    width: 1080px;48    height: 180px;49    display: flex;50    align-items: center;51    padding: 0 36px;52    box-sizing: border-box;53  }54  .back-btn {55    width: 72px;56    height: 72px;57    display: inline-flex;58    align-items: center;59    justify-content: center;60    margin-right: 24px;61  }62  .title-block {63    flex: 1;64  }65  .title {66    font-size: 54px;67    font-weight: 600;68    letter-spacing: 0.2px;69    margin-bottom: 8px;70  }71  .subtitle {72    font-size: 32px;73    color: #bdbdbd;74  }75  .menu-btn {76    width: 72px;77    height: 72px;78    display: inline-flex;79    align-items: center;80    justify-content: center;81  }82 83  /* Content */84  .content {85    position: absolute;86    top: 276px;87    left: 0;88    right: 0;89    padding: 0 36px;90    box-sizing: border-box;91  }92  .section-title {93    font-size: 40px;94    font-weight: 600;95    margin: 24px 0 28px 12px;96    color: #ffffff;97  }98 99  .grid {100    display: grid;101    grid-template-columns: repeat(4, 1fr);102    column-gap: 24px;103    row-gap: 24px;104    padding: 0 12px;105  }106 107  .thumb {108    height: 228px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    display: flex;112    align-items: center;113    justify-content: center;114    color: #555555;115    font-size: 26px;116    text-align: center;117    border-radius: 8px;118  }119 120  /* Bottom gesture bar */121  .gesture-bar {122    position: absolute;123    bottom: 36px;124    left: 50%;125    transform: translateX(-50%);126    width: 240px;127    height: 12px;128    background: #ffffff;129    border-radius: 12px;130    opacity: 0.85;131  }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status Bar -->138  <div class="status-bar">139    <div class="status-left">140      <div style="font-weight:600;">12:20</div>141      <div class="status-pill">M</div>142    </div>143    <div class="status-right">144      <span class="icon" style="width:48px;height:48px;">145        <!-- Wi-Fi icon -->146        <svg viewBox="0 0 24 24" width="42" height="42">147          <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2 10.4 20.5 10.4 19.6 11.1 18 12 18z"/>148          <path d="M2.5 10.5c5.3-4.7 13.7-4.7 19 0l-1.7 1.7c-4.9-4.3-10.8-4.3-15.6 0l-1.7-1.7z"/>149          <path d="M6 13.2c3.6-3 8.4-3 12 0l-1.6 1.6c-2.8-2.3-6-2.3-8.8 0L6 13.2z"/>150        </svg>151      </span>152      <span class="icon" style="width:40px;height:40px;">153        <!-- Notification/vibration glyph -->154        <svg viewBox="0 0 24 24" width="36" height="36">155          <path d="M16 18H8l-2-2h12l-2 2zM12 4c3.3 0 6 2.7 6 6v4l2 2H4l2-2v-4c0-3.3 2.7-6 6-6z"/>156        </svg>157      </span>158      <span class="icon" style="width:64px;height:32px;">159        <!-- Battery icon -->160        <svg viewBox="0 0 28 16" width="64" height="32">161          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="#e0e0e0"></rect>162          <rect x="3" y="4" width="18" height="8" fill="#1f1f1f"></rect>163          <rect x="23" y="6" width="3" height="4" fill="#e0e0e0"></rect>164        </svg>165      </span>166      <div style="font-size:32px;color:#ffffff;">100%</div>167    </div>168  </div>169 170  <!-- Top App Bar -->171  <div class="app-bar">172    <div class="back-btn">173      <svg viewBox="0 0 24 24" width="54" height="54">174        <path d="M15 19l-7-7 7-7" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>175      </svg>176    </div>177    <div class="title-block">178      <div class="title">My Favorite Trip</div>179      <div class="subtitle">4 items · 19 MB</div>180    </div>181    <div class="menu-btn">182      <!-- Kebab menu -->183      <svg viewBox="0 0 24 24" width="54" height="54">184        <circle cx="12" cy="5" r="2.2" fill="#ffffff"></circle>185        <circle cx="12" cy="12" r="2.2" fill="#ffffff"></circle>186        <circle cx="12" cy="19" r="2.2" fill="#ffffff"></circle>187      </svg>188    </div>189  </div>190 191  <!-- Content -->192  <div class="content">193    <div class="section-title">September</div>194 195    <div class="grid">196      <div class="thumb">[IMG: Ornate palace hall with chandelier]</div>197      <div class="thumb">[IMG: Neuschwanstein-style castle]</div>198      <div class="thumb">[IMG: Observatory building at dusk]</div>199      <div class="thumb">[IMG: Observatory building by river]</div>200    </div>201  </div>202 203  <!-- Bottom Gesture Bar -->204  <div class="gesture-bar"></div>205</div>206</body>207</html>