second version

dist/index.html

@@ -63,12 +63,12 @@
         <span class="width-100" id="home-img">
             <img src="/img/home.jpg" id="" alt="Julia und Sam sehen sich verliebt an und halten dabei händchen &lt;3"
                  class="">
-            <span id="start-text-img-overlay">Hochzeit von <br>Julia und Samuel</span>
+            <h1 id="start-text-img-overlay">Hochzeit von <br/>Julia und Samuel</h1>
         </span>
         <span id="img-spacer"></span>
     </span>
     <div id="scroll-container">
-        <div class="grid-container">
+        <div class="">
             <div class="grid-x grid-padding-x grid-padding-y grow max-height-100">
                 <div class="cell small-12" id="main-content">
                 </div>

dist/main.css

@@ -4822,6 +4822,68 @@ html.is-reveal-open {
   .present .present-name {
     font-weight: bold; }
 
+#info-image-container {
+  position: relative; }
+  #info-image-container img.circler {
+    position: absolute;
+    height: 12%;
+    opacity: 0;
+    cursor: pointer; }
+    #info-image-container img.circler.godi {
+      top: 1.5%;
+      left: 46%; }
+    #info-image-container img.circler.fingerfood {
+      left: 9%;
+      top: 12.5%;
+      width: 32%;
+      height: 20%; }
+    #info-image-container img.circler.foto {
+      left: 48%;
+      top: 32%;
+      width: 32%; }
+    #info-image-container img.circler.sekt {
+      left: 9%;
+      top: 46.5%;
+      width: 32%; }
+    #info-image-container img.circler.essen {
+      left: 48%;
+      top: 60%;
+      width: 32%; }
+    #info-image-container img.circler.spiel {
+      left: 11%;
+      top: 72.5%;
+      width: 30%; }
+    #info-image-container img.circler.dance {
+      left: 48%;
+      top: 86%;
+      width: 29%; }
+  #info-image-container[data-state='godi'] .godi {
+    opacity: 0.7; }
+  #info-image-container[data-state='fingerfood'] .fingerfood {
+    opacity: 0.7; }
+  #info-image-container[data-state='foto'] .foto {
+    opacity: 0.7; }
+  #info-image-container[data-state='sekt'] .sekt {
+    opacity: 0.7; }
+  #info-image-container[data-state='essen'] .essen {
+    opacity: 0.7; }
+  #info-image-container[data-state='spiel'] .spiel {
+    opacity: 0.7; }
+  #info-image-container[data-state='dance'] .dance {
+    opacity: 0.7; }
+
+.anchor {
+  display: block;
+  padding-top: 1rem; }
+  .anchor:first-child {
+    padding-top: 0; }
+  .anchor p:last-child {
+    margin-bottom: 0; }
+
+@font-face {
+  font-family: "WinterSunrise";
+  src: url(/img/WinterSunrise.ttf); }
+
 .width-100 {
   width: 100%; }
 
@@ -4847,9 +4909,9 @@ body {
     body #main-content-container #scroll-container {
       height: 100%;
       background: #d7c9ac; }
-      body #main-content-container #scroll-container > .grid-container {
+      body #main-content-container #scroll-container > div {
         height: 100%; }
-        body #main-content-container #scroll-container > .grid-container > .grid-x {
+        body #main-content-container #scroll-container > div > .grid-x {
           height: 100%; }
       body #main-content-container #scroll-container #main-content {
         height: 100%;
@@ -4866,6 +4928,10 @@ a.hidden-link, a.hidden-link:hover {
   text-decoration: none;
   color: inherit; }
 
+h1 {
+  font-family: WinterSunrise, serif;
+  font-size: 4.5rem; }
+
 #home-img-container #home-img {
   width: 100%;
   height: 100%;
@@ -4878,11 +4944,10 @@ a.hidden-link, a.hidden-link:hover {
   #home-img-container #home-img #start-text-img-overlay {
     position: absolute;
     left: 2rem;
-    top: 50%;
+    bottom: 3rem;
     color: white;
-    font-family: "Winter Sunrise", Arial, serif;
+    font-size: 8rem;
-    font-size: 4rem;
+    line-height: 1.2; }
-    line-height: 2.5; }
 
 #home-img-container #img-spacer {
   display: block;
@@ -4895,3 +4960,6 @@ img.full-screen-width {
 .hidden {
   display: none; }
 
+.site-content {
+  padding: 3rem 2rem; }
+

package.json

@@ -15,7 +15,6 @@
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/polyfill": "^7.11.5",
     "@types/express": "^4.17.8",
-    "@types/socket.io": "^2.1.11",
     "autoprefixer": "^10.0.1",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -35,13 +34,14 @@
     "sass-loader": "^10.1.0",
     "terser-webpack-plugin": "^4.2.2",
     "ts-loader": "^8.0.4",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.2",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
     "express": "^4.17.1",
-    "dotenv": "^8.2.0"
+    "dotenv": "^8.2.0",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.2",
+    "@types/express": "^4.17.8"
   }
 }

src/client/html/geschenke.html

@@ -1,5 +1,5 @@
 <div class="flex-container height-100">
-    <div class="grow height-100 overflow-auto">
+    <div class="grow height-100 overflow-auto site-content">
         <h1>Gechenkliste</h1>
         <p>
             Ihr macht uns die größte Freude, wenn ihr mit uns feiert und den Tag verbringt. Wenn ihr uns gerne etwas

src/client/html/home.html

@@ -1,4 +1,4 @@
-<div>
+<div class="site-content grid-container">
     <h1>Herzlich Willkommen</h1>
     <p>Wir heiraten! Und das möchten wir mit euch gemeinsam am 8.Mai 2021 in Aachen feiern.
         Bitte sagt uns doch bis zum 15.März, ob ihr dabei sein könnt! Schreibt uns dazu bitte eine Mail an (…..).</p>

src/client/html/tagesablauf.html

@@ -1,46 +1,67 @@
 <div class="flex-container height-100">
-    <div class="height-100">
+    <div class="height-100" id="info-image-container" data-state="godi">
-        <img src="../img/tagesablauf_godi.jpg" class="height-100">
+        <img src="../img/tagesablauf.jpg" class="height-100">
+        <img src="../img/einkreiser.png" class="circler godi" data-state="godi">
+        <img src="../img/einkreiser.png" class="circler fingerfood" data-state="fingerfood">
+        <img src="../img/einkreiser.png" class="circler foto" data-state="foto">
+        <img src="../img/einkreiser.png" class="circler sekt" data-state="sekt">
+        <img src="../img/einkreiser.png" class="circler essen" data-state="essen">
+        <img src="../img/einkreiser.png" class="circler spiel" data-state="spiel">
+        <img src="../img/einkreiser.png" class="circler dance" data-state="dance">
     </div>
-    <div class="grow height-100 overflow-auto">
+    <div class="grow height-100 overflow-auto site-content">
-        <h1>Traugottesdienst</h1>
+        <div class="anchor" data-state="godi">
-        <p>
+            <h1>Traugottesdienst</h1>
-            Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern (Annastraße
+            <p>
-            35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062
+                Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern
-            Aachen) parken, das ist direkt neben der Kirche.
+                (Annastraße
-        </p>
+                35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062
-        <h1>Fingerfood</h1>
+                Aachen) parken, das ist direkt neben der Kirche.
-        <p>
+            </p>
-            Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es dann
+        </div>
-            süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern
+        <div class="anchor" data-state="fingerfood">
-            möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner
+            <h1>Fingerfood</h1>
-            (sinah.stinner@googlemail.com)</a>.
+            <p>
-        </p>
+                Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es
-        <h1>Gruppenfotos</h1>
+                dann
-        <p>
+                süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern
-            Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir um
+                möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner
-            17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.
+                (sinah.stinner@googlemail.com)</a>.
-        </p>
+            </p></div>
-        <h1>Sektempfang</h1>
+        <div class="anchor" data-state="foto">
-        <p>
+            <h1>Gruppenfotos</h1>
-            Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die
+            <p>
-            Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.
+                Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir
-        </p>
+                um
-        <h1>Festessen</h1>
+                17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.
-        <p>
+            </p></div>
-            Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb
+        <div class="anchor" data-state="sekt">
-            acht gibt.
+            <h1>Sektempfang</h1>
-        </p>
+            <p>
-        <h1>Spiel & Spaß</h1>
+                Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die
-        <p>
+                Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.
-            Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr es
+            </p></div>
-            schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet euch
+        <div class="anchor" data-state="essen">
-            gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und
+            <h1>Festessen</h1>
-            Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.
+            <p>
-        </p>
+                Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb
-        <h1>Let's Dance</h1>
+                acht gibt.
-        <p>
+            </p></div>
-            Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!
+        <div class="anchor" data-state="spiel">
-        </p>
+            <h1>Spiel & Spaß</h1>
+            <p>
+                Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr
+                es
+                schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet
+                euch
+                gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und
+                Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.
+            </p></div>
+        <div class="anchor" data-state="dance">
+            <h1>Let's Dance</h1>
+            <p>
+                Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!
+            </p>
+        </div>
     </div>
 </div>

src/client/html/unterkunft.html

@@ -1,5 +1,5 @@
 <div class="flex-container height-100">
-    <div class="grow height-100 overflow-auto">
+    <div class="grow height-100 overflow-auto site-content">
         <h1>Unterkunft</h1>
         <p>
             Wir freuen uns riesig, dass ihr aus nah und fern anreist, um mit uns gemeinsam unseren Hochzeitstag zu

src/client/index.html

@@ -63,12 +63,12 @@
         <span class="width-100" id="home-img">
             <img src="img/home.jpg" id="" alt="Julia und Sam sehen sich verliebt an und halten dabei händchen &lt;3"
                  class="">
-            <span id="start-text-img-overlay">Hochzeit von <br>Julia und Samuel</span>
+            <h1 id="start-text-img-overlay">Hochzeit von <br/>Julia und Samuel</h1>
         </span>
         <span id="img-spacer"></span>
     </span>
     <div id="scroll-container">
-        <div class="grid-container">
+        <div class="">
             <div class="grid-x grid-padding-x grid-padding-y grow max-height-100">
                 <div class="cell small-12" id="main-content">
                 </div>

src/client/js/index.ts

@@ -9,53 +9,96 @@ const templates = {
     geschenke: require("../html/geschenke.html"),
 }
 
-async function startPresents(){
-    await new PresentsHandler().showPresents();
-}
 
 const callbacks = {
-    home: () => {},
+    home: () => {
-    unterkunft: () => {},
+    },
-    tagesablauf: () => {},
+    unterkunft: () => {
-    geschenke: startPresents,
+    },
+    tagesablauf: () => {
+        let state = "godi";
+        let scrollTimeout = null;
+        let scrollToView = false;
+
+        const infoImageContainer = document.getElementById("info-image-container");
+        infoImageContainer.querySelectorAll(".circler").forEach(circle => {
+            circle.addEventListener("click", () => {
+                state = (<HTMLElement>circle).dataset["state"];
+                infoImageContainer.dataset["state"] = state;
+                scrollToView = true;
+                document.querySelector(".anchor[data-state='" + state + "']").scrollIntoView({
+                    "behavior": "smooth",
+                    "block": "start"
+                });
+            });
+        });
+
+        const navBar = document.querySelector(".top-bar");
+        const anchors = document.querySelectorAll(".anchor");
+        const margin = navBar.clientHeight+50;
+
+        const observerDown = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (!entry.isIntersecting && entry.intersectionRect.top === margin && !scrollToView) {
+                    state = (<HTMLElement>entry.target).dataset["state"];
+                }
+            });
+        }, {threshold: 1, rootMargin: "-" + margin + "px 0px 0px 0px"});
+        // }, {threshold: 1, rootMargin: "-100px 0px 0px 0px"});
+        const observerUp = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (entry.isIntersecting && entry.intersectionRect.top === navBar.clientHeight && !scrollToView) {
+                    state = (<HTMLElement>entry.target).dataset["state"];
+                }
+            });
+        }, {threshold: 0.1});
+
+        anchors.forEach(anchor => {
+            observerDown.observe(anchor);
+            observerUp.observe(anchor);
+        })
+
+        document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() =>{
+                scrollTimeout = null;
+                infoImageContainer.dataset["state"] = state;
+                scrollToView = false;
+                console.log("stopped scrolling")
+            }, 50);
+        });
+    },
+    geschenke: async () => await new PresentsHandler().showPresents(),
 }
 
 $(document).foundation();
 
 $(function () {
-    const mainDiv = document.getElementById("main-content-container");
     const container = document.getElementById("main-content");
     const img = document.getElementById("home-img-container");
 
     let currentSite = "home";
 
-    //Scroll-Element
-    mainDiv.addEventListener("scroll", e => {
-        console.log("scrolling!", e);
-    });
-
-
     //Navigation
     container.innerHTML = templates.home;
     document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
         elem.addEventListener("click", () => {
             const oldActive = document.querySelector(".menu .active");
-            if (oldActive){
+            if (oldActive) {
                 oldActive.classList.remove("active");
             }
             elem.classList.add("active");
 
             container.innerHTML = templates[elem.dataset["site"]];
-            if (elem.dataset["img"] === "1"){
+            if (elem.dataset["img"] === "1") {
                 img.classList.remove("hidden");
-            }
+            } else {
-            else {
                 img.classList.add("hidden");
             }
 
             currentSite = elem.dataset["site"];
 
-            if (typeof callbacks[currentSite] === "function"){
+            if (typeof callbacks[currentSite] === "function") {
                 callbacks[currentSite]();
             }
         });

src/client/sass/_tagesablauf.scss

@@ -0,0 +1,75 @@
+$opacityVisible: 0.7;
+$states: godi fingerfood foto sekt essen spiel dance;
+
+#info-image-container {
+  position: relative;
+
+  img.circler {
+    position: absolute;
+    height: 12%;
+    opacity: 0;
+
+    cursor: pointer;
+
+    //left: 0;
+    &.godi {
+      top: 1.5%;
+      left: 46%;
+    }
+
+    &.fingerfood {
+      left: 9%;
+      top: 12.5%;
+      width: 32%;
+      height: 20%;
+    }
+
+    &.foto {
+      left: 48%;
+      top: 32%;
+      width: 32%;
+    }
+
+    &.sekt {
+      left: 9%;
+      top: 46.5%;
+      width: 32%;
+    }
+
+    &.essen {
+      left: 48%;
+      top: 60%;
+      width: 32%;
+    }
+
+    &.spiel {
+      left: 11%;
+      top: 72.5%;
+      width: 30%;
+    }
+
+    &.dance {
+      left: 48%;
+      top: 86%;
+      width: 29%;
+    }
+  }
+
+  @each $state in $states {
+    &[data-state='#{$state}'] .#{$state} {
+      opacity: $opacityVisible;
+    }
+  }
+}
+
+.anchor{
+  display: block;
+  //margin-bottom: 2rem;
+  padding-top: 1rem;
+  &:first-child{
+    padding-top: 0;
+  };
+  p:last-child {
+    margin-bottom: 0;
+  }
+}

src/client/sass/index.scss

@@ -8,6 +8,13 @@
 @import "navbar";
 @import "unterkunft";
 @import "geschenke";
+@import "tagesablauf";
+
+@font-face {
+  font-family: "WinterSunrise";
+  src: url("../img/WinterSunrise.ttf");
+}
+
 
 .width-100 {
   width: 100%;
@@ -44,7 +51,7 @@ body {
       height: 100%;
       background: $background-color;
 
-      > .grid-container {
+      > div {
         height: 100%;
 
         > .grid-x {
@@ -74,6 +81,11 @@ a.hidden-link, a.hidden-link:hover{
   color: inherit;
 }
 
+h1 {
+  font-family: WinterSunrise, serif;
+  font-size: 4.5rem;
+}
+
 #home-img-container {
   #home-img {
     width: 100%;
@@ -91,11 +103,12 @@ a.hidden-link, a.hidden-link:hover{
     #start-text-img-overlay {
       position: absolute;
       left: 2rem;
-      top: 50%;
+      bottom: 3rem;
+      //top: 50%;
       color: white;
-      font-family: "Winter Sunrise", Arial, serif;
+      //font-family: "WinterSunrise", Arial, serif;
-      font-size: 4rem;
+      font-size: 8rem;
-      line-height: 2.5;
+      line-height: 1.2;
     }
   }
 
@@ -112,4 +125,7 @@ img.full-screen-width {
 
 .hidden {
   display: none;
+}
+.site-content{
+  padding: 3rem 2rem;
 }

todo.txt

@@ -1,10 +1,10 @@
 - Schriftarten herunterladen & einbinden
     - Bahnschrift für navbar
     - Allgemeine Schriftart
-    - Überschriften, Winter Sunrise, Regular
 - Hotelname bei Unterkunft anpassen
 - E-Mail bei Herzlich Willkommen hinzufügen
 - E-Mailadresse von Melanie - Tagesablauf
 - Tagesablauf Bild-Scroll-Click
 - Geschenkliste synchronisieren
-- Mobilansicht
+- Mobilansicht
+- WinterSunrise ß bei Spiel und Spaß unter Tagesablauf