<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rezept-Seite</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 90%;
max-width: 900px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
h1, h2 {
color: #333;
}
.cl-checkbox {
display: flex;
align-items: center;
justify-content: flex-start;
}
.cl-checkbox input {
margin-right: 10px;
}
.card {
width: 100%;
max-width: 500px;
background: white;
padding: 20px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: left;
}
ul, ol {
padding-left: 20px;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
width: 100%;
position: relative;
margin-top: 20px;
}
@media (max-width: 600px) {
.card {
width: 100%;
}
}
.button {
cursor: pointer;
padding: 1em;
font-size: 1em;
width: 7em;
aspect-ratio: 1/0.25;
color: white;
background: #212121;
background-size: cover;
background-blend-mode: overlay;
border-radius: 0.5em;
outline: 0.1em solid #353535;
border: 0;
box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
position: relative;
}
.button:hover {
transform: scale(1.1);
box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1);
background: linear-gradient(45deg, #212121, #252525);
background: radial-gradient(circle at bottom, rgba(50, 100, 180, 0.5) 10%, #212121 70%);
outline: 0;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 10px;
}
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.social-icons a img {
width: 60px;
height: 60px;
transition: transform 0.2s;
}
.social-icons a img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<br>
<br>
<div class="card">
<img src="/johannesbeeressig.png" alt="Johannesbeeressig">
<h2>Zutaten für 1 Flasche à 500 ml:</h2>
<ul>
<li><label class="cl-checkbox"><input type="checkbox"><span>150 g rote Johannisbeeren</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>½ Vanilleschote</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>300 ml Weißweinessig</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>1,5 EL Honig</span></label></li>
</ul>
<h2>Zubereitung:</h2>
<ol>
<li><label class="cl-checkbox"><input type="checkbox"><span>Die Johannisbeeren vorsichtig waschen und in einem Sieb gut abtropfen lassen - danach in ein sauberes Gefäß mit Deckel geben. </span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Die Vanilleschote der Länge nach halbieren und das Mark herauslösen.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Vanillemark und ausgelöste Schote gemeinsam mit dem Weißweinessig und Honig in einen Topf geben und aufkochen lassen.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Den Essig-Honig-Sud über die Johannisbeeren gießen und alles abkühlen lassen. Abgedeckt an einem warmen Ort
3 Wochen ziehen lassen.</span></label></li>
<li><label class="cl-checkbox"><input type="checkbox"><span>Den Essig anschließend abseihen und in sterileFlaschen füllen.</span></label></li>
<br>
<br>
<span>TIPP: mit etwas Olivenöl, Salz und Pfeffer verquirlt passt der Essig besonders zu kräftigen Blattsalaten.</span>
</ol>
</div>
<br>
<br>
<!-- Neuer Share-Button mit den alten Funktionen -->
<button class="button" onclick="openSharePopup()">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="icon" fill="white">
<path d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z"></path>
</svg>
Share
</button>
<!-- Modal für Sharing-Optionen -->
<div id="shareModal" class="modal">
<div class="modal-content">
<h2>Teilen</h2>
<!--
<button onclick="shareViaWhatsApp()">WhatsApp</button>
<button onclick="shareViaTelegram()">Telegram</button>
<button onclick="shareViaPinterest()">Pinterest</button>
<button onclick="shareViaEmail()">E-Mail</button>
<button onclick="copyToClipboard()">Link kopieren</button>
<button onclick="closeSharePopup()">Schließen</button>
-->
<div class="social-icons">
<a href="#" onclick="shareViaWhatsApp()">
<img src="/icons/whatsapp.svg" alt="WhatsApp" />
</a>
<a href="#" onclick="shareViaPinterest()">
<img src="/icons/pinterest.svg" />
</a>
<a href="#" onclick="shareViaTelegram()">
<img src="/icons/telegram.svg" alt="Telegram" />
</a>
<a href="#" onclick="shareViaEmail()">
<img src="/icons/email.svg" alt="E-Mail" />
</a>
<!-- Kopieren -->
<a href="#" onclick="copyToClipboard()">
<img src="/icons/copy.svg" />
</a>
</div>
</div>
</div>
<script>
function openSharePopup() {
document.getElementById("shareModal").style.display = "block";
}
function closeSharePopup() {
document.getElementById("shareModal").style.display = "none";
}
function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank');
}
function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank');
}
function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD');
const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank');
}
function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
}
function copyToClipboard() {
const text = 'Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/';
navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!');
}, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err);
});
}
window.onclick = function(event) {
const modal = document.getElementById('shareModal');
if (event.target == modal) {
closeSharePopup();
}
}
</script>
<br>
<br>
</body>
</html>