Gebogenen Text?

Auf meiner Homepage habe ich als Hintergrund einen verlauf und ein logo und dann habe ich einen Text.

Wenn Der Text das Logo berührt soll er sich nach oben biegen das das Logo frei bleibt. (Wie im Beispiel gezeigt wird: )

ChatGPT gibt mir den code aus:

Html:

<main>
  <div id="curvedText" class="curved-text"></div>
</main>

Css:

body {
    height: 100vh;
    color: black;
}


body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(0, 255, 0), white, rgb(0, 255, 0));
    z-index: -1;
}


body::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px; /* Adjust the size of the logo */
    height: 150px;
    background: url('src/logo.png') center no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%);
    z-index: -1;
}


.curved-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    text-anchor: middle;
}


.curved-text span {
    position: absolute;
    transform-origin: bottom center;
    display: inline-block;
}


JS:

document.addEventListener('DOMContentLoaded', () => {
    const text = "Nach einigen Jahren Spielpause begannen wir im Herbst 2021 wieder mit einem Schultheater im Alpen-Adria-Gymnasium. Mitmachen kann jede/r ab der 3. Klasse.";
    const curvedTextContainer = document.getElementById('curvedText');
    const radius = 50; // Radius of the curve
    const logoRadius = 55; // Half of the logo's width/height
    const logoCenterX = window.innerWidth / 2;
    const logoCenterY = window.innerHeight / 2;
  
    for (let i = 0; i < text.length; i++) {
        const span = document.createElement('span');
        span.textContent = text[i];
        let angle, x, y;
  
        if (i < text.length / 3) {
            // Text before the logo
            x = i * 10;
            y = 0;
            span.style.transform = `translate(${x}px, ${y}px)`;
        } else if (i < 2 * text.length / 3) {
            // Text around the logo
            angle = ((i - text.length / 3) / (text.length / 3)) * Math.PI;
            x = logoCenterX + Math.cos(angle) * (radius + logoRadius) - logoCenterX;
            y = logoCenterY + Math.sin(angle) * (radius + logoRadius) - logoCenterY;
            span.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
        } else {
            // Text after the logo
            x = (i - 2 * text.length / 3) * 10;
            y = 0;
            span.style.transform = `translate(${x}px, ${y}px)`;
        }
  
        curvedTextContainer.appendChild(span);
    }
});

Fehler:

es sieht so aus:'

Kann mir wer sagen was ich ändern muss das es ausseht wie oben im Beispiel?
Danke

Bild zum Beitrag
HTML, Webseite, programmieren, CSS, JavaScript, Bug, Code, developer, Webdesign, Webentwicklung
Verschlossenen Tresor gekauft, wie bekomme ich den zerstörungsfrei auf? Mystery Tresor?

Guten Abend,

danke das du auf meinen Beitrag gestoßen bist. Ich habe heute den Unnötigsten Kauf meines Lebens getätigt aber meine Inneres Ich musste einfach zuschlagen und hat mir Klargemacht das ich es nicht Bereuen werde. Also worum geht es?
Ich habe bei Kleinanzeigen gestöbert und bin auf rin Inserat in meiner Nähe gestoßen wo ein großer Tresor / Safe verkauft wurde. Dieser wurde verschlossen verkauft als sozusagen einen Mystery Tresor.
Da ich als Kind schon immer Tresore geliebt habe und auch einen kleinen damals zum Geburtstag geschenkt bekommen habe. Konnte ich mich nicht zusammenreißen unf musste den Tresor kaufen.

Über die Herkunft des Tresors. Der Vorbesitzer des Tresors hatte den Tresor in der Werkstatt eines älteren Hauses gefunden, welches er gekauft hat. Zu dem Zeitpunkt war der Tresor auch schon verschlossen und es gab keinerlei Informationen zum Tresor oder zum Code. Daraufhin wollte er das schwere Ding weg haben und hat Ihn an mich Idioten verkauft. Der Tresor stand auf einer Europalette und wurde mir mit einem kleinen Gabelstapler auf den Anhänger gehoben. Ja keiner Sorge ich habe ein Kaufvertrag erstellt und diesen Unterschreiben lassen.

Naja ich hab mich tierisch gefreut über das Stahl Monster. Bis mir aufgefallen ist naja wie bekomme ich das Dinge denn überhaupt auf? Ich würde Ihn ungerne kaputt machen da ich Ihn gerne noch benutzen würde. Ich weiß weder den Code noch wie viele Drehscheiben er hat geschweige denn von welchem Hersteller er ist. Er hat keinerlei Kennzeichnungen oder Typenschilder.

Ich weiß echt nicht was ich machen soll, habe den fetten Klopper jetzt im Garten stehen. Macht mich auch jedesmal Glücklich wenn ich ihn sehe, aber wenn ich Ihn öffnen könnte wäre ich noch Glücklicher. Mir ist Klarr das in dem Safe höchstwahrscheinlich nichts Wertvolles drin ist (falls dort überhaupt was drin sein sollte) aber darum geht es mir auch nicht, meine einzigen Interesse gilt dem Tresor an sich.

Nun zu meiner Hoffnung das mir hier jemand helfen kann. Ich würde mich freuen wenn der Hersteller ermittelt werden könnte. Noch mehr würde ich mich freuen, (und jetzt zum Unrealistischen Part) wenn mir jemand helfen kann ihn zerstörungsfrei zu Öffnen oder mir einen Kontakt weiterleitet der das gegen einen preiswerten Betrag machen kann.

Über den Tresor:

Schätzungsweise 400Kg, er hat ein Mechanisches Zahlenkombinationsschloss mit den Zahlen 0-99. Als ich gegen die Tür geschlagen habe hat es sich angehört als ob eine Glasscheibe drin ist. Außerdem denke ich das in den Wänden und in der Decke Hohlräume oder etwas Steinartiges drin ist.(Villeicht wegen Brandschutz?).

Danke an euch alle die bis hierhin gekommen sind. Danke das ihr versucht mir zu helfen und das Ihr meinen Beitrag gefunden habt. Großes Dankeschön an euch alle.

Ps: Ich stelle ein paar Bilder rein, falls

andere Bilder benötigt werden, kümmere ich mich selbstverständlich darum.

Bild zum Beitrag
Gold, knacken, schluesseldienst, Code, Mechanik, Mystery, Safe, Stahl, Tresor, Waffenschrank, Schatztruhe, Tresor öffnen, Zahlenkombination
Javascript Variablen ein/ersetzen - Matomo - Domain?

Moinsen,

ich bin dabei, mir ein Script für Multidomain Tracking zu bauen.
Also Cookies auf mehreren Domains setzen usw.
Das meiste funktioniert soweit wie erwartet.
Das Script soll dynamisch über Cloudflare Zaraz geladen werden.

Jetzt fehlt mir bis jetzt soweit nur noch das einsetzen der Session ID, die ich generiere und die Domain, die aktuell aufgerufen wurde.

In dem Code möchte ich gerne die Variable sessionID sowie die Variable Domain einsetzten lassen.
Wie kann ich das bewerkstelligen?

Ich bin leider nicht ganz so erfahren in Javascript.
Ich habe schon einiges getestet aber es will einfach nicht.

Die Sache ist die, dass es mit Vanilla JS laufen müsste. Also ohne extras usw.

Es soll halt nur JS per Cloudflare Zaraz eingebunden werden.

Der/Die beiden Code Bestandteile sind folgende:

Einmal der Matomo Tag Manager      

<!-- Matomo Tag Manager -->
<script>
  var _mtm = window._mtm = window._mtm || [];
  _mtm.push({'uid':+sessionID });
  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
  (function() {
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='https://xyz.de/js/container_12345.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Tag Manager -->


Sowie der JS Tracker Code

var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setCookieDomain" +DomainX]);
  _paq.push(["setDomains", ["*xyz.de"]]);
  _paq.push(["enableCrossDomainLinking"]);
  _paq.push(['setUserId', sessionID]);
  _paq.push(['enableHeartBeatTimer', 20]);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  _paq.push(['trackVisibleContentImpressions', true, 750]);
  (function() {
    var u="https://xyz.de/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'X']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://xyz.de/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
Linux, HTML, Webseite, JavaScript, HTML5, Code, PHP, Programmiersprache, Script, Webentwicklung, Variablen, cloudflare

Meistgelesene Beiträge zum Thema Code