The-Homebrew-Cloud/SummerCart64
2
0
Fork 0
mirror of https://github.com/Polprzewodnikowy/SummerCart64.git synced 2024-12-25 12:31:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

[SC64][WEB] Updated website content + made menu buttons bigger

Browse Source
This commit is contained in:
Mateusz Faderewski 2024-01-21 20:37:07 +01:00
parent f7eb6a73b4
commit 17c12f5957
3 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/features.html
View File

@ -18,12 +18,12 @@
<div class="menu-container">
<div class="menu-bar">
<div class="menu-buttons">
<img src="sc64.svg">
<a onclick="showMenu(event)">
<a href="/"><img src="sc64.svg"></a>
<div class="menu-button" onclick="showMenu(event)">
<div class="menu-button-line"></div>
<div class="menu-button-line"></div>
<div class="menu-button-line"></div>
</a>
</div>
</div>
<menu class="mobile-hidden">
<li><a href="/">Home</a></li>
@ -76,6 +76,13 @@
the SummerCart64.</p>
</article>
<article>
<h3>Full control of boot process</h3>
<p>Direct mode makes testing possible without any interference from the bootloader embedded into
SummerCart64, perfect for trying out custom IPL3 replacements giving you control right after
N64 boots up.</p>
</article>
<article>
<h3>Dedicated terminal PC app</h3>
<p>Powerful, and yet simple, <a
@ -88,7 +95,7 @@
<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>Dedicated PC app for loading ROMs and debug terminal 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>
@ -161,8 +168,9 @@
<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>Embedded N64 bootloader capable of loading menu binary from the microSD card and displaying
error messages</li>
<li>Option to disable embedded N64 bootloader (direct mode)</li>
<li>Firmware updatable via USB interface</li>
<li>Seamless power switching between USB and N64</li>
</ul>

13
web/index.html
View File

@ -18,12 +18,12 @@
<div class="menu-container">
<div class="menu-bar">
<div class="menu-buttons">
<img src="sc64.svg">
<a onclick="showMenu(event)">
<a href="/"><img src="sc64.svg"></a>
<div class="menu-button" onclick="showMenu(event)">
<div class="menu-button-line"></div>
<div class="menu-button-line"></div>
<div class="menu-button-line"></div>
</a>
</div>
</div>
<menu class="mobile-hidden">
<li class="active"><a href="/">Home</a></li>
@ -48,9 +48,10 @@
href="https://github.com/buu342/N64-UNFLoader">UNFLoader</a>, and well documented API, testing
your homebrew on real hardware was never this easy before!</p>
<p>SummerCart64 employs features not available in other N64 flashcarts, like <strong>64DD</strong>
hardware emulation, automatic save backup <strong>during gameplay</strong>, making it the best
choice for both players and game developers. Please check <a href="/features.html">full feature
list</a> for more details!</p>
hardware emulation, automatic save backup <strong>during gameplay</strong>, or ability to behave
like a stock game pak with <strong>direct mode</strong>, making it the best choice for both players
and game developers. Please check <a href="/features.html">full feature list</a> for more details!
</p>
<div class="pcb-images">
<img src="sc64-render-front.png">
<img src="sc64-render-back.png">

38
web/styles.css
View File

@ -6,8 +6,8 @@
--menu-item-height: 48px;
--menu-item-spacing: 20px;
--menu-bg-color: rgb(28, 28, 28);
--menu-active-color: rgb(40, 40, 40);
--menu-mobile-bg-color: rgb(20, 20, 20);
--menu-mobile-active-color: rgb(40, 40, 40);
--menu-shadow: 0px 0px 12px rgb(0, 0, 0);
--menu-font-size: 16px;
@ -72,7 +72,6 @@ a:hover {
.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);
@ -85,8 +84,11 @@ a:hover {
height: var(--menu-height);
}
.menu-bar>.menu-buttons>img {
margin-right: var(--content-margin);
.menu-bar>.menu-buttons a {
height: var(--menu-item-height);
}
.menu-bar>.menu-buttons img {
height: var(--menu-item-height);
}
@ -94,15 +96,26 @@ a:hover {
display: none;
}
.menu-bar menu {
.menu-bar>menu {
display: flex;
margin: 0;
margin-left: var(--content-margin);
padding: 0;
}
.menu-bar menu>li {
.menu-bar>menu>li {
list-style: none;
padding: 0 var(--menu-item-spacing) 0 var(--menu-item-spacing);
}
.menu-bar>menu>li:hover {
background-color: var(--menu-active-color);
}
.menu-bar>menu>li a {
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--menu-item-spacing);
}
.menu-bar menu>li.active a {
@ -121,7 +134,7 @@ a:hover {
margin: 0 var(--content-margin) 0 var(--content-margin);
}
.menu-bar>.menu-buttons>a {
.menu-bar>.menu-buttons>.menu-button {
display: flex;
flex-flow: column;
justify-content: center;
@ -132,7 +145,7 @@ a:hover {
cursor: pointer;
}
.menu-bar>.menu-buttons>a>.menu-button-line {
.menu-bar>.menu-buttons>.menu-button>.menu-button-line {
width: 28px;
height: 3px;
background-color: var(--link-text-color);
@ -140,12 +153,13 @@ a:hover {
border-radius: 2px;
}
.menu-bar>.menu-buttons>a.active>.menu-button-line {
.menu-bar>.menu-buttons>.menu-button.active>.menu-button-line {
background-color: var(--text-color);
}
.menu-bar>menu {
flex-flow: column;
margin: 0;
width: 100%;
background-color: var(--menu-mobile-bg-color);
}
@ -153,7 +167,7 @@ a:hover {
.menu-bar>menu>li {
height: var(--menu-item-height);
padding: 0;
border-bottom: 1px solid var(--menu-mobile-active-color);
border-bottom: 1px solid var(--menu-active-color);
}
.menu-bar>menu>li:last-child {
@ -161,7 +175,7 @@ a:hover {
}
.menu-bar>menu>li.active {
background-color: var(--menu-mobile-active-color);
background-color: var(--menu-active-color);
}
.menu-bar>menu>li>a {