Initial commit

2018-08-15 21:15:12 +02:00 · 2018-08-15 21:15:12 +02:00 · f5b2483b1b
commit f5b2483b1b
6 changed files with 2301 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules/
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,14 @@
+{
+  "name": "seminarfach",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "lite-server": "^2.4.0"
+  }
+}
--- a/public/assets/stock.jpg
+++ b/public/assets/stock.jpg
--- a/public/index.css
+++ b/public/index.css
@ -0,0 +1,44 @@
+body {
+    background-image: ;
+    background-size: cover;
+}
+
+.content:before {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  
+  display: block;
+  background-image: url("assets/stock.jpg");
+  background-size: cover;
+  width: 1920px;
+  height: 1080px;
+  
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+}
+
+.content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.card-body {
+    margin: 10px;
+    text-align: center;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,48 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>{Arbeitstitel}</title>
+        <link rel="stylesheet" href="./index.css">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+    </head>
+    <body>
+        <script>
+         // Just show a happy little snackbar
+         function showSnackbar() {
+             const sb = document.querySelector("#info-sb");
+             const data = {
+                 message: 'Coming (hopefully) soon!'
+             };
+             sb.MaterialSnackbar.showSnackbar(data);
+         }
+        </script>
+
+        <!-- Flexbox needs a height to be set -->
+        <div class="center content" style="height: 100%">
+            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
+                <div class="card-body">
+                    <h1>{Arbeitstitel}</h1>
+                    <h2>A fun way to studying Latin</h2>
+
+                    A project for the Seminarfach of year 12.
+                </div>
+                <div class="mdl-card__actions mdl-card--border">
+                    <button id="start-btn" onClick="showSnackbar()" class="mdl-button mdl-js-button mdl-button--primary">
+                        Start learning
+                    </button>
+                    <div class="mdl-tooltip" data-mdl-for="start-btn">
+                        Coming (hopefully) soon!
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="info-sb" class="mdl-js-snackbar mdl-snackbar">
+            <div class="mdl-snackbar__text"></div>
+            <button class="mdl-snackbar__action" type="button"></button>
+        </div>
+    </body>
+</html>