edit design to look a bit more sleek

This commit is contained in:
2021-09-03 17:23:21 +02:00
parent 5170cd5343
commit d672849a25
5 changed files with 130 additions and 37 deletions

32
templates/base.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
{% block head %}
<title>{% block title %}{% endblock title %} - ics-proxy</title>
{% endblock head %}
</head>
<body>
<div id="content">
<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog"
id="modalTour">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-6 shadow">
<div class="modal-body p-5">
{% block content %}{% endblock content %}
</div>
</div>
</div>
</div>
</div>
<div id="footer">
{% block footer %}
{% endblock footer %}
</div>
</body>
</html>

View File

@@ -1,21 +1,37 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Edit{% endblock title %}
{% block head %}
{{ super() }}
<script>
function copy_link() {
/* Get the text field */
var copyText = document.getElementById("proxy_link");
<head> /* Copy the text inside the text field */
<meta charset="utf-8" /> navigator.clipboard.writeText(copyText.value);
<title>Actix web</title> }
</head> </script>
{% endblock head %}
{% block content %}
<body> <h2 class="fw-bold mb-1">Hi, your link is </h2>
<h1>Hi, your link is <a href="{{ root }}/{{ uuid }}/events.ics"">{{ root }}/{{ uuid }}/events.ics</a>!</h1> <div class="input-group input-group-lg">
it takes the data from <input id="proxy_link" class="form-control" type="text" value="{{ root }}/{{ uuid }}/events.ics" disabled>
<p> <button onclick="copy_link()" class=" btn btn-outline-secondary">Copy</button>
</div>
You can simply copy and past this link into any calendar application.
<hr class="my-4">
<div class="mt-3">
To edit where it leads to:
<form action=" edit_process"> <form action=" edit_process">
<input name="uuid" type="hidden" value="{{ uuid }}"> <input name="uuid" type="hidden" value="{{ uuid }}">
<input name="link" type="text" value="{{ link }}"> <div class="input-group input-group-sm mb-3">
<input value="Replace" name="replace" type="submit"> <input class="form-control" name="link" type="text" value="{{ link }}">
<input class="btn btn-outline-secondary" value="Replace Link" name="replace" type="submit">
</div>
</form> </form>
</p> <a href="/">Back to main page</a>
</body> </div>
</html> {% endblock content %}

View File

@@ -1 +1,6 @@
{{ message }} {% extends "base.html" %}
{% block content %}
<div class="alert alert-danger" role="alert">
{{ message }}
</div>
{% endblock content %}

View File

@@ -1,21 +1,58 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Index{% endblock title %}
{% block head %}
{{ super() }}
<script>
window.onload = function hide_buttons() {
document.getElementById("create-button").hidden = true;
document.getElementById("edit-button").hidden = true;
}
<head> function switch_buttons() {
<meta charset="utf-8" /> var text = document.getElementById("link").value;
<title>Actix web</title> var create = document.getElementById("create-button");
</head> var edit = document.getElementById("edit-button");
<body> if (!isValidHttpUrl(text) || containsCurrentURL(text)) {
<h1>Welcome!</h1> create.hidden = true;
<p> edit.hidden = false;
<form action="index_process"> } else {
<label for="link"">Link: </label> create.hidden = false;
<input id=" link" type="text" name="link" /><br /> edit.hidden = true;
<input value="Create proxy link" name="create" type="submit"> console.log("Create")
<input value="Edit proxy link" name="edit" type="submit"> }
</form> }
</p>
</body>
</html> function isValidHttpUrl(string) {
let url;
try {
url = new URL(string);
} catch (_) {
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
function containsCurrentURL(str) {
return str.includes((new URL(window.location.href)).host);
}
</script>
{% endblock head %}
{% block content %}
<h2 class="fw-bold mb-0">Welcome!</h2>
<small class="text-muted">Here you can paste an ics link, to create a new proxy url.
Alternatively you can paste an existing url to edit it.</small>
<form action="index_process">
<div class="form-floating mb-3">
<input name="link" type="text" class="form-control rounded-4" id="link" placeholder="https://some.url"
oninput="switch_buttons()">
<label for="link">Link</label>
</div>
<div class="form-floating mb-3">
<input onload="hide_buttons()" id="create-button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
value="Create new" name="create" type="submit">
<input onload="hide_buttons()" id="edit-button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
value="Edit ✎" name="edit" type="submit">
</div>
</form>
{% endblock content %}

View File

@@ -1,3 +1,6 @@
{% extends "base.html" %}
{% block content %}
<p>{{ message }}</p> <p>{{ message }}</p>
<p>Please wait to be redirected or click <a href="{{ link }}">here!</a></p> <p>Please wait to be redirected or click <a href="{{ link }}">here!</a></p>
<meta http-equiv="Refresh" content="{{ time }}; url='{{ link }}'" /> <meta http-equiv="Refresh" content="{{ time }}; url='{{ link }}'" />
{% endblock content %}