Cześć, powiem szczerze, że nie znam HTML i całą stronę stworzyłem z chatem gpt.
Problem jest taki, że dodałem do strony losowe teksty pojawiające się przy odświeżąniu strony.
Czas powiedział, że muszę zmienić stronę na index.php, niby wszystko działa, ale oprócz obrazków, któe się nie ładują.
Wiece jaki może być problem?
icalmi.com
Teraz jest postawiona na index.php.
Poniżej kod strony php, kod trochę skróciłem, bo post był za długi.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>iCalmi – Twój oddech w kieszeni</title>
<style>
:root {--deep-navy:#0d1b2a;--turquoise:#1b6f8e;--turquoise-light:#6ab5d1;--soft-coral:#ff8fa3;--light:#f9fafb;--text:#111;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',sans-serif;color:var(--text);background:linear-gradient(135deg,var(--deep-navy) 0%,var(--turquoise) 55%,var(--turquoise-light) 100%);min-height:100vh;position:relative;overflow-x:hidden;}
body::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22200%22 viewBox=%220 0 800 200%22 preserveAspectRatio=%22none%22><path d=%22M0 100 C 150 200 350 0 800 100 L800 200 L0 200 Z%22 fill=%22%23ffffff22%22/></svg>') repeat-x;background-size:800px 200px;animation:waves 25s linear infinite;opacity:.12;pointer-events:none;}
@keyframes waves{from{background-position-x:0}to{background-position-x:-800px}}
header.site{background:var(--deep-navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;flex-wrap:wrap;position:relative;z-index:2;}
header.site a.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
header.site img{width:50px;height:auto}
nav ul{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap}
nav a{color:var(--light);text-decoration:none;font-weight:600;transition:color .2s}
nav a:hover{color:var(--soft-coral)}
.hero{text-align:center;padding:4rem 1rem 3rem;color:var(--light)}
.hero h1{font-size:2.6rem;margin-bottom:1rem;line-height:1.2}
.hero .lead{font-size:1.2rem;max-width:700px;margin:0 auto 2.5rem}
.cta{display:inline-block;background:var(--soft-coral);color:var(--deep-navy);padding:.9rem 2.4rem;border-radius:40px;font-weight:600;text-decoration:none;transition:background .2s}
.cta:hover{background:#ffb3be}
section.features{position:relative;z-index:1;background:var(--light);border-top-left-radius:40px;border-top-right-radius:40px;margin-top:-3rem;padding:4rem 1rem 3rem;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;max-width:1000px;margin:0 auto}
.card{background:#fff;padding:2rem 1.5rem;border-radius:18px;box-shadow:0 8px 18px rgba(0,0,0,.05);text-align:center}
.card img{width:64px;height:auto;margin-bottom:1rem}
.card h3{margin-bottom:.6rem;color:var(--deep-navy);font-size:1.25rem}
to{transform:translateY(-120%)}}
.testimonial{padding:4rem 1rem;background: #e0f2ff;color:var(--deep-navy);text-align:center}
blockquote{font-size:1.1rem;font-style:italic;max-width:700px;margin:0 auto 1.5rem}
cite{font-weight:600;display:block;text-align:center}
footer{text-align:center;padding:2rem 1rem;font-size:.9rem;color:var(--light);background:var(--deep-navy);}
@media(max-width:768px){.hero h1{font-size:2.1rem}nav ul{flex-direction:column;gap:.8rem;margin-top:.5rem}}
/* ticker emotion carousel */
.ticker-wrap{overflow:hidden;background:var(--light)}
.ticker{display:flex;gap:1.5rem;padding:2rem 0;width:max-content;animation:scroll 45s linear infinite}
.ticker:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-card{min-width:230px;background:#fff;border-radius:16px;box-shadow:0 6px 14px rgba(0,0,0,.05);padding:2rem 1.5rem;text-align:center;transition:transform .25s,box-shadow .25s}
.ticker-card:hover{transform:translateY(-6px);box-shadow:0 12px 22px rgba(0,0,0,.08)}
.ticker-card h3{margin:1rem 0 .6rem;font-size:1.25rem;color:var(--deep-navy)}
.ticker-card p{font-size:.95rem;color:#444}
.ticker-card a{display:inline-block;margin-top:1rem;color:var(--turquoise);font-weight:600;text-decoration:none}
.side-image {
position: fixed;
top: 0;
bottom: 0;
height: 100vh;
width: auto;
opacity: 0.25;
pointer-events: none;
z-index: -1;
}
.side-image.left { left: 0; }
.side-image.right { right: 0; }
/* Responsive navigation and layout adjustments */
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: flex-start;
padding: 0.75rem 1rem;
}
header a.logo {
margin-bottom: 0.5rem;
}
nav ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 100%;
}
nav ul li {
text-align: center;
}
nav ul li a {
display: block;
padding: 0.5rem 0;
}
main {
padding: 1rem;
}
.side-image {
display: none;
}
}
</style>
</head>
<body>
<img alt="Lewa ilustracja kwiatu" class="side-image left" src="/images/flower-left.png"/>
<img alt="Prawa ilustracja kwiatu" class="side-image right" src="/images/flower-right.png"/>
<header class="site"> <a class="logo" href="logo.html"><img alt="Logo iCalmi" src="/logo.png"/><span>iCalmi</span></a><a href="https://www.facebook.com/profile.php?id=61576250647842" style="color: #fff; text-decoration: none; font-weight: 600; padding: 0.4rem 0.8rem; border: 2px solid #fff; border-radius: 6px;">Nasza strona na Facebooku</a>
<nav><ul>
<nav><ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="sklep.html">Sklep</a></li>
<li><a href="o.html">O iCalmi</a></li>
<li><a href="jak-dziala.html">Jak działa</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="kategorie.html">Kategorie</a></li>
<li><a href="dla-kogo.html">Dla kogo</a></li>
<li><a href="opinie.html">Opinie</a></li>
<li><a href="profile.html">Użytkownicy</a></li>
<li><a href="misja.html">Misja</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="wsparcie.html" style="color: #ffd700;">Wsparcie</a></li>
</ul></nav>
</header>
<div style="text-align:center; margin: 2rem 0;">
<a href="logo.html">
<img alt="Logo Ja, które ma znaczenie" src="/icalmi.png" style="width:160px; height:auto;"/>
</a>
</div>
<section class="hero">
<div class="random-message" style="text-align:center; margin: 20px 0; font-size: 1.5em;"><?php include("wiadomosc.php"); ?></div>
<h1>Ja, które ma znaczenie</h1>
<p class="lead">iCalmi to breloczek, który w jednej chwili przenosi Cię z chaosu myśli do spokojnego oddechu. Kliknij, przeczytaj zdanie wsparcia, oddychaj 3× — wróć do siebie.</p>
<a class="cta" href="sklep.html">Kup teraz za 89 zł z darmową wysyłką</a>
</section>
<section class="features" id="features">
<div class="grid">
<div class="card"><img alt="Oddech" src="/info/oddech.svg"/><h3>Świadomy oddech</h3><p>Animowany pasek 4‑6‑sekund prowadzi przez 3 cykle – 30 s i wracasz do równowagi.</p></div>
<div class="card"><img alt="Afirmacje" src="/info/afirmacje.svg"/><h3>Mikro‑afirmacje</h3><p>Wspierające zdania bez aplikacji i powiadomień. W sam raz na kryzys.</p></div>
<div class="card"><img alt="8 Emocji" src="/info/emocje.svg"/><h3>8 kategorii emocji</h3><p>Motywacja, smutek, złość, lęk, niepewność, nałóg, samotność, emocje mieszane.</p></div>
<div class="card"><img alt="Offline" src="/info/offline.svg"/><h3>Całkowicie offline</h3><p>Zero rozpraszaczy, czysta obecność – działa bez telefonu.</p></div>
<div class="card"><img alt="Bateria" src="/info/battery.svg"/><h3>Nie uzależnia</h3><p>Działa raz na godzinę. Brak uzależnienia od urządzenia</p></div>
<div class="card"><img alt="Lekki" src="/info/lekki.svg"/><h3>Lekki & dyskretny</h3><p>Waży tylko 18 g, mieści się w dłoni.</p></div>
</div>
</section>
<section style="text-align:center; background:#f9fafb; padding: 3rem 1rem;">
<h2 style="font-size:1.6rem; margin-bottom: 1rem; color:#0d1b2a;">Wizualizacja breloczka</h2><div style="display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;"><img alt="Wizualizacja iCalmi 1" src="/breloczek.png" style="max-width:480px; width:90%; height:auto; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.1);"/><img alt="Wizualizacja iCalmi 2" src="/breloczek1.png" style="max-width:480px; width:90%; height:auto; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.1);"/></div>
</section>
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker-card"><img alt="Motywacja" src="/img/motywacja.png" style="width:80px;height:auto;"/><h3>Motywacja</h3><p>Gdy pragniesz ruszyć naprzód, ale coś Cię zatrzymuje.</p><a href="kategorie.html#motywacja">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Smutek" src="/img/smutek.png" style="width:80px;height:auto;"/><h3>Smutek</h3><p>Chwile, w których łzy mówią więcej niż słowa.</p><a href="kategorie.html#smutek">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Złość" src="/img/zlosc.png" style="width:80px;height:auto;"/><h3>Złość</h3><p>Bezpieczna przestrzeń na gniew, który broni Twoich granic.</p><a href="kategorie.html#zlosc">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Lęk" src="/img/lek.png" style="width:80px;height:auto;"/><h3>Lęk</h3><p>Kiedy oddech przyspiesza, a myśli pędzą – iCalmi zwalnia tempo.</p><a href="kategorie.html#lek">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Niepewność" src="/img/niepewnosc.png" style="width:80px;height:auto;"/><h3>Niepewność</h3><p>Gdy pytania są większe niż odpowiedzi.</p><a href="kategorie.html#niepewnosc">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Nałóg" src="/img/nalog.png" style="width:80px;height:auto;"/><h3>Nałóg</h3><p>Każda przerwa w schemacie to odwaga. iCalmi wspiera Twój krok.</p><a href="kategorie.html#nalog">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Samotność" src="/img/samotnosc.png" style="width:80px;height:auto;"/><h3>Samotność</h3><p>„Jestem tutaj”, gdy świat wydaje się daleko.</p><a href="kategorie.html#samotnosc">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Emocje" src="/img/emocje.png" style="width:80px;height:auto;"/><h3>Emocje</h3><p>Gdy wszystko miesza się naraz – iCalmi daje punkt zaczepienia.</p><a href="kategorie.html#emocje">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Motywacja" src="/img/motywacja.png" style="width:80px;height:auto;"/><h3>Motywacja</h3><p>Gdy pragniesz ruszyć naprzód, ale coś Cię zatrzymuje.</p><a href="kategorie.html#motywacja">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Smutek" src="/img/smutek.png" style="width:80px;height:auto;"/><h3>Smutek</h3><p>Chwile, w których łzy mówią więcej niż słowa.</p><a href="kategorie.html#smutek">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Złość" src="/img/zlosc.png" style="width:80px;height:auto;"/><h3>Złość</h3><p>Bezpieczna przestrzeń na gniew, który broni Twoich granic.</p><a href="kategorie.html#zlosc">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Lęk" src="/img/lek.png" style="width:80px;height:auto;"/><h3>Lęk</h3><p>Kiedy oddech przyspiesza, a myśli pędzą – iCalmi zwalnia tempo.</p><a href="kategorie.html#lek">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Niepewność" src="/img/niepewnosc.png" style="width:80px;height:auto;"/><h3>Niepewność</h3><p>Gdy pytania są większe niż odpowiedzi.</p><a href="kategorie.html#niepewnosc">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Nałóg" src="/img/nalog.png" style="width:80px;height:auto;"/><h3>Nałóg</h3><p>Każda przerwa w schemacie to odwaga. iCalmi wspiera Twój krok.</p><a href="kategorie.html#nalog">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Samotność" src="/img/samotnosc.png" style="width:80px;height:auto;"/><h3>Samotność</h3><p>„Jestem tutaj”, gdy świat wydaje się daleko.</p><a href="kategorie.html#samotnosc">Dowiedz się więcej</a></div>
<div class="ticker-card"><img alt="Emocje" src="/img/emocje.png" style="width:80px;height:auto;"/><h3>Emocje</h3><p>Gdy wszystko miesza się naraz – iCalmi daje punkt zaczepienia.</p><a href="kategorie.html#emocje">Dowiedz się więcej</a></div>
</div>
<section class="testimonial">
