initial commit

2025-06-14 16:23:06 +00:00 · 2025-05-29 12:47:28 +02:00
commit a9015c571f
16 changed files with 839 additions and 0 deletions
--- a/.htaccess
+++ b/.htaccess
@ -0,0 +1,14 @@
+DirectoryIndex index.html
+
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE image/svg+xml
+</IfModule>
+
+<IfModule mod_mime.c>
+    AddType image/svg+xml .svg
+</IfModule>
+
+<FilesMatch "\.svg$">
+    Header set Content-Type "image/svg+xml"
+    Header set Content-Encoding gzip
+</FilesMatch>
--- a/assets/monero.svg
+++ b/assets/monero.svg
@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 6000 6000"
+   height="6000"
+   width="6000"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath18"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path16"
+         d="M 0,4500 H 4500 V 0 H 0 Z" /></clipPath></defs><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,6000)"
+     id="g10"><g
+       id="g12"><g
+         clip-path="url(#clipPath18)"
+         id="g14"><g
+           transform="translate(2249.9688,4467.3906)"
+           id="g20"><path
+             id="path22"
+             style="fill:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             d="m 0,0 c -1224.422,0 -2217.391,-992.906 -2217.391,-2217.359 0,-244.75 39.672,-480.172 112.938,-700.391 h 663.156 v 1865.641 L 0,-2493.438 1441.313,-1052.109 V -2917.75 H 2104.5 c 73.281,220.219 112.953,455.641 112.953,700.391 C 2217.453,-992.906 1224.484,0 0,0" /></g><g
+           transform="translate(1918.5469,1642.5938)"
+           id="g24"><path
+             id="path26"
+             style="fill:#4c4c4c;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             d="M 0,0 -629,629.031 V -544.891 h -240.469 -240.437 -453.438 c 389.25,-638.609 1092.282,-1065.093 1894.735,-1065.093 802.437,0 1505.531,426.484 1894.75,1065.093 h -453.469 -430.063 -50.812 V 629.031 L 662.75,0 331.391,-331.359 0.031,0 Z" /></g></g></g></g></svg>
--- a/assets/script.js
+++ b/assets/script.js
@ -0,0 +1,166 @@
+// script.js
+
+let currentLanguage = localStorage.getItem("language")
+if (!currentLanguage) {
+  currentLanguage = window.navigator.language.includes("de") ? "de" : "en"
+  localStorage.setItem("language", currentLanguage)
+}
+let currentMode = localStorage.getItem("mode")
+if (!currentMode) {
+  currentMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light"
+  localStorage.setItem("mode", currentMode)
+}
+
+// dark mode toggle
+const setInitialMode = () => {
+  if (currentMode === "dark") {
+    document.body.classList.remove("light-mode")
+    document.body.classList.add("dark-mode")
+    document.querySelector(".mode-switcher").classList.remove("day")
+    document.querySelector(".mode-switcher .moon").classList.remove("sun")
+  } else {
+    document.body.classList.add("light-mode")
+    document.body.classList.remove("dark-mode")
+    document.querySelector(".mode-switcher").classList.add("day")
+    document.querySelector(".mode-switcher .moon").classList.add("sun")
+  }
+}
+
+const toggleMode = () => {
+  currentMode = currentMode === "light" ? "dark" : "light"
+  localStorage.setItem("mode", currentMode)
+  document.body.classList.toggle("light-mode")
+  document.body.classList.toggle("dark-mode")
+  document.querySelector(".mode-switcher").classList.toggle("day")
+  document.querySelector(".mode-switcher .moon").classList.toggle("sun")
+}
+
+// loading language files dynamically
+loadLanguage = async (lang, save = true) => {
+  if (save) localStorage.setItem("language", lang)
+
+  const response = await fetch(`i18n/${lang}/${lang}.json`)
+  const translations = await response.json()
+
+  document.documentElement.lang = lang
+  if (translations.website.page_language)
+    document
+      .querySelector('meta[name="language"]')
+      .setAttribute("content", translations.website.page_language)
+  if (translations.website.page_title)
+    document.title = translations.website.page_title
+  if (translations.website.page_description)
+    document
+      .querySelector('meta[name="description"]')
+      .setAttribute("content", translations.website.page_description)
+  if (translations.website.page_keywords)
+    document
+      .querySelector('meta[name="keywords"]')
+      .setAttribute("content", translations.website.page_keywords)
+
+  document.querySelectorAll("[data-i18n]").forEach((el) => {
+    const key = el.getAttribute("data-i18n")
+    if (translations.website[key]) {
+      el.innerHTML = translations.website[key]
+    }
+  })
+
+  setPreviewImages()
+}
+
+// set preview images
+const setPreviewImages = () => {
+  const lang = localStorage.getItem("language") || "en"
+  const previewLightImage = document.querySelector(".preview-flyer-light img")
+  const previewDarkImage = document.querySelector(".preview-flyer-dark img")
+  previewLightImage.src = `./i18n/${lang}/preview-flyer-light.png`
+  previewDarkImage.src = `./i18n/${lang}/preview-flyer-dark.png`
+  previewLightImage.alt = `Preview flyer in light mode (${lang})`
+  previewDarkImage.alt = `Preview flyer in dark mode (${lang})`
+  const previewLightPdfLinks = document.querySelectorAll(
+    ".preview-flyer-light a"
+  )
+  const previewDarkPdfLinks = document.querySelectorAll(".preview-flyer-dark a")
+  previewLightPdfLinks.forEach((link) => {
+    link.href = `./i18n/${lang}/flyer-light-${lang}.pdf`
+  })
+  previewDarkPdfLinks.forEach((link) => {
+    link.href = `./i18n/${lang}/flyer-dark-${lang}.pdf`
+  })
+}
+
+// sorting
+const categoryOrder = {
+  comfort: ["cex", "kyc_light", "atomic", "no_kyc", "dex"],
+  privacy: ["atomic", "dex", "no_kyc", "kyc_light", "cex"],
+}
+
+const sortCategories = (mode) => {
+  const exchanges = document.querySelector("#exchanges")
+  const blocks = {}
+
+  for (const id of Object.values(categoryOrder.comfort)) {
+    const h2 = document.getElementById(id)
+    const p = document.getElementById(id + "-desc")
+    const div = h2.nextElementSibling.nextElementSibling
+    blocks[id] = [h2, p, div]
+  }
+
+  for (const block of Object.values(blocks).flat()) {
+    exchanges.removeChild(block)
+  }
+
+  for (const id of categoryOrder[mode]) {
+    for (const el of blocks[id]) {
+      exchanges.appendChild(el)
+    }
+  }
+
+  localStorage.setItem("sortMode", mode)
+}
+
+// initial
+document.addEventListener("DOMContentLoaded", () => {
+  // mode
+  setInitialMode()
+
+  // language
+  const savedLang = localStorage.getItem("language")
+  const browserLang = navigator.language.slice(0, 2)
+  const lang = savedLang || browserLang
+  loadLanguage(lang, true)
+  // set option with value="lang" as selected
+  const langSwitcher = document.querySelector(".language-switcher")
+  langSwitcher.querySelectorAll("option").forEach((option) => {
+    if (option.value === lang) {
+      option.selected = true
+    }
+  })
+
+  // preview images
+  setPreviewImages()
+
+  // sorting
+  const savedSort = localStorage.getItem("sortMode") || "comfort"
+  const hasSorting = document.getElementById("sort-mode")
+  if (hasSorting) {
+    document.getElementById("sort-mode").value = savedSort
+    sortCategories(savedSort)
+  }
+})
+
+// current year
+document.getElementById("current-year").textContent = new Date().getFullYear()
+
+// micro animation
+const elements = document.querySelectorAll(".fade-in")
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add("visible")
+    }
+  })
+})
+elements.forEach((el) => observer.observe(el))
--- a/assets/style.css
+++ b/assets/style.css
@ -0,0 +1,251 @@
+:root {
+  --color-monero-orange: #ff6b00;
+  --color-monero-grey: #4c4c4c;
+  --background-color: #fffefe;
+  --text-color: #1d1d1b;
+
+  --mode-background-color: #adadad;
+  --moon-color: #fffefe;
+
+  --headline-font: "Raleway", sans-serif;
+  --text-font: "Poppins", sans-serif;
+  --font-size-h1: 1.75em;
+  --font-size-h2: 1.5em;
+  --font-size-h3: 1.25em;
+  --font-size-title: 1.2em;
+  --font-size-text: 1.2em;
+  --font-size-footer: 1em;
+  --font-weight-headline: 800;
+  --font-weight-strong: 500;
+  --font-weight-text: 200;
+
+  --line-height-headline: 1.2;
+  --line-height-text: 1.6;
+
+  --margin-padding-unit: 1em;
+  --toggle-height: 16em;
+  --toggle-width: 30em;
+  --toggle-button-radius: 10em;
+  --max-width: 640px;
+}
+
+:root .dark-mode {
+  --background-color: #1d1d1b;
+  --text-color: #fffefe;
+  --mode-background-color: #4c4c4c;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: "Poppins", sans-serif;
+  font-weight: var(--font-weight-text);
+  font-style: normal;
+  font-size: var(--font-size-text);
+  line-height: var(--line-height-text);
+  padding: 0 1rem;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--margin-padding-unit) 0;
+}
+
+footer {
+  padding: var(--margin-padding-unit);
+  text-align: center;
+  font-size: var(--font-size-footer);
+}
+
+select {
+  background: 0 none;
+  border: 0 none;
+  color: var(--text-color);
+  font-size: var(--font-size-text);
+  font-family: "Poppins", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+option {
+  font-size: 2rem;
+  font-family: "Poppins", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+/* mode switcher */
+.mode-switcher {
+  cursor: pointer;
+  margin: 0 auto;
+  /*change size of toggle with font-size*/
+  font-size: 10%;
+  position: relative;
+  height: var(--toggle-height);
+  width: var(--toggle-width);
+  border-radius: var(--toggle-height);
+  transition: all 0.5s ease-in-out;
+  background: var(--mode-background-color);
+}
+
+.moon {
+  position: absolute;
+  display: block;
+  border-radius: 50%;
+  transition: all 0.4s ease-in-out;
+
+  top: 3em;
+  left: 3em;
+  transform: rotate(-75deg);
+  width: var(--toggle-button-radius);
+  height: var(--toggle-button-radius);
+  background: var(--theme-color-dark);
+  box-shadow: 3em 2.5em 0 0em var(--moon-color) inset,
+    rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
+    rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
+    rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
+    rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
+    rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
+    rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
+    rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
+    rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
+}
+
+.sun {
+  top: 4.5em;
+  left: 18em;
+  transform: rotate(0deg);
+  width: 7em;
+  height: 7em;
+  background: #fff;
+  box-shadow: 3em 3em 0 5em #fff inset, 0 -5em 0 -2.7em #fff,
+    3.5em -3.5em 0 -3em #fff, 5em 0 0 -2.7em #fff, 3.5em 3.5em 0 -3em #fff,
+    0 5em 0 -2.7em #fff, -3.5em 3.5em 0 -3em #fff, -5em 0 0 -2.7em #fff,
+    -3.5em -3.5em 0 -3em #fff;
+}
+
+.day {
+  background: var(--mode-background-color);
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--headline-font);
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-headline);
+  line-height: var(--line-height-headline);
+  margin: var(--margin-padding-unit) 0;
+  text-transform: uppercase;
+}
+
+h2 {
+  font-size: var(--font-size-h2);
+}
+
+h3 {
+  font-size: var(--font-size-h3);
+}
+
+strong {
+  font-weight: var(--font-weight-strong);
+}
+
+a {
+  border: 0 none;
+  border-bottom: 1px solid var(--color-monero-orange);
+  color: var(--color-monero-orange);
+  text-decoration: none;
+}
+
+a:hover {
+  border-color: var(--text-color) !important;
+  border-style: dashed;
+  color: var(--text-color) !important;
+}
+
+a:hover strong {
+  color: var(--text-color) !important;
+}
+
+.monero-orange {
+  color: var(--color-monero-orange);
+}
+
+.monero-grey {
+  color: var(--color-monero-grey);
+}
+
+ul {
+  padding-left: 20px;
+}
+
+.logo {
+  display: block;
+  width: 100px;
+  height: auto;
+  transition: transform 0.3s ease-in-out;
+}
+
+.logo:hover {
+  transform: scale(1.05);
+  transition: transform 0.3s ease-in-out;
+}
+
+.fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.preview-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.preview-images > div {
+  width: 100%;
+  height: auto;
+}
+
+.preview-images > div:first-child {
+  margin-bottom: 1rem;
+}
+
+.preview-images img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  transition: transform 0.3s ease-in-out;
+}
+
+.preview-images img:hover {
+  transform: scale(1.05);
+}
+
+@media screen and (min-width: 768px) {
+  .preview-images div {
+    width: calc(50% - 0.5rem);
+  }
+
+  .preview-images > div:first-child {
+    margin-bottom: 0;
+  }
+}
--- a/i18n/de/de.json
+++ b/i18n/de/de.json
@ -0,0 +1,73 @@
+{
+    "pdf": {
+        "page1": {
+            "why_monero_title": "WARUM MONERO (XMR)",
+            "features": {
+                "private": "PRIVAT Transaktionen sind vollständig privat, ohne öffentlichen Transaktionsverlauf",
+                "low_fees": "NIEDRIGE GEBÜHREN Auch bei kleinen Zahlungen kostengünstig",
+                "secure": "SICHER Starke Kryptografie gewährleistet die Sicherheit Ihrer Gelder und Daten",
+                "unblockable": "UNZENSIERT Jede Münze ist gleich, nicht 'verunreinigt' und steht auf keiner schwarzen Liste",
+                "distributed": "VERTEILT Keine zentrale Behörde kontrolliert das Netzwerk, was echte finanzielle Freiheit bietet"
+            },
+            "slogan1": "SMARTPHONIE + WALLET APP = DU HAST MONERO",
+            "slogan2": "SICHER PRIVAT DEINS",
+            "slogan3": "DIGITALES BARGELD",
+            "slogan4": "NUTZE MONERO",
+            "slogan5": "ERREICHE FINANZIELLE FREIHEIT",
+            "website": "www.usexmr.com"
+        },
+        "page2": {
+            "change_fiat_title": "WECHSLE EURO IN MONERO",
+            "steps": {
+                "step1": "SCHRITT 1: Lade die App Cake Wallet oder Monero.com Wallet herunter",
+                "step2": "SCHRITT 2: Erstelle eine Wallet und notiere die Seed Phrase sorgfältig auf einem Blatt Papier oder in einem Passwort-Manager (KEINE Screenshots oder Datei in einer Cloud)",
+                "step3": "SCHRITT 3: Öffne die Wallet, navigiere zum Bereich „Exchange“ und gebe den Betrag ein, der in Monero (XMR) umgetauscht werden soll. Wähle die bevorzugte Zahlungsmethode (z. B. Kreditkarte, Banküberweisung, SEPA usw.) und folge den Schritten."
+            },
+            "slogan1": "ZAHLUNGEN SIND SICHER UND UNVERÄNDERLICH!",
+            "advantages_title": "VORTEILE FÜR DICH ALS NUTZER",
+            "advantages": {
+                "privacy": "Datenschutz: Jede Zahlung ist standardmäßig vertraulich. Du bezahlst mit Monero wie mit Bargeld!",
+                "low_fees": "Geringe Gebühren: Egal welcher Betrag versendet wird, die Überweisungsgebühr ist stets sehr niedrig (i.d.R. <1 Cent, maximal wenige Cents).",
+                "no_chargebacks": "Keine Rückzahlungen: Sobald eine Monero-Transaktion in der Blockchain bestätigt wurde, kann sie nicht mehr rückgängig gemacht werden."
+            },
+            "slogan2": "MACHE HEUTE DEN ERSTEN SCHRITT",
+            "call_to_action1": "Übernimm noch heute die Kontrolle über deine finanzielle Zukunft mit Monero!",
+            "call_to_action2": "Mit Monero kannst du nicht blockiert werden. Du kannst Geld weltweit nahezu kostenlos und unbeobachtet senden!",
+            "call_to_action3": "Jetzt ist es an der Zeit zu handeln!",
+            "website": "www.usexmr.com"
+        }
+    },
+    "website": {
+        "page_language": "Deutsch",
+        "page_title": "Nutze Monero - Erlange finanzielle Freiheit",
+        "page_description": "Monero ist eine sichere, private und nicht nachverfolgbare Kryptow&auml;hrung.",
+        "page_keywords": "Monero, Kryptow&auml;hrung, digitales Bargeld, sichere Transaktionen, finanzielle Freiheit, privat, niedrige Geb&uuml;hren, nicht nachvollziehbar, fungibel, dezentralisiert",
+        "title": "Nutze<br />Monero",
+        "subtitle": "<span class=\"monero-orange\">Erreiche</span><br />finanzielle<br />Freiheit",
+        "download-light-pdf": "Lade helles PDF herunter",
+        "download-dark-pdf": "Lade dunkles PDF herunter",
+        "title-advantages": "<small>Vorteile</small><br />f&uuml;r <span class=\"monero-orange\">Dich</span> als Nutzer",
+        "advantage-privacy": "<strong>Privatsph&auml;re</strong>: Jede Zahlung ist standardm&auml;ssig vertraulich. Du bezahlst mit Monero wie mit Bargeld!",
+        "advantage-low-fees": "<strong>Geringe Geb&uuml;hren</strong>: Egal welcher Betrag versendet wird, die &uuml;berweisungsgeb&uuml;hr ist stets sehr niedrig (i.d.R. <1 Cent, maximal wenige Cents).",
+        "advantage-no-chargebacks": "<strong>Keine R&uuml;ckbuchungen</strong>: Sobald eine Monero-Transaktion in der Blockchain best&auml;tigt wurde, <strong><u>kann sie nicht mehr r&uuml;ckg&auml;ngig gemacht werden</u></strong>.",
+        "fiat-into-monero-title": "Wechsle EUR, CHF in <span class=\"monero-orange\">Monero</span>",
+        "fiat-into-monero-step1": "<h3>Schritt 1:</h3><p>Lade die App <a href=\"https://cakewallet.com/\" target=\"_blank\"><strong class=\"monero-orange\">Cake Wallet</strong></a> oder <a href=\"https://monero.com/\" target=\"_blank\">Monero.com</a> Wallet herunter.</p>",
+        "fiat-into-monero-step2": "<h3>Schritt 2:</h3><p>Erstelle eine Wallet und notiere die Seed-Phrase sorgf&auml;ltig auf einem Blatt Papier oder in einem Passwort-Manager (KEINE Screenshots oder Datei in einer Cloud).</p>",
+        "fiat-into-monero-step3": "<h3>Schritt 3:</h3><p>&ouml;ffne die Wallet, navigiere zum Bereich „<strong>Exchange</strong>“ und gebe den Betrag ein, der in <strong>Monero</strong> (<span class=\"monero-orange\">XMR</span>) umgetauscht werden soll.</p><p>W&auml;hle die bevorzugte Zahlungsmethode (z. B. <strong>Kreditkarte</strong>, <strong>Bank&uuml;berweisung</strong>, <strong>SEPA</strong> usw.) und folge den Schritten.</p>",
+        "fiat-into-monero-conclusion": "Zahlungen sind <span class=\"monero-orange\">sicher</span> und <span class=\"monero-orange\">unveränderlich</span>!",
+        "monero-into-fiat-title": "Wechsle <span class=\"monero-orange\">Monero</span> in EUR, CHF",
+        "sort-by": "Sortieren nach",
+        "sort-by-comfort": "Komfort",
+        "sort-by-best-privacy": "Beste Privatsph&auml;re",
+        "centralized-exchanges": "Zentrale Tauschb&ouml;rsen",
+        "decentralized-exchanges": "Dezentrale Tauschb&ouml;rsen",
+        "glossary": "Glossar",
+        "know-your-customer": "Know your Customer (engl. kenne den Kunden), bezeichnet die Identifizierung von Kunden durch Unternehmen, um sie zu &uuml;berwachen",
+        "dont-know-your-customer": "Don't Know your Customer (engl. kenne nicht den Kunden), keine Identifizierung von Kunden durch Unternehmen",
+        "know-your-customer-light": "Know your Customer light, ohne zusätzliche Identifizierung von Kunden durch Unternehmen",
+        "fiat": "Fiatgeld, also staatliche W&auml;hrungen wie Euro, US-Dollar, Schweizer Franken usw.",
+        "cex": "Centralized Exchange (engl. zentrale Tauschb&ouml;rse), eine Tauschb&ouml;rse, die von einem Unternehmen betrieben wird und bei der Kunden ihre Identit&auml;t nachweisen m&uuml;ssen",
+        "dex": "Decentralized Exchange (engl. dezentrale Tauschb&ouml;rse), eine Tauschb&ouml;rse, die von einem Netzwerk von Nutzern betrieben wird und bei der Kunden ihre Identit&auml;t nicht nachweisen m&uuml;ssen",
+        "copyright": "Monero Community Projekt<br />Ein unabh&auml;ngiges, nicht-kommerzielles Projekt von und f&uuml;r die Monero-Community."
+    }
+}
--- a/i18n/de/flyer-dark-de.pdf
+++ b/i18n/de/flyer-dark-de.pdf
--- a/i18n/de/flyer-light-de.pdf
+++ b/i18n/de/flyer-light-de.pdf
--- a/i18n/de/preview-flyer-dark.png
+++ b/i18n/de/preview-flyer-dark.png
--- a/i18n/de/preview-flyer-light.png
+++ b/i18n/de/preview-flyer-light.png
--- a/i18n/en/en.json
+++ b/i18n/en/en.json
@ -0,0 +1,73 @@
+{
+    "pdf": {
+        "page1": {
+            "why_monero_title": "WHY MONERO (XMR)",
+            "features": {
+                "private": "PRIVATE Transactions are completely private, with no public transaction history",
+                "low_fees": "LOW FEES Minimal transaction fees, making it cost-effective even for small payments",
+                "secure": "SECURE: Strong cryptography ensures your funds and data are safe",
+                "unblockable": "UNBLOCKABLE Every coin is equal, with no history of being 'tainted' or blacklisted",
+                "distributed": "DISTRIBUTED No central authority controls the network, offering true financial freedom"
+            },
+            "slogan1": "SMARTPHONE + WALLET = YOU HAVE MONERO",
+            "slogan2": "SECURE PRIVATE YOURS",
+            "slogan3": "THE TRUE MONEY",
+            "slogan4": "USE MONERO",
+            "slogan5": "GET FINANCIAL FREEDOM",
+            "website": "www.usexmr.com"
+        },
+        "page2": {
+            "change_fiat_title": "CHANGE SUSD INTO MONERO",
+            "steps": {
+                "step1": "STEP 1: Download Cake Wallet or Monero.com wallet",
+                "step2": "STEP 2: Create Your wallet and carefully record the seed phrase provided. Store it securely in a private, safe place!",
+                "step3": "STEP 3: Open the wallet, navigate to the 'Exchange' section, and enter the amount of money you wish to convert into Monero (XMR). Choose your preferred payment method (such as Credit Card, Bank Transfer, SEPA, etc.) follow the steps"
+            },
+            "slogan1": "PAYMENTS ARE SECURE AND IMMUTABLE!",
+            "advantages_title": "ADVANTAGES FOR YOU AS USER",
+            "advantages": {
+                "privacy": "Privacy: Every payment is private by default. You pay with Monero like you pay with cash!",
+                "low_fees": "Low fees: Minimal transaction fees, even for substantial amounts!",
+                "no_chargebacks": "No Chargebacks: Once a Monero transaction is confirmed on the blockchain, it cannot be reversed."
+            },
+            "slogan2": "TAKE THE FIRST STEP TODAY!",
+            "call_to_action1": "Take control of your financial future today with Monero!",
+            "call_to_action2": "You can't be blocked with Monero, you can send money everywhere in the World almost for free and nobody can see it!",
+            "call_to_action3": "The time to act is now!",
+            "website": "www.usexmr.com"
+        }
+    },
+    "website": {
+        "page_language": "English",
+        "page_title": "Use Monero - Get Financial Freedom",
+        "page_description": "Monero is a secure, private, and untraceable cryptocurrency.",
+        "page_keywords": "Monero, cryptocurrency, digital cash, secure transactions, financial freedom, private, low fees, untraceable, fungible, decentralized",
+        "title": "Use<br />Monero",
+        "subtitle": "<span class=\"monero-orange\">Get</span><br />Financial<br />Freedom",
+        "download-light-pdf": "Download Light PDF",
+        "download-dark-pdf": "Download Dark PDF",
+        "title-advantages": "<small>Advantages</small><br />for <span class=\"monero-orange\">you</span> as user",
+        "advantage-privacy": "<strong>Privacy</strong>: every payment is private by default. You pay with Monero like you pay with cash!",
+        "advantage-low-fees": "<strong>Low Fees</strong>: minimal transaction fees, even for substantial amounts!",
+        "advantage-no-chargebacks": "<strong>No Chargebacks</strong>: once a Monero transaction is confirmed on the blockchain, <strong><u>it cannot be reversed</u></strong>.",
+        "fiat-into-monero-title": "Change $USD into <span class=\"monero-orange\">Monero</span>",
+        "fiat-into-monero-step1": "<h3>Step 1:</h3><p>Download <a href=\"https://cakewallet.com/\" target=\"_blank\"><strong class=\"monero-orange\">Cake Wallet</strong></a> or <a href=\"https://monero.com/\" target=\"_blank\">Monero.com</a> wallet.</p>",
+        "fiat-into-monero-step2": "<h3>Step 2:</h3><p>Create Your wallet and carefully record the seed phrase provided. Store it securely in a private, safe place!</p>",
+        "fiat-into-monero-step3": "<h3>Step 3:</h3><p>Open the wallet, navigate to the “<strong>Exchange</strong>” section, and enter the amount of money you wish to convert into <strong>Monero</strong> (<span class=\"monero-orange\">XMR</span>).</p><p>Choose your preferred payment method (such as <strong>Credit Card</strong>, <strong>Bank Transfer</strong>, <strong>SEPA</strong>, etc.) follow the steps.</p>",
+        "fiat-into-monero-conclusion": "Payments are <span class=\"monero-orange\">secure</span> and <span class=\"monero-orange\">immutable</span>!",
+        "monero-into-fiat-title": "Change <span class=\"monero-orange\">Monero</span> into $USD",
+        "sort-by": "Sort by",
+        "sort-by-comfort": "Comfort",
+        "sort-by-best-privacy": "Best Privacy",
+        "centralized-exchanges": "Centralized Exchanges",
+        "decentralized-exchanges": "Decentralized Exchanges",
+        "glossary": "Glossary",
+        "know-your-customer": "Know Your Customer, refers to the identification of customers by companies to monitor them",
+        "dont-know-your-customer": "Don't Know Your Customer, refers to the absence of customer identification by companies",
+        "know-your-customer-light": "Know Your Customer light, refers to the absence of additional customer identification by companies",
+        "fiat": "Fiat Currency, such as Euro, US Dollar, Swiss Franc, etc.",
+        "cex": "Centralized Exchange, an exchange operated by a company where customers must verify their identity",
+        "dex": "Decentralized Exchange, an exchange operated by a network of users where customers do not need to verify their identity",
+        "copyright": "Monero Community Project<br />An independent, non-commercial project by and for the Monero community."
+    }
+}
--- a/i18n/en/flyer-dark-en.pdf
+++ b/i18n/en/flyer-dark-en.pdf
--- a/i18n/en/flyer-light-en.pdf
+++ b/i18n/en/flyer-light-en.pdf
--- a/i18n/en/preview-flyer-dark.png
+++ b/i18n/en/preview-flyer-dark.png
--- a/i18n/en/preview-flyer-light.png
+++ b/i18n/en/preview-flyer-light.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="language" content="English">
+    <title>Use Monero - Get Financial Freedom</title>
+    <meta name="description" content="Monero is a secure, private, and untraceable cryptocurrency.">
+    <meta name="keywords"
+        content="Monero, cryptocurrency, digital cash, secure transactions, financial freedom, private, low fees, untraceable, fungible, decentralized">
+    <meta name="robots" content="index, follow">
+    <meta name="author" content="Monero Community Project">
+    <meta name="copyright" content="Copyright © Monero Community Project">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#121212">
+    <link rel="icon" href="./assets/monero.svg" type="image/x-icon">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;500&family=Raleway:wght@800&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="./assets/style.css" type="text/css">
+    <script src="./assets/script.js" defer></script>
+</head>
+
+<body class="dark-mode">
+    <header>
+        <div>
+            <select class="language-switcher" onchange="loadLanguage(this.value)">
+                <option value="en">English</option>
+                <option value="de">Deutsch</option>
+            </select>
+        </div>
+
+        <div>
+            <div class="mode-switcher" onclick="toggleMode()">
+                <div class="moon"></div>
+            </div>
+        </div>
+    </header>
+
+    <main>
+
+        <p><img src="./assets/monero.svg" class="logo" height="100" width="100" alt="Monero Logo" /></p>
+        <h1 data-i18n="title"></h1>
+        <h2 data-i18n="subtitle"></h2>
+
+        <p>&nbsp;</p>
+
+        <section class="fade-in">
+            <div class="preview-images">
+                <div class="preview-flyer-light">
+                    <a href="">
+                        <img />
+                    </a>
+                    <a href="" data-i18n="download-light-pdf"></a>
+                </div>
+                <div class="preview-flyer-dark">
+                    <a href="">
+                        <img />
+                    </a>
+                    <a href="" data-i18n="download-dark-pdf"></a>
+                </div>
+            </div>
+            <a href="./i18n/en/Monero Flyer.pdf" class="download-button" data-i18n="download-button"></a>
+        </section>
+
+        <p>&nbsp;</p>
+
+        <section class="fade-in">
+            <h2 data-i18n="title-advantages"></h2>
+            <p data-i18n="advantage-privacy"></p>
+            <p data-i18n="advantage-low-fees"></p>
+            <p data-i18n="advantage-no-chargebacks"></p>
+        </section>
+
+        <p>&nbsp;</p>
+
+        <section class="fade-in">
+            <h2 data-i18n="fiat-into-monero-title"></h2>
+            <div data-i18n="fiat-into-monero-step1"></div>
+            <div data-i18n="fiat-into-monero-step2"></div>
+            <div data-i18n="fiat-into-monero-step3"></div>
+            <h2 data-i18n="fiat-into-monero-conclusion"></h2>
+        </section>
+
+        <p>&nbsp;</p>
+
+        <section class="fade-in">
+            <h2 data-i18n="monero-into-fiat-title"></h2>
+            <div>
+                <label id="sort-label" for="sort-mode" data-i18n="sort-by"></label>
+                <select id="sort-mode" onchange="sortCategories(this.value)">
+                    <option id="sort-by-comfort" value="comfort" data-i18n="sort-by-comfort"></option>
+                    <option id="sort-by-best-privacy" value="privacy" data-i18n="sort-by-best-privacy"></option>
+                </select>
+            </div>
+            <div id="exchanges">
+                <h3 id="atomic">Atomic Swaps</h3>
+                <p id="atomic-desc"></p>
+                <div class="exchange-category">
+                    <ul>
+                        <li><a href="https://unstoppableswap.net" target="_blank">UnstoppableSwap</a></li>
+                        <li><a href="https://basicswapdex.com" target="_blank">BasicSwap</a></li>
+                    </ul>
+                </div>
+
+                <h3 id="dex" data-i18n="decentralized-exchanges"></h3>
+                <p id="dex-desc"></p>
+                <div class="exchange-category">
+                    <ul>
+                        <li><a href="https://bisq.network" target="_blank">bisq</a></li>
+                        <li><a href="https://retoswap.org" target="_blank">RetoSwap</a></li>
+                        <li><a href="https://tradeogre.com" target="_blank">TradeOgre</a></li>
+                        <!-- <li><a href="https://serai.exchange" target="_blank">Serai DEX</a></li> -->
+                    </ul>
+                </div>
+
+                <h3 id="no_kyc">No-KYC Services</h3>
+                <p id="no_kyc-desc"></p>
+                <div class="exchange-category">
+                    <ul>
+                        <li><a href="https://trocador.app" target="_blank">TrocadorApp</a></li>
+                        <li><a href="https://orangefren.com" target="_blank">OrangeFren</a></li>
+                    </ul>
+                </div>
+
+                <h3 id="kyc_light">KYC light</h3>
+                <p id="kyc_light-desc"></p>
+                <div class="exchange-category">
+                    <ul>
+                        <li><a href="https://cakewallet.com" target="_blank">Cake Wallet</a> &amp;
+                            <a href="https://dfx.swiss" target="_blank">DFX.swiss</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <h3 id="cex" data-i18n="centralized-exchanges"></h3>
+                <p id="cex-desc"></p>
+                <div class="exchange-category">
+                    <ul>
+                        <li><a href="https://kraken.com" target="_blank">Kraken Exchange</a> (US, CH)</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <p>&nbsp;</p>
+
+        <section class="fade-in">
+            <div id="legend">
+                <h4 id="legend-headline" data-i18n="glossary">Glossary</h4>
+                <dl>
+                    <dt>KYC</dt>
+                    <dd id="legend-kyc" data-i18n="know-your-customer"></dd>
+
+                    <dt>No-KYC</dt>
+                    <dd id="legend-non_kyc" data-i18n="dont-know-your-customer"></dd>
+
+                    <dt>KYC light</dt>
+                    <dd id="legend-kyc_light" data-i18n="know-your-customer-light"></dd>
+
+                    <dt>Fiat</dt>
+                    <dd id="legend-fiat" data-i18n="fiat"></dd>
+
+                    <dt>CEX</dt>
+                    <dd id="legend-cex" data-i18n="cex"></dd>
+
+                    <dt>DEX</dt>
+                    <dd id="legend-dex" data-i18n="dex"></dd>
+                </dl>
+            </div>
+        </section>
+    </main>
+
+    <p>&nbsp;</p>
+
+    <footer class="fade-in">
+        <p>&copy; <span id="current-year"></span> <span data-i18n="copyright"></span></p>
+    </footer>
+
+</body>
+
+</html>
--- a/readme.md
+++ b/readme.md
@ -0,0 +1,43 @@
+# usexmr.com — Official Website with Flyer
+
+Welcome to the official repository for [usexmr.com](https://usexmr.com), a Monero Community Project. This website provides educational resources, guides, and a flyer to help users understand and use Monero for private, secure, and decentralized transactions.
+
+## About
+
+**usexmr.com** is a non-commercial, community-driven project. Our goal is to make Monero accessible to everyone by providing clear, multilingual information and easy-to-use resources.
+
+## Contributing
+
+We welcome contributions from the Monero community! The easiest way to help is by translating the website into your language.
+
+### How to Translate
+
+1. **Copy the English translation file:**  
+   Go to [`i18n/en/en.json`](i18n/en/en.json) and copy its contents.
+
+2. **Create a new language folder:**  
+   Inside the [`i18n`](i18n/) directory, create a new folder named after your language code (e.g., `fr` for French, `es` for Spanish).
+
+3. **Add your translation:**  
+   Paste the copied `en.json` into your new folder and rename it to match your language code (e.g., `fr.json`).  
+   Example: `i18n/fr/fr.json`
+
+4. **Translate all values:**  
+   Replace the English text with your translation.  
+   **Do not change the keys.**
+
+5. **Submit a Pull Request:**  
+   Commit your changes and open a pull request. Please mention your language in the PR title.
+
+Once your pull request is submitted, we will review your translation. If everything looks good, we will generate PDF flyers in both light and dark modes based on your translation. Preview images and the PDFs will be added to your PR before it is merged.
+
+**Alternative:**  
+If you prefer, you can simply take the JSON file, translate it, and reach out directly to [@schmidt1024 on X (Twitter)](https://x.com/schmidt1024). We will help you get your translation added and generate the flyers for you.
+
+## License
+
+This project is open source and available under the GFY License.
+
+---
+
+Thank you for supporting Monero and helping make privacy accessible to all!