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>Product Detail - Bananinha</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13    border-radius: 0;14  }15 16  /* Top hero image */17  .hero {18    position: absolute;19    top: 0; left: 0;20    width: 1080px; height: 1100px;21    background: #E0E0E0;22    border-bottom: 1px solid #BDBDBD;23    display: flex; align-items: flex-end; justify-content: flex-start;24    box-sizing: border-box;25  }26  .hero .img-label {27    width: 100%;28    height: 100%;29    border: 1px solid #BDBDBD;30    box-sizing: border-box;31    display: flex; align-items: center; justify-content: center;32    color: #757575; font-size: 40px; font-weight: 600;33    text-align: center; padding: 20px;34  }35 36  /* Floating top buttons */37  .top-btn {38    position: absolute;39    width: 120px; height: 120px;40    background: #fff; border-radius: 60px;41    box-shadow: 0 6px 12px rgba(0,0,0,0.25);42    display: flex; align-items: center; justify-content: center;43  }44  .top-btn.left { top: 64px; left: 48px; }45  .top-btn.right { top: 64px; right: 48px; }46  .top-btn svg { width: 64px; height: 64px; }47 48  /* Bottom white sheet */49  .sheet {50    position: absolute;51    top: 950px; left: 0;52    width: 100%; height: 1450px;53    background: #ffffff;54    border-top-left-radius: 60px;55    border-top-right-radius: 60px;56    box-sizing: border-box;57  }58  .sheet .content {59    padding: 80px 72px 0 72px;60  }61  .title {62    font-size: 84px; line-height: 1.05; font-weight: 800; margin: 0 0 20px 0; color: #000;63  }64  .subtitle {65    font-size: 40px; color: #6f6f6f; margin: 0 0 44px 0;66  }67  .price {68    font-size: 52px; font-weight: 700; color: #000; margin: 0 0 20px 0;69  }70 71  /* Bottom controls */72  .controls {73    position: absolute;74    left: 48px; right: 48px; bottom: 220px;75    display: flex; align-items: center; justify-content: space-between;76  }77  .stepper {78    width: 430px; height: 120px;79    background: #fff; border-radius: 60px;80    box-shadow: 0 10px 24px rgba(0,0,0,0.12);81    display: flex; align-items: center; justify-content: space-between;82    padding: 0 40px; box-sizing: border-box;83    font-size: 48px; font-weight: 700; color: #000;84  }85  .stepper .icon {86    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;87    color: #000;88  }89  .add-btn {90    width: 520px; height: 120px;91    background: #2ED67A; color: #fff;92    border-radius: 60px;93    box-shadow: 0 10px 24px rgba(46, 214, 122, 0.4);94    display: flex; align-items: center; justify-content: center;95    font-size: 44px; font-weight: 800;96  }97 98  /* Home indicator */99  .home-indicator {100    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);101    width: 420px; height: 10px; background: #bdbdbd; border-radius: 6px;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Hero image placeholder -->109  <div class="hero">110    <div class="img-label">[IMG: Snack wrapper on wooden table – “Bananinha”]</div>111  </div>112 113  <!-- Back button -->114  <div class="top-btn left">115    <svg viewBox="0 0 48 48">116      <path d="M32 8 L16 24 L32 40" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>117      <path d="M16 24 L40 24" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>118    </svg>119  </div>120 121  <!-- Share button -->122  <div class="top-btn right">123    <svg viewBox="0 0 48 48">124      <path d="M18 30 L34 14" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125      <path d="M34 14 L34 26" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126      <path d="M34 14 L22 14" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>127    </svg>128  </div>129 130  <!-- White content sheet -->131  <div class="sheet">132    <div class="content">133      <div class="title">Bananinha</div>134      <div class="subtitle">Doce de banana</div>135      <div class="price">R$6,00</div>136    </div>137 138    <!-- Bottom controls inside sheet -->139    <div class="controls">140      <div class="stepper">141        <div class="icon">−</div>142        <div>1</div>143        <div class="icon">+</div>144      </div>145      <div class="add-btn">Add R$6,00</div>146    </div>147  </div>148 149  <!-- Home indicator -->150  <div class="home-indicator"></div>151</div>152</body>153</html>