mirror of
https://codeberg.org/Freedium-cfd/web.git
synced 2026-03-11 09:04:37 +00:00
365 lines
No EOL
18 KiB
HTML
365 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<title>{{ title or "Breaking Medium paywall!" }} - Freedium</title>
|
|
{% if creator %}<meta name="author" content="{{ creator.name }}" />{% endif %}
|
|
<meta name="description" content="{{ description or 'Your paywall breakthrough for Medium!' }}" />
|
|
<meta name="keywords" content="medium, paywall, medium.com, paywall breakthrough" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
|
<link href="https://glyph.medium.com/css/unbound.css" rel="stylesheet">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
|
|
<meta name="msapplication-TileColor" content="#00aba9">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/atom-one-dark.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.4/dist/lazyload.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/lightense-images@1.0.17/dist/lightense.min.js"></script>
|
|
<script>
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
//document.getElementById('darkIcon').classList.remove('hidden');
|
|
//document.getElementById('lightIcon').classList.add('hidden')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
//document.getElementById('lightIcon').classList.remove('hidden');
|
|
//document.getElementById('darkIcon').classList.add('hidden');
|
|
}
|
|
</script>
|
|
<style>
|
|
.shadow-lf {
|
|
box-shadow: inset 3px 0 0 0 rgb(209 207 239 / var(--tw-bg-opacity));
|
|
}
|
|
</style>
|
|
<style>
|
|
.notification-container {
|
|
display: none;
|
|
position: fixed;
|
|
top: 20px;
|
|
padding: 2%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.notification-card {
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<script>
|
|
window._resizeIframe = function (iframeData)
|
|
{
|
|
iframeData.iframe.height = iframeData.height
|
|
_resizeIframeWidth()
|
|
}
|
|
|
|
function _resizeIframeWidth(){ var element = document.querySelector(".main-content");
|
|
var width = element.offsetWidth;
|
|
|
|
iframes = document.getElementsByTagName("iframe");
|
|
for (var i = 0; i < iframes.length; i++) {
|
|
iframes[i].width = width
|
|
}
|
|
|
|
window.onresize = _resizeIframeWidth
|
|
}
|
|
</script>
|
|
</head>
|
|
<div class="fixed bottom-4 left-4" style="z-index: 999999;">
|
|
<button id="openProblemModal"
|
|
class="m-1.5 flex items-center bg-red-500 text-white py-2 px-4 rounded-full shadow-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
|
|
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffffff}</style>
|
|
<path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" />
|
|
</svg>
|
|
</button>
|
|
<button id="darkModeToggle"
|
|
class="m-1.5 flex items-center bg-blue-500 text-white py-2 px-4 rounded-full shadow-lg hover:bg-blue-600 focus:outline-none">
|
|
<svg id="darkIcon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512">
|
|
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
|
|
<path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" />
|
|
</svg>
|
|
<!-- SVG icon for light mode (e.g., a sun) -->
|
|
<svg class="hidden" id="lightIcon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
|
|
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
|
|
<path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<nav id="header" class="fixed w-full z-9 top-0 dark:bg-gray-800 dark:text-white bg-white shadow">
|
|
<div class="notification-container">
|
|
<div class="notification-card dark:bg-gray-800 bg-white">
|
|
<p class="text-2xl pb-5 text-black dark:text-white">Achtung !!!</p>
|
|
<p class="pb-3 text-black dark:text-white">Sooo, it was going to take a while, but now we have it. Our whole Github organization is not public for now. Reddit community, that was beginning all of that also gone - reddit.com/r/paywall/comments/15jsr6z/bypass_mediumcom_paywall</br></br>We have moved to Codeberg - codeberg.org/Freedium-cfd</br></br>Medium, thank you >.</p>
|
|
<a href="https://patreon.com/Freedium" target="_blank" title="Patreon">
|
|
<button class="bg-red-400 mx-1 text-white hover:bg-red-500 font-semibold py-1 px-2 rounded mt-2">
|
|
Patreon
|
|
</button>
|
|
</a>
|
|
<a href="https://www.buymeacoffee.com/zhymabekroman" target="_blank" title="Buy me a coffee">
|
|
<button class="bg-orange-500 hover:bg-blue-700 mx-1 text-white font-semibold py-1 px-2 rounded mt-2">
|
|
Buy me a coffee
|
|
</button>
|
|
</a>
|
|
|
|
<button class="bg-gray-300 mx-1 hover:bg-gray-400 text-gray-800 font-semibold py-1 px-2 rounded mt-2 close-button">
|
|
Close
|
|
</button>
|
|
<a href="https://codeberg.org/Freedium-cfd/web" target="_blank" title="Codeberg">
|
|
<button class="bg-gray-700 hover:bg-gray-600 mx-1 text-white font-semibold py-1 px-2 rounded mt-2">
|
|
Source code - Codeberg
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if enable_ads_header %}
|
|
<div class="w-full bg-yellow-400 text-center py-1 px-4"><p class="text-yellow-900">Place your advertisement here! Contact us at advertise@freedium.com</p></div>
|
|
{% endif %}
|
|
|
|
<div id="progress" class="h-1 z-20 top-0" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0)"></div>
|
|
<div class="w-full md:max-w-4xl mx-auto flex flex-wrap items-center justify-between mt-0 py-3">
|
|
<div class="pl-4">
|
|
<a class="text-green-500 text-base no-underline hover:no-underline font-extrabold text-xl"
|
|
href="/"
|
|
onclick="navigateToOrigin()">Freedium</a>
|
|
</div>
|
|
<div class="block lg:hidden pr-4">
|
|
<button id="nav-toggle"
|
|
class="flex items-center px-3 py-2 border rounded text-gray-500 dark:text-white border-gray-600 hover:text-gray-900 dark:hover:text-white hover:border-green-500 appearance-none focus:outline-none">
|
|
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<title>Menu</title>
|
|
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 dark:bg-gray-800 bg-white"
|
|
id="nav-content">
|
|
<ul class="list-reset lg:flex justify-end flex-1 items-center">
|
|
<li class="mr-3">
|
|
<a class="inline-block text-gray-600 dark:text-white no-underline hover:text-gray-900 dark:hover:text-white hover:text-underline py-2 px-4"
|
|
href="https://medium.com/">Medium.com</a>
|
|
</li>
|
|
<li class="mr-3">
|
|
<a class="inline-block text-gray-600 dark:text-white no-underline hover:text-gray-900 dark:hover:text-white hover:text-underline py-2 px-4"
|
|
href="https://codeberg.org/Freedium-cfd/web">Source code - Codeberg</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<body class="dark:bg-gray-800 bg-white">{{ body_template }}</body>
|
|
<div id="problemModal"
|
|
class="modal hidden fixed inset-0 w-full h-full flex items-center justify-center overflow-y-auto z-10 bg-black bg-opacity-50">
|
|
<div class="modal-container w-11/12 md:max-w-xl mx-auto rounded shadow-lg max-h-screen">
|
|
<div class="modal-content bg-white dark:bg-gray-800 dark:text-white my-8 py-4 text-left px-6">
|
|
<h1 class="text-3xl font-bold">Reporting a Problem</h1>
|
|
<div class="mt-3">
|
|
<p>Sometimes we have problems displaying some Medium posts.</br></br></p>
|
|
<p>If you have a problem that some images aren't loading - try using VPN. Probably you have problem with access to Medium CDN (or fucking Cloudflare's bot detection algorithms are blocking you).</p>
|
|
</div>
|
|
<form action="#" method="POST" class="mt-4" id="problem-form">
|
|
<div class="mb-4">
|
|
<label for="problem-description" class="block text-gray-700 dark:text-white font-bold mb-2">Problem Description</label>
|
|
<textarea id="problem-description"
|
|
name="problem-description"
|
|
placeholder="Describe your problem here..."
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
rows="4"
|
|
required></textarea>
|
|
</div>
|
|
<div>
|
|
<button type="submit"
|
|
class="m-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
|
|
<button type="button"
|
|
class="m-2 modal-close bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
}
|
|
|
|
function navigateToOrigin() {
|
|
window.location.href = window.location.origin;
|
|
}
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
// document.documentElement.classList.add('dark');
|
|
document.getElementById('darkIcon').classList.remove('hidden');
|
|
document.getElementById('lightIcon').classList.add('hidden')
|
|
} else {
|
|
// document.documentElement.classList.remove('dark')
|
|
document.getElementById('lightIcon').classList.remove('hidden');
|
|
document.getElementById('darkIcon').classList.add('hidden');
|
|
}
|
|
|
|
document.getElementById('darkModeToggle').addEventListener('click', function() {
|
|
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.remove('dark');
|
|
document.getElementById('darkIcon').classList.add('hidden');
|
|
document.getElementById('lightIcon').classList.remove('hidden')
|
|
document.documentElement.style.cssText = "--lightense-backdrop: white;";
|
|
localStorage.setItem("theme", "light")
|
|
} else {
|
|
document.documentElement.classList.add('dark')
|
|
document.getElementById('lightIcon').classList.add('hidden');
|
|
document.getElementById('darkIcon').classList.remove('hidden');
|
|
document.documentElement.style.cssText = "--lightense-backdrop: black;";
|
|
localStorage.setItem("theme", "dark")
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
const openModalButton = document.getElementById('openProblemModal');
|
|
const closeModalButton = document.querySelector('.modal-close');
|
|
const modal = document.getElementById('problemModal');
|
|
const problemDescriptionInput = document.getElementById('problem-description');
|
|
const submitButton = document.querySelector('form button');
|
|
const body = document.body;
|
|
|
|
openModalButton.addEventListener('click', () => {
|
|
body.classList.add('overflow-hidden'); // Prevent scrolling on the body
|
|
modal.classList.remove('hidden');
|
|
});
|
|
|
|
closeModalButton.addEventListener('click', () => {
|
|
body.classList.remove('overflow-hidden'); // Re-enable scrolling on the body
|
|
modal.classList.add('hidden');
|
|
});
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.add('hidden');
|
|
body.classList.remove('overflow-hidden');
|
|
}
|
|
});
|
|
|
|
function navigateNoCache() {
|
|
window.location.href = `/render-no-cache${window.location.pathname}`;
|
|
}
|
|
|
|
const submitForm = async (event) => {
|
|
event.preventDefault();
|
|
|
|
console.log('Form submiting is started!');
|
|
submitButton.disabled = true;
|
|
|
|
// Get the problem description from the input field
|
|
const problemDescription = problemDescriptionInput.value;
|
|
const currentPage = window.location.href;
|
|
|
|
try {
|
|
// Send a POST request to the "report-problem" API endpoint
|
|
const response = await fetch('/report-problem', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ description: problemDescription, page: currentPage }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Report submitted successfully, you can add a success message or further actions here
|
|
console.log('Problem report submitted successfully.');
|
|
modal.classList.add('hidden'); // Close the modal
|
|
} else {
|
|
// Handle errors, such as non-200 responses
|
|
console.error('Failed to submit problem report.');
|
|
submitButton.disabled = false;
|
|
}
|
|
} catch (error) {
|
|
// Handle network errors or other exceptions
|
|
console.error('An error occurred:', error);
|
|
submitButton.disabled = false;
|
|
}
|
|
};
|
|
|
|
document.getElementById('problem-form').onsubmit = submitForm;
|
|
</script>
|
|
<script>
|
|
const h = document.documentElement, b = document.body;
|
|
const st = 'scrollTop';
|
|
const sh = 'scrollHeight';
|
|
const progress = document.getElementById('progress');
|
|
const header = document.getElementById('header');
|
|
const navcontent = document.getElementById('nav-content');
|
|
|
|
document.addEventListener('scroll', function () {
|
|
/* Refresh scroll % width */
|
|
const scroll = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
|
|
progress.style.setProperty('--scroll', scroll + '%');
|
|
|
|
/* Apply classes for slide in bar */
|
|
const shouldAddClass = window.scrollY > 10;
|
|
});
|
|
|
|
document.getElementById('nav-toggle').onclick = function() {
|
|
document.getElementById("nav-content").classList.toggle("hidden");
|
|
}
|
|
|
|
window.addEventListener('load', function () {
|
|
Lightense('img:not(.no-lightense)');
|
|
}, false);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<script>
|
|
var lazyLoadInstance = new LazyLoad({
|
|
callback_loaded: function(element) {
|
|
Lightense(element);
|
|
},
|
|
callback_error: (img) => {
|
|
console.log(img);
|
|
if (img.hasAttribute("data-src")) {
|
|
if (img.attributes["data-src"].value.startsWith("https://miro.medium.com/v2/")) {
|
|
img.setAttribute("src", img.attributes["data-src"].value.replace("https://miro.medium.com/v2/", "{{HOST_ADDRESS}}/@miro/v2/" ));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
function navigateToOrigin() {
|
|
window.location.href = window.location.origin;
|
|
}
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const notificationContainer = document.querySelector('.notification-container');
|
|
const closeButton = document.querySelector('.close-button');
|
|
|
|
function showNotification() {
|
|
if (!localStorage.getItem('showNotification-github-block')) {
|
|
notificationContainer.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Hide the notification
|
|
function hideNotification() {
|
|
localStorage.setItem('showNotification-github-block', 'false');
|
|
notificationContainer.style.display = 'none';
|
|
}
|
|
|
|
// Close button functionality
|
|
closeButton.addEventListener('click', () => {
|
|
hideNotification();
|
|
});
|
|
|
|
showNotification();
|
|
});
|
|
</script>
|
|
|