Keine Vorschau vorhanden
Code-Snapshot
Dies ist der veröffentlichte Zustand. Spätere Änderungen am Code überschreiben diese Veröffentlichung nicht automatisch.
[{"text":"Projekt","spriteCssClass":"fa fa-folder","items":[{"text":"index.html","spriteCssClass":"fa fa-file-code-o","code":"<!DOCTYPE html>\n<html lang='de'>\n<head>\n <meta charset='UTF-8'>\n <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n <title>EU-MwSt-Rechner</title>\n <link rel='stylesheet' href='style.css'>\n</head>\n<body>\n <header class='kopfbereich'>\n <div>\n <p class='label'>CodeRoom AI Project Lab</p>\n <h1 id='appTitel'>EU-MwSt-Rechner</h1>\n <p id='appBeschreibung'>Berechne Beträge mit oder ohne Mehrwertsteuer für verschiedene EU-Länder.</p>\n </div>\n <button id='modusSchalter' class='sekundaerKnopf'>Modus wechseln</button>\n </header>\n\n <main class='layout'>\n <section class='karte heldenKarte'>\n <h2>📊 MwSt-Rechner</h2>\n <div class='formular'>\n <div class='eingabeGruppe'>\n <label for='landAuswahl'>Land auswählen:</label>\n <select id='landAuswahl' class='auswahl'>\n <option value='DE'>Deutschland (19%)</option>\n <option value='AT'>Österreich (20%)</option>\n <option value='FR'>Frankreich (20%)</option>\n <option value='IT'>Italien (22%)</option>\n <option value='ES'>Spanien (21%)</option>\n <option value='NL'>Niederlande (21%)</option>\n </select>\n </div>\n <div class='eingabeGruppe'>\n <label for='betragEingabe'>Betrag (€):</label>\n <input id='betragEingabe' type='number' step='0.01' placeholder='0.00' class='betragFeld'>\n </div>\n <div class='eingabeGruppe'>\n <label>Berechnungsart:</label>\n <div class='radioGruppe'>\n <label><input type='radio' name='art' value='brutto' checked> Brutto → Netto</label>\n <label><input type='radio' name='art' value='netto'> Netto → Brutto</label>\n </div>\n </div>\n <button id='berechnenKnopf' onclick=\"berechnen()\">Berechnen</button>\n </div>\n <div id='ergebnisAnzeige' class='ergebnis'>\n <p>Ergebnis erscheint hier...</p>\n </div>\n </section>\n\n <section class='karte'>\n <h2>ℹ️ Info</h2>\n <p>Wähle ein EU-Land und gib einen Betrag ein. Der Rechner zeigt dir den Netto- oder Bruttowert inklusive der landesspezifischen Mehrwertsteuer an.</p>\n <div class='landInfo' id='landInfo'>\n <h3>Deutschland</h3>\n <p>Standard-MwSt: 19%</p>\n </div>\n </section>\n\n <section class='karte vorschauKarte'>\n <h2>📈 Übersicht</h2>\n <div id='vorschauFeld' class='vorschauFeld'>\n <strong>EU-MwSt-Sätze</strong>\n <span>Vergleiche die Steuersätze verschiedener Länder.</span>\n </div>\n </section>\n </main>\n\n <footer class='fussbereich'>\n <p>EU-MwSt-Rechner | Berechne Beträge mit landesspezifischen Steuersätzen.</p>\n </footer>\n\n <script src='script.js'></script>\n</body>\n</html>","isMain":true,"id":"_ubu8o680t"},{"text":"script.js","spriteCssClass":"fa fa-file-code-o","code":"const landAuswahl = document.querySelector('#landAuswahl');\nconst betragEingabe = document.querySelector('#betragEingabe');\nconst berechnenKnopf = document.querySelector('#berechnenKnopf');\nconst ergebnisAnzeige = document.querySelector('#ergebnisAnzeige');\nconst modusSchalter = document.querySelector('#modusSchalter');\nconst landInfo = document.querySelector('#landInfo');\n\nconst mwstSaetze = {\n 'DE': { name: 'Deutschland', satz: 19 },\n 'AT': { name: 'Österreich', satz: 20 },\n 'FR': { name: 'Frankreich', satz: 20 },\n 'IT': { name: 'Italien', satz: 22 },\n 'ES': { name: 'Spanien', satz: 21 },\n 'NL': { name: 'Niederlande', satz: 21 }\n};\n\nfunction landInfoAktualisieren() {\n const landCode = landAuswahl.value;\n const land = mwstSaetze[landCode];\n landInfo.innerHTML = `<h3>${land.name}</h3><p>Standard-MwSt: ${land.satz}%</p>`;\n}\n\nfunction berechnen() {\n const betrag = parseFloat(betragEingabe.value);\n const landCode = landAuswahl.value;\n const art = document.querySelector('input[name=\"art\"]:checked').value;\n\n if (isNaN(betrag) || betrag <= 0) {\n ergebnisAnzeige.innerHTML = '<p class=\"fehler\">Bitte gib einen gültigen Betrag ein.</p>';\n return;\n }\n\n const land = mwstSaetze[landCode];\n const satz = land.satz / 100;\n let netto, brutto, mwstBetrag;\n\n if (art === 'brutto') {\n netto = betrag / (1 + satz);\n mwstBetrag = betrag - netto;\n brutto = betrag;\n } else {\n netto = betrag;\n mwstBetrag = betrag * satz;\n brutto = betrag + mwstBetrag;\n }\n\n ergebnisAnzeige.innerHTML = `\n <h3>Ergebnis für ${land.name}</h3>\n <p><strong>Netto:</strong> ${netto.toFixed(2)} €</p>\n <p><strong>MwSt (${land.satz}%):</strong> ${mwstBetrag.toFixed(2)} €</p>\n <p><strong>Brutto:</strong> ${brutto.toFixed(2)} €</p>\n `;\n}\n\nfunction modusWechseln() {\n document.body.classList.toggle('hellerModus');\n}\n\nlandAuswahl.addEventListener('change', landInfoAktualisieren);\nberechnenKnopf.addEventListener('click', berechnen);\nmodusSchalter.addEventListener('click', modusWechseln);\n\nlandInfoAktualisieren();","isMain":false,"id":"_b2b0moll9"},{"text":"style.css","spriteCssClass":"fa fa-file-code-o","code":"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background: radial-gradient(circle at top left, #7c3aed, #111827 42%, #020617);\n color: #f8fafc;\n min-height: 100vh;\n}\n\n.kopfbereich {\n display: flex;\n justify-content: space-between;\n gap: 24px;\n align-items: center;\n padding: 36px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.label {\n margin: 0 0 8px;\n color: #a7f3d0;\n font-weight: bold;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n font-size: 0.8rem;\n}\n\nh1, h2, p {\n margin-top: 0;\n}\n\nh1 {\n font-size: clamp(2rem, 6vw, 4.4rem);\n margin-bottom: 12px;\n}\n\n.layout {\n display: grid;\n grid-template-columns: 1.2fr 0.8fr;\n gap: 22px;\n padding: 28px 36px;\n}\n\n.karte {\n background: rgba(15, 23, 42, 0.76);\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 24px;\n padding: 24px;\n box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(12px);\n}\n\n.heldenKarte {\n grid-row: span 2;\n}\n\n.aktionsZeile {\n display: flex;\n gap: 12px;\n margin: 24px 0 12px;\n}\n\n.formular {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.eingabeGruppe {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.eingabeGruppe label {\n font-size: 0.9rem;\n color: #cbd5e1;\n}\n\ninput, select {\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n background: rgba(255, 255, 255, 0.08);\n color: white;\n font-size: 1rem;\n}\n\nselect {\n cursor: pointer;\n}\n\n.radioGruppe {\n display: flex;\n gap: 16px;\n margin-top: 4px;\n}\n\n.radioGruppe label {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n\n.ergebnis {\n background: rgba(52, 211, 153, 0.12);\n border-radius: 16px;\n padding: 16px;\n min-height: 120px;\n}\n\n.ergebnis h3 {\n margin-top: 0;\n color: #bbf7d0;\n}\n\n.ergebnis p {\n margin: 8px 0;\n}\n.betragFeld {\n font-size: 1.2rem;\n font-weight: bold;\n padding: 16px 14px;\n background: rgba(255, 255, 255, 0.12);\n border: 2px solid rgba(52, 211, 153, 0.4);\n}\n\n.betragFeld:focus {\n outline: none;\n border-color: rgba(52, 211, 153, 0.8);\n background: rgba(255, 255, 255, 0.18);\n}\n\n#landAuswahl\n{\n color: #aaa;\n}\n\n.fehler {\n color: #fca5a5;\n}\n\n.landInfo {\n margin-top: 16px;\n padding: 12px;\n background: rgba(255, 255, 255, 0.06);\n border-radius: 12px;\n}\n\n.landInfo h3 {\n margin-top: 0;\n color: #bbf7d0;\n}\n\nbutton {\n border: 0;\n border-radius: 14px;\n padding: 14px 18px;\n background: #34d399;\n color: #052e2b;\n font-weight: bold;\n cursor: pointer;\n transition: transform 0.2s, filter 0.2s;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n filter: brightness(1.1);\n}\n\n.sekundaerKnopf {\n background: rgba(255, 255, 255, 0.12);\n color: #f8fafc;\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n\n.status {\n color: #c4b5fd;\n min-height: 24px;\n}\n\n.bausteinListe {\n display: grid;\n gap: 10px;\n margin-bottom: 16px;\n}\n\n.baustein {\n padding: 14px;\n border-radius: 16px;\n background: rgba(255, 255, 255, 0.08);\n color: #cbd5e1;\n}\n\n.baustein.aktiv {\n background: rgba(52, 211, 153, 0.18);\n color: #bbf7d0;\n outline: 2px solid rgba(52, 211, 153, 0.45);\n}\n\n.vorschauFeld {\n min-height: 150px;\n border-radius: 20px;\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(236, 72, 153, 0.28));\n display: grid;\n place-items: center;\n text-align: center;\n padding: 24px;\n}\n\n.vorschauFeld span {\n display: block;\n margin-top: 8px;\n color: #dbeafe;\n}\n\n.fussbereich {\n padding: 20px 36px 36px;\n color: #cbd5e1;\n}\n\nbody.hellerModus {\n background: linear-gradient(135deg, #e0f2fe, #f5d0fe, #fef3c7);\n color: #0f172a;\n}\n\nbody.hellerModus .karte,\nbody.hellerModus .kopfbereich {\n background: rgba(255, 255, 255, 0.72);\n color: #0f172a;\n}\n\nbody.hellerModus .sekundaerKnopf {\n background: rgba(15, 23, 42, 0.08);\n color: #0f172a;\n}\n\n@media (max-width: 760px) {\n .kopfbereich,\n .aktionsZeile {\n flex-direction: column;\n align-items: stretch;\n }\n\n .layout {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n\n .kopfbereich {\n padding: 24px 20px;\n }\n}","isMain":false,"id":"_1z12q06es"}],"id":"_33cs2pc8c"}]