libreshop/libreshop_website
2
0
Fork 2
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: libreshop:33eb37d236d5bc862ec76cba9b6b1e8f03f00a33
Branches Tags
libreshop:main
...
compare: libreshop:b60213067937d16d50ca2ba782b0e59b0c50ce19
Branches Tags
libreshop:main

2 Commits
33eb37d236 ... b602130679

Author SHA1 Message Date
emilyd
b602130679 Merge pull request 'The whole website (not all but still in work)' (#1) from Gabubu/libreshop_website:main into main 
Reviewed-on: #1
 2023-08-02 19:27:03 +00:00
GabubuAvailable
a635a6f4ad Not the first commit 2023-08-02 22:20:38 +03:00
18 changed files with 392 additions and 0 deletions
Show Stats Expand all files Collapse all files

50
content/download.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round">
<link rel="stylesheet" href="index/style.css">
<title>LibreShop</title>
<link rel="icon" type="image/x-icon" href="head/logo_fav.png">
<meta content="LibreShop" property="og:title">
<meta content="LibreShop is an app that lets you download Homebrew apps onto your Wii." property="og:description">
<meta content="ADD THAT LATER - LINK EMBED" property="og:url">
<meta content="head/logo_embed.png" property="og:image">
<meta content="#2a7589" data-react-helmet="true" name="theme-color">
</head>
<header>
<img src="index/logo.png" style="height: 50px; padding-top: 15px; padding-left: 20px; padding-right: 20px;">
<a href="../index.html" style="margin-top: auto; margin-bottom: auto;">Home</a>
<a href="download.html" style="margin-top: auto; margin-bottom: auto;">Download</a>
<a href="" style="margin-top: auto; margin-bottom: auto;">Wiki</a>
<a href="" style="margin-top: auto; margin-bottom: auto;">About</a>
</header>
<body>
<div class="content" style="padding-left: 3%;">
<h1>Download page</h1>
<a href="" class="download" style="display: block; text-align: center; width: 230px;">Download the latest version</a>
<p>After downloading it is recommeded to check the MD5 hash!</p>
<p>The latest version's MD5 is:</p>
<code style="background-color: #163f55; padding: 2px; font-size: 15px;">1234567890123456789012345678901234567890</code>
</div>
</body>
<footer>
<div class="grid-footer">
<div class="footer-item1"><p>This is a homebrew project and it is not affiliated with Nintendo and all trademarks are the property of their respective owners. No copyright infringement intended.</p></div>
<div class="footer-item2">
<p style="text-align: right;"><span>&#169;</span> LibreShop - 2023</p>
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 0px;">
</div>
</div>
</footer>
</html>

BIN
content/footer/socialmedia/sc01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 613 B

BIN
content/head/logo_embed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
content/head/logo_fav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

13
content/index/collaps.js Normal file
View File

@ -0,0 +1,13 @@
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var details = this.nextElementSibling;
if (details.style.maxHeight){
details.style.maxHeight = null;
} else {
details.style.maxHeight = details.scrollHeight + "px";
}
});
}

BIN
content/index/feature/feature01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
content/index/feature/feature02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
content/index/feature/feature03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
content/index/feature/feature04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
content/index/libreshop_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
content/index/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
content/index/screenshot/screenshot-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
content/index/screenshot/screenshot-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
content/index/screenshot/screenshot-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
content/index/screenshot/screenshot-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
content/index/screenshot/screenshot-05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

225
content/index/style.css Normal file
View File

@ -0,0 +1,225 @@
/* body, more like the background and font */
body {
margin: 0 auto;
font-family: "Varela Round", sans-serif;
background-color: #08171f;
background-image: url(libreshop_bg.png);
animation: background 30s infinite linear;
transition: 5s;
color: white;
}
/* the website's header */
header {
display: flex;
padding: auto;
height: 80px;
gap: 5px;
background-color: #173e49;
}
a {
display: block;
color: white;
width: 100px;
padding: 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
border: none;
transition-duration: 0.2s;
}
a:hover {
color: rgb(0, 182, 214);
}
/* the website's body */
.content {
margin: 0 auto;
padding-bottom: 25px;
width: 95%;
}
/* the welcome message and randomizer */
.item1 { grid-area: main; margin-top: 5px;}
.item2 { grid-area: right; margin-top: 5px;}
.grid-container {
display: grid;
grid-template-areas:
'main main main main right right';
grid-template-columns: auto;
}
.grid-container > div {
margin: auto;
padding: 10px 10px;
}
.randomapp {
background-color: #19505f;
border: 2px solid #37b0d1;
border-radius: 5px;
color: white;
}
/* the features */
.grid-features {
overflow: auto;
display: flex;
margin: auto;
margin-top: 20px;
justify-content: center;
grid-template-areas:
'main main main main right right';
gap: 20px;
grid-template-columns: auto;
}
.grid-features > div {
margin-bottom: auto;
padding: 10px 10px;
}
.grid-item01 {
border-radius: 5px;
width: 250px;
background-color: #19505f;
border: 2px solid #37b0d1;
text-align: center;
transition: 0.25s;
}
.grid-item02 {
border-radius: 5px;
width: 250px;
background-color: #19505f;
border: 2px solid #37b0d1;
text-align: center;
transition: 0.25s;
}
.grid-item03 {
border-radius: 5px;
width: 250px;
background-color: #19505f;
border: 2px solid #37b0d1;
text-align: center;
transition: 0.25s;
}
.grid-item04 {
border-radius: 5px;
width: 250px;
background-color: #19505f;
border: 2px solid #37b0d1;
text-align: center;
transition: 0.25s;
}
.collapsible {
background-color: #3089a1;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.2s;
border: 2px solid #37b0d1;
border-radius: 5px;
}
.collapsible:hover {
background-color: #3ba9c7;
}
.active {
background-color: #3ba9c7;
border-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.details {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #11343d;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* the screenshots */
.gallery {
overflow: auto;
display: flex;
margin: auto;
margin-top: 20px;
width: 94%;
white-space: nowrap;
padding: 10px;
border: 2px solid #37b0d1;
border-radius: 5px;
background-color: #19505f;
}
.gallery img {
padding: 10px;
}
/* download button */
.download {
background-color: #3089a1;
border: none;
color: white;
width: 100px;
height: 20px;
padding: 15px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
transition-duration: 0.2s;
border-radius: 5px;
border: 2px solid #37b0d1;
}
.download:hover {
background-color: #3ba9c7;
color: white;
}
/* footer */
footer {
position: relative;
min-height: 100%;
overflow: hidden;
background-color: #245f71;
}
.footer-item1 {grid-area: main;}
.footer-item2 {grid-area: right;}
.grid-footer {
display: grid;
grid-template-areas:
'main right right right right right';
grid-template-columns: auto;
}
.grid-footer > div {
margin: auto;
padding: 30px 50px;
}
/* some fancy animations */
@keyframes intro-01 {
from {opacity: 0%}
to {opacity: 100%}
}
@keyframes intro-02 {
from {opacity: 0%; margin-top: 50px;}
to {opacity: 100%; margin-top: 20px;}
}
@keyframes intro-03 {
from {opacity: 0%; margin-top: 100px; margin-bottom: 0px;}
to {opacity: 100%; margin-top: 50px; margin-bottom: 0px;}
}
@keyframes intro-04 {
from {opacity: 0%; margin-top: 50px; margin-bottom: 0px;}
to {opacity: 100%; margin-top: 20px; margin-bottom: 0px;}
}
@keyframes background {
from {background-position-x: 0px;}
to {background-position-x: -782px;}
}
@keyframes intro-bg {
from {opacity: 0%;}
to {opacity: 100%;}
}

104
index.html Normal file
View File

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round">
<link rel="stylesheet" href="content/index/style.css">
<title>LibreShop</title>
<link rel="icon" type="image/x-icon" href="content/head/logo_fav.png">
<meta content="LibreShop" property="og:title">
<meta content="LibreShop is an app that lets you download Homebrew apps onto your Wii." property="og:description">
<meta content="ADD THAT LATER - LINK EMBED" property="og:url">
<meta content="content/head/logo_embed.png" property="og:image">
<meta content="#2a7589" data-react-helmet="true" name="theme-color">
</head>
<header>
<img src="content/index/logo.png" style="height: 50px; padding-top: 15px; padding-left: 20px; padding-right: 20px;">
<a href="index.html" style="margin-top: auto; margin-bottom: auto;">Home</a>
<a href="content/download.html" style="margin-top: auto; margin-bottom: auto;">Download</a>
<a href="" style="margin-top: auto; margin-bottom: auto;">Wiki</a>
<a href="" style="margin-top: auto; margin-bottom: auto;">About</a>
</header>
<body>
<div class="content">
<div class="grid-container">
<div class="item1" style="animation: intro-01 2s;">
<h2>Welcome to LibreShop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="item2" style="animation: intro-01 2s;">
<h2>Randomizer:</h2>
<div class="randomapp" style="height: 200px; width: 400px;">
<p>still in work...</p>
</div>
</div>
</div>
<h1 style="text-align: center; margin-top: 20px; margin-bottom: 0px; margin-top: 50px; animation: intro-03 3s;">What are the features?</h1>
<div class="grid-features" style="animation: intro-02 3s; padding-bottom: 10px;">
<div class="grid-item01">
<img src="content/index/feature/feature01.png">
<h3>Faster and stable</h3>
<button class="collapsible">Read more</button>
<div class="details">
<p style="height: 100px;">LibreShop is faster and more stable than Homebrew Browser.</p>
</div>
</div>
<div class="grid-item02">
<img src="content/index/feature/feature02.png">
<h3>Always up-to-date</h3>
<button class="collapsible">Read more</button>
<div class="details">
<p style="height: 100px;">LibreShop is continuously being worked on, and bugs are being fixed all of the time.</p>
</div>
</div>
<div class="grid-item03">
<img src="content/index/feature/feature03.png">
<h3>Easy to install</h3>
<button class="collapsible">Read more</button>
<div class="details">
<p style="height: 100px;">Just extract the archive onto your SD card and enjoy LibreShop! No extra steps are required!</p>
</div>
</div>
<div class="grid-item04">
<img src="content/index/feature/feature04.png">
<h4 style="font-size: 15px;">Open Shop Channel support</h4>
<button class="collapsible">Read more</button>
<div class="details">
<p style="height: 100px;">You can download your favourite Homebrew apps from the Open Shop Channel's library with LibreShop!</p>
</div>
</div>
<script src="content/index/collaps.js"></script>
</div>
<h1 style="text-align: center; margin-top: 20px; margin-bottom: 0px; margin-top: 50px; animation: intro-03 3s;">Screenshots</h1>
<div class="gallery" style="animation: intro-04 3s; padding-bottom: 10px;">
<img src="content/index/screenshot/screenshot-01.png" style="height: 340px;" alt="Screenshot 01">
<img src="content/index/screenshot/screenshot-02.png" style="height: 340px;" alt="Screenshot 02">
<img src="content/index/screenshot/screenshot-03.png" style="height: 340px;" alt="Screenshot 03">
<img src="content/index/screenshot/screenshot-04.png" style="height: 340px;" alt="Screenshot 04">
<img src="content/index/screenshot/screenshot-05.png" style="height: 340px;" alt="Screenshot 05">
</div>
<div style="animation: intro-03 3s; margin-top: 50px;">
<h1 style="text-align: center;">Ready to try it out?</h1>
<a href="content/download.html" class="download" style="display: block; text-align: center; width: 200px; margin: auto;">Download LibreShop</a>
</div>
</div>
</body>
<footer>
<div class="grid-footer">
<div class="footer-item1"><p>This is a homebrew project and it is not affiliated with Nintendo and all trademarks are the property of their respective owners. No copyright infringement intended.</p></div>
<div class="footer-item2">
<p style="text-align: right;"><span>&#169;</span> LibreShop - 2023</p>
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 5px;">
<img src="content/footer/socialmedia/sc01.png" style="padding-left: 0px; padding-right: 0px;">
</div>
</div>
</footer>
</html>