kato
/
FreePad
mirror of https://github.com/JustKato/FreePad.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Facelift 

+ Light/Dark Mode
+ Theme Toggle
This commit is contained in:
Daniel Legt 2022-05-19 01:42:06 +03:00
parent 0c5aaff479
commit 161973ea13
6 changed files with 149 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
static/css/main.css
View File

@ -1,3 +1,58 @@
#post_content {
height: calc(100vh - 35rem);
:root {
--color-border-default: #444c56;
--color-fg-default: #adbac7;
}
.light body {
background-color: whitesmoke;
}
main#main-card {
max-width: 768px;
}
.light main#main-card {
background-color: white;
}
.dark main#main-card {
background-color: var(--bs-body-bg-alt);
border: 1px solid var(--color-border-default);
}
.dark {
color: var(--color-fg-default);
}
.dark .hidedark, .light .hidelight {
display: none !important;
}
#theme-toggle {
position: fixed;
top: .5rem;
right: .5rem;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: none;
box-shadow: none;
outline: 0 none;
}

20
templates/inc/footer.html
View File

@ -1,20 +1,4 @@
{{ define "inc/footer.html"}}
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>FreePad</strong> by <a href="https://justkato.me">Kato Twofold</a>.
<br>
The source code is licensed under the
<a href="http://opensource.org/licenses/mit-license.php">MIT</a> License.
<br>
The project is <b>Free and Open Source</b>, check out our <a href="https://github.com/JustKato/FreePad">Github Repo</a>.
<br>
Powered by <b>Go</b>phers!
</p>
</div>
</footer>
<script src="/static/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js"></script>
<script src="/static/js/main.js"></script>
{{ end }}

5
templates/inc/header.html
View File

@ -12,7 +12,10 @@
<link rel="icon" type="image/png" href="/static/img/favicon.png"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="color-scheme" content="light dark">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css" rel="stylesheet">
<!-- Love https://vinorodrigues.github.io/bootstrap-dark-5/ -->
<link rel="stylesheet" href="/static/css/main.css">
</head>
{{ end }}

11
templates/inc/theme-toggle.html Normal file
View File

@ -0,0 +1,11 @@
{{ define "inc/theme-toggle.html"}}
<button type="button" class="btn btn-white" id="theme-toggle" onclick="darkmode.toggleDarkMode();">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-sun hidelight" viewBox="0 0 16 16">
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-moon-stars hidedark" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</svg>
</button>
{{ end }}

58
templates/pages/index.html
View File

@ -1,5 +1,59 @@
{{ template "inc/header.html" .}}
<style>
</style>
<body>
{{ template "inc/footer.html" .}}
</body>
<main id="main-card" class="container rounded mt-5">
<div class="p-3">
<div class="logo-container w-100 d-flex mb-4">
<img src="/static/img/logo_transparent.png" alt="Logo" style="max-width: 50%; margin: 0 auto;"
class="mx-auto">
</div>
<div class="form-group my-4">
<div class="search-action input-group">
<input type="text" class="form-control form-control-lg" placeholder="What's your pad?"
aria-label="What's your pad?" aria-describedby="pad-name-button" id="pad-name">
<button class="btn btn-primary" type="button" id="pad-name-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-box-arrow-in-down" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1h-2z" />
<path fill-rule="evenodd"
d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
</svg>
</button>
</div>
</div>
<div class="why mb-4">
<p>
Ever wanted to transport information across platforms
without the hassle of loading times, sending files, logins, etc?
</p>
<p>
<b>FreePad</b> can easily store text information in any predefined url,
just write it in the box above and get to the right page, write anything in
and access the same address on any other device to get your info!
</p>
</div>
</div>
<footer class="text-muted py-5 border-top text-center">
<p class="mb-1">
FreePad by <a href="https://justkato.me/">©Kato Twofold</a>
</p>
<p class="mb-0">
FreePad is freely available over on our <a href="https://github.com/JustKato/FreePad">GitHub</a>
</p>
</footer>
</main>
{{ template "inc/theme-toggle.html" .}}
</body>
{{ template "inc/footer.html" .}}

61
templates/pages/page.html
View File

@ -1,55 +1,32 @@
{{ template "inc/header.html" .}}
<style>
.qrImage[src=""] {
display: none;
}
</style>
<body>
<div class="container is-fullhd p-4 mb-6" style="min-height: 35rem; height: calc(100vh - 18rem)">
<h1 class="title">FreePad</h1>
<img class="qrImage" src="" alt="" style="position: fixed;top: 1rem;left: 1rem;max-width: 13vw;">
<h2 class="subtitle">Reading from <code>{{.domain_base}}/{{.title}}</code></h2>
<hr>
<div class="content">
<div class="block">
<a href="/" class="button is-light">Back Home</a>
<a href="javascript:fetchMyQr()" class="button is-primary">QR</a>
<a href="javascript:updateSelf()" class="button is-success">Save</a>
<p class="mt-3">Status: <code class="has-text-primary" id="status-indicator">Loaded</code></p>
<main id="main-card" class="container rounded mt-5">
<div class="p-3">
<div class="why mb-4">
<p>
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
[PLACEHOLDER TEXT] [PLACEHOLDER TEXT] [PLACEHOLDER TEXT]
</p>
</div>
<textarea class="input" name="post_content" id="post_content" onchange="updateSelf()">{{.post_content}}</textarea>
</div>
</div>
<script>
</main>
async function fetchMyQr() {
let qrCode = await getQr(window.location.href)
.catch( err => {
console.error(err);
})
console.log(qrCode);
if ( !!qrCode.qr ) {
document.querySelectorAll(`.qrImage`).forEach( img => {
console.log(img);
console.log(qrCode.qr);
img.src = qrCode.qr;
})
}
}
function updateSelf() {
updatePost({{.title}})
}
</script>
{{ template "inc/footer.html" .}}
{{ template "inc/theme-toggle.html" .}}
</body>
<script src="https://raw.githubusercontent.com/scotch-io/javascript-modal/master/Modal.js"></script>
{{ template "inc/footer.html" .}}