ANDJ
abf761db07
Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte das es noch nicht fertig ist und verkaufs bereit
182 lines
6.1 KiB
HTML
182 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EmailSorter Logo - PNG Export</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 40px;
|
|
background: #f0f0f0;
|
|
font-family: Arial, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.logo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
canvas {
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
background: white;
|
|
}
|
|
.instructions {
|
|
max-width: 600px;
|
|
background: #f9f9f9;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #22c55e;
|
|
}
|
|
.instructions h2 {
|
|
margin-top: 0;
|
|
color: #16a34a;
|
|
}
|
|
.instructions ol {
|
|
line-height: 1.8;
|
|
}
|
|
.download-btn {
|
|
background: #22c55e;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
.download-btn:hover {
|
|
background: #16a34a;
|
|
}
|
|
.size-options {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.size-btn {
|
|
background: #e0e0e0;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.size-btn.active {
|
|
background: #22c55e;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 style="color: #16a34a; text-align: center;">📧 EmailSorter Logo</h1>
|
|
|
|
<div class="logo-container">
|
|
<div class="size-options">
|
|
<button class="size-btn active" onclick="setSize(400)">400x400px (TikTok Min)</button>
|
|
<button class="size-btn" onclick="setSize(512)">512x512px (Optimal)</button>
|
|
<button class="size-btn" onclick="setSize(1024)">1024x1024px (HD)</button>
|
|
</div>
|
|
|
|
<canvas id="logoCanvas"></canvas>
|
|
|
|
<button class="download-btn" onclick="downloadPNG()">📥 Als PNG herunterladen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h2>📋 So verwendest du das Logo für TikTok:</h2>
|
|
<ol>
|
|
<li><strong>Größe wählen:</strong> Wähle oben eine Größe (512x512px ist optimal für TikTok)</li>
|
|
<li><strong>Download:</strong> Klicke auf "Als PNG herunterladen"</li>
|
|
<li><strong>TikTok öffnen:</strong> Öffne die TikTok App</li>
|
|
<li><strong>Profil bearbeiten:</strong> Gehe zu deinem Profil → Bearbeiten</li>
|
|
<li><strong>Profilbild ändern:</strong> Wähle "Profilbild ändern"</li>
|
|
<li><strong>Hochladen:</strong> Wähle die heruntergeladene PNG-Datei</li>
|
|
<li><strong>Fertig!</strong> 🎉</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<script>
|
|
const svgContent = `<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background Circle -->
|
|
<circle cx="256" cy="256" r="240" fill="#22c55e" opacity="0.1"/>
|
|
<circle cx="256" cy="256" r="200" fill="#22c55e" opacity="0.15"/>
|
|
|
|
<!-- Main Email Icon -->
|
|
<g transform="translate(256, 256)">
|
|
<!-- Envelope -->
|
|
<rect x="-120" y="-80" width="240" height="160" rx="8" fill="#22c55e" stroke="#16a34a" stroke-width="4"/>
|
|
|
|
<!-- Envelope Flap -->
|
|
<path d="M -120,-80 L 0,-20 L 120,-80 Z" fill="#16a34a"/>
|
|
|
|
<!-- Letter inside -->
|
|
<rect x="-100" y="-40" width="200" height="120" rx="4" fill="white" opacity="0.9"/>
|
|
|
|
<!-- Lines on letter (representing sorted emails) -->
|
|
<line x1="-90" y1="-20" x2="90" y2="-20" stroke="#22c55e" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="-90" y1="0" x2="60" y2="0" stroke="#22c55e" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="-90" y1="20" x2="80" y2="20" stroke="#22c55e" stroke-width="3" stroke-linecap="round"/>
|
|
</g>
|
|
|
|
<!-- Text: ES (EmailSorter initials) -->
|
|
<text x="256" y="380" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="#16a34a" text-anchor="middle">ES</text>
|
|
</svg>`;
|
|
|
|
let currentSize = 512;
|
|
const canvas = document.getElementById('logoCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function setSize(size) {
|
|
currentSize = size;
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
|
|
// Update active button
|
|
document.querySelectorAll('.size-btn').forEach(btn => btn.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
|
|
renderLogo();
|
|
}
|
|
|
|
function renderLogo() {
|
|
const img = new Image();
|
|
const svgBlob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
|
|
const url = URL.createObjectURL(svgBlob);
|
|
|
|
img.onload = function() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.drawImage(img, 0, 0, currentSize, currentSize);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
img.src = url;
|
|
}
|
|
|
|
function downloadPNG() {
|
|
const link = document.createElement('a');
|
|
link.download = `emailsorter-logo-${currentSize}x${currentSize}.png`;
|
|
link.href = canvas.toDataURL('image/png');
|
|
link.click();
|
|
}
|
|
|
|
// Initial render
|
|
setSize(512);
|
|
</script>
|
|
</body>
|
|
</html>
|