GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>All Against All - UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Top black strip like in the screenshot */22  .top-bar {23    position: absolute;24    left: 0;25    top: 0;26    width: 1080px;27    height: 180px;28    background: #000;29  }30 31  /* Book cover container */32  .book-cover {33    position: absolute;34    left: 90px;35    top: 520px;36    width: 900px;37    height: 1460px;38    background: linear-gradient(to bottom, #d86a2d 0 30%, #0a0a0a 30% 72%, #d86a2d 72% 100%);39    border: 3px solid #ffffff;40    box-shadow: 0 30px 60px rgba(0,0,0,0.25);41  }42  .inner-frame {43    position: absolute;44    left: 24px;45    top: 24px;46    right: 24px;47    bottom: 24px;48    border: 2px solid rgba(255,255,255,0.8);49    pointer-events: none;50  }51 52  /* Image placeholders inside the cover */53  .img {54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    color: #757575;57    display: flex;58    justify-content: center;59    align-items: center;60    font-size: 28px;61    text-align: center;62  }63  .ape-illustration {64    position: absolute;65    left: 50px;66    top: 80px;67    width: 800px;68    height: 380px;69  }70  .ape-row {71    position: absolute;72    left: 50px;73    bottom: 150px;74    width: 800px;75    height: 200px;76  }77 78  /* Text styling on the cover */79  .title-word {80    position: absolute;81    color: #d9e0d6;82    font-weight: 900;83    letter-spacing: 18px;84    text-transform: uppercase;85    text-align: center;86    width: 100%;87  }88  .title-all-top {89    top: 620px;90    font-size: 260px;91  }92  .title-all-bottom {93    top: 980px;94    font-size: 260px;95  }96  .against {97    position: absolute;98    top: 830px;99    width: 100%;100    text-align: center;101    color: #d9e0d6;102    font-weight: 800;103    font-size: 140px;104    letter-spacing: 10px;105    text-transform: uppercase;106  }107  .against::before,108  .against::after {109    content: "";110    position: absolute;111    left: 150px;112    right: 150px;113    height: 12px;114    background: rgba(217,224,214,0.5);115  }116  .against::before { top: 20px; }117  .against::after { bottom: 20px; }118 119  .author {120    position: absolute;121    bottom: 60px;122    width: 100%;123    text-align: center;124    color: #f3e7d7;125    letter-spacing: 12px;126    font-size: 56px;127    text-transform: uppercase;128    font-weight: 700;129  }130</style>131</head>132<body>133<div id="render-target">134  <div class="top-bar"></div>135 136  <div class="book-cover">137    <div class="inner-frame"></div>138 139    <div class="img ape-illustration">[IMG: Ape illustration with gun]</div>140 141    <div class="title-word title-all-top">ALL</div>142    <div class="against">AGAINST</div>143    <div class="title-word title-all-bottom">ALL</div>144 145    <div class="img ape-row">[IMG: Row of ape faces]</div>146 147    <div class="author">NATHAN ALLEN</div>148  </div>149</div>150</body>151</html>