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, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);12    color: #212121;13  }14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 150px; background: #8E8E8E; color: #fff;18    display: flex; align-items: center; padding: 0 40px; font-weight: 600;19    font-size: 36px; letter-spacing: 0.5px;20  }21  .status-left { display: flex; align-items: center; gap: 24px; }22  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }23  .sb-icon {24    width: 36px; height: 36px; background: rgba(255,255,255,0.8); border-radius: 6px;25  }26  .wifi {27    width: 40px; height: 32px;28    border: 3px solid #fff; border-top-left-radius: 50px; border-top-right-radius: 50px;29    border-bottom: none; transform: translateY(4px);30  }31  .battery {32    width: 60px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative;33  }34  .battery::after {35    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #fff; border-radius: 2px;36  }37  /* App bar */38  .app-bar {39    position: absolute; top: 150px; left: 0; right: 0; height: 140px; background: #ffffff;40    display: flex; align-items: center; padding: 0 36px; border-bottom: 1px solid #e5e5e5;41  }42  .app-left { display: flex; align-items: center; gap: 24px; }43  .app-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }44  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }45  .icon { width: 48px; height: 48px; }46  /* Content */47  .content {48    position: absolute; left: 0; right: 0; top: 290px; bottom: 300px; overflow: hidden; /* mimic screenshot (non-scroll) */49    padding: 0 60px;50  }51  .section-divider {52    height: 2px; background: #e4e4e4; margin: 40px 0 48px;53  }54  h1 {55    margin: 0 0 34px; font-size: 62px; font-weight: 700; color: #111;56  }57  .para { font-size: 40px; line-height: 1.6; color: #333; margin: 0 0 34px; }58  .list { margin: 0 0 34px; padding: 0; list-style: none; }59  .list li {60    font-size: 40px; line-height: 1.6; color: #333; margin: 8px 0;61  }62  /* Price bar */63  .price-bar {64    position: absolute; left: 0; right: 0; bottom: 120px; height: 240px;65    background: #fff; border-top: 1px solid #e5e5e5; display: flex; align-items: center; padding: 0 60px;66  }67  .price-left { flex: 1; }68  .price-title { font-size: 46px; font-weight: 700; color: #111; }69  .price-sub { font-size: 34px; color: #777; text-decoration: underline; margin-top: 14px; }70  .cta {71    width: 420px; height: 120px; background: #E00065; color: #fff; border-radius: 28px;72    display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700;73    box-shadow: 0 6px 12px rgba(224,0,101,0.3);74  }75  /* System navigation bar */76  .nav-bar {77    position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;78    display: flex; align-items: center; justify-content: center;79  }80  .gesture-pill {81    width: 240px; height: 16px; background: #D0D0D0; border-radius: 12px;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status Bar -->89  <div class="status-bar">90    <div class="status-left">91      <div>12:54</div>92      <div class="sb-icon"></div>93      <div class="sb-icon"></div>94      <div class="sb-icon"></div>95      <div style="color:#fff;">•</div>96    </div>97    <div class="status-right">98      <div class="wifi"></div>99      <div class="battery"></div>100    </div>101  </div>102 103  <!-- App Bar -->104  <div class="app-bar">105    <div class="app-left">106      <div class="icon-btn">107        <svg class="icon" viewBox="0 0 24 24">108          <path d="M15 6l-6 6 6 6" fill="none" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>109        </svg>110      </div>111    </div>112    <div class="app-right">113      <div class="icon-btn">114        <svg class="icon" viewBox="0 0 24 24">115          <circle cx="6" cy="12" r="3" fill="#333"/>116          <circle cx="18" cy="6" r="3" fill="#333"/>117          <circle cx="18" cy="18" r="3" fill="#333"/>118          <path d="M8.8 11.2l7-4.2M8.8 12.8l7 4.2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>119        </svg>120      </div>121      <div class="icon-btn">122        <svg class="icon" viewBox="0 0 24 24">123          <path d="M12 20s-7-5.2-7-10.2a4.8 4.8 0 019.6-1.6A4.8 4.8 0 0121 9.8C21 14.8 12 20 12 20z" fill="none" stroke="#E00065" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- Content -->130  <div class="content">131    <div class="section-divider"></div>132    <h1>What you'll do</h1>133 134    <p class="para">135      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 trails.136    </p>137 138    <p class="para">On the two hour adventure we will:</p>139    <ul class="list">140      <li>- Meet at Grafton Lake parking area next to Grafton Road.</li>141      <li>- Start with 10 minutes of intros and "Goat 101" to learn how to safely interact with Peanut and Pickles.</li>142      <li>- Walk around the lake.</li>143      <li>- Stop at viewpoints along the way, where we'll offer to take photos of you with the goats.</li>144      <li>- End back where we started.</li>145    </ul>146 147    <p class="para">Private hike options include:</p>148    <ul class="list">149      <li>- Customized trail route such as up to the lookout in our main photo, or to cool natural tree forts!</li>150      <li>- Special arrangements for a longer, more challenging hike to the summit of the iconic Mount Gardner.</li>151    </ul>152  </div>153 154  <!-- Price Bar -->155  <div class="price-bar">156    <div class="price-left">157      <div class="price-title">From $41 / person</div>158      <div class="price-sub">Show all prices</div>159    </div>160    <div class="cta">Show dates</div>161  </div>162 163  <!-- System Navigation Bar -->164  <div class="nav-bar">165    <div class="gesture-pill"></div>166  </div>167 168</div>169</body>170</html>