a gesture
Stephen Kerr
1 year ago
parent
e3c3cdf5e5
commit
0d70c65a49
Binary file not shown.
@ -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)
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue