267 lines
8.4 KiB
HTML
267 lines
8.4 KiB
HTML
<!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="/lachszwiebeldip/lachsdip.jpeg" alt="Lachs-Zwiebel-Dip">
|
||
|
||
<h2>Zutaten:</h2>
|
||
<ul>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>30 g Zwiebeln</span></label></li>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>50 g Räucherlachs</span></label></li>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>125 g Frischkäse</span></label></li>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>Salz</span></label></li>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>Pfeffer</span></label></li>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>2–3 Esslöffel Kresse</span></label></li>
|
||
</ul>
|
||
|
||
<h2>Zubereitung:</h2>
|
||
<ol>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>Zwiebel, Lachs und Frischkäse in den Udo geben und die PULSE Taste betätigen bis es gut vermischt ist.</span></label></li>
|
||
<li><label class="cl-checkbox"><input type="checkbox"><span>Kresse dazugeben, kurz durchrühren und mit Salz und Pfeffer abschmecken.</span></label></li>
|
||
</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/lachszwiebeldip/');
|
||
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/lachszwiebeldip/');
|
||
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/lachszwiebeldip/');
|
||
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/lachszwiebeldip/');
|
||
window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
|
||
}
|
||
|
||
function copyToClipboard() {
|
||
const text = 'Check out this fantastic recipe! https://test.somachtstefaniedas.de/lachszwiebeldip/';
|
||
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>
|