2022-05-15 20:40:22 +03:00
{{ template "inc/header.html" .}}
2022-05-22 20:42:19 +03:00
< link rel = "stylesheet" href = "/static/css/qr-style.css" >
2022-05-21 16:17:25 +03:00
2022-05-22 20:42:19 +03:00
< style >
2022-05-20 00:46:14 +03:00
#pad-content {
height: 16rem;
}
2022-05-21 16:17:25 +03:00
#archive-selection-example {
display: none;
}
.dropdown-item {
cursor: pointer;
}
2022-05-18 01:36:18 +03:00
< / style >
2022-05-21 16:17:25 +03:00
< script >
2022-05-22 20:42:19 +03:00
var maximumPadSize = Number({{.maximumPadSize }});
var padTitle = {{.title }};
2022-05-21 16:17:25 +03:00
< / script >
2022-06-01 17:43:05 +03:00
< link rel = "stylesheet" href = "/static/vendor/hljs/theme.css" >
2022-05-15 20:40:22 +03:00
< body >
2022-05-19 01:43:18 +03:00
< main id = "main-card" class = "container rounded mt-5 shadow-sm" >
2022-05-19 01:42:06 +03:00
< div class = "p-3" >
2022-05-20 00:46:14 +03:00
2022-05-20 02:19:19 +03:00
< a href = "/" class = "logo-container w-100 d-flex mb-4" >
2022-05-22 20:42:19 +03:00
< img src = "/static/img/logo_transparent.png" alt = "Logo" style = "max-width: 50%; margin: 0 auto;"
class="mx-auto">
2022-05-20 02:19:19 +03:00
< / a >
2022-05-20 00:46:14 +03:00
2022-05-15 20:40:22 +03:00
< / div >
2022-05-18 01:36:18 +03:00
2022-06-07 00:27:51 +03:00
< h2 class = "mb-4" id = "padTitle" >
{{.title}}
< / h2 >
2022-05-21 16:17:25 +03:00
2022-06-01 16:58:09 +03:00
< 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 >
2022-06-01 17:43:05 +03:00
< span class = "view-content-text" title = "ReadOnly" >
2022-06-01 18:31:59 +03:00
< 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;" >
2022-06-01 16:58:09 +03:00
< 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 >
2022-06-01 17:43:05 +03:00
< pre > < code id = "textarea-preview" class = "form-control hidden" > {{.post_content}}< / code > < / pre >
2022-06-01 16:58:09 +03:00
2022-06-07 00:02:31 +03:00
< textarea maxlength = "{{.maximumPadSize}}" name = "pad-content" id = "pad-content" onkeyup = "window.socket.sendPadUpdate()"
2022-06-01 16:58:09 +03:00
class="form-control hidden">{{.post_content}}< / textarea >
< / div >
2022-05-20 00:46:14 +03:00
< div id = "pad-status" class = "my-4 row" >
2022-05-20 01:40:21 +03:00
< div class = "col-md-12 col-lg-4 col-xl-4" title = "Status" >
< div class = "input-group" >
< span class = "input-group-text" >
2022-05-22 20:42:19 +03:00
< 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" />
2022-05-20 01:40:21 +03:00
< / svg >
< / span >
< input type = "text" class = "form-control" readonly value = "Loaded" id = "loading_status" >
< / div >
< / div >
2022-06-07 00:02:31 +03:00
< div class = "col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title = "Current Viewers | Total Views" >
2022-05-20 00:46:14 +03:00
< div class = "input-group" >
< span class = "input-group-text" >
2022-05-22 20:42:19 +03:00
< 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 >
2022-05-20 00:46:14 +03:00
< / svg >
< / span >
2022-06-07 00:02:31 +03:00
< input type = "text" class = "form-control" readonly value = "1 | {{.views}}" id = "currentViewers" >
2022-05-20 00:46:14 +03:00
< / div >
< / div >
2022-05-20 01:40:21 +03:00
< div class = "col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title = "Last Modified" >
2022-05-20 00:46:14 +03:00
< div class = "input-group" >
< span class = "input-group-text" >
2022-05-22 20:42:19 +03:00
< 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" />
2022-05-20 00:46:14 +03:00
< / svg >
< / span >
2022-05-20 01:40:21 +03:00
< input type = "text" class = "form-control" id = "last_modified_" readonly value = "{{.last_modified}}" >
2022-05-20 00:46:14 +03:00
< / div >
< / div >
< / div >
2022-05-21 16:17:25 +03:00
< div id = "pad-options" class = "row" >
< div class = "col-md-12 col-lg-4 col-xl-4" >
2022-05-22 20:42:19 +03:00
< 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" / >
2022-05-21 16:17:25 +03:00
< / svg >
2022-05-22 20:42:19 +03:00
Get QR
2022-05-21 16:17:25 +03:00
< / button >
< / div >
< div class = "col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" >
2022-05-22 20:42:19 +03:00
< 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 >
2022-05-21 16:17:25 +03:00
< / 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" >
2022-05-22 20:42:19 +03:00
< 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" />
2022-05-21 16:17:25 +03:00
< / svg >
Archive Pad
< / button >
< ul class = "dropdown-menu w-100" id = "archives-selection" >
< li class = "dropdown-item" onclick = "saveLocalArchive()" id = "do-archive-button" >
2022-05-22 20:42:19 +03:00
< 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" />
2022-05-21 16:17:25 +03:00
< / svg >
< span class = "archive-date" >
Archive Current
< / span >
< / li >
< li class = "dropdown-item archive-selection" id = "archive-selection-example" >
2022-05-22 20:42:19 +03:00
< 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" />
2022-05-21 16:17:25 +03:00
< / svg >
< span class = "archive-date" >
DATE
< / span >
< / li >
< / ul >
< / div >
< / div >
< / div >
< footer class = "text-muted py-5 text-center border-top mt-4" >
2022-05-20 00:46:14 +03:00
< 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 >
2022-05-19 01:42:06 +03:00
< / main >
2022-05-15 20:59:46 +03:00
2022-05-22 20:42:19 +03:00
<!-- 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 -->
2022-05-19 01:42:06 +03:00
{{ template "inc/theme-toggle.html" .}}
2022-05-18 01:36:18 +03:00
< / body >
2022-06-04 16:32:53 +03:00
< script src = "/static/js/ws.js" > < / script >
2022-05-21 16:17:25 +03:00
< script src = "/static/js/fileSaver.js" > < / script >
< script src = "/static/js/pad.js" > < / script >
< script src = "/static/js/pad-scripts.js" > < / script >
2022-06-01 17:43:05 +03:00
< script src = "/static/vendor/hljs/highlight.min.js" > < / script >
2022-05-21 14:33:32 +03:00
2022-06-01 17:43:05 +03:00
< 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 >
2022-05-20 01:40:21 +03:00
2022-05-21 16:17:25 +03:00
< script >
2022-05-22 20:42:19 +03:00
window.pad = new Pad({{.title }}, {{.last_modified }});
document.addEventListener(`DOMContentLoaded`, e => {
// Initialize the micromodal library
MicroModal.init();
})
2022-05-20 01:40:21 +03:00
< / script >
2022-05-21 16:17:25 +03:00
2022-05-19 01:42:06 +03:00
{{ template "inc/footer.html" .}}
