GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16 17  /* Top white safe-area/header */18  .top-white {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 220px;24    background: #FFFFFF;25  }26 27  /* Centered illustration inside black viewer */28  .viewer {29    position: absolute;30    top: 220px;31    left: 0;32    width: 1080px;33    height: 2180px;34  }35 36  .illustration {37    width: 960px;38    height: 1500px;39    margin: 420px auto 0 auto; /* large top spacing like screenshot */40    background: #E0E0E0;41    border: 1px solid #BDBDBD;42    display: flex;43    align-items: center;44    justify-content: center;45    color: #555555;46    font-family: Arial, Helvetica, sans-serif;47    font-size: 36px;48    text-align: center;49    line-height: 1.4;50  }51 52  /* iOS-style home indicator */53  .home-indicator {54    position: absolute;55    bottom: 40px;56    left: 50%;57    transform: translateX(-50%);58    width: 260px;59    height: 12px;60    background: #EDEDED;61    border-radius: 8px;62    opacity: 0.95;63  }64</style>65</head>66<body>67<div id="render-target">68  <div class="top-white"></div>69 70  <div class="viewer">71    <div class="illustration">[IMG: Illustrated eco landscape with wind turbines, mountains, trees, rivers, research and transport]</div>72  </div>73 74  <div class="home-indicator"></div>75</div>76</body>77</html>