GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Decathlon UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10  }11 12  /* Status bar */13  .status-bar {14    height:110px;15    padding:18px 30px 0 30px;16    box-sizing:border-box;17    display:flex; align-items:flex-start; justify-content:space-between;18    color:#222;19    font-weight:600;20  }21  .status-left { display:flex; align-items:center; gap:18px; }22  .time { font-size:42px; letter-spacing:0.5px; }23  .temp { font-size:36px; color:#555; }24  .mini-icons { display:flex; align-items:center; gap:14px; }25  .status-right { display:flex; align-items:center; gap:20px; }26 27  /* Layout containers */28  .screen-body { padding:20px 30px 0 30px; box-sizing:border-box; }29  .row { display:flex; gap:28px; }30  .top-row .img-card { height:640px; flex:1; }31  .bottom-row { margin-top:28px; }32  .bottom-row .img-card { height:700px; flex:1; }33 34  .img-card {35    background:#E0E0E0;36    border:1px solid #BDBDBD;37    border-radius:14px;38    display:flex; align-items:center; justify-content:center;39    color:#757575; font-size:30px; text-align:center; padding:16px;40  }41 42  /* Banner */43  .banner {44    margin-top:28px;45    height:800px;46    border-radius:16px;47    background: linear-gradient(180deg, #9FE3E5 0%, #77D6D9 50%, #5FCFD3 100%);48    position:relative;49    border:1px solid #BBDCDD;50    overflow:hidden;51  }52  /* subtle wave layers */53  .banner::before, .banner::after {54    content:"";55    position:absolute; left:-120px; right:-120px;56    height:380px; border-radius:50%;57    background: rgba(255,255,255,0.25);58    transform: translateY(140px);59  }60  .banner::after {61    height:460px; transform: translateY(430px);62    background: rgba(255,255,255,0.22);63  }64  .logo-box {65    position:absolute; left:50%; top:50%;66    transform:translate(-50%, -50%);67    width:760px; height:180px;68    background:#2E6BD5;69    border-radius:12px;70    border:2px solid #1D57B8;71    display:flex; align-items:center; justify-content:center;72    color:#ffffff; font-size:80px; font-weight:800; letter-spacing:4px;73  }74  .logo-box span { opacity:0.95; }75 76  /* Map/location pin */77  .pin {78    position:absolute; left:540px; top:1620px; transform:translateX(-50%);79    width:58px; height:58px;80    background:#3B8BFF; border-radius:50%;81    box-shadow:0 6px 12px rgba(0,0,0,0.15);82  }83  .pin::after {84    content:"";85    position:absolute; left:50%; bottom:-26px;86    width:0; height:0;87    border-left:14px solid transparent;88    border-right:14px solid transparent;89    border-top:26px solid #3B8BFF;90    transform:translateX(-50%);91  }92  .pin::before {93    content:"";94    position:absolute; left:50%; top:50%;95    width:20px; height:20px; background:#ffffff; border-radius:50%;96    transform:translate(-50%, -50%);97  }98 99  /* Home indicator */100  .home-indicator {101    position:absolute; left:50%; bottom:40px; transform:translateX(-50%);102    width:600px; height:14px; border-radius:8px; background:#BDBDBD;103    opacity:0.9;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    <div class="status-left">113      <span class="time">10:34</span>114      <span class="temp">14°</span>115      <div class="mini-icons">116        <!-- simple sun icon -->117        <svg width="26" height="26" viewBox="0 0 24 24">118          <circle cx="12" cy="12" r="5" fill="#FDB813"></circle>119          <g stroke="#FDB813" stroke-width="2">120            <line x1="12" y1="1" x2="12" y2="5"></line>121            <line x1="12" y1="19" x2="12" y2="23"></line>122            <line x1="1" y1="12" x2="5" y2="12"></line>123            <line x1="19" y1="12" x2="23" y2="12"></line>124          </g>125        </svg>126        <!-- tiny cloud icon -->127        <svg width="28" height="24" viewBox="0 0 24 24">128          <path d="M7 17h9a4 4 0 0 0 0-8h-1.3a5 5 0 0 0-9.7 2.2A4 4 0 0 0 7 17z" fill="#A0A0A0"></path>129        </svg>130      </div>131    </div>132    <div class="status-right">133      <!-- signal bars -->134      <svg width="28" height="24" viewBox="0 0 24 24">135        <rect x="3" y="13" width="3" height="8" fill="#666"></rect>136        <rect x="9" y="9" width="3" height="12" fill="#666"></rect>137        <rect x="15" y="5" width="3" height="16" fill="#666"></rect>138      </svg>139      <!-- Wi-Fi icon -->140      <svg width="30" height="24" viewBox="0 0 24 24">141        <path d="M2 8c5-5 15-5 20 0" stroke="#666" stroke-width="2" fill="none" />142        <path d="M6 12c3-3 9-3 12 0" stroke="#666" stroke-width="2" fill="none" />143        <circle cx="12" cy="17" r="2" fill="#666"></circle>144      </svg>145      <!-- Battery icon -->146      <svg width="42" height="24" viewBox="0 0 42 24">147        <rect x="1" y="5" width="34" height="14" rx="3" ry="3" stroke="#666" stroke-width="2" fill="none"></rect>148        <rect x="4" y="8" width="27" height="8" rx="2" fill="#666"></rect>149        <rect x="36" y="9" width="4" height="6" rx="1" fill="#666"></rect>150      </svg>151    </div>152  </div>153 154  <div class="screen-body">155 156    <!-- Top image row -->157    <div class="row top-row">158      <div class="img-card">[IMG: Child on pool float in blue water]</div>159      <div class="img-card">[IMG: Hiker resting on wet rock in rain]</div>160    </div>161 162    <!-- Central banner with logo -->163    <div class="banner">164      <div class="logo-box"><span>DECATHLON</span></div>165    </div>166 167    <!-- Bottom image row -->168    <div class="row bottom-row">169      <div class="img-card">[IMG: Cyclists with road bikes outdoors]</div>170      <div class="img-card">[IMG: Woman doing indoor cardio workout]</div>171    </div>172 173  </div>174 175  <!-- Location pin overlay -->176  <div class="pin"></div>177 178  <!-- Home indicator -->179  <div class="home-indicator"></div>180</div>181</body>182</html>