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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11  }12  /* Status bar */13  .status-bar {14    height: 130px; background: #9E9E9E; color: #fff; position: relative;15    padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    font-size: 40px; letter-spacing: 0.5px;17  }18  .status-left { display: flex; align-items: center; gap: 18px; }19  .status-icons { display: flex; align-items: center; gap: 18px; }20  .status-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.8; }21  .status-square { width: 36px; height: 36px; background: #fff; border-radius: 6px; opacity: 0.9; }22  /* App bar */23  .app-bar {24    height: 160px; background: #fff; border-bottom: 1px solid #EAEAEA; position: relative;25    display: flex; align-items: center; padding: 0 36px;26  }27  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }28  .app-actions { margin-left: auto; display: flex; gap: 40px; align-items: center; }29  .icon { width: 56px; height: 56px; }30  .divider { height: 2px; background: #E5E5E5; margin: 24px 36px 0; }31  /* Content */32  .content { padding: 36px 48px 0; }33  h1 { font-size: 66px; margin: 40px 0 24px; font-weight: 700; }34  p.desc { font-size: 38px; line-height: 58px; color: #444; margin: 0 0 48px; }35  a.readmore { color: #222; text-decoration: underline; font-weight: 600; }36  /* Photo grid */37  .photo-grid {38    display: grid; grid-template-columns: 1fr 420px; grid-auto-rows: 360px; gap: 28px;39    margin-top: 24px;40  }41  .photo { background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;42           display: flex; align-items: center; justify-content: center; text-align: center;43           border-radius: 28px; overflow: hidden; }44  .photo.big { grid-row: span 2; height: 720px; }45  .photo.small { height: 344px; }46  /* Outline button */47  .outline-btn {48    margin: 42px auto 42px; width: 960px; height: 120px; border: 2px solid #2E2E2E;49    border-radius: 24px; display: flex; align-items: center; justify-content: center;50    font-size: 40px; font-weight: 600;51  }52  /* Bottom CTA bar */53  .bottom-cta {54    position: absolute; left: 0; right: 0; bottom: 150px;55    background: #fff; border-top: 1px solid #EAEAEA;56    display: flex; align-items: center; justify-content: space-between;57    padding: 34px 48px;58  }59  .price-box { display: flex; flex-direction: column; gap: 12px; }60  .price-line { font-size: 46px; }61  .price-line b { font-weight: 800; }62  .sub-link { font-size: 36px; color: #6C6C6C; text-decoration: underline; }63  .cta-btn {64    background: #FF1654; color: #fff; border: none; border-radius: 24px;65    padding: 28px 48px; font-size: 42px; font-weight: 700;66  }67  /* Bottom navigation bar */68  .nav-bar {69    position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; background: #000;70    display: flex; align-items: center; justify-content: center;71  }72  .pill { width: 240px; height: 16px; background: #fff; border-radius: 12px; opacity: 0.9; }73</style>74</head>75<body>76<div id="render-target">77  <!-- Status Bar -->78  <div class="status-bar">79    <div class="status-left">80      <span>12:53</span>81      <span style="font-weight:700;">N</span>82      <div class="status-square"></div>83      <span style="font-weight:700;">S</span>84      <div class="status-dot"></div>85    </div>86    <div class="status-icons">87      <svg class="icon" viewBox="0 0 24 24" fill="#fff" width="56" height="56"><path d="M18 8a4 4 0 1 0-8 0v8a4 4 0 1 0 8 0V8z"/></svg>88      <svg class="icon" viewBox="0 0 24 24" fill="#fff" width="56" height="56"><path d="M12 21l-1-1C6 15 3 12 3 8a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4-3 7-8 12l-1 1z"/></svg>89    </div>90  </div>91 92  <!-- App Bar -->93  <div class="app-bar">94    <div class="back-btn">95      <svg class="icon" viewBox="0 0 24 24" width="56" height="56"><path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>96    </div>97    <div class="app-actions">98      <svg class="icon" viewBox="0 0 24 24" width="56" height="56"><path d="M18 8a3 3 0 1 0-6 0v1l-4 2v4l4 2v1a3 3 0 1 0 2-2v-6a3 3 0 0 0 4-2z" fill="#2E2E2E"/></svg>99      <svg class="icon" viewBox="0 0 24 24" width="56" height="56"><path d="M12 21l-1-1C6 15 3 12 3 8a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4-3 7-8 12l-1 1z" fill="#E91E63"/></svg>100    </div>101  </div>102 103  <div class="divider"></div>104 105  <!-- Content -->106  <div class="content">107    <h1>What you'll do</h1>108    <p class="desc">109      A guided hike through beautiful lake and mountain scenery, hosted by Pickles and Peanut, French Alpine goat brothers! Their "parents" come too, to ensure you are guided on the less-busy but still human-accessible...110      <a class="readmore" href="#">Read more</a>111    </p>112 113    <!-- Photo collage -->114    <div class="photo-grid">115      <div class="photo big">[IMG: Mountain hike with goats]</div>116      <div class="photo small">[IMG: Goat with person]</div>117      <div class="photo small">[IMG: Forest trail with goats]</div>118    </div>119 120    <!-- Outline button -->121    <div class="outline-btn">Show all 8 photos</div>122 123    <div class="divider" style="margin-top: 10px;"></div>124  </div>125 126  <!-- Bottom CTA -->127  <div class="bottom-cta">128    <div class="price-box">129      <div class="price-line">From <b>$41</b> <span style="color:#555;">/ person</span></div>130      <a class="sub-link" href="#">Show all prices</a>131    </div>132    <button class="cta-btn">Show dates</button>133  </div>134 135  <!-- Navigation black bar -->136  <div class="nav-bar">137    <div class="pill"></div>138  </div>139</div>140</body>141</html>