add preformatted list of devices

This avoids having the length of the page drastically changed, improving
the user experience especially in browsers that are otherwise unable to
provide a proper link to an anchor below this.

2 files changed, 92 insertions, 11 deletions

diff --git a/static/releases.html b/static/releases.html
index d56a8bb8..b50073a6 100644
--- a/static/releases.html
+++ b/static/releases.html
@@ -49,12 +49,99 @@
             it's not possible to downgrade unless a downgrade update package is generated, so use
             the Stable channel if you cannot tolerate dealing with temporary issues while a new
             release for the Beta channel is being created.</p>
+
             <noscript><strong>JavaScript is required to fetch the current list of releases from
             the update server.</strong></noscript>
+
             <h2>Stable channel</h2>
-            <div id="stable"></div>
+
+            <div id="crosshatch-stable">
+                <h3>Pixel 3 XL</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="blueline-stable">
+                <h3>Pixel 3</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="taimen-stable">
+                <h3>Pixel 2 XL</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="walleye-stable">
+                <h3>Pixel 2</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="marlin-stable">
+                <h3>Pixel XL (legacy)</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="sailfish-stable">
+                <h3>Pixel (legacy)</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+
             <h2>Beta channel</h2>
-            <div id="beta"></div>
+
+            <div id="crosshatch-beta">
+                <h3>Pixel 3 XL</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="blueline-beta">
+                <h3>Pixel 3</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="taimen-beta">
+                <h3>Pixel 2 XL</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="walleye-beta">
+                <h3>Pixel 2</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="marlin-beta">
+                <h3>Pixel XL (legacy)</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
+            <div id="sailfish-beta">
+                <h3>Pixel (legacy)</h3>
+                <p>Version loading...</p>
+                <a>Factory image url loading...</a><br/>
+                <a>Factory image signature loading...</a><br/>
+                <a>OTA update url loading...</a>
+            </div>
 
 	    <h2>Changelog</h2>
 
@@ -154,6 +241,6 @@
                 <a href="https://twitter.com/GrapheneOS">Twitter</a>
             </div>
         </footer>
-        <script src="/releases.js?2"></script>
+        <script src="/releases.js?3"></script>
     </body>
 </html>
diff --git a/static/releases.js b/static/releases.js
index b5d934cb..cb7adae9 100644
--- a/static/releases.js
+++ b/static/releases.js
@@ -76,14 +76,8 @@ for (const channel of channels) {
             release.appendChild(document.createElement("br"));
             release.appendChild(createLink(updateUrl, updateFilename));
 
-            const list = document.getElementById(channel);
-            for (const item of list.children) {
-                if (model > item.dataset.model) {
-                    list.insertBefore(release, item);
-                    return;
-                }
-            }
-            list.appendChild(release);
+            const div = document.getElementById(device + "-" + channel);
+            div.parentNode.replaceChild(release, div);
         });
     }
 }