starred/UpSnap
1
0
Fork 0
mirror of https://github.com/seriousm4x/UpSnap.git synced 2026-08-03 10:58:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

first steps for settings page

Browse Source
This commit is contained in:
Maxi Quoß
2021-09-24 17:27:45 +02:00
parent e0d5a1b034
commit c12fc4b09c
6 changed files with 214 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/wol/static/css/slider.css Normal file
View File

@@ -0,0 +1,59 @@
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 5px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
/* Rounded sliders */
.slider.round {
border-radius: 15px;
}
.slider.round:before {
border-radius: 50%;
}

4
app/wol/static/css/style.css
View File

@@ -71,6 +71,10 @@
flex-shrink: unset;
}
.section.settings {
padding: 0;
}
@media (prefers-color-scheme: dark) {
.box {
background-color: var(--box-bg);

14
app/wol/templates/wol/index.html
View File

@@ -29,6 +29,14 @@
</div>
<div class="column is-one-third">
<div class="field is-grouped">
<p class="control">
<a class="button is-light" href="/settings">
<span>Settings</span>
<span class="icon is-small">
<i class="fas fa-cogs"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-light" href="/admin">
<span>Admin</span>
@@ -38,12 +46,12 @@
</a>
</p>
<p class="control">
<div class="button is-static is-light">
<span id="visitors">{{ visitors }} Visitors</span>
<a class="button is-static is-light">
<span id="visitors">{{ visitors }} visitors</span>
<span class="icon is-small">
<i class="fas fa-users"></i>
</span>
</div>
</a>
</p>
</div>
</div>

130
app/wol/templates/wol/settings.html Normal file
View File

@@ -0,0 +1,130 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wake on LAN</title>
<link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}">
<link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bulma-prefers-dark.min.css' %}">
<link rel="stylesheet" href="{% static 'css/all.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/bulma-notifications.css' %}">
<link rel="stylesheet" href="{% static 'css/slider.css' %}">
</head>
<body class="px-4">
<section class="section">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-one-third">
<h1 class="title">
Wake on LAN
</h1>
<p class="subtitle">
Settings
</p>
</div>
<div class="column is-one-third">
<div class="field is-grouped">
<p class="control">
<a class="button is-light" href="/">
<span>Devices</span>
<span class="icon is-small">
<i class="fas fa-desktop"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-light" href="/admin">
<span>Admin</span>
<span class="icon is-small">
<i class="fas fa-user-cog"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-static is-light">
<span id="visitors">{{ visitors }} visitors</span>
<span class="icon is-small">
<i class="fas fa-users"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="box">
<section class="section settings">
<h2 class="is-size-3 mb-4">General</h2>
<div class="columns">
<div class="column is-one-fifth">
<label for="ping-interval">Ping interval:</label>
</div>
<div class="column">
<input id="ping-interval" class="input is-inline is-primary w-25" type="text" placeholder="5">
</div>
</div>
<div class="columns">
<div class="column is-one-fifth">
<span class="mr-2">Enable notifications:</span>
</div>
<div class="column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="columns">
<div class="column is-one-fifth">
<span class="mr-2">Debug mode:</span>
</div>
<div class="column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</section>
</div>
<div class="box">
<section class="section settings">
<h2 class="is-size-3 mb-4">Database</h2>
<div class="columns">
<div class="column is-one-fifth">
<label for="ping-interval">Ping interval:</label>
</div>
<div class="column">
<input id="ping-interval" class="input is-inline is-primary w-25" type="text" placeholder="5">
</div>
</div>
<div class="columns">
<div class="column is-one-fifth">
<span class="mr-2">Enable notifications:</span>
</div>
<div class="column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</section>
</div>
</div>
</body>
<footer>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'js/modal.js' %}"></script>
</footer>
</html>

3
app/wol/urls.py
View File

@@ -3,5 +3,6 @@ from django.urls import path
from wol import views
urlpatterns = [
path("", views.index, name="index")
path("", views.index, name="index"),
path("settings/", views.settings, name="settings")
]

8
app/wol/views.py
View File

@@ -13,3 +13,11 @@ def index(request):
}
return render(request, "wol/index.html", context)
def settings(request):
context = {
"test": "ja lol ey"
}
return render(request, "wol/settings.html", context)