rss2podcast/templates/dashboard.html
2025-05-20 15:32:43 +02:00

150 lines
8.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Loaditfor.me</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
<meta name="theme-color" content="#268bd2">
</head>
<body>
<div class="container">
<h1>Welcome, {{ current_user.username }}</h1>
<div class="feed-url">
<label>Your personalized RSS feed URL:</label>
<input type="text" id="feed-url" value="{{ feed_url }}" readonly>
<button id="copy-button" onclick="copyToClipboard()">Copy</button>
</div>
<form method="post">
<label>Add a website URL to your feed:</label>
<input type="url" name="url" required placeholder="Enter website URL">
<button type="submit">Load it for me</button>
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<p>If you've found value in this project, consider reciprocating with a contribution in Bitcoin. Your support directly reflects the value you've received!</p>
<style> .btcpay-form { display: inline-flex; align-items: center; justify-content: center; } .btcpay-form--inline { flex-direction: row; } .btcpay-form--block { flex-direction: column; } .btcpay-form--inline .submit { margin-left: 15px; } .btcpay-form--block select { margin-bottom: 10px; } .btcpay-form .btcpay-custom-container{ text-align: center; }.btcpay-custom { display: flex; align-items: center; justify-content: center; } .btcpay-form .plus-minus { cursor:pointer; align-items: center; font-size:25px; line-height: 25px; background: #DFE0E1; height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto 5px; display: inline-flex; justify-content: center; } .btcpay-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; color: currentColor; background: transparent; border:1px solid transparent; display: block; padding: 1px; margin-left: auto; margin-right: auto; font-size: 11px; cursor: pointer; } .btcpay-form select:hover { border-color: #ccc; } .btcpay-form option { color: #000; background: rgba(0,0,0,.1); } .btcpay-input-price { -moz-appearance: textfield; border: none; box-shadow: none; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff; }.btcpay-input-price::-webkit-outer-spin-button, .btcpay-input-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } </style>
<form method="POST" action="https://pay.loaditfor.me/api/v1/invoices" class="btcpay-form btcpay-form--inline">
<input type="hidden" name="storeId" value="7sMnK3qxvA2NjcqqdH4eH9oHBW8eMdCorJ95xKmHhFUj" />
<input type="hidden" name="jsonResponse" value="true" />
<div class="btcpay-custom-container">
<div class="btcpay-custom">
<button class="plus-minus" type="button" data-type="-" data-step="100" data-min="210" data-max="50000">-</button>
<input class="btcpay-input-price" type="number" name="price" min="210" max="50000" step="100" value="210" data-price="210" style="width:3em;" />
<button class="plus-minus" type="button" data-type="+" data-step="100" data-min="210" data-max="50000">+</button>
</div>
<select name="currency">
<option value="SATS" selected>SATS</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
<option value="BTC">BTC</option>
</select>
</div>
<input type="hidden" name="defaultPaymentMethod" value="BTC-LN" />
<button type="submit" class="submit" name="submit" style="min-width:209px;min-height:57px;border-radius:4px;border-style:none;cursor:pointer;" title="Send value back"><span>Send value back</span>
</button></form>
<script>
if (!window.btcpay) {
var script = document.createElement('script');
script.src = "https://pay.loaditfor.me/modal/btcpay.js";
document.getElementsByTagName('head')[0].append(script);
}
function handleFormSubmit(event) {
event.preventDefault();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 && this.responseText) {
window.btcpay.appendInvoiceFrame(JSON.parse(this.responseText).invoiceId);
}
};
xhttp.open('POST', event.target.getAttribute('action'), true);
xhttp.send(new FormData(event.target));
}
document.querySelectorAll(".btcpay-form").forEach(function(el) {
if (!el.dataset.initialized) {
el.addEventListener('submit', handleFormSubmit);
el.dataset.initialized = true;
}
});
function handlePlusMinus(event) {
event.preventDefault();
const root = event.target.closest('.btcpay-form');
const el = root.querySelector('.btcpay-input-price');
const step = parseInt(event.target.dataset.step) || 1;
const min = parseInt(event.target.dataset.min) || 1;
const max = parseInt(event.target.dataset.max);
const type = event.target.dataset.type;
const price = parseInt(el.value) || min;
if (type === '-') {
el.value = price - step < min ? min : price - step;
} else if (type === '+') {
el.value = price + step > max ? max : price + step;
}
}
document.querySelectorAll(".btcpay-form .plus-minus").forEach(function(el) {
if (!el.dataset.initialized) {
el.addEventListener('click', handlePlusMinus);
el.dataset.initialized = true;
}
});
function handlePriceInput(event) {
event.preventDefault();
const root = event.target.closest('.btcpay-form');
const price = parseInt(event.target.dataset.price);
if (isNaN(event.target.value)) root.querySelector('.btcpay-input-price').value = price;
const min = parseInt(event.target.getAttribute('min')) || 1;
const max = parseInt(event.target.getAttribute('max'));
if (event.target.value < min) {
event.target.value = min;
} else if (event.target.value > max) {
event.target.value = max;
}
}
document.querySelectorAll(".btcpay-form .btcpay-input-price").forEach(function(el) {
if (!el.dataset.initialized) {
el.addEventListener('input', handlePriceInput);
el.dataset.initialized = true;
}
});
</script>
<br/>
<img class="title-image" src="https://pls.loaditfor.me/static/title_image.jpeg" alt="Title Image">
</div>
<script>
function copyToClipboard() {
var copyText = document.getElementById("feed-url");
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
document.execCommand("copy");
var copyButton = document.getElementById("copy-button");
var originalText = copyButton.textContent;
copyButton.textContent = "Copied";
setTimeout(function() {
copyButton.textContent = originalText;
}, 5000);
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('{{ url_for('static', filename='sw.js') }}')
.then(function(registration) {
console.log('ServiceWorker registration successful with scope:', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed:', err);
});
}
</script>
</body>
</html>