Ainias/hochzeit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial version

Browse Source
This commit is contained in:
silas
2020-12-02 11:57:06 +01:00
commit 6de0d2d9ab
54 changed files with 11820 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/client/html/geschenke.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="flex-container height-100">
<div class="grow height-100 overflow-auto">
<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
schenken möchtet, haben wir eine Liste zusammengestellt, worüber wir uns für den Start ins gemeinsame Leben
sehr freuen. Außerdem lieben wir es zu reisen und freuen uns immer über Geld für unsere Reisekasse.
</p>
<div id="present-container">
<a id="present-template" class="flex-container present" target="_blank">
<div class="present-checkbox">
<div></div>
</div>
<img class="present-image">
<div class="grow">
<div class="present-name"></div>
<div class="present-description"></div>
</div>
</a>
</div>
</div>
<div class="height-100">
<img src="../img/geschenke.jpg" class="height-100">
</div>
</div>

11
src/client/html/home.html Normal file
View File

@@ -0,0 +1,11 @@
<div>
<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>
<p>Natürlich können wir unsere Einladung für nächstes Jahr nicht aussprechen, ohne ein paar Worte zu der aktuellen
Corona Pandemie zu verlieren. Wir hoffen sehr, dass sich die Lage bis Mai soweit beruhigt hat, dass wir unsere
Hochzeit mit euch allen feiern können. Leider ist das aber momentan sehr ungewiss. Soweit es geht, planen wir
damit, dass wir am 8. Mai gemeinsam feiern, falls sich daran etwas ändert, melden wir uns bei euch. Sagt uns
gerne trotzdem bis zum 15.März zu, damit wir besser planen können!</p>
</div>

46
src/client/html/tagesablauf.html Normal file
View File

@@ -0,0 +1,46 @@
<div class="flex-container height-100">
<div class="height-100">
<img src="../img/tagesablauf_godi.jpg" class="height-100">
</div>
<div class="grow height-100 overflow-auto">
<h1>Traugottesdienst</h1>
<p>
Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern (Annastraße
35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062
Aachen) parken, das ist direkt neben der Kirche.
</p>
<h1>Fingerfood</h1>
<p>
Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es dann
süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern
möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner
(sinah.stinner@googlemail.com)</a>.
</p>
<h1>Gruppenfotos</h1>
<p>
Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir um
17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.
</p>
<h1>Sektempfang</h1>
<p>
Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die
Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.
</p>
<h1>Festessen</h1>
<p>
Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb
acht gibt.
</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>
<h1>Let's Dance</h1>
<p>
Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!
</p>
</div>
</div>

37
src/client/html/unterkunft.html Normal file
View File

@@ -0,0 +1,37 @@
<div class="flex-container height-100">
<div class="grow height-100 overflow-auto">
<h1>Unterkunft</h1>
<p>
Wir freuen uns riesig, dass ihr aus nah und fern anreist, um mit uns gemeinsam unseren Hochzeitstag zu
verbringen!
</p>
<p>
Für alle die, die eine lange Anreise haben, empfehlen wir euch, im Hotel … zu übernachten. Das ist fußläufig
vom
Forum M aus zu erreichen. Ihr könnt das Auto auch im Parkhaus am Dom über Nacht stehen lassen.
</p>
<p>
Alle, die eher eine studentische Übernachtungsmöglichkeit suchen, können sich gerne bei uns melden. Ihr
werdet
dann bei Freunden aus Aachen in WGs mituntergebracht. Sagt uns da bitte bis spätestens zum 15.April
Bescheid.
</p>
<div class="grid-x padding-default">
<div class="small-4">
<a href="https://all.accor.com/hotel/8027/index.de.shtml" target="_blank" class="hidden-link">
<h3>IBIS Hotel</h3>
<img src="../img/hotel.jpg">
</a>
</div>
<div class="small-8">
<iframe id="map_unterkunft"
src="https://maps.google.com/maps?width=520&amp;height=395&amp;hl=de&amp;q=IBIS%20budget%20Hotel+Schumacherstr%2012%20Aachen&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
</div>
</div>
</div>
<div class="height-100">
<img src="../img/unterkunft.jpg" class="height-100">
</div>
</div>

BIN
src/client/img/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/client/img/geschenke.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

BIN
src/client/img/geschenke/test.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

BIN
src/client/img/home.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

BIN
src/client/img/hotel.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/client/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/client/img/logo_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
src/client/img/tagesablauf_godi.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/client/img/unterkunft.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

80
src/client/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="icon" type="image/png" href="img/logo.png">
<meta class='foundation-mq'>
<title>J & S</title>
</head>
<body>
<nav class="top-bar">
<div class="grid-container width-100">
<div class="top-bar-left">
<ul class="menu align-center-middle">
<li><img class="logo-img" src="img/logo.png" alt="J&S"></li>
<li class="active" data-site="home" data-img="1"><a>Home</a></li>
<li data-site="tagesablauf"><a>Tagesablauf</a></li>
<li data-site="unterkunft"><a>Unterkunft</a></li>
<li data-site="geschenke"><a>Geschenke</a></li>
<!-- <li><a href="#">Galerie</a></li>-->
</ul>
</div>
<div class="top-bar-right">
<!-- <ul class="menu">-->
<!-- <li><input type="search" placeholder="Search"></li>-->
<!-- <li><button type="button" class="button">Search</button></li>-->
<!-- </ul>-->
</div>
</div>
<!-- <div class="grid-container width-100">-->
<!-- <div class="grid-padding-x ">-->
<!-- <div class="small-12 cell">-->
<!--&lt;!&ndash; <div id='navbar-close-listener-container' style="display: none">&ndash;&gt;-->
<!--&lt;!&ndash; <div id='navbar-close-listener'></div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <ul class="menu align-center horizontal">-->
<!-- <li><img class="logo-img" src="img/logo.png" alt="J&S"></li>-->
<!-- <li class="small"><a>Home</a></li>-->
<!-- <li class="small"><a>Tagesablauf</a></li>-->
<!-- <li class="small"><a>Unterkunft</a></li>-->
<!-- <li class="small"><a>Geschenke</a></li>-->
<!-- <li class="small"><a>Galerie</a></li>-->
<!-- </ul>-->
<!--&lt;!&ndash; <span id="responsive-menu-toggle" class="right">&ndash;&gt;-->
<!--&lt;!&ndash; <button class="menu-icon" type="button" data-toggle=""></button>&ndash;&gt;-->
<!--&lt;!&ndash; </span>&ndash;&gt;-->
<!--&lt;!&ndash; <div id="responsive-menu">&ndash;&gt;-->
<!--&lt;!&ndash; <ul class="menu vertical accordion-menu navbar-menu hidden-menu" id="navbar-menu-hidden">&ndash;&gt;-->
<!--&lt;!&ndash; </ul>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</nav>
<div id="main-content-container">
<span id="home-img-container">
<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>
</span>
<span id="img-spacer"></span>
</span>
<div id="scroll-container">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-padding-y grow max-height-100">
<div class="cell small-12" id="main-content">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

60
src/client/js/PresentsHandler.ts Normal file
View File

@@ -0,0 +1,60 @@
export class PresentsHandler {
presents: {
isBought: boolean,
image: string,
name: string,
description: string
link: string
}[] = [];
async loadPresents() {
this.presents = require("./presents").default;
await this.updateStates();
}
async updateStates() {
//TODO vom server laden
this.presents[3].isBought = true;
}
async showPresents() {
const presentContainer = document.getElementById("present-container");
const presentTemplate = document.getElementById("present-template");
presentTemplate.remove();
presentTemplate.removeAttribute("id");
await this.loadPresents();
presentContainer.innerText = "";
console.log(this.presents);
this.presents.forEach(present => {
const element = <HTMLLinkElement>presentTemplate.cloneNode(true);
(<HTMLImageElement>element.querySelector(".present-image")).src = present.image;
(<HTMLElement>element.querySelector(".present-name")).innerText = present.name;
(<HTMLElement>element.querySelector(".present-description")).innerText = present.description;
element.href = present.link;
const checkboxElement = element.querySelector(".present-checkbox");
if (present.isBought) {
checkboxElement.classList.add("checked");
}
checkboxElement.addEventListener("click", async e => {
e.preventDefault();
await this.setPresentIsBought(present, !present.isBought);
if (present.isBought) {
checkboxElement.classList.add("checked");
} else {
checkboxElement.classList.remove("checked");
}
})
presentContainer.appendChild(element);
})
}
private async setPresentIsBought(present: { isBought: boolean; image: string; name: string; description: string; link: string }, isBought: boolean) {
//TODO auf Server updaten
present.isBought = isBought;
}
}

63
src/client/js/index.ts Normal file
View File

@@ -0,0 +1,63 @@
import * as $ from "jquery";
import "foundation-sites/dist/js/foundation.es6";
import {PresentsHandler} from "./PresentsHandler";
const templates = {
home: require("../html/home.html"),
unterkunft: require("../html/unterkunft.html"),
tagesablauf: require("../html/tagesablauf.html"),
geschenke: require("../html/geschenke.html"),
}
async function startPresents(){
await new PresentsHandler().showPresents();
}
const callbacks = {
home: () => {},
unterkunft: () => {},
tagesablauf: () => {},
geschenke: startPresents,
}
$(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){
oldActive.classList.remove("active");
}
elem.classList.add("active");
container.innerHTML = templates[elem.dataset["site"]];
if (elem.dataset["img"] === "1"){
img.classList.remove("hidden");
}
else {
img.classList.add("hidden");
}
currentSite = elem.dataset["site"];
if (typeof callbacks[currentSite] === "function"){
callbacks[currentSite]();
}
});
})
});

49
src/client/js/presents.ts Normal file
View File

@@ -0,0 +1,49 @@
export default [{
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Akku-Bohrer",
description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
link: "http://www.onlinewahn.de/ende.htm",
}, {
isBought: true,
image: require("../img/geschenke/test.jpg").default,
name: "Windows",
description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
link: "https://www.windows93.net/",
},{
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Akku-Bohrer",
description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
link: "http://www.onlinewahn.de/ende.htm",
}, {
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Windows",
description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
link: "https://www.windows93.net/",
},{
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Akku-Bohrer",
description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
link: "http://www.onlinewahn.de/ende.htm",
}, {
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Windows",
description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
link: "https://www.windows93.net/",
},{
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Akku-Bohrer",
description: "Der von BOSCH, weil ich den schon immer mal haben wollte",
link: "http://www.onlinewahn.de/ende.htm",
}, {
isBought: false,
image: require("../img/geschenke/test.jpg").default,
name: "Windows",
description: "Bisher konnte ich es mir nicht leisten und musste immer auf eine Web-Version zurückgreifen",
link: "https://www.windows93.net/",
},]

44
src/client/sass/_geschenke.scss Normal file
View File

@@ -0,0 +1,44 @@
.present {
color: black;
&:hover, &:focus {
color: black;
}
padding: 1rem;
.present-checkbox {
height: 10rem;
div {
position: relative;
margin-top: 4rem;
width: 2rem;
height: 2rem;
border: 2px solid black;
&::after{
position: absolute;
top: -1rem;
left: -0.5rem;
right: -0.5rem;
bottom: 0.1rem;
content: ""
}
}
&.checked div::after{
background-image: url("../img/check.png");
background-size: 100% 100%;
}
}
.present-image {
width: 10rem;
height: 10rem;
object-fit: contain;
padding-left: 1.3rem;
padding-right: 1.3rem;
}
.present-name {
font-weight: bold;
}
}

41
src/client/sass/_navbar.scss Normal file
View File

@@ -0,0 +1,41 @@
@import "settings";
.top-bar {
background: white;
padding: 0;
.grid-container{
padding: 0;
}
.menu {
background: white;
display: flex;
li {
flex: 1;
text-align: center;
height: 5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
a {
color: black;
font-family: "Bahnschrift", Helvetica, Arial, serif;
font-size: 2rem;
}
&.active {
background: $background-color;
> a {
background: $background-color;
}
}
}
.logo-img {
height: 4rem;
}
}
}

874
src/client/sass/_settings.scss Normal file
View File

@@ -0,0 +1,874 @@
$background-color: #d7c9ac;
// Foundation for Sites Settings
// -----------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Breakpoints
// 3. The Grid
// 4. Base Typography
// 5. Typography Helpers
// 6. Abide
// 7. Accordion
// 8. Accordion Menu
// 9. Badge
// 10. Breadcrumbs
// 11. Button
// 12. Button Group
// 13. Callout
// 14. Card
// 15. Close Button
// 16. Drilldown
// 17. Dropdown
// 18. Dropdown Menu
// 19. Flexbox Utilities
// 20. Forms
// 21. Label
// 22. Media Object
// 23. Menu
// 24. Meter
// 25. Off-canvas
// 26. Orbit
// 27. Pagination
// 28. Progress Bar
// 29. Prototype Arrow
// 30. Prototype Border-Box
// 31. Prototype Border-None
// 32. Prototype Bordered
// 33. Prototype Display
// 34. Prototype Font-Styling
// 35. Prototype List-Style-Type
// 36. Prototype Overflow
// 37. Prototype Position
// 38. Prototype Rounded
// 39. Prototype Separator
// 40. Prototype Shadow
// 41. Prototype Sizing
// 42. Prototype Spacing
// 43. Prototype Text-Decoration
// 44. Prototype Text-Transformation
// 45. Prototype Text-Utilities
// 46. Responsive Embed
// 47. Reveal
// 48. Slider
// 49. Switch
// 50. Table
// 51. Tabs
// 52. Thumbnail
// 53. Title Bar
// 54. Tooltip
// 55. Top Bar
// 56. Xy Grid
//@import 'util/util';
// 1. Global
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-menu-padding: 0.7rem 1rem;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: true;
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
@include add-foundation-colors;
$print-hrefs: true;
// 2. Breakpoints
// --------------
$breakpoints: (
small: 0,
smedium: 400px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small smedium medium large);
// 3. The Grid
// -----------
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;
// 4. Base Typography
// ------------------
$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-styles: (
small: (
'h1': ('font-size': 24),
'h2': ('font-size': 20),
'h3': ('font-size': 19),
'h4': ('font-size': 18),
'h5': ('font-size': 17),
'h6': ('font-size': 16),
),
medium: (
'h1': ('font-size': 48),
'h2': ('font-size': 40),
'h3': ('font-size': 31),
'h4': ('font-size': 25),
'h5': ('font-size': 20),
'h6': ('font-size': 16),
),
);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$code-color: $black;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: $light-gray;
$code-border: 1px solid $medium-gray;
$code-padding: rem-calc(2 5 1);
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: rem-calc(20) auto;
$list-lineheight: $paragraph-lineheight;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
$cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $global-radius;
$abbr-underline: 1px dotted $black;
// 5. Typography Helpers
// ---------------------
$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.6;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
// 6. Abide
// --------
$abide-inputs: true;
$abide-labels: true;
$input-background-invalid: get-color(alert);
$form-label-color-invalid: get-color(alert);
$input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
// 7. Accordion
// ------------
$accordion-background: $white;
$accordion-plusminus: true;
$accordion-title-font-size: rem-calc(12);
$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
// 8. Accordion Menu
// -----------------
$accordionmenu-padding: $global-menu-padding;
$accordionmenu-nested-margin: $global-menu-nested-margin;
$accordionmenu-submenu-padding: $accordionmenu-padding;
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
$accordionmenu-item-background: null;
$accordionmenu-border: null;
$accordionmenu-submenu-toggle-background: null;
$accordion-submenu-toggle-border: $accordionmenu-border;
$accordionmenu-submenu-toggle-width: 40px;
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
$accordionmenu-arrow-size: 6px;
// 9. Badge
// --------
$badge-background: $primary-color;
$badge-color: $white;
$badge-color-alt: $black;
$badge-palette: $foundation-palette;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;
// 10. Breadcrumbs
// ---------------
$breadcrumbs-margin: 0 0 $global-margin 0;
$breadcrumbs-item-font-size: rem-calc(11);
$breadcrumbs-item-color: $primary-color;
$breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.75rem;
$breadcrumbs-item-uppercase: true;
$breadcrumbs-item-separator: true;
$breadcrumbs-item-separator-item: '/';
$breadcrumbs-item-separator-item-rtl: '\\';
$breadcrumbs-item-separator-color: $medium-gray;
// 11. Button
// ----------
$button-font-family: inherit;
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
$button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
$button-background-hover-lightness: -20%;
$button-hollow-hover-lightness: -50%;
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
$button-responsive-expanded: false;
// 12. Button Group
// ----------------
$buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
$buttongroup-radius-on-each: true;
// 13. Callout
// -----------
$callout-background: $white;
$callout-background-fade: 85%;
$callout-border: 1px solid rgba($black, 0.25);
$callout-margin: 0 0 1rem 0;
$callout-padding: 1rem;
$callout-font-color: $body-font-color;
$callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;
// 14. Card
// --------
$card-background: $white;
$card-font-color: $body-font-color;
$card-divider-background: $light-gray;
$card-border: 1px solid $light-gray;
$card-shadow: none;
$card-border-radius: $global-radius;
$card-padding: $global-padding;
$card-margin-bottom: $global-margin;
// 15. Close Button
// ----------------
$closebutton-position: right top;
$closebutton-offset-horizontal: (
small: 0.66rem,
medium: 1rem,
);
$closebutton-offset-vertical: (
small: 0.33em,
medium: 0.5rem,
);
$closebutton-size: (
small: 1.5em,
medium: 2em,
);
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;
// 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
$drilldown-padding: $global-menu-padding;
$drilldown-nested-margin: 0;
$drilldown-background: $white;
$drilldown-submenu-padding: $drilldown-padding;
$drilldown-submenu-background: $white;
$drilldown-arrow-color: $primary-color;
$drilldown-arrow-size: 6px;
// 17. Dropdown
// ------------
$dropdown-padding: 1rem;
$dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
$dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
);
// 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $anchor-color;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: null;
$dropdownmenu-submenu-background: $white;
$dropdownmenu-padding: $global-menu-padding;
$dropdownmenu-nested-margin: 0;
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
$dropdownmenu-border: 1px solid $medium-gray;
$dropdown-menu-item-color-active: get-color(primary);
$dropdown-menu-item-background-active: transparent;
// 19. Flexbox Utilities
// ---------------------
$flex-source-ordering-count: 6;
$flexbox-responsive-breakpoints: true;
// 20. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
$input-prefix-background: $light-gray;
$input-prefix-border: 1px solid $medium-gray;
$input-prefix-padding: 1rem;
$form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal;
$input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
$form-button-radius: $global-radius;
// 21. Label
// ---------
$label-background: $primary-color;
$label-color: $white;
$label-color-alt: $black;
$label-palette: $foundation-palette;
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
// 22. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;
// 23. Menu
// --------
$menu-margin: 0;
$menu-nested-margin: $global-menu-nested-margin;
$menu-items-padding: $global-menu-padding;
$menu-simple-margin: 1rem;
$menu-item-color-active: $white;
$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
$menu-state-back-compat: true;
$menu-centered-back-compat: true;
$menu-icons-back-compat: true;
// 24. Meter
// ---------
$meter-height: 1rem;
$meter-radius: $global-radius;
$meter-background: $medium-gray;
$meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
// 25. Off-canvas
// --------------
$offcanvas-sizes: (
small: 250px,
);
$offcanvas-vertical-sizes: (
small: 250px,
);
$offcanvas-background: $light-gray;
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
$offcanvas-inner-shadow-size: 20px;
$offcanvas-inner-shadow-color: rgba($black, 0.25);
$offcanvas-overlay-zindex: 11;
$offcanvas-push-zindex: 12;
$offcanvas-overlap-zindex: 13;
$offcanvas-reveal-zindex: 12;
$offcanvas-transition-length: 0.5s;
$offcanvas-transition-timing: ease;
$offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
// 26. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
$orbit-bullet-background-active: $dark-gray;
$orbit-bullet-diameter: 1.2rem;
$orbit-bullet-margin: 0.1rem;
$orbit-bullet-margin-top: 0.8rem;
$orbit-bullet-margin-bottom: 0.8rem;
$orbit-caption-background: rgba($black, 0.5);
$orbit-caption-padding: 1rem;
$orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
// 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
$pagination-margin-bottom: $global-margin;
$pagination-item-color: $black;
$pagination-item-padding: rem-calc(3 10);
$pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
$pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;
// 28. Progress Bar
// ----------------
$progress-height: 1rem;
$progress-background: $medium-gray;
$progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
// 29. Prototype Arrow
// -------------------
$prototype-arrow-directions: (
down,
up,
right,
left
);
$prototype-arrow-size: 0.4375rem;
$prototype-arrow-color: $black;
// 30. Prototype Border-Box
// ------------------------
$prototype-border-box-breakpoints: $global-prototype-breakpoints;
// 31. Prototype Border-None
// -------------------------
$prototype-border-none-breakpoints: $global-prototype-breakpoints;
// 32. Prototype Bordered
// ----------------------
$prototype-bordered-breakpoints: $global-prototype-breakpoints;
$prototype-border-width: rem-calc(1);
$prototype-border-type: solid;
$prototype-border-color: $medium-gray;
// 33. Prototype Display
// ---------------------
$prototype-display-breakpoints: $global-prototype-breakpoints;
$prototype-display: (
inline,
inline-block,
block,
table,
table-cell
);
// 34. Prototype Font-Styling
// --------------------------
$prototype-font-breakpoints: $global-prototype-breakpoints;
$prototype-wide-letter-spacing: rem-calc(4);
$prototype-font-normal: $global-weight-normal;
$prototype-font-bold: $global-weight-bold;
// 35. Prototype List-Style-Type
// -----------------------------
$prototype-list-breakpoints: $global-prototype-breakpoints;
$prototype-style-type-unordered: (
disc,
circle,
square
);
$prototype-style-type-ordered: (
decimal,
lower-alpha,
lower-latin,
lower-roman,
upper-alpha,
upper-latin,
upper-roman
);
// 36. Prototype Overflow
// ----------------------
$prototype-overflow-breakpoints: $global-prototype-breakpoints;
$prototype-overflow: (
visible,
hidden,
scroll
);
// 37. Prototype Position
// ----------------------
$prototype-position-breakpoints: $global-prototype-breakpoints;
$prototype-position: (
static,
relative,
absolute,
fixed
);
$prototype-position-z-index: 975;
// 38. Prototype Rounded
// ---------------------
$prototype-rounded-breakpoints: $global-prototype-breakpoints;
$prototype-border-radius: rem-calc(3);
// 39. Prototype Separator
// -----------------------
$prototype-separator-breakpoints: $global-prototype-breakpoints;
$prototype-separator-align: center;
$prototype-separator-height: rem-calc(2);
$prototype-separator-width: 3rem;
$prototype-separator-background: $primary-color;
$prototype-separator-margin-top: $global-margin;
// 40. Prototype Shadow
// --------------------
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16),
0 2px 10px 0 rgba(0, 0, 0, .12);
// 41. Prototype Sizing
// --------------------
$prototype-sizing-breakpoints: $global-prototype-breakpoints;
$prototype-sizing: (
width,
height
);
$prototype-sizes: (
25: 25%,
50: 50%,
75: 75%,
100: 100%
);
// 42. Prototype Spacing
// ---------------------
$prototype-spacing-breakpoints: $global-prototype-breakpoints;
$prototype-spacers-count: 3;
// 43. Prototype Text-Decoration
// -----------------------------
$prototype-decoration-breakpoints: $global-prototype-breakpoints;
$prototype-text-decoration: (
overline,
underline,
line-through,
);
// 44. Prototype Text-Transformation
// ---------------------------------
$prototype-transformation-breakpoints: $global-prototype-breakpoints;
$prototype-text-transformation: (
lowercase,
uppercase,
capitalize
);
// 45. Prototype Text-Utilities
// ----------------------------
$prototype-utilities-breakpoints: $global-prototype-breakpoints;
$prototype-text-overflow: ellipsis;
// 46. Responsive Embed
// --------------------
$responsive-embed-margin-bottom: rem-calc(16);
$responsive-embed-ratios: (
default: 4 by 3,
widescreen: 16 by 9,
);
// 47. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
// 48. Slider
// ----------
$slider-width-vertical: 0.5rem;
$slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
$slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
// 49. Switch
// ----------
$switch-background: $medium-gray;
$switch-background-active: $primary-color;
$switch-height: 2rem;
$switch-height-tiny: 1.5rem;
$switch-height-small: 1.75rem;
$switch-height-large: 2.5rem;
$switch-radius: $global-radius;
$switch-margin: $global-margin;
$switch-paddle-background: $white;
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
// 50. Table
// ---------
$table-background: $white;
$table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
$table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
$table-stack-breakpoint: medium;
// 51. Tabs
// --------
$tab-margin: 0;
$tab-background: $white;
$tab-color: $primary-color;
$tab-background-active: $light-gray;
$tab-active-color: $primary-color;
$tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
$tab-content-background: $white;
$tab-content-border: $light-gray;
$tab-content-color: $body-font-color;
$tab-content-padding: 1rem;
// 52. Thumbnail
// -------------
$thumbnail-border: 4px solid $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
// 53. Title Bar
// -------------
$titlebar-background: $black;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
// 54. Tooltip
// -----------
$has-tip-cursor: help;
$has-tip-font-weight: $global-weight-bold;
$has-tip-border-bottom: dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
$tooltip-max-width: 10rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
$tooltip-radius: $global-radius;
// 55. Top Bar
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
// 56. Xy Grid
// -----------
$xy-grid: true;
$grid-container: $global-width;
$grid-columns: 12;
$grid-margin-gutters: (
small: 20px,
medium: 30px
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width;
$xy-block-grid-max: 8;

6
src/client/sass/_unterkunft.scss Normal file
View File

@@ -0,0 +1,6 @@
#map_unterkunft{
width: 100%;
height: 100%;
border: 0;
padding-left: 1rem;
}

115
src/client/sass/index.scss Normal file
View File

@@ -0,0 +1,115 @@
@import "../../../node_modules/foundation-sites/scss/foundation";
//@import "settings";
//Importiere zuerst foundation vor anderen Imports, damit foundation-settings überschrieben werden
@include foundation-everything;
@import "navbar";
@import "unterkunft";
@import "geschenke";
.width-100 {
width: 100%;
}
.height-100{
height: 100%;
}
html {
height: 100%;
font-size: 20px;
letter-spacing: 1.1px;
}
.grow{
flex: 1;
}
body {
background: $background-color;
width: 100%;
height: 100%;
nav.top-bar {
}
#main-content-container {
height: calc(100% - 5rem);
position: relative;
overflow: auto;
#scroll-container {
height: 100%;
background: $background-color;
> .grid-container {
height: 100%;
> .grid-x {
height: 100%;
}
}
#main-content {
height: 100%;
padding: 0;
}
}
}
}
.overflow-auto{
overflow: auto;
}
h1, p, .padding-default {
padding-left: 1rem;
padding-right: 1rem;
}
a.hidden-link, a.hidden-link:hover{
text-decoration: none;
color: inherit;
}
#home-img-container {
#home-img {
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
img {
width: 100%;
height: calc(100% - 5rem);
object-fit: cover;
}
#start-text-img-overlay {
position: absolute;
left: 2rem;
top: 50%;
color: white;
font-family: "Winter Sunrise", Arial, serif;
font-size: 4rem;
line-height: 2.5;
}
}
#img-spacer {
display: block;
width: 100%;
height: 100%;
}
}
img.full-screen-width {
width: 100vw;
}
.hidden {
display: none;
}

135
src/server/Server.ts Normal file
View File

@@ -0,0 +1,135 @@
import * as express from "express";
import {createServer, Server as HTTPServer} from "http";
import * as path from "path";
export class Server {
private httpServer: HTTPServer;
private app: express.Application;
// private io: socketIO.Server;
// private activeSockets: string[] = [];
// private senders: string[] = [];
private readonly DEFAULT_PORT = parseInt(process.env.PORT) || 5000;
constructor() {
this.initialize();
}
private initialize(): void {
this.app = express();
this.httpServer = createServer(this.app);
// this.io = socketIO(this.httpServer);
this.configureApp();
this.configureRoutes();
// this.handleSocketConnection();
}
private configureApp(): void {
this.app.use(express.static(path.join(__dirname, "../../dist")));
}
private configureRoutes(): void {
this.app.get("/", (req, res) => {
res.sendFile("index.html");
});
}
// private handleSocketConnection(): void {
// let webserverSocket = null;
// this.io.on("connection", socket => {
// console.log("new client", new Date());
// const existingSocket = this.activeSockets.find(
// existingSocket => existingSocket === socket.id
// );
//
// if (!existingSocket) {
// this.activeSockets.push(socket.id);
//
// socket.emit("update-user-list", {
// users: this.activeSockets.filter(
// existingSocket => existingSocket !== socket.id
// )
// });
//
// socket.broadcast.emit("update-user-list", {
// users: [socket.id]
// });
// }
//
// socket.on("message", (data: any) => {
// console.log(new Date(), data.to, data.message.type);
// if (data.message.type === undefined){
// console.log(new Date(), data.message);
// }
// if (data.to) {
// socket.to(data.to).emit("message", data);
// } else if (webserverSocket) {
// data.from = socket.id;
// webserverSocket.emit("message", data)
// }
// });
//
// socket.on("set-webserver", () => {
// if (webserverSocket === null) {
// console.log("setting webserver", new Date())
// webserverSocket = socket;
//
// this.activeSockets.forEach(s => {
// if (s !== socket.id){
// socket.to(s).emit("ready");
// }
// });
// }
// })
//
// if (webserverSocket){
// socket.emit("ready");
// }
// // socket.on("request-offer", () => {
// // if (webserverSocket) {
// // webserverSocket.emit("request-offer", {socket: socket.id})
// // }
// // });
// //
// // socket.on("answer", data => {
// // console.log("got answer", data.answer);
// // socket.to(data.to).emit("answer", data.answer);
// // });
// //
// // socket.on("send-answer", data => {
// // if (webserverSocket) {
// // addMessage(socket.id, JSON.parse(data));
// // webserverSocket.emit("send-answer", data)
// // }
// // });
// //
// // socket.on("send-ice-candidate", data => {
// // if (socket.to(data.to)){
// // addMessage(socket.id, data.candidate);
// // socket.to(data.to).emit("ice-candidate", data.candidate)
// // }
// // });
//
// socket.on("disconnect", () => {
// console.log("losing client", new Date())
// this.activeSockets = this.activeSockets.filter(
// existingSocket => existingSocket !== socket.id
// );
// socket.broadcast.emit("remove-user", {
// socketId: socket.id
// });
// if (socket === webserverSocket){
// webserverSocket = null;
// }
// });
// });
// }
public listen(callback: (port: number) => void): void {
this.httpServer.listen(this.DEFAULT_PORT, () => {
callback(this.DEFAULT_PORT);
});
}
}

8
src/server/index.ts Normal file
View File

@@ -0,0 +1,8 @@
import "dotenv/config";
import { Server } from "./Server";
const server = new Server();
server.listen(port => {
console.log(`Server is listening on http://localhost:${port}`);
});