peepo-world · BenjaRogers · Feb 28, 2023 · Feb 28, 2023 · Mar 3, 2023 · Mar 13, 2023
diff --git a/LICENSE b/LICENSE
@@ -1 +1 @@
-LICENSES/EUPL-1.2.txt
+LICENSES/EUPL-1.2.txt
diff --git a/greenhouse/web/asgi.py b/greenhouse/web/asgi.py
@@ -7,7 +7,8 @@
 from typing import AsyncIterator
 
 from starlette.applications import Starlette
-from starlette.routing import Route
+from starlette.routing import Route, Mount
+from starlette.staticfiles import StaticFiles
 
 import greenhouse.web
 
@@ -25,6 +26,9 @@ async def lifespan(app) -> AsyncIterator[None]:
     debug=greenhouse.web.DEBUG,
     routes=[
         Route('/', routes.homepage),
+        Route('/dashboard', routes.dashboard),
+        Route('/top-emotes', routes.top_emotes),
+        Mount('/static', StaticFiles(directory='greenhouse/web/static'), name='static')
     ],
     lifespan=lifespan,
 )
diff --git a/greenhouse/web/routes.py b/greenhouse/web/routes.py
@@ -3,14 +3,20 @@
 # SPDX-License-Identifier: EUPL-1.2
 
 import importlib.resources
-
+from starlette.requests import Request
 from starlette.templating import Jinja2Templates
-
+from starlette.responses import Response
 
 templates = Jinja2Templates(
     directory=importlib.resources.files('greenhouse.web.templates'),
 )
 
 
-async def homepage(request):
+async def homepage(request: Request) -> Response:
     return templates.TemplateResponse('index.html', {'request': request})
+
+async def dashboard(request: Request) -> Response:
+    return templates.TemplateResponse('dashboard.html', {'request': request})
+
+async def top_emotes(request: Request) -> Response:
+    return templates.TemplateResponse('top-emotes.html', {'request': request})
diff --git a/greenhouse/web/static/style.css b/greenhouse/web/static/style.css
@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2023 peepo.world developers
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+@import url("https://use.typekit.net/sfm4zwf.css");
+#site-name {
+    font-family: rodchenko-cond, sans-serif;
+    font-weight: 700;
+    font-style: normal;
+}
+
+input[type="checkbox"][id^="myCheckbox"] {
+  display: none;
+
+  }
+
+  label {
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  label:before {
+    background-color: white;
+    color: white;
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    border: 1px solid grey;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    line-height: 28px;
+    transition-duration: 0.4s;
+    transform: scale(0);
+  }
+
+  label img {
+    transition-duration: 0.2s;
+    transform-origin: 50% 50%;
+  }
+
+  :checked + label {
+    border-color: #ddd;
+  }
+
+  :checked + label:before {
+    content: "✓";
+    background-color: #485fc7;
+    transform: scale(1);
+  }
+
+  :checked + label img {
+    transform: scale(0.9);
+    /* box-shadow: 0 0 5px #333; */
+    z-index: -1;
+  }
diff --git a/greenhouse/web/static/style.scss b/greenhouse/web/static/style.scss
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 peepo.world developers
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+@import "node_modules/bulma/sass/utilities/initial-variables";
+
+
+
+@import "node_modules/bulma/bulma";
diff --git a/greenhouse/web/templates/base.html b/greenhouse/web/templates/base.html
@@ -0,0 +1,129 @@
+<!--
+SPDX-FileCopyrightText: 2023 peepo.world developers
+SPDX-License-Identifier: EUPL-1.2
+-->
+<!DOCTYPE html>
+<html>
+
+
+<head>
+    {% block head %}
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', path = '/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path = '/style.scss') }}">
+    <script src="https://kit.fontawesome.com/925ae519b7.js" crossorigin="anonymous"></script>
+    {% endblock %}
+</head>
+
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        <div class="navbar-brand">
+            <a class="navbar-item" href="">
+                <img src="https://placehold.jp/3c3753/ffffff/112x28.png?text=Logo" width="112" height="28">
+            </a>
+
+            <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
+        </div>
+
+        <div id="navMenu" class="navbar-menu">
+            <div class="navbar-start">
+                <a class="navbar-item" href="/">
+                    Home
+                </a>
+
+                <a class="navbar-item" href="top-emotes">
+                    Emotes
+                </a>
+
+                <a class="navbar-item" href="dashboard">
+                    Dashboard
+                </a>
+
+                <div class="navbar-item has-dropdown is-hoverable">
+                    <a class="navbar-link">
+                        More
+                    </a>
+
+                    <div class="navbar-dropdown">
+                        <a class="navbar-item">
+                            About
+                        </a>
+                        <a class="navbar-item">
+                            Contact
+                        </a>
+                        <hr class="navbar-divider">
+                        <a class="navbar-item">
+                            Report an issue
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="navbar-end">
+                <div class="navbar-item">
+                    <div class="buttons">
+                        <a class="button is-primary">
+                            Log in
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endblock %}
+    </nav>
+
+
+    {% block content %}
+    {% endblock %}
+
+
+    <footer class="footer">
+        {% block footer %}
+        <div class="content has-text-centered">
+            <p>
+                Footer content goes here.
+            </p>
+        </div>
+        {% endblock %}
+    </footer>
+
+
+</body>
+{% block menuscript %}
+<script> //Menu script
+
+    document.addEventListener('DOMContentLoaded', () => {
+
+        // Get all "navbar-burger" elements
+        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+        // Add a click event on each of them
+        $navbarBurgers.forEach(el => {
+            el.addEventListener('click', () => {
+
+                // Get the target from the "data-target" attribute
+                const target = el.dataset.target;
+                const $target = document.getElementById(target);
+
+                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                el.classList.toggle('is-active');
+                $target.classList.toggle('is-active');
+
+            });
+        });
+
+    });
+</script>
+{% endblock %}
+
+</html>
diff --git a/greenhouse/web/templates/dashboard.html b/greenhouse/web/templates/dashboard.html
@@ -0,0 +1,35 @@
+<!--
+SPDX-FileCopyrightText: 2023 peepo.world developers
+SPDX-License-Identifier: EUPL-1.2
+-->
+{% extends "base.html" %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% block head %}
+    {{super()}}
+    {% endblock %}
+</head>
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        {{super()}}
+        {% endblock %}
+    </nav>
+    {% block content %}
+    {% endblock %}
+    <footer class="footer">
+        {% block footer %}
+        {{ super()}}
+        {% endblock %}
+    </footer>
+</body>
+
+{% block menuscript%}
+{{super()}}
+{% endblock %}
+
+</html>
diff --git a/greenhouse/web/templates/index.html b/greenhouse/web/templates/index.html
@@ -1,5 +1,59 @@
 <!--
 SPDX-FileCopyrightText: 2023 peepo.world developers
-
 SPDX-License-Identifier: EUPL-1.2
 -->
+{% extends "base.html" %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% block head %}
+    {{super()}}
+    {% endblock %}
+</head>
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        {{super()}}
+        {% endblock %}
+    </nav>
+
+    {% block content %}
+    <!--hero----------->
+    <section class="hero is-primary">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-1" id="site-name">Site Name<h1>
+                        <h2 class="subtitle">Subtitle</h2>
+            </div>
+        </div>
+    </section>
+
+
+    <!---columns------>
+    <div class="columns">
+        <div class="column">
+            <div class="card">
+                <div class="card-content">
+                    <h2 class="title">"Short Description"</h2>
+                    <h3 class="subtitle">Subtitle</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endblock %}
+
+    <footer class="footer">
+        {% block footer %}
+        {{ super()}}
+        {% endblock %}
+    </footer>
+</body>
+
+{% block menuscript%}
+{{super()}}
+{% endblock %}
+
+</html>