a gesture

1 year ago · 0d70c65a49
parent e3c3cdf5e5
commit 0d70c65a49
8 changed files with 127 additions and 0 deletions
--- a/gesture/pycache/app.cpython-310.pyc
+++ b/gesture/pycache/app.cpython-310.pyc
--- a/gesture/app.py
+++ b/gesture/app.py
@ -0,0 +1,27 @@
+from flask import Flask, request, redirect, render_template
+import os
+
+app = Flask(__name__)
+UPLOAD_FOLDER = os.path.join("static", "media")
+media = {
+    "img1.png": ["strike", "operator", "operator strike", "union"],
+    "img2.png": ["emergency beer", "beer", "cafe de bel", "bell"],
+    "knot-video.mp4": ["knot"],
+    "img3.png": ["operator", "worker", "woman"]
+}
+# media = ["operator", "worker", "woman"]
+
+@app.route("/")
+def home():
+    text = ["operator", "worker", "operator strike", "strike", "(k)not","pebbles","time","hurry","clockwise","anticlockwise","cloud","teletype","box","emergency beer","beer","cafe de bel","coffee","bell","food","breakfast","I love you"]
+    return render_template("template-index.html", text=text)
+
+@app.route("/<word>")
+def word(word):
+    wordmedia = []
+    for item in media:
+        if word in media[item]:
+            wordmedia.append(item)
+    print("wordmedia: ")
+    print(wordmedia)
+    return render_template("template-word.html", word=word, wordmedia=wordmedia, media=media, path=UPLOAD_FOLDER)
--- a/gesture/static/media/img1.png
+++ b/gesture/static/media/img1.png
--- a/gesture/static/media/img2.png
+++ b/gesture/static/media/img2.png
--- a/gesture/static/media/img3.png
+++ b/gesture/static/media/img3.png
--- a/gesture/static/style.css
+++ b/gesture/static/style.css
@ -0,0 +1,66 @@
+:root{
+    --color1: #418;
+    --color2: #ff0;
+}
+
+a{text-decoration: none;}
+
+body{
+    font-family: monospace;
+    background-color: var(--color1);
+    color: var(--color2);
+    font-size: 1.5rem;
+    margin: 2rem auto;
+    max-width: 60rem;
+}
+.button{
+    font-family: monospace;
+    padding: 0.5em 1em;
+    border-radius: 2em;
+    background: var(--color2);
+    color: var(--color1);
+}
+button:after{
+    content: " →";
+    break-before: avoid;
+}
+.button:hover{opacity: 0.7; cursor: pointer;}
+.close{float: right; text-decoration: none;}
+.close:hover{opacity: 0.7}
+img{max-width: 100%; margin-bottom: 1rem;}
+input{
+    margin: 0 0 0.5rem;
+}
+input[type="submit"]{
+    background-color: var(--color2);
+    color:var(--color1);
+    font-size: 1.5rem;
+    padding: 0.5rem;
+    font-family: monospace;
+    font-weight: 600;
+    width: 100%;
+}
+#floating-form{
+    position: fixed;
+    z-index: 2;
+    background-color: var(--color2);
+    color:var(--color1);
+    width: 20rem;
+    padding: 2rem;
+    display: none;
+}
+
+h4{margin: 0;}
+textarea{
+    width: 100%;
+    min-height: 20rem;
+    margin: 0 0 0.5rem;
+}
+
+.two-col{
+    max-width: calc(50% - 4rem);
+    float: left;
+    padding-right: 2rem;
+}
+
+
--- a/gesture/templates/template-index.html
+++ b/gesture/templates/template-index.html
@ -0,0 +1,16 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="./static/style.css" />
+    </head>
+    <body>
+        <h1>gesture glossary ✌️</h1>
+        <div class="two-col">
+            <h4>This is the home page for the gesture glossary. It has every word in the glossary to the right. Click a word to visit its page. This is the introduction.</h4>
+        </div>
+        <div class="two-col">
+            {% for word in text 
+                %}<a href="{{word}}"><button class="button">{{word}}</button></a>{%         
+            endfor %}
+        </div>
+    </body>
+</html>
--- a/gesture/templates/template-word.html
+++ b/gesture/templates/template-word.html
@ -0,0 +1,18 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="./static/style.css" />
+    </head>
+    <body>
+        <a href="/" ><h1 class="button">{{word}} <span class="close">x</span></h1></a>
+        {% for file in wordmedia %}
+        <div class="two-col">
+            <h2>Video {{file}}</h2>
+            <!-- This file path might need to change -->
+            <img src="{{path}}/{{file}}" />
+            {% for tag in media[file] 
+                %}<a href="{{tag}}"><button id="{{ loop.index - 1 }}" class="button">{{tag}}</button></a>{%         
+            endfor %}
+        </div>
+        {% endfor %}
+    </body>
+</html>