[SC64][WEB] Added initial website

2024-12-25 04:21:56 +01:00 · 2024-01-07 19:21:11 +01:00 · 2024-01-07 19:21:11 +01:00 · d7aadf48f9
commit d7aadf48f9
parent 5ae3e32d63
6 changed files with 458 additions and 0 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -128,3 +128,15 @@ jobs:
        with:
          files: |
            sw/deployer/package/${{ matrix.package-name }}-${{ steps.version.outputs.replaced }}.${{ matrix.package-extension }}
+
+  publish-website:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./web
+          cname: summercart64.dev
--- a/web/features.html
+++ b/web/features.html
@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SummerCart64 - Features</title>
+    <link rel="stylesheet" href="./styles.css">
+    <script src="./script.js"></script>
+</head>
+
+<body>
+    <div class="menu-container">
+        <div class="menu-bar">
+            <div class="menu-buttons">
+                <img src="sc64.svg">
+                <a onclick="showMenu(event)">
+                    <div class="menu-button-line"></div>
+                    <div class="menu-button-line"></div>
+                    <div class="menu-button-line"></div>
+                </a>
+            </div>
+            <menu class="mobile-hidden">
+                <li><a href="/">Home</a></li>
+                <li class="active"><a href="/features.html">Features</a></li>
+                <li><a href="https://menu.summercart64.dev">Menu</a></li>
+                <li><a href="https://github.com/Polprzewodnikowy/SummerCart64/releases/latest">Downloads</a></li>
+                <li><a href="https://github.com/Polprzewodnikowy/SummerCart64">GitHub</a></li>
+            </menu>
+        </div>
+    </div>
+
+    <div class="main-container">
+        <main>
+            <h1>SummerCart64 features</h1>
+            <section>
+                <article>
+                    <h3>Enough space for your ROMs</h3>
+                    <p>Flashcart embeds 64&nbsp;MiB of fast SDRAM memory, with additional 14&nbsp;MiB available from the
+                        flash memory, totaling up to 78&nbsp;MiB - more than biggest known retail ROMs.</p>
+                </article>
+
+                <article>
+                    <h3>Blazing fast I/O</h3>
+                    <p>Both microSD card slot and USB port operate at peak speed of ~23.8&nbsp;MiB/s. Even largest
+                        retail ROMs (64&nbsp;MiB) can be loaded in just couple of seconds.</p>
+                </article>
+
+                <article>
+                    <h3>Never lose your progress</h3>
+                    <p>Every known save type found in the retail games is supported. Saves are automatically flushed to
+                        the microSD card (or via USB with PC app attached) during gameplay - no reset button press is
+                        necessary!</p>
+                </article>
+
+                <article>
+                    <h3>Complete 64DD emulation built-in</h3>
+                    <p>Forget about 64DD ROM conversions - SummerCart64 can play disk dumps directly!</p>
+                </article>
+
+                <article>
+                    <h3>Every region is welcome</h3>
+                    <p>SummerCart64 supports every N64 console regardless of its region. NTSC/PAL switching is done
+                        automatically and last detected region is stored inside NVRAM.</p>
+                </article>
+
+                <article>
+                    <h3>Run games with ease</h3>
+                    <p>Browse, run and manage your game library right on the N64 console with the <a
+                            href="https://menu.summercart64.dev">N64FlashcartMenu</a> - a dedicated menu software for
+                        the SummerCart64.</p>
+                </article>
+
+                <article>
+                    <h3>Dedicated terminal PC app</h3>
+                    <p>Powerful, and yet simple, <a
+                            href="https://github.com/Polprzewodnikowy/SummerCart64/releases/latest"><code>sc64deployer</code></a>
+                        app greatly enhances developer user experience.</p>
+                </article>
+
+                <article>
+                    <h3>Outstanding developer features</h3>
+                    <p>SummerCart64 was born as a device for homebrew development first. As a consequence it
+                        incorporates many features to ease development of your own games:</p>
+                    <ul>
+                        <li>Dedicated PC app for loading ROMs and console access.</li>
+                        <li>Simple, command based, communication protocol - both on the USB and N64 side.</li>
+                        <li>microSD card interface with simple, block based, protocol.</li>
+                        <li>Fast USB interface with well documented protocol.</li>
+                        <li>8&nbsp;kiB buffer for general use with microSD card or USB interface.</li>
+                        <li>Native support for microSD card and USB interface in the <a
+                                href="https://libdragon.dev/">libdragon</a>.</li>
+                        <li><a href="https://github.com/buu342/N64-UNFLoader">UNFLoader</a> support - both in the PC app
+                            and USB library.</li>
+                        <li><a href="https://github.com/devwizard64/libcart">libcart</a> support.</li>
+                        <li>IS-Viewer 64 debug interface support in the hardware.</li>
+                    </ul>
+                </article>
+
+                <article>
+                    <h3>With freedom in mind</h3>
+                    <p>SummerCart64 project is completely open source - you can modify and build upon it freely as long
+                        as GNU GPLv3 license terms are satisfied.</p>
+                </article>
+            </section>
+
+            <div class="separator"></div>
+
+            <h1>Hardware specification</h1>
+            <section>
+                <h4>Input / Output</h4>
+                <ul>
+                    <li>N64 cartridge edge connector</li>
+                    <li>microSD card slot (~23.8&nbsp;MiB/s peak, cards up to 2&nbsp;TB are supported)</li>
+                    <li>USB Type-C receptacle (~23.8&nbsp;MiB/s peak)</li>
+                    <li>Programmable push button on the back</li>
+                    <li>Status LED</li>
+                </ul>
+
+                <h4>Memory</h4>
+                <ul>
+                    <li>64&nbsp;MiB SDRAM</li>
+                    <li>16&nbsp;MiB QSPI Flash (last 2&nbsp;MiB is reserved for internal use)</li>
+                    <li>8&nbsp;kiB buffer in the FPGA</li>
+                    <li>64&nbsp;byte battery-backed NVRAM in the RTC</li>
+                </ul>
+
+                <h4>CIC emulation</h4>
+                <ul>
+                    <li>Based on the <a href="https://github.com/jago85/UltraCIC_C">UltraCIC_C</a> with enhancements
+                    </li>
+                    <li>Automatic region switch</li>
+                    <li>Fully programmable seed/checksum values</li>
+                    <li>Supports booting directly from the 64DD IPL</li>
+                </ul>
+
+                <h4>Save support</h4>
+                <ul>
+                    <li>EEPROM 4&nbsp;kbit</li>
+                    <li>EEPROM 16&nbsp;kbit</li>
+                    <li>SRAM 256&nbsp;kbit</li>
+                    <li>SRAM 3x256&nbsp;kbit</li>
+                    <li>FlashRAM 1&nbsp;Mbit</li>
+                    <li>SRAM 1&nbsp;Mbit</li>
+                    <li>Automatic writeback after ~1 second to the microSD card or USB interface</li>
+                </ul>
+
+                <h4>Add-on hardware emulation</h4>
+                <ul>
+                    <li>64DD (N64 Disk Drive) - disk access to/from microSD card or USB interface</li>
+                    <li>IS-Viewer 64 (movable base address, fixed 64&nbsp;kiB buffer size, debug <code>printf</code>
+                        only)</li>
+                </ul>
+
+                <h4>Other</h4>
+                <ul>
+                    <li>Real time clock</li>
+                    <li>CR2032 RTC backup battery</li>
+                    <li>N64 bootloader capable of loading menu binary from the microSD card and displaying error
+                        messages</li>
+                    <li>Firmware updatable via USB interface</li>
+                    <li>Seamless power switching between USB and N64</li>
+                </ul>
+            </section>
+        </main>
+    </div>
+
+    <footer>
+        <span>© 2020 - 2024 <a href="https://mateuszfaderewski.pl">Mateusz Faderewski</a></span>
+    </footer>
+</body>
+
+</html>
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SummerCart64 - Home</title>
+    <link rel="stylesheet" href="./styles.css">
+    <script src="./script.js"></script>
+</head>
+
+<body>
+    <div class="menu-container">
+        <div class="menu-bar">
+            <div class="menu-buttons">
+                <img src="sc64.svg">
+                <a onclick="showMenu(event)">
+                    <div class="menu-button-line"></div>
+                    <div class="menu-button-line"></div>
+                    <div class="menu-button-line"></div>
+                </a>
+            </div>
+            <menu class="mobile-hidden">
+                <li class="active"><a href="/">Home</a></li>
+                <li><a href="/features.html">Features</a></li>
+                <li><a href="https://menu.summercart64.dev">Menu</a></li>
+                <li><a href="https://github.com/Polprzewodnikowy/SummerCart64/releases/latest">Downloads</a></li>
+                <li><a href="https://github.com/Polprzewodnikowy/SummerCart64">GitHub</a></li>
+            </menu>
+        </div>
+    </div>
+
+    <div class="main-container">
+        <main>
+            <h1>SummerCart64 - a fully open source Nintendo 64 flashcart</h1>
+            <section>
+                <img class="sc64-logo" src="sc64.svg">
+            </section>
+        </main>
+    </div>
+
+    <footer>
+        <span>© 2020 - 2024 <a href="https://mateuszfaderewski.pl">Mateusz Faderewski</a></span>
+    </footer>
+</body>
+
+</html>
--- a/web/sc64.svg
+++ b/web/sc64.svg
@ -0,0 +1,16 @@
+<svg width="256" height="180"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="m 221.67931,112.79008 18.64423,4.99571 -74.57687,19.9828 v -9.99138 z" style="fill:#c40027" />
+  <path d="M 35.23722,71.510714 53.881419,66.51503 128.45824,86.497801 109.81405,91.493518 Z" style="fill:#c30027" />
+  <path d="m 16.593023,117.87957 18.644197,-4.99571 55.932602,14.98709 v 9.9914 z" style="fill:#c40027" />
+  <path d="M 35.23722,71.510714 V 45.213457 l 18.644199,4.995705 V 66.51503 Z" style="fill:#383880" />
+  <path d="m 109.81405,40.141539 18.64419,-4.995706 v 25.054752 l -18.64419,4.995674 z" style="fill:#383880" />
+  <path d="m 109.81403,167.57491 18.64421,-4.99571 V 86.497801 l -18.64419,4.995717 z" style="fill:#383880" />
+  <path d="m 128.45824,162.5792 18.64424,4.99571 V 40.141539 l -18.64424,-4.995706 z" style="fill:#3fa144" />
+  <path d="m 128.45824,35.145833 93.22107,-24.978519 18.64423,4.995717 -93.22106,24.978508 z" style="fill:#f1ab00" />
+  <path d="M 128.45824,35.145833 109.81402,40.141539 16.593023,15.163031 35.237228,10.167335 Z" style="fill:#f1aa00" />
+  <path d="m 16.593023,15.163031 93.221007,24.978508 2e-5,25.05472 -74.57683,-19.982802 v 26.297257 l 74.57683,19.982804 -2e-5,76.081392 -93.221007,-24.97847 v -24.71687 l 74.576799,19.98278 V 111.38991 L 16.593023,91.407113 Z" style="fill:#3fa244" />
+  <path d="m 147.10248,167.57491 93.22106,-24.97849 v -24.81063 l -74.57687,19.9828 V 60.045267 L 240.32354,40.062463 V 15.163031 l -93.22106,24.978508 z" style="fill:#383880" />
+  <path d="m 217.67375,66.546036 -17.42607,4.669019 v 38.361795 l 17.42607,-4.66904 V 82.149664 l -11.43086,3.063776 v -7.623449 l 11.43086,-3.062353 z m -5.43566,24.676981 v 7.527093 l -5.9952,1.60666 v -7.527086 z" style="fill:#c30027" />
+  <path d="m 222.22084,65.327616 6.066,-1.625399 v 15.603959 l 6.066,-1.625367 V 62.07685 l 6.066,-1.625366 v 38.361557 l -6.066,1.625369 V 85.29767 l -12.132,3.250754 z" style="fill:#c40027" />
+</svg>
--- a/web/script.js
+++ b/web/script.js
@ -0,0 +1,11 @@
+const showMenu = (event) => {
+  event.currentTarget
+    .classList
+    .toggle('active');
+  event.currentTarget
+    .parentNode
+    .parentNode
+    .getElementsByTagName('menu')[0]
+    .classList
+    .toggle('mobile-hidden');
+}
--- a/web/styles.css
+++ b/web/styles.css
@ -0,0 +1,201 @@
+:root {
+    --text-color: rgb(240, 240, 240);
+    --link-text-color: rgb(160, 160, 160);
+
+    --menu-height: 64px;
+    --menu-item-height: 48px;
+    --menu-item-spacing: 20px;
+    --menu-bg-color: rgb(32, 32, 32);
+    --menu-mobile-bg-color: rgb(20, 20, 20);
+    --menu-shadow: 0px 0px 12px rgb(0, 0, 0);
+    --menu-font-size: 16px;
+
+    --content-max-width: 840px;
+    --content-margin: 32px;
+    --content-bg-color: rgb(40, 40, 40);
+
+    --main-separator-height: 2px;
+    --main-separator-margin: 32px;
+
+    --footer-padding: 16px 32px 16px 32px;
+    --footer-font-size: 14px;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+html {
+    scroll-padding-top: calc(var(--menu-height) + var(--content-margin));
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    color: var(--text-color);
+    background-color: var(--content-bg-color);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:link,
+a:visited {
+    color: var(--link-text-color);
+}
+
+a:active,
+a:hover {
+    color: var(--text-color);
+}
+
+.sc64-logo {
+    max-width: 320px;
+}
+
+.menu-container {
+    position: fixed;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--menu-bg-color);
+    box-shadow: var(--menu-shadow);
+}
+
+.menu-bar {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    margin: 0 var(--content-margin) 0 var(--content-margin);
+    width: 100%;
+    max-width: var(--content-max-width);
+    font-size: var(--menu-font-size);
+}
+
+.menu-bar>.menu-buttons {
+    display: flex;
+    align-items: center;
+    height: var(--menu-height);
+}
+
+.menu-bar>.menu-buttons>img {
+    margin-right: var(--content-margin);
+    height: var(--menu-item-height);
+}
+
+.menu-bar>.menu-buttons>button {
+    display: none;
+}
+
+.menu-bar menu {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+.menu-bar menu>li {
+    list-style: none;
+    padding: 0 var(--menu-item-spacing) 0 var(--menu-item-spacing);
+}
+
+.menu-bar menu>li.active a {
+    color: var(--text-color);
+    font-weight: 600;
+}
+
+@media only screen and (max-width: 768px) {
+    .menu-bar {
+        flex-flow: row wrap;
+        margin: 0;
+    }
+
+    .menu-bar>.menu-buttons {
+        width: 100%;
+        margin: 0 var(--content-margin) 0 var(--content-margin);
+    }
+
+    .menu-bar>.menu-buttons>a {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        width: var(--menu-item-height);
+        height: var(--menu-item-height);
+        margin-left: auto;
+        cursor: pointer;
+    }
+
+    .menu-bar>.menu-buttons>a>.menu-button-line {
+        width: 28px;
+        height: 3px;
+        background-color: var(--link-text-color);
+        margin: 3px 0;
+        border-radius: 2px;
+    }
+
+    .menu-bar>.menu-buttons>a.active>.menu-button-line {
+        background-color: var(--text-color);
+    }
+
+    .menu-bar>menu {
+        flex-flow: column;
+        width: 100%;
+        padding: calc(var(--content-margin) / 2) 0;
+        background-color: var(--menu-mobile-bg-color);
+    }
+
+    .menu-bar>menu>li {
+        padding: calc(var(--menu-item-spacing) / 2) 0;
+        padding-left: var(--content-margin);
+    }
+
+    .menu-bar>menu>li.active {
+        background-color: var(--menu-bg-color);
+    }
+
+    .menu-bar>menu.mobile-hidden {
+        display: none;
+    }
+}
+
+.main-container {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--menu-height);
+    scroll-padding-top: var(--menu-height);
+    width: 100%;
+}
+
+main {
+    display: flex;
+    flex-flow: column;
+    margin: var(--content-margin);
+    width: 100%;
+    max-width: var(--content-max-width);
+    font-size: var(--menu-font-size);
+}
+
+main>h1 {
+    margin-top: 0;
+}
+
+main .separator {
+    height: var(--main-separator-height);
+    background-color: var(--text-color);
+    margin: var(--main-separator-margin) 0;
+}
+
+footer {
+    display: flex;
+    flex-flow: column;
+    align-self: center;
+    align-items: center;
+    margin-top: auto;
+    padding: var(--footer-padding);
+    font-size: var(--footer-font-size);
+}