add help page

This commit is contained in:
Marco Andronaco 2023-08-10 16:39:20 +02:00
parent 08f88f33cc
commit cfc6f84c02
4 changed files with 126 additions and 11 deletions

View File

@ -94,3 +94,7 @@ a:hover {
color: var(--text);
color-scheme: dark;
}
.text-row {
margin-top: 20px;
}

View File

@ -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>&copy; 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>

View File

@ -48,12 +48,12 @@
<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 @@
<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>

View File

@ -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".'
@ -18,6 +29,10 @@ def route_index():
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():
new_entries = database.update_database()