@@ -19,7 +19,87 @@
}
};
</script>
<script src="../Hyphenopoly/Hyphenopoly_Loader.js"></script>
<script type="text/javascript">
const AFTER_SCROLL_TIMEOUT = 100;
const PAGE_SNAP_LENGTH = 0.4; // How many pages (0--5) to scroll when snapping
var lastScroll = 0;
var lastScrollTime = 0;
function isCloseToPageEnd(isScrollingDown) {
let downLimit = 1 - PAGE_SNAP_LENGTH;
let upLimit = PAGE_SNAP_LENGTH;
if (isScrollingDown)
upLimit = 0;
else
downLimit = 1;
console.log("scrolled", (document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight, "pages")
if ((document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight < upLimit) {
console.log("upLimit");
return true;
}
else if ((document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight > downLimit) {
console.log("downLimit");
return true;
}
return false;
}
function onWheel() {
console.log(document.scrollingElement.scrollTop, lastScroll)
lastScrollTime = Date.now();
setTimeout(onAfterWheel, AFTER_SCROLL_TIMEOUT);
}
function onAfterWheel(){
if (lastScroll < document.scrollingElement.scrollTop) {
if (isCloseToPageEnd(true)) {
if (Date.now() > lastScrollTime + AFTER_SCROLL_TIMEOUT - 10){ // 10 ms less to account for browser errors
console.log("down");
document.scrollingElement.scrollTo(
{
left: 0,
top: Math.ceil(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
behavior: 'smooth'
}
);
}
}
}
else if (lastScroll > document.scrollingElement.scrollTop) {
if (isCloseToPageEnd(false)) {
if (Date.now() > lastScrollTime + AFTER_SCROLL_TIMEOUT - 10){ // 10 ms less to account for browser errors
console.log("up");
document.scrollingElement.scrollTo(
{
left: 0,
top: Math.floor(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
behavior: 'smooth'
}
);
}
}
}
lastScroll = document.scrollingElement.scrollTop;
}
</script>
<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" type="text/css" href="../index.css">
@@ -27,9 +107,9 @@
<link rel="shortcut icon" type="image/svg" href="../kp-t.svg">
</head>
<body>
<body onwheel="onWheel();" >
<div class="section two-panes vibrant">
<div class="section two-panes vibrant" id="coffee" >
<div class="pane has-content colour">
<div class="central title">
@@ -40,13 +120,13 @@
<span class="content" lang="en-gb">
<p class="text-block">
KaffeePott is an app that allows you to find cafés by criteria like distance, pricing, items on the café's menu or rating. Information on cafés is kept up-to-date by users and quality-checked by us.
To ensure your full privacy, we use <a class="plain" href="https://mapbox.com/about">Mapbox</a> and <a class="plain" href="https://www.openstreetmap.org">OpenStreetMap</a>.
To ensure your full privacy, we use <a class="plain" href="https://mapbox.com/about"><span style="white-space: nowrap"> M</span> apbox</a> and <a class="plain" href="https://www.openstreetmap.org"><span style="white-space: nowrap"> O</span> penStreetMap</a>.
</p>
</span>
</div>
<div class="pane has-content colour">
<div class="pane has-content colour invert ">
<div class="central title">
<span>Download
<hr></span>
@@ -58,7 +138,7 @@
</div>
</div>
<div class="section two-panes muted" id="open-source">
<div class="section two-panes muted" id="open-source" id="code" >
<div class="pane has-content colour foreground">
<div class="central title"><span>Open Source
<hr></span></div>
@@ -66,7 +146,7 @@
<p class="text-block">
To guarantee safety and privacy and always keep KaffeePott up-to-date, it is open source, meaning that we aren't sending your personal information to Google or Facebook and you can see what exactly we're doing with your
data at any time<nobr> —</nobr> nothing at all. You can also quickly contact us if you're having trouble or you've found a bug and we'll get back to you ASAP. <a href='https://git.pott.app/kaffeepott/android-client'
class="plain">Gitea</a>
class="plain"><span style="white-space: nowrap"> G</span> itea</a>
</p>
</span>
</div>
@@ -77,7 +157,7 @@
</div>
</div>
<div class="section two-panes blurple" id="discord">
<div class="section two-panes blurple" id="discord" id="discord" >
<div class="pane has-content colour foreground invert">
<div class="central title"><span>Discord
<hr></span></div>
@@ -87,7 +167,7 @@
</p>
<div class="actions central">
<a href='https://discord.gg/drg82RV' class="plain" target="_blank" style="margin-top: 2rem;">Join Server</a>
<a href='https://discord.gg/drg82RV' class="plain" target="_blank" style="margin-top: 2rem;"><span style="white-space: nowrap"> J</span> oin Server</a>
</div>
</span>
@@ -95,13 +175,13 @@
<iframe class="pane colour foreground" src="https://discordapp.com/widget?id=707620884839661609&theme=dark" allowtransparency="true" frameborder="0"></iframe>
</div>
<div class="section two-panes alt" id="contact">
<div class="section two-panes alt" id="contact" id="contact" >
<div class="pane has-content colour foreground">
<div class="central title"><span>About
<hr></span></div>
<span class="content" lang="en-gb">
<p class="text-block">
We are a student group studying at <a class="plain" href="https://slg-aachen.de" lang="de" translate="no">Sankt Leonhard Gymnasium Aachen</a>. We programmed the app KaffeePott for our schools' <span lang="de" translate="no"><span
We are a student group studying at <a class="plain" href="https://slg-aachen.de" lang="de" translate="no"><span style="white-space: nowrap"> S</span> ankt Leonhard Gymnasium Aachen</a>. We programmed the app KaffeePott for our schools' <span lang="de" translate="no"><span
style="letter-spacing:-.2em" comment="I didn't like how Bitter kerns this, so i decreased letter-spacing">“</span>Apps programmieren für Android</span>” (programming apps for Android) workshop.
</p>
</span>
@@ -118,15 +198,15 @@
<div class="central title"><span>Contact
<hr></span></div>
<div class="actions central">
<div class="content central">
<div class="left-aligned">
<a href='https://git.pott.app/kaffeepott/android-client' class="plain">Gitea</a><br>
<a class="plain" href="https://discord.gg/drg82RV" target="_blank">Discord</a><br><br>
<a href='https://git.pott.app/kaffeepott/android-client' class="plain"><span style="white-space: nowrap"> G</span> itea</a><br>
<a class="plain" href="https://discord.gg/drg82RV" target="_blank"><span style="white-space: nowrap"> D</span> iscord</a><br><br>
<a href='mailto:bailitis@pott.app' class="plain">E-mail Janis Bailitis</a><br>
<a href='mailto:kube@pott.app' class="plain">E-mail Robin Kube</a><br>
<a href='mailto:mainka@pott.app' class="plain">E-mail Irmin Mainka</a><br>
<a href='mailto:mathieu@pott.app' class="plain">E-mail Linus Mathieu</a>
<a href='mailto:bailitis@pott.app' class="plain"><span style="white-space: nowrap"> E</span> -mail Janis Bailitis</a><br>
<a href='mailto:kube@pott.app' class="plain"><span style="white-space: nowrap"> E</span> -mail Robin Kube</a><br>
<a href='mailto:mainka@pott.app' class="plain"><span style="white-space: nowrap"> E</span> -mail Irmin Mainka</a><br>
<a href='mailto:mathieu@pott.app' class="plain"><span style="white-space: nowrap"> E</span> -mail Linus Mathieu</a>
</div>
</div>
</div>