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>Honolulu Trip Notes</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; color: #1f2937; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 86px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #6b7280;25    font-size: 30px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .dot { width: 14px; height: 14px; background: #9ca3af; border-radius: 50%; display: inline-block; }33 34  /* Header */35  .header {36    padding: 8px 32px 20px 32px;37    position: relative;38  }39  .header-row {40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .back-and-title {45    display: flex;46    align-items: center;47    gap: 22px;48  }49  .icon-btn {50    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; color: #111827;51  }52  .title-group {53    display: flex;54    flex-direction: column;55    gap: 8px;56  }57  .title {58    font-size: 64px;59    font-weight: 700;60    color: #111827;61    line-height: 1.1;62  }63  .subtitle {64    font-size: 34px;65    color: #6b7280;66  }67  .actions { display: flex; align-items: center; gap: 28px; }68 69  /* Banner image placeholder */70  .banner {71    width: 100%;72    height: 420px;73    background: #E0E0E0;74    border-top: 1px solid #BDBDBD;75    border-bottom: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #757575;80    font-size: 34px;81  }82 83  /* Content */84  .content {85    padding: 56px 36px 0 36px;86  }87  .section-title {88    font-size: 58px;89    font-weight: 700;90    margin-bottom: 30px;91    color: #111827;92  }93 94  /* Notes card */95  .note-card {96    border: 2px solid #d1d9de;97    border-radius: 26px;98    height: 560px;99    background: #ffffff;100    display: flex;101    flex-direction: column;102    overflow: hidden;103  }104  .note-card .note-area {105    flex: 1;106    background: #ffffff;107  }108  .note-card .divider {109    height: 2px;110    background: #d1d9de;111  }112  .note-card .note-actions {113    height: 160px;114    padding: 0 28px;115    display: flex;116    align-items: center;117    justify-content: space-between;118  }119  .chip {120    display: inline-flex;121    align-items: center;122    gap: 12px;123    color: #0f7494;124    font-size: 32px;125  }126  .add-btn {127    background: #374151;128    color: #ffffff;129    font-size: 38px;130    font-weight: 600;131    padding: 26px 40px;132    border-radius: 24px;133  }134 135  /* Bottom gesture hint */136  .gesture-bar {137    position: absolute;138    bottom: 22px;139    left: 50%;140    transform: translateX(-50%);141    width: 320px;142    height: 10px;143    background: #d1d5db;144    border-radius: 6px;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Status bar -->152  <div class="status-bar">153    <div>6:00</div>154    <div class="status-right">155      <span class="dot"></span>156      <span class="dot"></span>157      <span class="dot"></span>158      <span class="dot"></span>159      <span class="dot"></span>160    </div>161  </div>162 163  <!-- Header with back arrow, title, share and menu -->164  <div class="header">165    <div class="header-row">166      <div class="back-and-title">167        <div class="icon-btn" aria-label="Back">168          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">169            <path d="M15 18l-6-6 6-6"></path>170          </svg>171        </div>172        <div class="title-group">173          <div class="title">Honolulu Trip</div>174          <div class="subtitle">Wed, Jan 24 – Fri, Jan 26</div>175        </div>176      </div>177      <div class="actions">178        <div class="icon-btn" aria-label="Share">179          <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">180            <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.3 3.3 0 000-1.39l7.05-4.11A3 3 0 0018 7.91a3.09 3.09 0 10-3.09-3.09 3 3 0 00.12.84L7.98 9.71a3.09 3.09 0 10.01 4.58l7.02 4.1c-.08.26-.12.53-.12.81A3.09 3.09 0 1018 16.08z"/>181          </svg>182        </div>183        <div class="icon-btn" aria-label="More">184          <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">185            <circle cx="12" cy="5" r="2"></circle>186            <circle cx="12" cy="12" r="2"></circle>187            <circle cx="12" cy="19" r="2"></circle>188          </svg>189        </div>190      </div>191    </div>192  </div>193 194  <!-- Banner image placeholder -->195  <div class="banner">[IMG: Clouds above sky]</div>196 197  <!-- Content area -->198  <div class="content">199    <div class="section-title">Notes</div>200 201    <div class="note-card">202      <div class="note-area"></div>203      <div class="divider"></div>204      <div class="note-actions">205        <div class="chip">206          <svg width="42" height="42" viewBox="0 0 24 24" fill="#0f7494">207            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/>208          </svg>209        </div>210        <div class="add-btn">Add note</div>211      </div>212    </div>213  </div>214 215  <!-- Bottom gesture bar -->216  <div class="gesture-bar"></div>217</div>218</body>219</html>