Add custom themes, THEME setting, basic "yolocolo" theme (#7)
Specify `THEME=yourtheme`, add some HTML files in `capsulflask/theme/yourtheme` 👌 We probably want to reduce copypasta in the current `yolocolo` theme by using template inheritance, at some point. Reviewed-on: #7 Co-authored-by: 3wordchant <3wordchant@noreply.git.autonomic.zone> Co-committed-by: 3wordchant <3wordchant@noreply.git.autonomic.zone>
This commit is contained in:
parent
8c0c613392
commit
5bb76173dd
@ -2,6 +2,7 @@ import logging
|
||||
from logging.config import dictConfig as logging_dict_config
|
||||
|
||||
import atexit
|
||||
import jinja2
|
||||
import os
|
||||
import hashlib
|
||||
import requests
|
||||
@ -71,7 +72,9 @@ app.config.from_mapping(
|
||||
#STRIPE_WEBHOOK_SECRET=os.environ.get("STRIPE_WEBHOOK_SECRET", default="")
|
||||
|
||||
BTCPAY_PRIVATE_KEY=os.environ.get("BTCPAY_PRIVATE_KEY", default="").replace("\\n", "\n"),
|
||||
BTCPAY_URL=os.environ.get("BTCPAY_URL", default="")
|
||||
BTCPAY_URL=os.environ.get("BTCPAY_URL", default=""),
|
||||
|
||||
THEME=os.environ.get("THEME", default="")
|
||||
)
|
||||
|
||||
app.config['HUB_URL'] = os.environ.get("HUB_URL", default=app.config['BASE_URL'])
|
||||
@ -154,6 +157,14 @@ is_running_server = ('flask run' in command_line) or ('gunicorn' in command_line
|
||||
|
||||
app.logger.info(f"is_running_server: {is_running_server}")
|
||||
|
||||
if app.config['THEME'] != "":
|
||||
my_loader = jinja2.ChoiceLoader([
|
||||
jinja2.FileSystemLoader(
|
||||
[os.path.join('capsulflask', 'theme', app.config['THEME']),
|
||||
'capsulflask/templates']),
|
||||
])
|
||||
app.jinja_loader = my_loader
|
||||
|
||||
if app.config['HUB_MODE_ENABLED']:
|
||||
|
||||
if app.config['HUB_MODEL'] == "capsul-flask":
|
||||
|
||||
BIN
capsulflask/static/favicon.yolocolo.ico
Normal file
BIN
capsulflask/static/favicon.yolocolo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
capsulflask/static/icon.yolocolo.png
Normal file
BIN
capsulflask/static/icon.yolocolo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
35
capsulflask/static/style.yolocolo.css
Normal file
35
capsulflask/static/style.yolocolo.css
Normal file
@ -0,0 +1,35 @@
|
||||
html {
|
||||
color: #241e1e !important;
|
||||
background-color: #bdc7b8 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#00517a !important;
|
||||
text-shadow: 1px 1px 0px #eee !important;
|
||||
}
|
||||
|
||||
a:hover, a:active, a:visited {
|
||||
color: #323417 !important;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-shadow: 2px 2px 0px #eee !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
text-shadow: 2px 2px 0px #eee;
|
||||
}
|
||||
|
||||
main {
|
||||
border: 1px dashed #241e1e !important;
|
||||
}
|
||||
|
||||
|
||||
input, select, textarea {
|
||||
color: #241e1e !important;
|
||||
}
|
||||
|
||||
th {
|
||||
border-right: 1px solid #eee !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
94
capsulflask/theme/yolocolo/account-balance.html
Normal file
94
capsulflask/theme/yolocolo/account-balance.html
Normal file
@ -0,0 +1,94 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Account Balance{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row third-margin">
|
||||
<h1>Account Balance: ${{ account_balance }}</h1>
|
||||
</div>
|
||||
<div class="half-margin">
|
||||
|
||||
{% if has_vms and has_payments and warning_text != "" %}
|
||||
<div class="row">
|
||||
<pre class="wrap">{{ warning_text }}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
{% if has_payments %}
|
||||
<div>
|
||||
<div class="row third-margin">
|
||||
<h1>Payments</h1>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>amount</th>
|
||||
<th>date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for payment in payments %}
|
||||
<tr>
|
||||
<td class="{{ payment['class_name'] }}">${{ payment["dollars"] }}</td>
|
||||
<td class="{{ payment['class_name'] }}">{{ payment["created"] }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
<ul>
|
||||
<li>
|
||||
<h1>PAYMENT OPTIONS</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/payment/stripe">Add funds with Credit/Debit (stripe)</a>
|
||||
<ul><li>notice: stripe will load nonfree javascript </li></ul>
|
||||
</li>
|
||||
{% if btcpay_enabled %}
|
||||
<li><a href="/payment/btcpay">Add funds with Bitcoin/Litecoin/Monero (btcpay)</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% if has_vms %}
|
||||
<div class="row third-margin">
|
||||
<h1>Capsuls Billed</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table class="small">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>created</th>
|
||||
<th>deleted</th>
|
||||
<th>$/month</th>
|
||||
<th>months</th>
|
||||
<th>$ billed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for vm in vms_billed %}
|
||||
<tr>
|
||||
<td>{{ vm["id"] }}</td>
|
||||
<td>{{ vm["created"] }}</td>
|
||||
<td>{{ vm["deleted"] }}</td>
|
||||
<td>${{ vm["dollars_per_month"] }}</td>
|
||||
<td>{{ vm["months"] }}</td>
|
||||
<td>${{ vm["dollars"] }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block pagesource %}/templates/create-capsul.html{% endblock %}
|
||||
60
capsulflask/theme/yolocolo/base.html
Normal file
60
capsulflask/theme/yolocolo/base.html
Normal file
@ -0,0 +1,60 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Namecoin Address: N2aVL6pHtBp7EtNGb3jpsL2L2NyjBNbiB1 -->
|
||||
<link href="{{ url_for('static', filename='favicon.yolocolo.ico') }}" rel="icon">
|
||||
<title>{% block title %}{% endblock %}{% if self.title() %} - {% endif %}Capsul</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="Description" content="Cyberia Capsul">
|
||||
{% block head %}{% endblock %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.yolocolo.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="row justify-space-between half-margin">
|
||||
<div>
|
||||
🦉 <a href="/"><b>YOLOCOLO</b></a>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
{% if session["account"] %}
|
||||
{ {{ session["account"] }} <a href="{{ url_for('auth.logout') }}">Log Out</a> }
|
||||
{% else %}
|
||||
<a href="{{ url_for('auth.login') }}">Login</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-center half-margin wrap nav-links">
|
||||
<a href="/pricing">Pricing</a>
|
||||
<a href="/faq">FAQ</a>
|
||||
|
||||
{% if session["account"] %}
|
||||
<a href="/console">Capsuls</a>
|
||||
<a href="/console/ssh">SSH Public Keys</a>
|
||||
<a href="/console/account-balance">Account Balance</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="/support">Support</a>
|
||||
</div>
|
||||
</nav>
|
||||
{% for message in get_flashed_messages() %}
|
||||
<div class="flash">{{ message }}</div>
|
||||
{% endfor %}
|
||||
{% block custom_flash %}{% endblock %}
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
{% block subcontent %}{% endblock %}
|
||||
<footer>
|
||||
This server runs <a
|
||||
href="https://giit.cyberia.club/~forest/capsul-flask">capsul-flask</a> by
|
||||
Cyberia Computer Club, available under the <a
|
||||
href="https://creativecommons.org/licenses/by-sa/4.0/">Attribution-ShareAlike
|
||||
4.0 International</a> licence.<br/><br/>
|
||||
<a href="https://git.autonomic.zone/3wordchant/capsul-flask/src/branch/yolocolo/capsulflask{% block pagesource %}{% endblock %}">View page source</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
68
capsulflask/theme/yolocolo/capsuls.html
Normal file
68
capsulflask/theme/yolocolo/capsuls.html
Normal file
@ -0,0 +1,68 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Capsuls{% endblock %}
|
||||
|
||||
{% block custom_flash %}
|
||||
{% if created %}
|
||||
<div class="flash green">{{ created }} successfully created!</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row third-margin">
|
||||
<h1>Capsuls</h1>
|
||||
</div>
|
||||
<div class="third-margin">
|
||||
{% if has_vms %}
|
||||
<div class="row third-margin justify-end">
|
||||
<a href="/console/create">Create Capsul</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="heart-icon">❦</th>
|
||||
<th>id</th>
|
||||
<th>size</th>
|
||||
<th>cpu</th>
|
||||
<th>mem</th>
|
||||
<th>ipv4</th>
|
||||
<th>os</th>
|
||||
<th>created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for vm in vms %}
|
||||
<tr>
|
||||
{% if vm['state'] == 'starting' or vm['state'] == 'stopping' %}
|
||||
<td class="capsul-status waiting-pulse">•</td>
|
||||
{% elif vm['state'] == 'crashed' or vm['state'] == 'blocked' or vm['state'] == 'stopped' %}
|
||||
<td class="capsul-status red">•</td>
|
||||
{% elif vm['state'] == 'unknown' %}
|
||||
<td class="capsul-status-questionmark">?</td>
|
||||
{% else %}
|
||||
<td class="capsul-status green">•</td>
|
||||
{% endif %}
|
||||
|
||||
<td><a class="no-shadow" href="/console/{{ vm['id'] }}">{{ vm["id"] }}</a></td>
|
||||
<td>{{ vm["size"] }}</td>
|
||||
<td class="metrics"><img src="/metrics/cpu/{{ vm['id'] }}/5m/s"/></td>
|
||||
<td class="metrics"><img src="/metrics/memory/{{ vm['id'] }}/5m/s"/></td>
|
||||
<td class="{{ vm['ipv4_status'] }}">{{ vm["ipv4"] }}</td>
|
||||
<td>{{ vm["os"] }}</td>
|
||||
<td>{{ vm["created"] }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="row">
|
||||
<p>You don't have any Capsuls running. <a href="/console/create">Create one</a> today!</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block pagesource %}/templates/capsuls.html{% endblock %}
|
||||
46
capsulflask/theme/yolocolo/faq.html
Normal file
46
capsulflask/theme/yolocolo/faq.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}FAQ{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row full-margin"><h1>Frequently Asked Questions</h1></div>
|
||||
{% endblock %}
|
||||
|
||||
{% block subcontent %}
|
||||
<p>
|
||||
<ul>
|
||||
<li>
|
||||
What is this?
|
||||
<p>
|
||||
This is a <strong>technical demo</strong> of <a
|
||||
href="https://giit.cyberia.club/~forest/capsul-flask">Capsul</a>, for the
|
||||
as-yet-untitled <a href="https://coops.tech">Cotech</a> server hosting
|
||||
initiative, which you can <a
|
||||
href="https://community.coops.tech/t/call-for-input-v2-co-op-vps-survey/2802/9">read
|
||||
about on the Cotech forum</a>.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
What do you mean, "technical demo"?
|
||||
<p>No backups</p>
|
||||
<p>No service level agreement</p>
|
||||
<p>"Best effort" support</p>
|
||||
</li>
|
||||
<li>
|
||||
Where can I get this, but, more reliable?
|
||||
<p>Cyberia, the authors of this platform, run the canonical instance, <a
|
||||
href="https://capsul.org">Capsul.org</a>, on hardware they own. Please
|
||||
send them your money! (cash, crypto, or card accepted).</p>
|
||||
</li>
|
||||
<li>
|
||||
How do I use this system?
|
||||
<p>Please see <a href="https://capsul.org/faq">the official Capsul FAQ
|
||||
page</a>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block pagesource %}/templates/faq.html{% endblock %}
|
||||
|
||||
28
capsulflask/theme/yolocolo/index.html
Normal file
28
capsulflask/theme/yolocolo/index.html
Normal file
@ -0,0 +1,28 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<h1>
|
||||
<pre>
|
||||
_ _
|
||||
_ _ ___ | | ___ ___ ___ | | ___
|
||||
| | | |/ _ \| |/ _ \ / __/ _ \| |/ _ \
|
||||
| |_| | (_) | | (_) | (_| (_) | | (_) |
|
||||
\__, |\___/|_|\___/ \___\___/|_|\___/
|
||||
|___/
|
||||
|
||||
</pre>
|
||||
<span>Co-operative hosting using <a href="https://cyberia.club">Cyberia</a>'s Capsul</span>
|
||||
{% endblock %}
|
||||
|
||||
{% block subcontent %}
|
||||
<p>
|
||||
<ul>
|
||||
<li>Sign up for an account!</li>
|
||||
<li>Add some funds!</li>
|
||||
<li>Create a VPS!</li>
|
||||
<li>Give your feedback!</li>
|
||||
</ul>
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block pagesource %}/templates/index.html{% endblock %}
|
||||
23
capsulflask/theme/yolocolo/pricing.html
Normal file
23
capsulflask/theme/yolocolo/pricing.html
Normal file
@ -0,0 +1,23 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Pricing{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row third-margin">
|
||||
<h1>CAPSUL TYPES & PRICING</h1>
|
||||
</div>
|
||||
<div class="row half-margin">
|
||||
<p>
|
||||
Rates for this service aren't set yet. You can see Cyberia's Capsul pricing
|
||||
on <a href="https://capsul.org/pricing">their website</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<pre>
|
||||
SUPPORTED OPERATING SYSTEMS:
|
||||
|
||||
{% for os_id, os in operating_systems.items() %} - {{ os.description }}
|
||||
{% endfor %}
|
||||
</pre>
|
||||
</div>
|
||||
{% endblock %}
|
||||
21
capsulflask/theme/yolocolo/support.html
Normal file
21
capsulflask/theme/yolocolo/support.html
Normal file
@ -0,0 +1,21 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Support{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row half-margin">
|
||||
<h1>SUPPORT</h1>
|
||||
</div>
|
||||
<div class="row half-margin">
|
||||
<a href="mailto:yolocolo@doesthisthing.work?subject=Please%20help!">yolocolo@doesthisthing.work</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block subcontent %}
|
||||
<p>
|
||||
You can also find us on Matrix: <a
|
||||
href="https://matrix.to/#/#untitled-hosting.public:autonomic.zone">#untitled-hosting.public:autonomic.zone</a>.
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block pagesource %}/templates/support.html{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user