GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Travelers Palm UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: linear-gradient(180deg, #e9f1fb 0%, #eef4fb 40%, #f4f7fb 100%);12  }13 14  /* General */15  .container { padding: 48px; }16  .row { display: flex; align-items: center; }17  .space-between { justify-content: space-between; }18  .muted { color: #7a8a9a; }19  .title { font-size: 64px; font-weight: 800; color: #1f2a3d; letter-spacing: 0.5px; }20  .subtitle { font-size: 32px; color: #2b3a4f; }21  .paragraph {22    font-size: 36px; line-height: 56px; color: #2b2b2b;23    margin-top: 24px;24  }25  .link { color: #163a78; font-weight: 700; margin-top: 12px; display: inline-block; }26 27  /* Header */28  .header { padding: 36px 48px 12px 48px; }29  .header .actions { display: flex; gap: 28px; }30  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }31  .icon { fill: none; stroke: #1f2a3d; stroke-width: 6px; }32  .heart-icon { stroke: #0c1730; }33  .share-icon { stroke: #0c1730; }34 35  /* Feature chips */36  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }37  .feature { display: flex; flex-direction: column; align-items: center; gap: 12px; }38  .img-ph {39    width: 170px; height: 90px;40    background: #E0E0E0; border: 1px solid #BDBDBD;41    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;42    border-radius: 12px;43  }44 45  /* Pollution block */46  .pollution { margin-top: 24px; width: 280px; }47  .pollution .img-ph { width: 260px; height: 150px; }48  .pollution .subtitle { margin-top: 12px; }49 50  /* Tabs */51  .tabs { margin-top: 36px; padding: 0 0 18px 0; position: relative; }52  .tabs-line {53    position: absolute; left: 0; right: 0; bottom: 0;54    height: 6px; background: #cfd6e4;55  }56  .tabs-active {57    position: absolute; left: 0; bottom: 0; height: 6px; width: 45%;58    background: #2a3b56;59  }60  .tab-labels { display: flex; gap: 42px; align-items: center; }61  .tab { font-size: 40px; font-weight: 700; }62  .tab.inactive { color: #b0b7c6; font-weight: 700; }63 64  /* Cards */65  .cards { margin-top: 24px; display: flex; flex-direction: column; gap: 28px; }66  .card {67    border-radius: 36px; padding: 36px 42px;68    display: flex; align-items: center; justify-content: space-between;69    box-shadow: 0 8px 20px rgba(25, 37, 59, 0.08);70  }71  .card .left { display: flex; flex-direction: column; gap: 8px; }72  .card .title { font-size: 44px; color: #1f2a3d; }73  .card .desc { font-size: 34px; color: #48607a; }74 75  .blue { background: #cfeefe; }76  .purple { background: linear-gradient(180deg, #e6d6f7 0%, #d9c6f4 100%); }77  .yellow { background: #f7eaa7; }78  .peach { background: #efd1a9; }79 80  .chevron {81    width: 44px; height: 44px;82  }83  .chevron path { stroke: #1f2a3d; stroke-width: 10px; fill: none; }84 85  /* Add Plant button */86  .add-plant {87    position: absolute; left: 36px; right: 36px; bottom: 300px;88    height: 130px; border-radius: 32px;89    background: linear-gradient(90deg, #a770ff 0%, #cf77ff 40%, #8ea0ff 100%);90    box-shadow: 0 14px 28px rgba(100, 70, 170, 0.35);91    display: flex; align-items: center; justify-content: center; gap: 20px;92    color: #ffffff; font-size: 44px; font-weight: 800;93  }94  .add-plant svg { stroke: #fff; fill: none; stroke-width: 4px; }95 96  /* Bottom bar */97  .bottom-bar {98    position: absolute; left: 0; right: 0; bottom: 0;99    height: 150px; background: #1f2635;100    display: flex; align-items: center; justify-content: center;101  }102  .home-indicator {103    width: 220px; height: 12px; background: #dfe6f2; border-radius: 12px; opacity: 0.9;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Header with back/title and actions -->111  <div class="header row space-between">112    <div class="row" style="gap:20px;">113      <div class="icon-btn">114        <svg width="56" height="56" viewBox="0 0 56 56">115          <path class="icon" d="M34 10 L18 28 L34 46"></path>116          <path class="icon" d="M20 28 H46"></path>117        </svg>118      </div>119      <div class="title">Travelers palm</div>120    </div>121    <div class="actions">122      <div class="icon-btn">123        <svg width="48" height="48" viewBox="0 0 48 48" class="heart-icon">124          <path d="M24 39 C16 31 9 26 9 18 C9 13 13 10 17 10 C20 10 22 12 24 15 C26 12 28 10 31 10 C35 10 39 13 39 18 C39 26 32 31 24 39 Z"></path>125        </svg>126      </div>127      <div class="icon-btn">128        <svg width="46" height="46" viewBox="0 0 46 46" class="share-icon">129          <circle cx="10" cy="30" r="4" stroke-width="4"></circle>130          <circle cx="36" cy="12" r="4" stroke-width="4"></circle>131          <circle cx="36" cy="34" r="4" stroke-width="4"></circle>132          <path d="M14 29 L32 15" stroke-width="4"></path>133          <path d="M14 31 L32 31" stroke-width="4"></path>134        </svg>135      </div>136    </div>137  </div>138 139  <!-- Feature icons -->140  <div class="container">141    <div class="features">142      <div class="feature">143        <div class="img-ph">[IMG: Tall Icon]</div>144        <div class="subtitle">Tall</div>145      </div>146      <div class="feature">147        <div class="img-ph">[IMG: Pet Safe Icon]</div>148        <div class="subtitle">Pet Safe</div>149      </div>150      <div class="feature">151        <div class="img-ph">[IMG: Flowering Icon]</div>152        <div class="subtitle">Flowering</div>153      </div>154    </div>155 156    <!-- Pollution tolerant -->157    <div class="pollution">158      <div class="img-ph">[IMG: Pollution Icon]</div>159      <div class="subtitle">Pollution<br>Tolerant</div>160    </div>161 162    <!-- Tabs -->163    <div class="tabs">164      <div class="tab-labels">165        <div class="tab" style="color:#2a3b56;">Description</div>166        <div class="tab inactive">Photo Gallery</div>167      </div>168      <div class="tabs-line"></div>169      <div class="tabs-active"></div>170    </div>171 172    <!-- Description text -->173    <div class="paragraph">174      Travellers tree, with its unique foliage and shape, will be an exciting find to any gardener. Moreover, these beautiful plants are easy to care for, meaning they are accessible to all levels of gardeners. Traveller's trees, also known as the...175    </div>176    <div class="link">Show more</div>177 178    <!-- Cards -->179    <div class="cards">180      <div class="card blue">181        <div class="left">182          <div class="title">Watering</div>183          <div class="desc">Once a month</div>184        </div>185        <svg class="chevron" viewBox="0 0 48 48">186          <path d="M12 18 L24 30 L36 18"></path>187        </svg>188      </div>189 190      <div class="card purple">191        <div class="left">192          <div class="title">Temperature</div>193          <div class="desc">Medium sensitivity to temperature change</div>194        </div>195        <svg class="chevron" viewBox="0 0 48 48">196          <path d="M12 18 L24 30 L36 18"></path>197        </svg>198      </div>199 200      <div class="card yellow">201        <div class="left">202          <div class="title">Sunlight</div>203          <div class="desc">Full Sun (5 to 8 hours of Sun)</div>204        </div>205        <svg class="chevron" viewBox="0 0 48 48">206          <path d="M12 18 L24 30 L36 18"></path>207        </svg>208      </div>209 210      <div class="card peach">211        <div class="left">212          <div class="title">Soil</div>213          <div class="desc">Well draind-loam</div>214        </div>215        <svg class="chevron" viewBox="0 0 48 48">216          <path d="M12 18 L24 30 L36 18"></path>217        </svg>218      </div>219    </div>220  </div>221 222  <!-- Add Plant button -->223  <div class="add-plant">224    Add Plant225    <svg width="56" height="56" viewBox="0 0 56 56">226      <path d="M16 40 H40" />227      <path d="M20 40 Q22 48 28 48 Q34 48 36 40" />228      <path d="M28 30 C28 24 33 22 36 22 C33 20 30 20 28 22 C26 20 23 20 20 22 C23 22 28 24 28 30 Z" />229    </svg>230  </div>231 232  <!-- Bottom bar -->233  <div class="bottom-bar">234    <div class="home-indicator"></div>235  </div>236</div>237</body>238</html>