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 ntfyClickAction = document.getElementById("ntfy-click");
|
||||||
const ntfyButton = document.getElementById("ntfy-button");
|
const ntfyButton = document.getElementById("ntfy-button");
|
||||||
|
|
||||||
|
const optionsCheck = document.getElementById("optionsCheckbox");
|
||||||
const titleCheck = document.getElementById("titleCheckbox");
|
const titleCheck = document.getElementById("titleCheckbox");
|
||||||
const attachmentCheck = document.getElementById("attachmentCheckbox");
|
const attachmentCheck = document.getElementById("attachmentCheckbox");
|
||||||
const clickCheck = document.getElementById("clickCheckbox");
|
const clickCheck = document.getElementById("clickCheckbox");
|
||||||
|
|
||||||
|
const titleBoxLabel = document.getElementById("titleBoxLabel");
|
||||||
|
const attachmentBoxLabel = document.getElementById("attachBoxLabel");
|
||||||
|
const clickBoxLabel = document.getElementById("clickBoxLabel");
|
||||||
|
|
||||||
|
|
||||||
const msgPFX = "message: "
|
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() {
|
function toggleTitle() {
|
||||||
if (titleCheck.checked) {
|
if (titleCheck.checked) {
|
||||||
ntfyTitle.style.display = "initial"
|
ntfyTitle.style.display = "initial"
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,10 @@
|
||||||
|
---
|
||||||
|
import LastFM from "./widgets/lastfm.astro";
|
||||||
|
import NTFY from "./widgets/ntfy.astro";
|
||||||
|
---
|
||||||
|
|
||||||
<section class="content center">
|
<section class="content center">
|
||||||
<div id="lastfm-widget">
|
<LastFM />
|
||||||
<div id="widget">
|
<hr />
|
||||||
<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>
|
<NTFY />
|
||||||
</div>
|
</section>
|
||||||
<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>
|
|
||||||
|
|
|
||||||
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