add help page
BiRabittoh birabittoh@tilde.team
Thu, 10 Aug 2023 16:39:20 +0200
4 files changed,
126 insertions(+),
11 deletions(-)
M
artbound_python/static/style.css
→
artbound_python/static/style.css
@@ -94,3 +94,7 @@ background-color: var(--background0);
color: var(--text); color-scheme: dark; } + +.text-row { + margin-top: 20px; +}
A
artbound_python/templates/help.html
@@ -0,0 +1,96 @@
+<!doctype html> +<html lang="it"> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta name="description" content="Un modo semplice e veloce per gestire le fanart di ArtBound."> + <meta name="author" content="BiRabittoh"> + <link rel="icon" + href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✏️</text></svg>"> + <title>ArtBound Panel - Informazioni</title> + <link href="/static/ext/css/bootstrap.min.css" rel="stylesheet"> + <link href="/static/style.css" rel="stylesheet"> +</head> + +<body> + <main role="main"> + <section class="jumbotron text-center"> + <div class="container"> + <h1 class="jumbotron-heading"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" + stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" + class="feather feather-activity"> + <polygon points="14 2 18 6 7 17 3 17 3 13 14 2"></polygon> + <line x1="3" y1="22" x2="21" y2="22"></line> + </svg> + ArtBound Panel</a> + </h1> + <h2 class="lead">Informazioni</h2> + + </div> + </section> + <div class="container"> + <div class="row text-row"> + <div class="col-md-12"> + <p> + ArtBound Panel è un modo intelligente per selezionare, ridimensionare, rinominare e marchiare + le fanart che arrivano ad EarthBound Café. + </p> + </div> + </div> + <div class="row text-row"> + <div class="col-md-12"> + <h2 class="lead">Istruzioni</h2> + <ol> + <li>Per prima cosa, seleziona il mese da cui vuoi estrarre le fanart e clicca sul tasto a fianco. Se le immagini non sono in cache potrebbe volerci un attimo.</li> + <li>Ripeti l'operazione precedente per integrare le fanart di eventuali altri mesi.</li> + <li>Disabilita le fanart non necessarie e ordina opportunamente il resto.</li> + <li>Usa il mouse o il touch screen per posizionare il watermark su ciascuna immagine.</li> + <li>Usa i tasti {{ emoji["save"] }} o {{ emoji["save_ig"] }} per salvare i risultati su file.</li> + </ol> + </div> + </div> + <div class="row text-row"> + <div class="col-md-12"> + <h2 class="lead">Comandi globali</h2> + <p> + Questi comandi sono posizionati sulla parte superiore centrale della pagina e permettono di agire su tutte le fanart. + </p> + <ul> + <li>{{ emoji["select_all"] }}: abilita tutte le fanart;</li> + <li>{{ emoji["select_none"] }}: disabilita tutte le fanart;</li> + <li>Slider: cambia l'opacità dei prossimi watermark;</li> + <li>{{ emoji["save"] }}: salva tutte le fanart nel formato base, per Facebook e Google Forms;</li> + <li>{{ emoji["save_ig"] }}: salva tutte le fanart nel formato storia, per Instagram.</li> + </ul> + </div> + </div> + <div class="row text-row"> + <div class="col-md-12"> + <h2 class="lead">Comandi fanart</h2> + <p> + Questi comandi sono posizionati lungo la parte inferiore destra di ogni fanart e permettono di agire su di essa. + </p> + <ul> + <li>{{ emoji["prev"] }}: porta indietro la fanart;</li> + <li>{{ emoji["toggle"] }}: abilita/disabilita la fanart;</li> + <li>{{ emoji["color"] }}: alterna tra watermark bianco e nero;</li> + <li>{{ emoji["save"] }}: salva la fanart nel formato base, per Facebook e Google Forms;</li> + <li>{{ emoji["save_ig"] }}: salva la fanart nel formato storia, per Instagram.</li> + <li>{{ emoji["next"] }}: porta avanti la fanart.</li> + </ul> + </div> + </div> + </div> + </main> + <footer> + <div class="container"> + <p>© Earthbound Café, realizzato da <a href="mailto:andronacomarco@gmail.com">Marco Andronaco</a> (BiRabittoh).</p> + </div> + </footer> + <script src="/static/ext/js/jquery-3.2.1.slim.min.js"></script> + <script src="/static/ext/js/bootstrap.min.js"></script> +</body> + +</html>
M
artbound_python/templates/index.html
→
artbound_python/templates/index.html
@@ -48,12 +48,12 @@ <a href="#" class="btn my-2 btn-go" onclick="handleAuthClick();" id="authorize_button" hidden>Vai</a>
<button class="btn btn-secondary my-2" onclick="getArtworks();" id="get_button">Ottieni</button> </div> <div id="controls" hidden> - <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(1);" id="selectall_button">✅</a> - <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(0);" id="selectnone_button">❎</a> + <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(1);" id="selectall_button">{{ emoji["select_all"] }}</a> + <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(0);" id="selectnone_button">{{ emoji["select_none"] }}</a> <input type="range" class="form-range" id="opacity_range" min="0" max="1" step="0.01" oninput="updateOpacity();" value="0.4"> <label for="opacity_range" class="form-label" id="opacity_label"></label> - <a href="#" class="btn btn-secondary my-2" onclick="saveAll();" id="saveall_button">💾</a> - <a href="#" class="btn btn-secondary my-2" onclick="saveAllIG();" id="saveallig_button">📷</a> + <a href="#" class="btn btn-secondary my-2" onclick="saveAll();" id="saveall_button">{{ emoji["save"] }}</a> + <a href="#" class="btn btn-secondary my-2" onclick="saveAllIG();" id="saveallig_button">{{ emoji["save_ig"] }}</a> </div> </div> </section>@@ -98,12 +98,12 @@ <div class="card-body">
<a class="card-text" title="Clicca per copiare." onclick="navigator.clipboard.writeText(this.innerText);">{| filename |}</a> <div class="d-flex justify-content-between align-items-center card-controls"> <div class="btn-group"> - <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">⬅️</button> - <button class="btn btn-sm btn-outline-secondary" onclick="toggleEntry('{| id |}');">♻️</button> - <button class="btn btn-sm btn-outline-secondary" onclick="toggleInvert('{| id |}', this);">⚪</button> - <button class="btn btn-sm btn-outline-secondary" onclick="saveEntry('{| id |}');">💾</button> - <button class="btn btn-sm btn-outline-secondary" onclick="saveEntryIG('{| id |}');">📷</button> - <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', 1);">➡️</button> + <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">{{ emoji["prev"] }}</button> + <button class="btn btn-sm btn-outline-secondary" onclick="toggleEntry('{| id |}');">{{ emoji["toggle"] }}</button> + <button class="btn btn-sm btn-outline-secondary" onclick="toggleInvert('{| id |}', this);">{{ emoji["color"] }}</button> + <button class="btn btn-sm btn-outline-secondary" onclick="saveEntry('{| id |}');">{{ emoji["save"] }}</button> + <button class="btn btn-sm btn-outline-secondary" onclick="saveEntryIG('{| id |}');">{{ emoji["save_ig"] }}</button> + <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', 1);">{{ emoji["next"] }}</button> </div> </div> </div>
M
artbound_python/views.py
→
artbound_python/views.py
@@ -6,10 +6,21 @@ from artbound_python.cache import DB, clear_cache
database = DB() +emoji = { + "select_all": "✅", + "select_none": "❎", + "save": "💾", + "save_ig": "📷", + "prev": "⬅️", + "next": "➡️", + "toggle": "♻️", + "color": "⚪", +} + @app.route('/', methods=['GET', 'POST']) def route_index(): if request.method == 'GET': - return render_template("index.html", last_updated=database.get_last_updated(), current_month=datetime.today().strftime("%Y-%m")) + return render_template("index.html", last_updated=database.get_last_updated(), current_month=datetime.today().strftime("%Y-%m"), emoji=emoji) if (request.headers.get('Content-Type') != 'application/json'): return 'Content-Type not supported. Please use "application/json".'@@ -17,6 +28,10 @@
month = request.json["month"] fanarts = database.get_fanarts(month) return json.dumps(fanarts) + +@app.route('/help') +def route_help(): + return render_template("help.html", emoji=emoji) @app.route('/update', methods=['POST']) def route_update():