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>Travelers palm UI</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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #cfe0ef 0%, #eaf2fb 100%);15  }16  /* subtle texture */17  #render-target::before {18    content: "";19    position: absolute; inset: -30% -10% auto -10%;20    height: 1200px;21    background:22      radial-gradient(1000px 600px at 20% 10%, rgba(120,130,180,0.15) 0, rgba(120,130,180,0.0) 60%),23      radial-gradient(700px 500px at 80% 0%, rgba(180,190,220,0.18) 0, rgba(180,190,220,0.0) 70%);24    pointer-events: none;25  }26 27  .statusbar {28    position: absolute; top: 0; left: 0; right: 0;29    height: 80px; display: flex; align-items: center; justify-content: space-between;30    padding: 0 40px; color: #ffffff;31  }32  .status-left { font-weight: 600; font-size: 34px; letter-spacing: 0.5px; }33  .status-right { display: flex; align-items: center; gap: 24px; }34  .appbar {35    position: absolute; top: 108px; left: 36px; right: 36px;36    display: flex; align-items: center; justify-content: space-between;37  }38  .title {39    font-size: 64px; font-weight: 800; color: #1b2636; letter-spacing: 0.5px;40  }41  .appbar-left { display: flex; align-items: center; gap: 22px; }42  .appbar-right { display: flex; align-items: center; gap: 28px; }43  .icon-btn svg { width: 56px; height: 56px; }44  .icon-line { stroke: #1b2636; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }45  .icon-fill { fill: #1b2636; }46 47  .cards { position: absolute; top: 250px; left: 0; right: 0; padding-bottom: 220px; }48  .card {49    position: relative;50    margin: 30px 46px;51    padding: 40px 120px 40px 40px;52    border-radius: 34px;53    box-shadow: 0 12px 25px rgba(0,0,0,0.08);54  }55  .card h3 {56    margin: 0 0 16px 0;57    font-size: 46px;58    font-weight: 800;59  }60  .card p {61    margin: 0;62    font-size: 36px;63    color: #394655;64  }65  .chevron {66    position: absolute; right: 36px; top: 50%; transform: translateY(-50%);67  }68  .chevron svg { width: 48px; height: 48px; }69  /* CTA */70  .cta {71    position: absolute; left: 60px; right: 60px; bottom: 190px;72    height: 120px;73    background: linear-gradient(90deg, #8a7cf5 0%, #b896f6 60%, #caa8f8 100%);74    border-radius: 34px;75    box-shadow: 0 16px 30px rgba(130,110,200,0.35);76    display: flex; align-items: center; justify-content: center; gap: 20px;77    color: #ffffff; font-size: 44px; font-weight: 800;78  }79  .cta svg { width: 50px; height: 50px; }80  /* gesture bar */81  .gesture {82    position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%);83    width: 300px; height: 12px; background: #d7dade; border-radius: 12px;84  }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Status bar -->91  <div class="statusbar">92    <div class="status-left">1:42</div>93    <div class="status-right">94      <!-- simple icons -->95      <svg viewBox="0 0 24 24"><path class="icon-line" d="M3 9h18v6H3z"/></svg>96      <svg viewBox="0 0 24 24"><path class="icon-line" d="M2 18l9-12 11 16"/></svg>97      <svg viewBox="0 0 24 24"><rect class="icon-line" x="3" y="4" width="6" height="16" rx="2"/><rect class="icon-line" x="13" y="8" width="8" height="12" rx="2"/></svg>98      <svg viewBox="0 0 24 24"><circle class="icon-fill" cx="2" cy="12" r="2"/></svg>99      <svg viewBox="0 0 24 24"><path class="icon-line" d="M3 19h18"/><path class="icon-line" d="M18 21h-12"/></svg>100      <span style="font-size:28px; color:#ffffff;">96%</span>101    </div>102  </div>103 104  <!-- App bar -->105  <div class="appbar">106    <div class="appbar-left">107      <div class="icon-btn">108        <svg viewBox="0 0 24 24"><path class="icon-line" d="M15 6l-6 6 6 6"/></svg>109      </div>110      <div class="title">Travelers palm</div>111    </div>112    <div class="appbar-right">113      <div class="icon-btn">114        <!-- Heart outline -->115        <svg viewBox="0 0 24 24">116          <path class="icon-line" d="M12 21s-7-5-7-10a7 7 0 0114 0c0 5-7 10-7 10z"/>117        </svg>118      </div>119      <div class="icon-btn">120        <!-- Share -->121        <svg viewBox="0 0 24 24">122          <circle cx="18" cy="5" r="2" class="icon-line" />123          <circle cx="6" cy="12" r="2" class="icon-line" />124          <circle cx="18" cy="19" r="2" class="icon-line" />125          <path class="icon-line" d="M8 12l8-7M8 12l8 7"/>126        </svg>127      </div>128    </div>129  </div>130 131  <!-- Cards -->132  <div class="cards">133 134    <div class="card" style="background:#efeaa7;">135      <h3 style="color:#6b6b1e;">Sunlight</h3>136      <p>Full Sun (5 to 8 hours of Sun)</p>137      <div class="chevron">138        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>139      </div>140    </div>141 142    <div class="card" style="background:#efc7a6;">143      <h3 style="color:#6a3a22;">Soil</h3>144      <p>Well drained — loam</p>145      <div class="chevron">146        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>147      </div>148    </div>149 150    <div class="card" style="background:#cfd9fd;">151      <h3 style="color:#0a7a2e;">Fertilizing</h3>152      <p style="color:#0a7a2e;">Not Required</p>153      <div class="chevron">154        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>155      </div>156    </div>157 158    <div class="card" style="background:#f1f3a8;">159      <h3 style="color:#6b6b1e;">Humidity</h3>160      <p>This plant prefers high humidity 40–60 %</p>161      <div class="chevron">162        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>163      </div>164    </div>165 166    <div class="card" style="background:#efb7b2;">167      <h3 style="color:#5a2d24;">Misting</h3>168      <p>Once a month</p>169      <div class="chevron">170        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>171      </div>172    </div>173 174    <div class="card" style="background:#c7efe6;">175      <h3 style="color:#1f3e66;">Rotation</h3>176      <p>Once a month</p>177      <div class="chevron">178        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>179      </div>180    </div>181 182    <div class="card" style="background:#bfe1f6;">183      <h3 style="color:#0b3d3a;">Repotting</h3>184      <p>Every 2 years</p>185      <div class="chevron">186        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>187      </div>188    </div>189 190    <div class="card" style="background:#e8c2f0;">191      <h3 style="color:#5a2d78;">Reproduction</h3>192      <p>Through Seeds</p>193      <div class="chevron">194        <svg viewBox="0 0 24 24"><path class="icon-line" d="M7 10l5 5 5-5"/></svg>195      </div>196    </div>197 198  </div>199 200  <!-- Floating CTA -->201  <div class="cta">202    Add Plant203    <svg viewBox="0 0 24 24">204      <path class="icon-line" d="M12 4v6M9 7h6"/>205      <path class="icon-line" d="M6 16h12l-1 4H7zM8 12c2 2 6 2 8 0"/>206    </svg>207  </div>208 209  <!-- gesture bar -->210  <div class="gesture"></div>211</div>212</body>213</html>