FAQ and progress sections

This commit is contained in:
Jip Fr 2020-05-06 21:59:53 +02:00
parent a82bebb07a
commit 912b0c70ad
3 changed files with 175 additions and 12 deletions

View File

@ -21,7 +21,7 @@ body {
max-width: 1590px;
}
h1.dot:after {
h1.dot:after, h2.dot:after {
content: ".";
color: #A1A8D9;
}
@ -141,4 +141,65 @@ header nav a {
width: 40px;
height: 40px;
display: block;
}
/* Non-hero sections */
.sect .title {
font-size: 3.125rem;
}
section.progress {
margin-top: 400px;
}
.column-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.sect .title {
margin: 0;
}
.sect .text {
margin: 22px 0;
width: 64%;
line-height: 1.7;
}
section.progress .left, section.progress .right {
padding: 50px 0;
}
section.progress .right {
position: relative;
padding-left: 80px;
height: 300px;
background: #673DB6;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
section.progress .right:before {
content: "";
width: 300vw;
position: absolute;
height: 100%;
background: yellow;
left: 90%;
margin-top: -50px;
background: #673DB6;
}
section.faq {
margin-top: 200px;
}
.questions {
margin-top: 30px;
}
.question-and-answer summary::-webkit-details-marker {
display: none;
}
.question-and-answer summary {
font-size: 1.5625rem;
}
.question-and-answer .text {
margin: 5px;
line-height: 1.85;
}

View File

@ -9,28 +9,28 @@
<header>
<img src="logo-with-text.svg">
<nav>
<a>About</a>
<a>Faq</a>
<a>Credits</a>
<a>{{ locale.nav.about }}</a>
<a>{{ locale.nav.faq }}</a>
<a>{{ locale.nav.credits }}</a>
</nav>
</header>
<section class="hero">
<div class="hero-meta">
<h3 class="subtitle">Game servers</h3>
<h1 class="title dot">Recreated</h1>
<h3 class="subtitle">{{ locale.hero.subtitle }}</h3>
<h1 class="title dot">{{ locale.hero.title }}</h1>
<p class="text">
An open source project that aims to recreate all Nintendo servers for 3DS and WiiU. This way the services can persist after officially killed by Nintendo.
{{ locale.hero.text }}
</p>
<div class="buttons">
<button class="button primary">
Read more
{{ locale.hero.buttons.readMore }}
</button>
<a href="https://invite.gg/pretendo">
<a href="https://invite.gg/pretendo" target="_blank">
<button class="button secondary discord icon-btn">
<svg data-prefix="fab" data-icon="discord" class="svg-inline--fa fa-discord fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>
</button>
</a>
<a href="https://ishetal3uur.nl">
<a href="https://ishetal3uur.nl" target="_blank">
<button class="button secondary github icon-btn">
<svg data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
</button>
@ -46,4 +46,39 @@
<div class="purple-circle"></div>
</div>
</section>
<section class="progress column-2">
<div class="left sect">
<div class="left-meta">
<h2 class="dot title">{{ locale.section2.left.title }}</h2>
{{#each locale.section2.left.paragraphs}}
<p class="text">{{ this }}</p>
{{/each}}
</div>
</div>
<div class="right sect">
<h2 class="dot title">{{ locale.section2.right.title }}</h2>
{{#each locale.section2.right.paragraphs}}
<p class="text">{{ this }}</p>
{{/each}}
</div>
</section>
<section class="faq">
<div class="sect-top sect column-2">
<div class="left-meta">
<h2 class="dot title">{{ locale.faq.title }}</h2>
<p class="text">{{ locale.faq.text }}</p>
</div>
</div>
<div class="questions column-2">
{{#each locale.faq.QAs}}
<details class="question-and-answer">
<summary>
{{ question }}
</summary>
<p class="text">{{{ answer }}}</p>
</details>
{{/each}}
</div>
<script>document.querySelector("details").setAttribute("open", true)</script>
</section>
</div>

View File

@ -4,13 +4,80 @@ const router = new Router();
router.get("/", (req, res) => {
const myLocale = {
const tmpLocale = {
// TODO
nav: {
about: "About",
faq: "Faq",
credits: "Credits"
},
hero: {
subtitle: "Game servers",
title: "Recreated", // No dot here.
text: "An open source project that aims to recreate all Nintendo servers for 3DS and WiiU. This way the services can persist after officially killed by Nintendo.",
buttons: {
readMore: "Read more"
}
},
section2: {
left: {
title: "About us",
paragraphs: [
"We are a bunch of programmers spending our free time reverse engineering and coding game servers for 3DS and WiiU",
"An open source project that aims to recreate all Nintendo servers for 3DS and WiiU. This way the services can persist after they are officialy killed by Nintendo"
]
},
right: {
title: "Progress",
paragraphs: [
"Now what are the possibilities of warp drive? Hello world, this is just s'more text. Hello hello world world hello! Some.",
"10.000 luchtballonnen, kleuren de hemel blauw. 10.000 luchtballonnen, zijn op weg naar jou. 10.000 luchtballonnen, kleuren de horizon."
]
}
},
faq: {
title: "Answered questions",
text: "This is where some text about the questions would go, however jvs didn't write copy for it. So now I have to write this.",
QAs: [
{
"question": "What is Pretendo?",
"answer": "Pretendo is an open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles. Our goal is to preserve the online functionality of these consoles, to allow players to continue to play their favorite WiiU and 3DS games to their fullest capacity"
},
{
"question": "Will my existing NNIDs work on Pretendo?",
"answer": "Sadly, no. The only ones with access to the data about your existing NNIDs is Nintendo. A NNID-to-PNID migration could theoretically be possible, but it would be a slow and lengthy process requiring sensitive user information"
},
{
"question": "How do I use Pretendo?",
"answer": "Pretendo is currently not in a state that is ready for public use. However, once it is you will be able to use Pretendo simply by running our homebrew patcher on your console"
},
{
"question": "Is there an ETA for XYZ?",
"answer": "We do not have an exact ETA for any specific features or the project as a whole. There are many parts to the network, updates release for them individually whenever they are ready (for example updates to the account server are (almost always) independent on other parts of the network, such as the friends server). Due to that we cannot give an exact ETA"
},
{
"question": "Does Pretendo work on Cemu/emulators?",
"answer": "Pretendo is designed for the WiiU and (eventually) 3DS. At this time the only emulator for these consoles with real online capability is Cemu. Cemu does not officially support custom servers, but it will still be possible to use Pretendo with Cemu<br>See the <a href=\"/cemu\">Cemu</a> page for more details"
},
{
"question": "If I am account/console banned on Nintendo Network, will I stay banned when using Pretendo?",
"answer": "Any account/console bans only exist server-side. This means any existing bans would not carry over to Pretendo. However Pretendo still reserves the right to issue a ban for our network if we see fit"
},
{
"question": "Will Pretendo support the Wii/Switch?",
"answer": "The Wii already has custom servers provided by <a href=\"https://wiimmfi.de/\" target=\"_blank\">Wiimmfi</a>. We currently have no plans on supporting the Switch, as not only is it a completely different platform with a different online network, but Switch online is a paid service"
},
{
"question": "Do I need Haxchi to run the patcher?",
"answer": "No. The only thing you need to run the patcher is a way to access the Homebrew Launcher, whether it's the browser exploit, Haxchi or Coldboot Haxchi"
}
]
}
}
res.render("home", {
layout: "main",
locale: myLocale
locale: tmpLocale
});
})