mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-08-20 07:36:54 -05:00
Merge pull request #143 from PretendoNetwork/feat-bandwidth
Feat: bandwidth
This commit is contained in:
Jonathan Barrow
@@ -214,7 +214,18 @@
|
||||
"Join our Discord server!"
|
||||
],
|
||||
"button": "Join now!"
|
||||
}
|
||||
},
|
||||
"bandwidthRaccoonQuotes": [
|
||||
"I'm Bandwidth the Raccoon, and I love biting the cables going into Pretendo Network's servers. Yum!",
|
||||
"Many people ask us if we're gonna get in legal trouble with Nintendo over this; I am happy to say that my aunt works at Nintendo and she says it's fine.",
|
||||
"Webkit v537 is the best version of Webkit for Wii U. No, we're not going to port Chrome to the Wii U.",
|
||||
"I can't wait for the clock to reach 03:14:08 UTC on the 19th of January 2038!",
|
||||
"The Wii U is actually an underrated system: the commercials were like really bad, but the console is great. Huh, wait a second, I'm not sure why but my Gamepad isn't connecting to my Wii.",
|
||||
"Super Mario World 2 - Yoshi's Island's main theme is an absolute bop and there's no way you're gonna convince me otherwise.",
|
||||
"My favorite Nintendo Switch releases have been Nintendo Switch Online + Expansion Pack, Nintendo Switch Online + Rumble Pak, Nintendo Switch Online + Offline Play Pack, Nintendo Switch Online + Yet Another Port Pack, and Nintendo Switch Online + Dr. Kawashima's Brain Training / Brain Age \"You Really Liked The Nintendo Wii U Virtual Console Title, So We're Bringing It Back\" Pack. You can really tell Nintendo cares.",
|
||||
"Like \"You know Ash, bless her heart, she UwU’s all day\" is the southern nice way of saying \"Ash uwus all the time and it’s really weird and stupid and I wish they didn't\"",
|
||||
"My first video on my channel!! iv been wanting to make videos for a long time now but my laptop ran pretty bad and i couldn't run fraps, skype and minecraft all at once. but now thats over! with some help from my IT teacher my laptop runs alot better and i can record now! i hope y'all enjoy and if you do please like and subscribe!!!"
|
||||
]
|
||||
},
|
||||
"progressPage": {
|
||||
"title": "Our progress",
|
||||
|
||||
@@ -45,11 +45,15 @@ footer a:hover {
|
||||
color: var(--text-shade-3);
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer div.discord-server-card-wrapper {
|
||||
z-index: 2;
|
||||
justify-self: end;
|
||||
position: relative;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
background: var(--bg-shade-2);
|
||||
border-radius: 12px;
|
||||
padding: 30px 90px 30px 36px;
|
||||
justify-self: end;
|
||||
}
|
||||
footer div.discord-server-card h1 {
|
||||
font-size: 25px;
|
||||
@@ -78,6 +82,56 @@ footer div.discord-server-card svg {
|
||||
stroke-width: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
right: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
footer div.discord-server-card-wrapper img.bandwidth-raccoon {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
cursor: pointer;
|
||||
transform: none;
|
||||
transition: transform 150ms;
|
||||
}
|
||||
footer div.bandwidth-raccoon-wrapper.speak img.bandwidth-raccoon {
|
||||
transform: rotate(12deg) translateY(-12px);
|
||||
}
|
||||
footer .bandwidth-raccoon-wrapper .text-bubble {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
top: -24px;
|
||||
max-width: min(200%, 90vw);
|
||||
width: max-content;
|
||||
background: var(--bg-shade-3);
|
||||
padding: 18px;
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
footer .bandwidth-raccoon-wrapper.speak .text-bubble {
|
||||
opacity: 1;
|
||||
}
|
||||
footer .bandwidth-raccoon-wrapper .text-bubble:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
border-color: var(--bg-shade-3) transparent;
|
||||
border-width: 10px 10px 0;
|
||||
bottom: -10px;
|
||||
right: 60px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
footer {
|
||||
@@ -88,11 +142,31 @@ footer div.discord-server-card svg {
|
||||
footer div {
|
||||
justify-self: center;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
footer div.discord-server-card-wrapper {
|
||||
grid-column: 1 / span 4;
|
||||
width: calc(100% - 126px);
|
||||
width: 100%;
|
||||
justify-self: normal;
|
||||
}
|
||||
footer div.discord-server-card-wrapper::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: 0;
|
||||
background: var(--bg-shade-0);
|
||||
z-index: 2;
|
||||
}
|
||||
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
|
||||
bottom: -72px;
|
||||
top: unset;
|
||||
z-index: 0;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
@@ -103,9 +177,22 @@ footer div.discord-server-card svg {
|
||||
footer div {
|
||||
justify-self: start;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
footer div.discord-server-card-wrapper {
|
||||
grid-column: 1 / span 1;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
padding: 30px;
|
||||
width: calc(100% - 60px);
|
||||
overflow: visible;
|
||||
}
|
||||
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
|
||||
bottom: unset;
|
||||
top: -120px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
268
public/assets/images/bandwidth.svg
Normal file
268
public/assets/images/bandwidth.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 34 KiB |
@@ -136,6 +136,13 @@ app.engine('handlebars', handlebars({
|
||||
neq(value1, value2) {
|
||||
return value1 !== value2;
|
||||
},
|
||||
times(n, block) {
|
||||
let accum = '';
|
||||
for(let i = 0; i < n; i++) {
|
||||
accum += block.fn(i);
|
||||
}
|
||||
return accum;
|
||||
},
|
||||
localeHelper(locale, propString, propVar) {
|
||||
/*
|
||||
locale: the json locale object
|
||||
@@ -173,7 +180,7 @@ app.engine('handlebars', handlebars({
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
},
|
||||
}
|
||||
}));
|
||||
app.set('view engine', 'handlebars');
|
||||
|
||||
@@ -41,15 +41,51 @@
|
||||
<a href="/blog">{{ localeHelper locale "nav.blog" }}</a>
|
||||
<a href="/account">{{ localeHelper locale "nav.account" }}</a>
|
||||
</div>
|
||||
<div class="discord-server-card">
|
||||
<h1>{{ localeHelper locale "footer.widget.captions.0" }}</h1>
|
||||
<h2>{{ localeHelper locale "footer.widget.captions.1" }}</h2>
|
||||
<a href="https://invite.gg/pretendo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
{{ localeHelper locale "footer.widget.button" }}
|
||||
</a>
|
||||
<div class="discord-server-card-wrapper">
|
||||
<div class="discord-server-card">
|
||||
<h1>{{ localeHelper locale "footer.widget.captions.0" }}</h1>
|
||||
<h2>{{ localeHelper locale "footer.widget.captions.1" }}</h2>
|
||||
<a href="https://invite.gg/pretendo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
{{ localeHelper locale "footer.widget.button" }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="bandwidth-raccoon-wrapper">
|
||||
<div class="text-bubble">
|
||||
<p>I'm a raccoon, and I love eating grapes!</p>
|
||||
</div>
|
||||
<img src="/assets/images/bandwidth.svg" class="bandwidth-raccoon" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
const bandwidthRaccoon = document.querySelector("footer img.bandwidth-raccoon");
|
||||
const bandwidthRaccoonWrapper = document.querySelector("footer .bandwidth-raccoon-wrapper");
|
||||
const bandwidthRaccoonBubbleText = document.querySelector("footer .bandwidth-raccoon-wrapper .text-bubble p");
|
||||
let i = 0;
|
||||
|
||||
function unescapeHTML(string) {
|
||||
const el = document.createElement("span");
|
||||
el.innerHTML = string;
|
||||
return el.innerText;
|
||||
}
|
||||
|
||||
const randomSentences = [
|
||||
{{#times 9}}
|
||||
`${unescapeHTML("{{localeHelper locale "footer.bandwidthRaccoonQuotes" this }}")}`,
|
||||
{{/times}}
|
||||
]
|
||||
|
||||
bandwidthRaccoon.addEventListener("click", () =>
|
||||
{
|
||||
bandwidthRaccoonWrapper.classList.add("speak");
|
||||
if (!randomSentences[i]) {
|
||||
i = 0
|
||||
}
|
||||
bandwidthRaccoonBubbleText.innerText = randomSentences[i];
|
||||
i += 1;
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user