App/AppStore/header.html

 1<!doctype html>
 2<!-- Product page header: three iPhones fanned over the icon's night sky and red horizon.
 3     header.html renders the 21:9 header (3840x1646), header.html#wide the 16:9 one (5244x2950),
 4     with headless Chromium, then the alpha channel is removed:
 5     Chromium --headless --hide-scrollbars --force-device-scale-factor=1 --window-size=3840,1646 --screenshot=header-21x9.png header.html
 6     Chromium --headless --hide-scrollbars --force-device-scale-factor=1 --window-size=5244,2950 --screenshot=header-16x9.png "file://$PWD/header.html#wide"
 7     magick header-21x9.png -alpha off PNG24:header-21x9.png -->
 8<html>
 9<head>
10<meta charset="utf-8">
11<style>
12  :root { --u: 1px; --top: 180px; }
13  * { box-sizing: border-box; }
14  html, body { margin: 0; width: 3840px; height: 1646px; overflow: hidden; }
15  body {
16    position: relative;
17    background:
18      radial-gradient(ellipse 55% 75% at 50% 30%, #1c2c4a 0%, #0a1424 55%, #05080f 100%);
19  }
20  body::after {
21    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
22    height: calc(200 * var(--u)); background: #05080f; border-top: calc(10 * var(--u)) solid #e03d30; z-index: 3;
23  }
24  .iphone {
25    position: absolute; left: 50%; top: var(--top);
26    width: calc(860 * var(--u)); height: calc(1868 * var(--u));
27    padding: calc(24 * var(--u)); border-radius: calc(140 * var(--u)); background: #0c0c12;
28    box-shadow: 0 0 0 calc(4 * var(--u)) rgba(255, 255, 255, 0.14), 0 calc(50 * var(--u)) calc(120 * var(--u)) rgba(0, 0, 0, 0.6);
29  }
30  .iphone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(116 * var(--u)); }
31  .center { transform: translateX(-50%); z-index: 2; }
32  .left { transform: translate(calc(-50% - 760 * var(--u)), calc(120 * var(--u))) rotate(-8deg); }
33  .right { transform: translate(calc(-50% + 760 * var(--u)), calc(120 * var(--u))) rotate(8deg); }
34
35  /* 16:9, 5244x2950. */
36  html.wide { --u: 1.6px; --top: 420px; }
37  html.wide, .wide body { width: 5244px; height: 2950px; }
38</style>
39<script>if (location.hash === "#wide") document.documentElement.className = "wide";</script>
40</head>
41<body>
42  <div class="iphone left"><img src="screenshots/iphone-6.9/04-3d.png"></div>
43  <div class="iphone right"><img src="screenshots/iphone-6.9/08-jupiter.png"></div>
44  <div class="iphone center"><img src="screenshots/iphone-6.9/01-sky.png"></div>
45</body>
46</html>