mirror of https://github.com/JustKato/FreePad.git
232 lines
13 KiB
HTML
232 lines
13 KiB
HTML
{{ template "inc/header.html" .}}
|
|
|
|
<link rel="stylesheet" href="/static/css/qr-style.css">
|
|
|
|
<style>
|
|
#pad-content {
|
|
height: 16rem;
|
|
}
|
|
|
|
#archive-selection-example {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-item {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var maximumPadSize = Number({{.maximumPadSize }});
|
|
var padTitle = {{.title }};
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="/static/vendor/hljs/theme.css">
|
|
|
|
<body>
|
|
|
|
<main id="main-card" class="container rounded mt-5 shadow-sm">
|
|
<div class="p-3">
|
|
|
|
<a href="/" 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">
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<h2 class="mb-4">{{.title}}</h2>
|
|
|
|
<div id="pad-content-area">
|
|
<div class="btn-sm btn" id="pad-content-toggler" onclick="toggleTextareaPreview()">
|
|
<span class="edit-content-text" title="Edit Content">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
|
|
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
|
|
</svg>
|
|
</span>
|
|
<span class="view-content-text" title="ReadOnly">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyeglasses" viewBox="0 0 16 16" style="margin-top: 1rem;">
|
|
<path d="M4 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm2.625.547a3 3 0 0 0-5.584.953H.5a.5.5 0 0 0 0 1h.541A3 3 0 0 0 7 8a1 1 0 0 1 2 0 3 3 0 0 0 5.959.5h.541a.5.5 0 0 0 0-1h-.541a3 3 0 0 0-5.584-.953A1.993 1.993 0 0 0 8 6c-.532 0-1.016.208-1.375.547zM14 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
<pre><code id="textarea-preview" class="form-control hidden">{{.post_content}}</code></pre>
|
|
|
|
<textarea maxlength="{{.maximumPadSize}}" name="pad-content" id="pad-content" onkeyup="window.socket.sendPadUpdate()"
|
|
class="form-control hidden">{{.post_content}}</textarea>
|
|
</div>
|
|
|
|
|
|
<div id="pad-status" class="my-4 row">
|
|
<div class="col-md-12 col-lg-4 col-xl-4" title="Status">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-reception-3" viewBox="0 0 16 16">
|
|
<path
|
|
d="M0 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-8zm4 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" class="form-control" readonly value="Loaded" id="loading_status">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Current Viewers | Total Views">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-eye" viewBox="0 0 16 16">
|
|
<path
|
|
d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z">
|
|
</path>
|
|
<path
|
|
d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<input type="text" class="form-control" readonly value="1 | {{.views}}" id="currentViewers">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Last Modified">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-hourglass-split" viewBox="0 0 16 16">
|
|
<path
|
|
d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" class="form-control" id="last_modified_" readonly value="{{.last_modified}}">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="pad-options" class="row">
|
|
<div class="col-md-12 col-lg-4 col-xl-4">
|
|
<button type="button" class="btn btn-secondary btn-md w-100" title="Generate a quick QR code of the current page to easily send to other devices, such as your phone." onclick="generateQRCode()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-qr-code" viewBox="0 0 16 16">
|
|
<path d="M2 2h2v2H2V2Z" />
|
|
<path d="M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z" />
|
|
<path d="M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z" />
|
|
<path
|
|
d="M10 0v6h6V0h-6Zm5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8H6Zm0 0v1H2V8H1v1H0V7h3v1h3Zm10 1h-1V7h1v2Zm-1 0h-1v2h2v-1h-1V9Zm-4 0h2v1h-1v1h-1V9Zm2 3v-1h-1v1h-1v1H9v1h3v-2h1Zm0 0h3v1h-2v1h-1v-2Zm-4-1v1h1v-2H7v1h2Z" />
|
|
<path d="M7 12h1v3h4v1H7v-4Zm9 2v2h-3v-1h2v-1h1Z" />
|
|
</svg>
|
|
Get QR
|
|
</button>
|
|
</div>
|
|
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0">
|
|
<button type="button" class="btn btn-secondary btn-md w-100"
|
|
title="Download the contents into a text file" onclick="window.pad.downloadPadContents();">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-cloud-download" viewBox="0 0 16 16">
|
|
<path
|
|
d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z">
|
|
</path>
|
|
<path
|
|
d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z">
|
|
</path>
|
|
</svg>
|
|
Download Pad
|
|
</button>
|
|
</div>
|
|
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Archive the current state of the pad">
|
|
<div class="btn-group w-100" role="group">
|
|
<button type="button" class="btn btn-secondary btn-md w-100 dropdown-toggle"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-archive" viewBox="0 0 16 16">
|
|
<path
|
|
d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
|
|
</svg>
|
|
Archive Pad
|
|
</button>
|
|
<ul class="dropdown-menu w-100" id="archives-selection">
|
|
<li class="dropdown-item" onclick="saveLocalArchive()" id="do-archive-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-archive" viewBox="0 0 16 16">
|
|
<path
|
|
d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
|
|
</svg>
|
|
<span class="archive-date">
|
|
Archive Current
|
|
</span>
|
|
</li>
|
|
<li class="dropdown-item archive-selection" id="archive-selection-example">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-file-earmark-text" viewBox="0 0 16 16">
|
|
<path
|
|
d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z" />
|
|
<path
|
|
d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z" />
|
|
</svg>
|
|
<span class="archive-date">
|
|
DATE
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="text-muted py-5 text-center border-top mt-4">
|
|
<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>
|
|
|
|
<!-- START::QRCODE_MODAL -->
|
|
<div class="modal micromodal-slide" id="qrmodal" aria-hidden="true">
|
|
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
|
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="qrmodal-title">
|
|
<header class="modal__header">
|
|
<h2 class="modal__title" id="qrmodal-title">
|
|
QRCode
|
|
</h2>
|
|
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
|
|
</header>
|
|
<main class="modal__content" id="qrmodal-content">
|
|
<div id="qrcode"></div>
|
|
</main>
|
|
<footer class="modal__footer">
|
|
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END::QRCODE_MODAL -->
|
|
|
|
{{ template "inc/theme-toggle.html" .}}
|
|
</body>
|
|
|
|
<script src="/static/js/ws.js"></script>
|
|
<script src="/static/js/fileSaver.js"></script>
|
|
<script src="/static/js/pad.js"></script>
|
|
<script src="/static/js/pad-scripts.js"></script>
|
|
<script src="/static/vendor/hljs/highlight.min.js"></script>
|
|
|
|
<script src="/static/vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/vendor/qrcodejs/qrcode.min.js"></script>
|
|
<script src="/static/vendor/micromodal/micromodal.min.js"></script>
|
|
|
|
<script>
|
|
window.pad = new Pad({{.title }}, {{.last_modified }});
|
|
|
|
document.addEventListener(`DOMContentLoaded`, e => {
|
|
// Initialize the micromodal library
|
|
MicroModal.init();
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
{{ template "inc/footer.html" .}} |