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>Berlin trip - UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 100px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #FFFFFF;31    font-size: 36px;32    letter-spacing: 0.02em;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .chip-icon {40    width: 44px;41    height: 44px;42  }43  .percent {44    font-size: 32px;45    color: #FFFFFF;46  }47 48  /* Header */49  .header {50    padding: 10px 40px 0 40px;51    display: flex;52    align-items: center;53    justify-content: space-between;54  }55  .header-left {56    display: flex;57    align-items: center;58    gap: 26px;59  }60  .back-icon, .close-icon {61    width: 56px;62    height: 56px;63  }64  .title {65    font-size: 72px;66    font-weight: 500;67    line-height: 1.2;68  }69 70  /* Info text */71  .info {72    margin: 32px 40px 0 92px;73    color: #B0B0B0;74    font-size: 34px;75  }76  .year {77    margin: 28px 40px 0 92px;78    color: #B0B0B0;79    font-size: 40px;80  }81 82  /* Event row */83  .event-row {84    margin-top: 40px;85    padding: 0 40px 0 40px;86    display: flex;87    align-items: flex-start;88  }89  .date-col {90    width: 130px;91    text-align: left;92    padding-left: 20px;93  }94  .month {95    color: #BDBDBD;96    font-size: 36px;97    letter-spacing: 0.02em;98  }99  .day {100    margin-top: 6px;101    font-size: 88px;102    line-height: 1.0;103    color: #FFFFFF;104    font-weight: 500;105  }106  .event-card {107    margin-left: 28px;108    background: #5EA4DA;109    border-radius: 44px;110    padding: 36px 40px;111    flex: 1;112    box-sizing: border-box;113    color: #FFFFFF;114  }115  .event-title {116    font-size: 46px;117    font-weight: 600;118    margin-bottom: 12px;119  }120  .event-time {121    font-size: 34px;122    opacity: 0.95;123  }124 125  /* Home indicator */126  .home-indicator {127    position: absolute;128    bottom: 34px;129    left: 50%;130    transform: translateX(-50%);131    width: 300px;132    height: 12px;133    background: #E0E0E0;134    border-radius: 10px;135    opacity: 0.9;136  }137</style>138</head>139<body>140<div id="render-target">141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="status-left">11:51</div>144    <div class="status-right">145      <!-- Simple status icons -->146      <svg class="chip-icon" viewBox="0 0 24 24">147        <circle cx="12" cy="12" r="9" stroke="#FFFFFF" stroke-width="2" fill="none"></circle>148        <circle cx="12" cy="12" r="3" fill="#FFFFFF"></circle>149      </svg>150      <svg class="chip-icon" viewBox="0 0 24 24">151        <circ