better show/hide & move ntfy/lastfm to own templates
This commit is contained in:
parent
6aedbadae1
commit
605ac71e2f
4 changed files with 99 additions and 53 deletions
|
|
@ -4,10 +4,15 @@ const ntfyAttach = document.getElementById("ntfy-attach");
|
|||
const ntfyClickAction = document.getElementById("ntfy-click");
|
||||
const ntfyButton = document.getElementById("ntfy-button");
|
||||
|
||||
const optionsCheck = document.getElementById("optionsCheckbox");
|
||||
const titleCheck = document.getElementById("titleCheckbox");
|
||||
const attachmentCheck = document.getElementById("attachmentCheckbox");
|
||||
const clickCheck = document.getElementById("clickCheckbox");
|
||||
|
||||
const titleBoxLabel = document.getElementById("titleBoxLabel");
|
||||
const attachmentBoxLabel = document.getElementById("attachBoxLabel");
|
||||
const clickBoxLabel = document.getElementById("clickBoxLabel");
|
||||
|
||||
|
||||
const msgPFX = "message: "
|
||||
|
||||
|
|
@ -86,6 +91,25 @@ async function ntfyClick() {
|
|||
}
|
||||
}
|
||||
|
||||
function toggleOptions() {
|
||||
if (optionsCheck.checked) {
|
||||
titleBoxLabel.style.display = "initial";
|
||||
attachmentBoxLabel.style.display = "initial";
|
||||
clickBoxLabel.style.display = "initial";
|
||||
titleCheck.style.display = "initial";
|
||||
attachmentCheck.style.display = "initial";
|
||||
clickCheck.style.display = "initial";
|
||||
}
|
||||
if (!optionsCheck.checked) {
|
||||
titleBoxLabel.style.display = "none";
|
||||
attachmentBoxLabel.style.display = "none";
|
||||
clickBoxLabel.style.display = "none";
|
||||
titleCheck.style.display = "none";
|
||||
attachmentCheck.style.display = "none";
|
||||
clickCheck.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTitle() {
|
||||
if (titleCheck.checked) {
|
||||
ntfyTitle.style.display = "initial"
|
||||
|
|
|
|||
|
|
@ -1,54 +1,10 @@
|
|||
---
|
||||
import LastFM from "./widgets/lastfm.astro";
|
||||
import NTFY from "./widgets/ntfy.astro";
|
||||
---
|
||||
|
||||
<section class="content center">
|
||||
<div id="lastfm-widget">
|
||||
<div id="widget">
|
||||
<a href="https://www.last.fm/user/LimePotato"><span style="color: var(--alt-accent-600);"><i class="nf nf-md-music"></i></span> - <span id="song">⌛</span></a>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: small;"
|
||||
>latest played song on <a href="http://last.fm" target="_blank"
|
||||
>last.fm</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<hr> <!-- NTFY BOX -->
|
||||
<div class="ntfy-box">
|
||||
<h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
|
||||
<small style="font-size: 15px;">music recs, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</small>
|
||||
<br>
|
||||
<small style="font-size: 12px; color: rgb(252, 76, 76);">
|
||||
DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
|
||||
</small>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset style="margin-left: 35%; margin-right: 35%; margin-bottom: 2%;">
|
||||
<div>
|
||||
<input type="checkbox" id="titleCheckbox" name="titleCheckbox" onchange="toggleTitle()"/>
|
||||
<label for="titleCheckbox">Add Title?</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="attachmentCheckbox" name="attachmentCheckbox" onchange="toggleAttach()" />
|
||||
<label for="attachmentCheckbox">Add Attachment?</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="clickCheckbox" name="clickCheckbox" onchange="toggleClick()" />
|
||||
<label for="clickCheckbox">Add Click Action?</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<textarea id="ntfy-title" placeholder="title" rows=1 style="resize: none; display: none;"></textarea>
|
||||
<textarea id="ntfy-message" placeholder="message" rows=2></textarea>
|
||||
<textarea id="ntfy-attach" placeholder="attachment link" rows=1 style="resize: none;display: none;"></textarea>
|
||||
<textarea id="ntfy-click" placeholder="click link" rows=1 style="resize: none; display: none;"></textarea>
|
||||
<br>
|
||||
<br>
|
||||
<button
|
||||
class="custom-btn btn-1"
|
||||
style="width: 42%;"
|
||||
onclick="ntfyClick()"
|
||||
id="ntfy-button">
|
||||
<span>Send</span>
|
||||
</button>
|
||||
<br>
|
||||
<br>s
|
||||
<small>if it doesnt seem to be working, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
|
||||
</div>
|
||||
</section>
|
||||
<LastFM />
|
||||
<hr />
|
||||
<NTFY />
|
||||
</section>
|
||||
|
|
|
|||
18
astro/src/components/main-page/widgets/lastfm.astro
Normal file
18
astro/src/components/main-page/widgets/lastfm.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<div id="lastfm-widget">
|
||||
<div id="widget">
|
||||
<a href="https://www.last.fm/user/LimePotato"
|
||||
><span style="color: var(--alt-accent-600);"
|
||||
><i class="nf nf-md-music"></i></span
|
||||
> - <span id="song">⌛</span></a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: small;"
|
||||
>latest played song on <a
|
||||
href="http://last.fm"
|
||||
target="_blank"
|
||||
>last.fm</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
48
astro/src/components/main-page/widgets/ntfy.astro
Normal file
48
astro/src/components/main-page/widgets/ntfy.astro
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<div class="ntfy-box">
|
||||
<!-- DISCLAIMER/INFO -->
|
||||
<h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
|
||||
<small style="font-size: 15px;">music recs, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</small>
|
||||
<br>
|
||||
<small style="font-size: 12px; color: rgb(252, 76, 76);">
|
||||
DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
|
||||
</small>
|
||||
<br>
|
||||
<br>
|
||||
<!-- TEXT AREAS -->
|
||||
<div>
|
||||
<textarea id="ntfy-title" placeholder="title" rows=1 style="resize: none; display: none;"></textarea>
|
||||
<textarea id="ntfy-message" placeholder="message" rows=2></textarea>
|
||||
<textarea id="ntfy-attach" placeholder="attachment link" rows=1 style="resize: none;display: none;"></textarea>
|
||||
<textarea id="ntfy-click" placeholder="click link" rows=1 style="resize: none; display: none;"></textarea>
|
||||
</div>
|
||||
<button
|
||||
class="custom-btn btn-1"
|
||||
style="width: 42%; margin-top: 2%"
|
||||
onclick="ntfyClick()"
|
||||
id="ntfy-button">
|
||||
<span>Send</span>
|
||||
</button>
|
||||
<!-- OPTIONS BOXES -->
|
||||
<fieldset style="margin-left: 35%; margin-right: 35%; margin-bottom: -4%; margin-top: 2%;">
|
||||
<div>
|
||||
<input type="checkbox" id="optionsCheckbox" name="optionsCheckbox" onchange="toggleOptions()"/>
|
||||
<label for="optionsCheckbox">More Options</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="titleCheckbox" name="titleCheckbox" onchange="toggleTitle()" style="display: none;"/>
|
||||
<label id="titleBoxLabel" style="display: none;" for="titleCheckbox">Add Title?</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="attachmentCheckbox" name="attachmentCheckbox" onchange="toggleAttach()" style="display: none;"/>
|
||||
<label id="attachBoxLabel" style="display: none;" for="attachmentCheckbox">Add Attachment?</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="clickCheckbox" name="clickCheckbox" onchange="toggleClick()" style="display: none;"/>
|
||||
<label id="clickBoxLabel" style="display: none;" for="clickCheckbox">Add Click Action?</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<!-- DISCLAIMER/INFO -->
|
||||
<small>if it doesnt seem to be working, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
|
||||
</div>
|
||||
Loading…
Reference in a new issue