diff options
| author | Marina Jäntti <mjantti@local> | 2023-11-01 02:45:15 +0200 |
|---|---|---|
| committer | Marina Jäntti <mjantti@local> | 2023-11-01 02:45:15 +0200 |
| commit | d67248c6cab9145ad88d5c16584b58abc7055676 (patch) | |
| tree | cd655a78837e2908ae42e8b58e904c2603a49e2a | |
| parent | 59a6f10326bc785b84620426c3e5b1405ab6ca39 (diff) | |
Just initial structure and testing out cookies
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | app.py | 8 | ||||
| -rw-r--r-- | nick.py | 10 | ||||
| -rw-r--r-- | routes.py | 30 | ||||
| -rw-r--r-- | static/index.html | 14 | ||||
| -rw-r--r-- | static/menu.css | 99 | ||||
| -rw-r--r-- | static/menu.js | 159 | ||||
| -rw-r--r-- | static/pages.css | 6 | ||||
| -rw-r--r-- | static/pages.json | 32 | ||||
| -rw-r--r-- | templates/analyse.html | 1 | ||||
| -rw-r--r-- | templates/answer.html | 1 | ||||
| -rw-r--r-- | templates/create.html | 1 | ||||
| -rw-r--r-- | templates/info.html | 1 | ||||
| -rw-r--r-- | templates/moderate.html | 1 | ||||
| -rw-r--r-- | templates/nick.html | 5 |
16 files changed, 370 insertions, 1 deletions
@@ -1 +1,2 @@ *~ +__pycache__ @@ -26,7 +26,7 @@ Vertailussa voi poimia - lisäksi mille tahansa parille voidaan laskea yhtenäisyysprosentti -Kysymykset, kyselyt, vastaukset tallennetaan asianmukaisiin tietokantoihin. +Kysymykset, kyselyt, vastaukset tallennetaan asianmukaisiin tauluihin. Moderointitilassa sisältöä voi poistaa sivulta. @@ -0,0 +1,8 @@ +from flask import Flask +from os import getenv + +app = Flask(__name__, static_url_path='') +app.secret_key = getenv("SECRET_KEY") + +import routes +import nick
\ No newline at end of file @@ -0,0 +1,10 @@ +from app import app +from flask import render_template, session, request, redirect + +@app.route("/nick",methods=["POST"]) +def set_nick(): + nick = request.form["nick"] + session["nick"] = nick + return redirect("/") + + diff --git a/routes.py b/routes.py new file mode 100644 index 0000000..09ba156 --- /dev/null +++ b/routes.py @@ -0,0 +1,30 @@ +from app import app +from flask import render_template,session + +@app.route("/") +def index(): + return app.send_static_file("index.html") + +@app.route("/pages/info.html") +def info(): + return render_template("info.html") + +@app.route("/pages/create.html") +def create(): + if "nick" not in session: + return render_template("nick.html") + return render_template("create.html") + +@app.route("/pages/answer.html") +def answer(): + if "nick" not in session: + return render_template("nick.html") + return render_template("answer.html") + +@app.route("/pages/analyse.html") +def analyse(): + return render_template("analyse.html") + +@app.route("/pages/moderate.html") +def moderate(): + return render_template("moderate.html") diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..c651142 --- /dev/null +++ b/static/index.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="fi"> +<head> + <title>Kyselmä</title> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta author="Viljami Ilola"> + <link rel="stylesheet" href="menu.css"> + <link rel="stylesheet" href="pages.css"> + <link rel="icon" type="image/svg+xml" href="kyselma.svg"> + <script src="menu.js"></script> +</head> +<body></body> +</html>
\ No newline at end of file diff --git a/static/menu.css b/static/menu.css new file mode 100644 index 0000000..04127ae --- /dev/null +++ b/static/menu.css @@ -0,0 +1,99 @@ +@charset "utf-8"; + +:root { + --menuColor: #000; + --menuBgColor: #fee; + --menuColorActive: #000; + --menuBgActive: #c88; + --menuColorHover: #fff; + --menuBgHover: #48f; + + --menuHeight: 1.5em; + --menuFontSize: 2; + --menuHamburgerHeight: 1.25em; + --menuHamburgerFontSize: 2.4; +} + +.menuItem { + height: var(--menuHeight); + display: flex; + align-items: center; + background-color: var(--menuBgColor); + font-size: calc(var(--menuFontSize)*100%); + cursor: pointer; + transition: background-color 0.3s; +} +.menuItem:hover { + background-color: var(--menuBgHover); +} +.menuItemActive, .menuItemActive:hover { + background-color: var(--menuBgActive); +} +.menuTitle, .menuTitle:hover, .menuSpacer, .menuSpacer:hover { + background-color: var(--menuBgColor); + cursor: unset; +} +.menuSpacer, .menuTitle { display: none; } + +.menuIcon { + width: calc(var(--menuHeight)*0.9); + height: calc(var(--menuHeight)*0.9); + padding: calc(var(--menuHeight)*0.05); +} +.menuIcon > a > img { + width: 100%; + height: 100%; +} +.menuText { + padding-left: calc(var(--menuHeight)/4); +} +.menuText > a { + color: var(--menuColor); + text-decoration: none; +} +.menuItem:hover > .menuText > a { + color: var(--menuColorHover); +} +.menuItemActive > .menuText > a, .menuItemActive:hover > .menuText > a { + color: var(--menuColorActive); +} +#menu { + position: absolute; + top: 0; + left: 0; + width: 100%; + display: block; +} +.menuHidden { display: none !important } + +#hamburgerMenu { + position: fixed; + right: 0; + top: 0; + display: flex; + z-index: 1; + width: var(--menuHamburgerHeight); + height: var(--menuHamburgerHeight); + font-size: calc(var(--menuHamburgerFontSize)*100%); + align-items: center; + justify-content: center; + background-color: var(--menuBgActive); + color: var(--menuColorActive); +} +#hamburgerMenu::before { content: "☰"; } +#spaceBeforePage { height: 0; } + +.page { display: none } +.pageActive { display: unset } + +@media only screen and (min-width: 64em) { + #hamburgerMenu { display: none; } + #menu { position: fixed; } + #spaceBeforePage { height: calc(var(--menuHeight)*var(--menuFontSize)); } + .menuHidden, .menuSpacer, .menuTitle { display: flex !important } + .menuSpacer { flex-grow: 2; } + .menuText { + padding-left: calc(var(--menuHeight)/2); + padding-right: calc(var(--menuHeight)/2); + } +} diff --git a/static/menu.js b/static/menu.js new file mode 100644 index 0000000..a014793 --- /dev/null +++ b/static/menu.js @@ -0,0 +1,159 @@ +// menu.js - menu system for small site - 2022 Viljami Ilola + +const jsonURL = 'pages.json' + +var conf = {} +var pages = {} +var currentPage = null; +loadPages = async() => { + await fetch( jsonURL ) + .then( response => response.json() ) + .then( json => conf = json ) + .catch( error => { + document.body.innerHTML = `Error loading ${jsonURL}<hr>${error}` + } ) + pages = conf.pages + + installHamburger() + createMenu() + createPlaceholders() + hashToPage() +} + +createPlaceholders = () => { + pagesMain = document.createElement('main') + Object.keys(pages).forEach(p => { + if ( pages[p].URL && pages[p].URL !== "" ) { + const pageSection = document.createElement('section') + pageSection.id = `${p}_page` + pageSection.className='page' + pagesMain.appendChild( pageSection ) + } + }) + document.documentElement.lastChild.append( pagesMain ) +} + +createMenuIcon = (p) => { + const icon = pages[p].menuIcon ? pages[p].menuIcon : '' + if ( icon === '' ) return null + + const iconImg = document.createElement('img') + iconImg.src = icon + + const iconAnchor = document.createElement('a') + iconAnchor.href = `#${p}` + iconAnchor.appendChild( iconImg ) + + const iconDiv = document.createElement('div') + iconDiv.className = 'menuIcon' + iconDiv.appendChild( iconAnchor ) + + return iconDiv +} + +createMenuText = (p) => { + const url = pages[p].URL ? pages[p].URL : "" + const name = pages[p].menuName ? pages[p].menuName : url + + if ( name === '' ) return null + + const textNode = document.createTextNode( name ) + + const textAnchor = document.createElement( url === "" ? 'div' : 'a') + textAnchor.href = `#${p}` + textAnchor.appendChild( textNode ) + + const textDiv = document.createElement('div') + textDiv.className = 'menuText' + textDiv.appendChild( textAnchor ) + + return textDiv +} + +createMenu = () => { + const menuNav = document.createElement('nav') + menuNav.id = 'menu' + menuNav.className = 'menuHidden' + + Object.keys(pages).forEach(p => { + + const entryDiv = document.createElement('div') + entryDiv.className = 'menuItem' + entryDiv.id = `${p}_menuEntry` + + const iconDiv = createMenuIcon(p) + const textDiv = createMenuText(p) + if ( iconDiv ) entryDiv.appendChild( iconDiv ) + if ( textDiv ) entryDiv.appendChild( textDiv ) + + const url = pages[p].URL ? pages[p].URL : "" + const name = pages[p].menuName ? pages[p].menuName : url + if ( url === "" ) entryDiv.className += + name === "" ? ' menuSpacer' : ' menuTitle' + else entryDiv.onclick = () => window.location.hash = p; + + menuNav.append( entryDiv ) + }) + document.documentElement.lastChild.append( menuNav ) + + const spacerDiv = document.createElement('div') + spacerDiv.id = 'spaceBeforePage' + document.documentElement.lastChild.append( spacerDiv ) +} + +installHamburger = () => { + hamburgerDiv = document.createElement('div') + hamburgerDiv.id = 'hamburgerMenu' + hamburgerDiv.onclick = () => toggleMenu() + document.documentElement.lastChild.append( hamburgerDiv ) +} + +toggleMenu = () => { + const menuNav = document.getElementById('menu') + menuNav.className = menuNav.className === 'menuHidden' ? '' : 'menuHidden' + if (menuNav.className === '') window.scrollTo(0,0) +} + +hashToPage = () => { + const p = !document.location.hash + ? Object.keys(pages)[0] : document.location.hash.substr(1) in pages + ? document.location.hash.substr(1) : Object.keys(pages)[0] + + if ( p === Object.keys(pages)[0] ) { + window.history.replaceState('', '', window.location.pathname) + } + if ( p === currentPage ) return false + + const pageElement = document.getElementById(`${p}_page`) + + if ( !currentPage ) currentPage = p; + else document.getElementById(`${currentPage}_page`).className = 'page' + pageElement.className = 'page pageActive' + + if ( !pageElement.loaded ) fetch( pages[p].URL ) + .then( response => { + if (!response.ok) return `ERROR loading "${pages[p].URL}"!` + return response.text() + } ) + .then( text => { + pageElement.innerHTML = text + pageElement.loaded = true + } ) + document.getElementById(`${currentPage}_menuEntry`) + .className = 'menuItem' + document.getElementById(`${p}_menuEntry`) + .className = 'menuItem menuItemActive' + currentPage = p + if (!pages[p].pageTitle) document.title = conf.title + else document.title = `${pages[p].pageTitle} - ${conf.title}` +} + +hideMenu = () => document.getElementById('menu').className = 'menuHidden'; + +window.onload = async() => { + loadPages() +} +window.onhashchange = () => { + hideMenu() + hashToPage() +} diff --git a/static/pages.css b/static/pages.css new file mode 100644 index 0000000..75be5f6 --- /dev/null +++ b/static/pages.css @@ -0,0 +1,6 @@ +@charset "utf-8"; + +h1 { + font-size: 2em; + margin: 1em; +}
\ No newline at end of file diff --git a/static/pages.json b/static/pages.json new file mode 100644 index 0000000..4935c1d --- /dev/null +++ b/static/pages.json @@ -0,0 +1,32 @@ +{ + "title": "Kyselmä", + "pages": { + "info": { + "URL": "pages/info.html", + "menuIcon": "kyselma.svg", + "menuName": "Kyselmä" + }, + "spacer-1": { + }, + "create": { + "pageTitle": "Luo kysely", + "URL": "pages/create.html", + "menuName": "Luo" + }, + "answer": { + "pageTitle": "Vastaa kyselyyn", + "URL": "pages/answer.html", + "menuName": "Vastaa" + }, + "analyse": { + "pageTitle": "Tutki vastauksia", + "URL": "pages/analyse.html", + "menuName": "Tutki" + }, + "moderate": { + "pageTitle": "Moderoi sivustoa", + "URL": "pages/moderate.html", + "menuName": "Moderoi" + } + } +} diff --git a/templates/analyse.html b/templates/analyse.html new file mode 100644 index 0000000..ad50883 --- /dev/null +++ b/templates/analyse.html @@ -0,0 +1 @@ +<h1>analyse</h1> diff --git a/templates/answer.html b/templates/answer.html new file mode 100644 index 0000000..70bdfb9 --- /dev/null +++ b/templates/answer.html @@ -0,0 +1 @@ +<h1>answer</h1> diff --git a/templates/create.html b/templates/create.html new file mode 100644 index 0000000..8335934 --- /dev/null +++ b/templates/create.html @@ -0,0 +1 @@ +<h1>create</h1> diff --git a/templates/info.html b/templates/info.html new file mode 100644 index 0000000..73fbfe0 --- /dev/null +++ b/templates/info.html @@ -0,0 +1 @@ +<h1>info</h1> diff --git a/templates/moderate.html b/templates/moderate.html new file mode 100644 index 0000000..2a491af --- /dev/null +++ b/templates/moderate.html @@ -0,0 +1 @@ +<h1>moderate</h1> diff --git a/templates/nick.html b/templates/nick.html new file mode 100644 index 0000000..72c641d --- /dev/null +++ b/templates/nick.html @@ -0,0 +1,5 @@ +<form action="/nick" method="POST"> +Anna itsellesi nimimerkki ensin: +<textarea name="nick" rows="1" cols="40"></textarea> +<input type="submit" value="Lähetä"> +</form> |