diff options
| author | Roman Gräf <roman.graef@gmail.com> | 2017-11-01 12:39:11 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-11-01 12:39:11 +0100 |
| commit | e788ee67564c59504bfbea8964c62f7a6bcdbf13 (patch) | |
| tree | 6026738857acf56b80d3438f47cc0244e5730bb8 | |
| parent | 77d129edd458fe4cdc2e0011e934cac47d525624 (diff) | |
| download | ichtml-e788ee67564c59504bfbea8964c62f7a6bcdbf13.tar.gz ichtml-e788ee67564c59504bfbea8964c62f7a6bcdbf13.tar.bz2 ichtml-e788ee67564c59504bfbea8964c62f7a6bcdbf13.zip | |
Add files via upload
| -rw-r--r-- | index.html | 41 | ||||
| -rw-r--r-- | res/default.css | 49 | ||||
| -rw-r--r-- | res/default.js | 25 | ||||
| -rw-r--r-- | res/loading.css | 19 | ||||
| -rw-r--r-- | res/sidebar.css | 37 |
5 files changed, 171 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc708f1 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
+ <link rel="stylesheet" href="res/default.css">
+ <link rel="stylesheet" href="res/sidebar.css">
+ <link rel="stylesheet" href="res/loading.css">
+ <meta name="theme-color" content="#22ff22">
+ <meta name="author" content="Roman Gräf">
+ <meta name="content" content="About me">
+</head>
+<body>
+
+<!--
+ Sidebar
+-->
+<div class="sidebar" id="sidebar" style="display:none">
+ <a onclick="sidebar_close()" href="#" class="sidebar-button button sidebar-close">Close ×</a>
+ <a href="#" onclick="open_timetable()" class="sidebar-button button">Stundenplan</a>
+ <a href="https://gitlab.com/MDWay" onclick="sidebar_close()" target="_blank" class="sidebar-button button">
+ <img src="https://gitlab.com/assets/favicon-075eba76312e8421991a0c1f89a89ee81678bcde72319dd3e8047e2a47cd3a42.ico">Gitlab</a>
+ <a href="https://github.com/MDWay" onclick="sidebar_close()" target="_blank" class="sidebar-button button sidebar-last">
+ <img src="https://assets-cdn.github.com/favicon.ico">Github</a>
+</div>
+
+<!--
+ Sitetop
+-->
+<div class="teal">
+ <div class="hamburger">
+ <a onclick="sidebar_open()" href="#">☰ Menu</a><span class="header" id="header">Main</span>
+ </div>
+</div>
+
+<div id="content">
+</div>
+
+<script src="res/default.js"></script>
+</body>
+</html>
diff --git a/res/default.css b/res/default.css new file mode 100644 index 0000000..631e12e --- /dev/null +++ b/res/default.css @@ -0,0 +1,49 @@ +body {
+ padding: 0;
+ margin: 0;
+}
+
+img {
+ vertical-align: middle;
+}
+
+.header {
+ right: 2px;
+ position: absolute;
+ text-align: right;
+}
+
+a {
+ text-decoration: none;
+ margin: 0;
+ padding: 10px;
+}
+
+.button {
+ display: block;
+ background: #eee;
+}
+
+.button:hover {
+ background: #ddd;
+}
+
+.centered {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ /* bring your own prefixes */
+ transform: translate(-50%, -50%);
+}
+
+.img-circle {
+ border-radius: 50%;
+}
+
+.send-channel {
+ margin-left: 30px;
+}
+
+#content {
+ margin: 2px;
+}
diff --git a/res/default.js b/res/default.js new file mode 100644 index 0000000..6776fae --- /dev/null +++ b/res/default.js @@ -0,0 +1,25 @@ +function sidebar_close() {
+ $("#sidebar").fadeOut();
+}
+
+function sidebar_open() {
+ $("#sidebar").fadeIn();
+}
+
+function show_loading() {
+ $("#content").html(("<div class='spinner centered'></div>"));
+}
+
+function load(file, title) {
+ show_loading();
+ $("#header").text(title);
+ $.get("file:///H:/ichtml/content/"+file, function(data) {
+ $("#content").html(data);
+ }, "text");
+}
+
+function open_timetable() {
+ sidebar_close();
+ load('timetable.html', 'Stundenplan');
+}
+
diff --git a/res/loading.css b/res/loading.css new file mode 100644 index 0000000..6a1fb67 --- /dev/null +++ b/res/loading.css @@ -0,0 +1,19 @@ +.spinner {
+ /* Shamelessly stolen from https://www.w3schools.com/howto/howto_css_loader.asp */
+ border: 16px solid #d6d6d6; /* Light grey */
+ border-top: 16px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 120px;
+ height: 120px;
+ animation: spinner 2s linear infinite;
+}
+
+
+@keyframes spinner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/res/sidebar.css b/res/sidebar.css new file mode 100644 index 0000000..6cce509 --- /dev/null +++ b/res/sidebar.css @@ -0,0 +1,37 @@ +
+.sidebar {
+ width: 25%;
+ overflow: auto;
+ position: absolute;
+}
+
+.teal {
+ width: 100%;
+ background: #0099ff;
+ border-bottom: 1px solid #007acc;
+}
+
+.hamburger {
+ width: 100%;
+}
+
+.sidebar-button {
+ text-align: right;
+ color: black;
+ border-right: 1px solid #000;
+}
+
+.sidebar-button:hover {
+}
+
+.sidebar-last {
+ border-bottom: 1px solid #000;
+}
+
+.sidebar-close {
+ background: #3385ff;
+}
+
+.sidebar-close:hover {
+ background: #0066ff;
+}
|