http://pixe.hu SEO ellenőrzése a 2026.06.10 napon
A Seo elemző szoftver fejlesztés alatt áll, az esetleges kellemetlenségekért elnézést kérünk!
Sajnos ezen még dolgozni érdemes. Weboldaladon rengeteg olyan hibát találtunk, amelyek megakadályozzák hogy a SEO-ból szép eredményeket érj el. Vedd fel velünk a kapcsolatot IDE kattintva, hogy orvosolhassuk ezeket, és felállíthassuk SEO stratégiád! Kérem a részletes SEO-jelentést!2 perc alatt elkészül – személyre szabott formában, e-mailben küldjük.
Összesen 1 figyelmeztetés!
Az AI helyezések megtekintéséhez előbb írj be egy kérdést!
Összesen 1 figyelmeztetés!
A kulcsszó figyelő szolgáltatáshoz kérjük vásárolj Jarvis előfizetést!
Összesen 7 elfogadott szabály!
Duplikációs problémákat okozhat!
Összesen 4 hiba!
Összesen 1 figyelmeztetés!
Az SSL tanúsítvány egy digitális hitelesítés, amely titkosított kapcsolatot biztosít a webkiszolgáló és a felhasználó böngészője között. Segít megvédeni az adatokat a lehallgatástól, biztosítja a weboldal hitelességét, javítja a Google rangsorolást és növeli a felhasználói bizalmat.
Összesen 1 figyelmeztetés!
A HTTP/2 a HTTP protokoll továbbfejlesztett verziója, amely gyorsabb adatátvitelt tesz lehetővé multiplexálással, tömörítéssel és jobb kapcsolatkezeléssel. Csökkenti a késleltetést, javítja a weboldalak betöltési sebességét és hatékonyabban kezeli a párhuzamos kéréseket, mint a HTTP/1.1.
Összesen 1 elfogadott szabály!
A címsorok (<h1>, <h2>, <h3>, stb.) HTML-elemek, amelyek a weboldalak tartalmát hierarchikusan tagolják. Az <h1> a főcím, míg az alacsonyabb szintű címsorok (pl. <h2>, <h3>) az alfejezeteket jelölik. Fontosságuk abban rejlik, hogy segítik a keresőmotorokat a tartalom megértésében, javítják az oldalak SEO-ját, és átláthatóbbá teszik az információt az olvasók számára. A helyes címsorhasználat strukturáltabb, könnyebben fogyasztható tartalmat eredményez.
| <h1> | <h2> | <h3> | <h4> | <h5> | <h6> |
| 1 db | 1 db | 11 db | 22 db | 0 db | 0 db |
<h1>PixeFlex</h1>
<h2Syne", sans-serif; font-size: 1.6rem; color: var(--accent); margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em;">Turn Your Photos Into a Printable, Interactive Origami Puzzle!</h2>
<h3Syne", sans-serif; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">What is a Trihexaflexagon?</h3>
<h3Syne", sans-serif; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">Why Choose FoldMyPhotos?</h3>
<h3Syne", sans-serif; font-size: 1.2rem; color: var(--text); margin-bottom: 16px; border-left: 3px solid var(--accent); padding-left: 10px;">How to Design and Assemble Your Flexagon</h3>
<h4>1. Upload Your Pictures</h4>
<h4>2. Fine-tune Image Effects</h4>
<h4>3. Generate and Export to PDF / JPG</h4>
<h4>4. Cut, Glue and Fold with 3D Guide</h4>
<h4Syne", sans-serif; font-size: 0.85rem; margin-bottom: 8px; color: var(--text);">Controls</h4>
<h3>Help</h3>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">What is this service?</h4>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">How to use</h4>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Features (Demo vs PRO)</h4>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Subscription</h4>
<h3>Privacy Policy</h3>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Local Processing</h4>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Secure Payments</h4>
<h4Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Essential Cookies</h4>
<h3 id="authTitle">Login</h3>
<h3>Your Account</h3>
<h3>Upgrade to PRO</h3>
<h4Syne", sans-serif; margin-top: 10px;">7 Days Access</h4>
<h4Syne", sans-serif; margin-top: 10px;">30 Days Access</h4>
<h3Syne",sans-serif; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px;">Inspirational DIY Paper Crafts</h3>
<h4Syne",sans-serif; margin-bottom:4px;">💍 Wedding Cards & Favors</h4>
<h4Syne",sans-serif; margin-bottom:4px;">🎂 Interactive Birthday Cards</h4>
<h4Syne",sans-serif; margin-bottom:4px;">🏫 School STEM & Origami Crafting</h4>
<h4Syne",sans-serif; margin-bottom:4px;">🏢 Creative Business Retailing & Promo</h4>
<h3Syne",sans-serif; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px;">Frequently Asked Questions</h3>
<h4>Q What is the recommended paper weight for printing?</h4>
<h4>Q Which adhesive glue works best?</h4>
<h4>Q Are my uploaded pictures uploaded to your servers?</h4>
<h4>Q How can I unlock the full 3-photo pattern?</h4>
<h3Syne",sans-serif; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px;">Contact FoldMyPhotos Support</h3>
Összesen 3 elfogadott szabály!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Nem ajánlott, ha a headingekben HTML tag található!
Összesen 11 figyelmeztetés!
A Dublin Core egy metaadat-szabvány, amely segít azonosítani és leírni a webes tartalmakat strukturált módon. Olyan alapvető információkat tartalmaz, mint a cím, szerző, kulcsszavak, leírás vagy a publikálás dátuma. Használata előnyös, mert javítja a keresőmotorok és más rendszerek számára a tartalom értelmezhetőségét, így segíthet a jobb indexelésben és kereshetőségben. Emellett támogatja az adatcserét és a digitális archívumok rendszerezését is.
Összesen 1 hiba!
Az Open Graph (OG) egy metaadat-protokoll, amelyet a Facebook fejlesztett ki, és lehetővé teszi, hogy a weboldalak jobban megjelenjenek a közösségi médiában. Az OG-címkék (og:title, og:description, og:image, stb.) segítségével beállítható, hogy például egy Facebook-megosztásnál milyen cím, kép és leírás jelenjen meg. Ez javítja a kattintási arányt (CTR), a felhasználói élményt, és növeli az oldal láthatóságát a közösségi platformokon.
<meta property="og:title" content="FoldMyPhotos - Free Printable Flexagon Generator from Photos">
<meta property="og:description" content="Create your own printable folding photo puzzle (trihexaflexagon) from custom pictures! Free online paper toy template generator with 3D interactive preview.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pixe.hu/">
<meta property="og:image" content="https://pixe.hu/php/api/demo.jpg">
<meta property="og:site_name" content="FoldMyPhotos">
Összesen 1 elfogadott szabály!
A W3C (World Wide Web Consortium) egy nemzetközi szervezet, amely a webes szabványokat fejleszti és felügyeli. Célja, hogy a web mindenki számára elérhető, kompatibilis és biztonságos legyen. A W3C ajánlásainak betartása biztosítja, hogy egy weboldal jól működjön minden böngészőben, gyorsabb legyen, és megfeleljen az akadálymentességi (WCAG) és SEO-irányelveknek. Ez hosszú távon jobb felhasználói élményt és szélesebb elérhetőséget eredményez.
A(z) 993 sorban
A(z) 1230 sorban
A(z) 1308 sorban
A(z) 1431 sorban
Összesen 4 hiba!
A(z) 1254 sorban
A(z) 1264 sorban
Összesen 2 figyelmeztetés!
A Flash tartalom az Adobe Flash technológiával készült animációkat, videókat vagy interaktív elemeket jelent. Régebben népszerű volt a weboldalakon, de ma már elavult és nem támogatott. Alternatíva: HTML5, CSS3 és JavaScript segítségével minden Flash-funkcionalitás korszerűbben és hatékonyabban megvalósítható.
Összesen 1 elfogadott szabály!
A framek és iframek olyan HTML-elemek, amelyek más weboldalak vagy tartalmak beágyazására szolgálnak. Hátrányuk, hogy rontják a SEO-t, biztonsági kockázatot jelentenek, lassítják az oldalt és mobilon problémás lehet a megjelenítésük. Helyettük érdemes API-kat, AJAX-ot vagy JavaScriptet használni.
A 404 hibaoldal akkor jelenik meg, ha egy felhasználó olyan oldalt próbál elérni, amely nem létezik. Fontos, hogy legyen egy egyedi 404 oldal, mert javítja a felhasználói élményt, segít a látogatók visszairányításában, és csökkentheti a visszafordulási arányt. SEO szempontból is hasznos, ha megfelelő navigációt vagy keresési lehetőséget biztosít.
Összesen 1 figyelmeztetés!
A scriptek olyan programkódok (pl. JavaScript, PHP), amelyek egy weboldalon vagy szerveren futnak, hogy dinamikus funkciókat biztosítsanak. Segítségükkel interaktív elemek, adatkezelés, automatizáció és egyedi felhasználói élmény valósítható meg.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> (356 KB)
<script src="assets/flexagon_core.js?v=1781096506"></script> (358 bytes)
<script src="assets/app.js?v=1781096506"></script> (358 bytes)
<script src="assets/3d.js?v=1781096506"></script> (358 bytes)
Összesen 1 elfogadott szabály!
A(z) https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js fájl tömörítésével 17 KB (5%) adatmennyiséget takaríthatna meg!
Összesen 5 hiba!
A stílusfájlok (pl. CSS) olyan fájlok, amelyek egy weboldal megjelenését szabályozzák. Segítségükkel beállíthatók a színek, betűtípusok, elrendezések és egyéb vizuális elemek, hogy az oldal esztétikus és felhasználóbarát legyen.
Nem találhatóak stílusfájlok!
- <body> <div style="position: sticky; top: 0; z-index: 2000; background: var(--bg);"> <header> <svg class="logo-svg" viewBox="71 80 371 355" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="grad-p1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#fff6cc" /> <stop offset="100%" stop-color="#d4af37" /> </lineargradient> <lineargradient id="grad-p2" x1="100%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#fff6cc" /> <stop offset="100%" stop-color="#b5952f" /> </lineargradient> <lineargradient id="grad-p3" x1="100%" y1="100%" x2="0%" y2="0%"> <stop offset="0%" stop-color="#d4af37" /> <stop offset="100%" stop-color="#fff6cc" /> </lineargradient> <lineargradient id="grad-p4" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#e5c365" /> <stop offset="100%" stop-color="#fff5cc" /> </lineargradient> <lineargradient id="grad-p5" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f8e58c" /> <stop offset="100%" stop-color="#8c7322" /> </lineargradient> <filter id="inner-shadow" x="-20%" y="-20%" width="140%" height="140%"> <fecomponenttransfer in="SourceAlpha"><fefunca type="linear" slope="0.6"/></fecomponenttransfer> <fegaussianblur stdDeviation="6" result="blur"/> <feoffset dx="0" dy="6"/> <fecomposite operator="in" in2="SourceAlpha"/> <fecomposite operator="arithmetic" k2="-1" k3="1" result="shadowDiff"/> <feflood flood-color="black" flood-opacity="0.6"/> <fecomposite operator="in" in2="shadowDiff"/> <fecomposite operator="over" in2="SourceGraphic"/> </filter> </defs> <g filter="url(#inner-shadow)"> <path fill="url(#grad-p1)" d="m157.55 430.46c6.53 2.36 13.55 2.86 20.44 2.74 53.67-0.05 107.33 0.03 160.99-0.04 10.65-0.05 21.23-3.53 29.51-10.29q-18.95-58.71-37.8-117.43c-57.73 41.65-115.4 83.39-173.14 125.02z"/> <path fill="url(#grad-p2)" d="m125.87 399.23c3.25 10.09 9.95 18.96 18.88 24.69 33.23-24.2 66.61-48.19 99.91-72.29-57.46-42-114.94-83.96-172.39-125.98-0.1 5.69 0.82 11.36 2.63 16.75 17.01 52.27 33.94 104.57 50.97 156.83z"/> <path fill="url(#grad-p3)" d="m74.51 211.24c33.15 24.38 66.46 48.55 99.64 72.89q33.29-101.48 66.54-202.96c-9.42 2.7-16.97 9.15-24.79 14.74q-59.08 42.93-118.18 85.86c-5.37 3.84-10.85 7.75-14.91 13.04-3.92 4.81-6.43 10.56-8.3 16.43z"/> <path fill="url(#grad-p4)" d="m216.54 196.24c71.22 0.02 142.43 0.45 213.65 0.41-3.42-4.47-7.35-8.56-11.95-11.82-44.42-32.27-88.83-64.56-133.27-96.81-8.59-6.36-19.27-9.62-29.95-9.15-12.8 39.13-25.6 78.27-38.48 117.37z"/> <path fill="url(#grad-p5)" d="m313.29 209.31c21.86 67.79 43.66 135.61 65.52 203.4 3.29-4.6 5.93-9.67 7.62-15.08q25.41-78.15 50.8-156.31c3.4-10.23 3.32-21.54-0.53-31.63-41.14-0.13-82.28-0.08-123.41-0.38z"/> </g> </svg> <div class="header-titles"> <h1>Pixe<span>Flex</span></h1> <div class="header-subtitle">FlexagonMaker by Pixe<span>.hu</span></div> </div> <div class="header-actions"> <div class="dropdown" id="langDropdown"> <button class="icon-btn" onclick="toggleDropdown("langDropdown")" data-tooltip="Language"> <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg> </button> <div class="dropdown-content"> <a href="?lang=en" style="color: var(--accent);">English</a> <a href="?lang=hu" style="">Magyar</a> <a href="?lang=de" style="">Deutsch</a> <a href="?lang=es" style="">Español</a> <a href="?lang=fr" style="">Français</a> <a href="?lang=it" style="">Italiano</a> </div> </div> <button class="icon-btn" onclick="document.getElementById("loginModal").classList.add("active"); document.body.style.overflow="hidden";"> <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="20" height="20"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> </button> <div class="dropdown" id="menuDropdown"> <button class="icon-btn" onclick="toggleDropdown("menuDropdown")"> <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg> </button> <div class="dropdown-content"> <button onclick="document.getElementById("helpModal").classList.add("active"); document.body.style.overflow="hidden"; document.getElementById("menuDropdown").classList.remove("open");">Help</button> <button onclick="document.getElementById("seoDiyModal").classList.add("active"); document.body.style.overflow="hidden"; document.getElementById("menuDropdown").classList.remove("open");">DIY Crafts & Ideas</button> <button onclick="document.getElementById("seoFaqModal").classList.add("active"); document.body.style.overflow="hidden"; document.getElementById("menuDropdown").classList.remove("open");">FAQ & Tips</button> <button onclick="document.getElementById("privacyModal").classList.add("active"); document.body.style.overflow="hidden"; document.getElementById("menuDropdown").classList.remove("open");">Policies</button> <button onclick="document.getElementById("seoContactModal").classList.add("active"); document.body.style.overflow="hidden"; document.getElementById("menuDropdown").classList.remove("open");">Contact Us</button> </div> </div> </div> </header> <div class="tabs"> <button class="tab-btn active" data-tab="editor">Editor</button> <button class="tab-btn" data-tab="preview">Preview</button> <button class="tab-btn" data-tab="fold">Fold</button> </div> </div> <div class="main-layout"> <div class="tabs-content-area" style="min-width: 0;"> <!-- EDITOR TAB --> <div class="tab-panel active" id="tab-editor"> <div class="editor-area"> <!-- Toggles moved to sidebar --> <div class="images-grid"> <!-- KÉP 1 --> <div class="image-column" id="card1"> <div class="drop-zone" id="drop1"> <input type="file" id="file1" accept="image/*" style="display:none" onchange="loadImageFile(0, this.files[0])"> <canvas id="prev1" style="display:none"></canvas> <svg class="hex-mask" preserveAspectRatio="none" viewBox="0 0 1224 1060"> <line x1="306" y1="0" x2="918" y2="1060" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <line x1="918" y1="0" x2="306" y2="1060" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <line x1="0" y1="530" x2="1224" y2="530" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <polygon points="306,0 918,0 1224,530 918,1060 306,1060 0,530" fill="none" stroke="#e5c365" stroke-width="10" class="hex-outline" /> </svg> </div> <div class="action-row"> <button class="action-btn delete-btn" data-tooltip="1. delete image" onclick="clearImage(0)"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> </button> <button class="action-btn flex-1" data-tooltip="1. select image" onclick="document.getElementById("file1").click()"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg> </button> <button class="action-btn" data-tooltip="apply filters" onclick="document.getElementById("sliders1").classList.toggle("open")"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg> </button> </div> <div class="sliders-dropdown" id="sliders1"> <div class="slider-row"><span class="slider-label bright">Light</span><input type="range" id="a1" min="0" max="510" value="255" oninput="onSlider(0,this)"><span class="slider-val" id="v_a1">0</span></div> <div class="slider-row"><span class="slider-label contr">Contr</span><input type="range" id="a2" min="-99" max="99" value="0" oninput="onSlider(0,this)"><span class="slider-val" id="v_a2">0</span></div> <div class="slider-row"><span class="slider-label satur">Satur</span><input type="range" id="a3" min="0" max="510" value="255" oninput="onSlider(0,this)"><span class="slider-val" id="v_a3">0</span></div> <hr class="slider-divider"> <div class="slider-row"><span class="slider-label red">R</span><input type="range" id="a4" min="-255" max="255" value="0" oninput="onSlider(0,this)"><span class="slider-val" id="v_a4">0</span></div> <div class="slider-row"><span class="slider-label green">G</span><input type="range" id="a5" min="-255" max="255" value="0" oninput="onSlider(0,this)"><span class="slider-val" id="v_a5">0</span></div> <div class="slider-row"><span class="slider-label blue">K</span><input type="range" id="a6" min="-255" max="255" value="0" oninput="onSlider(0,this)"><span class="slider-val" id="v_a6">0</span></div> <button class="card-reset-btn" onclick="resetEffects(0)">Reset</button> </div> </div> <!-- KÉP 2 --> <div class="image-column" id="card2"> <div class="drop-zone" id="drop2"> <input type="file" id="file2" accept="image/*" style="display:none" onchange="loadImageFile(1, this.files[0])"> <canvas id="prev2" style="display:none"></canvas> <svg class="hex-mask" preserveAspectRatio="none" viewBox="0 0 1224 1060"> <line x1="306" y1="0" x2="918" y2="1060" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <line x1="918" y1="0" x2="306" y2="1060" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <line x1="0" y1="530" x2="1224" y2="530" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <polygon points="306,0 918,0 1224,530 918,1060 306,1060 0,530" fill="none" stroke="#e5c365" stroke-width="10" class="hex-outline" /> </svg> </div> <div class="action-row"> <button class="action-btn delete-btn" data-tooltip="2. delete image" onclick="clearImage(1)"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> </button> <button class="action-btn flex-1" data-tooltip="2. select image" onclick="document.getElementById("file2").click()"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg> </button> <button class="action-btn" data-tooltip="apply filters" onclick="document.getElementById("sliders2").classList.toggle("open")"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg> </button> </div> <div class="sliders-dropdown" id="sliders2"> <div class="slider-row"><span class="slider-label bright">Light</span><input type="range" id="b1" min="0" max="510" value="255" oninput="onSlider(1,this)"><span class="slider-val" id="v_b1">0</span></div> <div class="slider-row"><span class="slider-label contr">Contr</span><input type="range" id="b2" min="-99" max="99" value="0" oninput="onSlider(1,this)"><span class="slider-val" id="v_b2">0</span></div> <div class="slider-row"><span class="slider-label satur">Satur</span><input type="range" id="b3" min="0" max="510" value="255" oninput="onSlider(1,this)"><span class="slider-val" id="v_b3">0</span></div> <hr class="slider-divider"> <div class="slider-row"><span class="slider-label red">R</span><input type="range" id="b4" min="-255" max="255" value="0" oninput="onSlider(1,this)"><span class="slider-val" id="v_b4">0</span></div> <div class="slider-row"><span class="slider-label green">G</span><input type="range" id="b5" min="-255" max="255" value="0" oninput="onSlider(1,this)"><span class="slider-val" id="v_b5">0</span></div> <div class="slider-row"><span class="slider-label blue">K</span><input type="range" id="b6" min="-255" max="255" value="0" oninput="onSlider(1,this)"><span class="slider-val" id="v_b6">0</span></div> <button class="card-reset-btn" onclick="resetEffects(1)">Reset</button> </div> </div> <!-- KÉP 3 --> <div class="image-column" id="card3" style="position: relative;"> <div style="position: absolute; inset: 0; z-index: 50; cursor: pointer;" onclick="document.getElementById("pricingModal").classList.add("active"); document.body.style.overflow="hidden";" title="Unlock PRO"></div> <div class="drop-zone" id="drop3"> <input type="file" id="file3" accept="image/*" style="display:none" onchange="loadImageFile(2, this.files[0])"> <canvas id="prev3" style="display:none"></canvas> <svg class="hex-mask" preserveAspectRatio="none" viewBox="0 0 1224 1060"> <line x1="306" y1="0" x2="918" y2="1060" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <line x1="918" y1="0" x2="306" y2="1060" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <line x1="0" y1="530" x2="1224" y2="530" stroke="#e5c365" stroke-width="6" stroke-dasharray="10, 10" opacity="0.3" /> <polygon points="306,0 918,0 1224,530 918,1060 306,1060 0,530" fill="none" stroke="#e5c365" stroke-width="10" class="hex-outline" /> </svg> </div> <div class="action-row"> <button class="action-btn delete-btn" data-tooltip="3. delete image" onclick="document.getElementById("pricingModal").classList.add("active"); document.body.style.overflow="hidden";"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> </button> <button class="action-btn flex-1" data-tooltip="3. select image" onclick="document.getElementById("pricingModal").classList.add("active"); document.body.style.overflow="hidden";"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg> </button> <button class="action-btn" data-tooltip="apply filters" onclick="document.getElementById("pricingModal").classList.add("active"); document.body.style.overflow="hidden";"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg> </button> </div> <div class="sliders-dropdown" id="sliders3"> <div class="slider-row"><span class="slider-label bright">Light</span><input type="range" id="c1" min="0" max="510" value="255" oninput="onSlider(2,this)"><span class="slider-val" id="v_c1">0</span></div> <div class="slider-row"><span class="slider-label contr">Contr</span><input type="range" id="c2" min="-99" max="99" value="0" oninput="onSlider(2,this)"><span class="slider-val" id="v_c2">0</span></div> <div class="slider-row"><span class="slider-label satur">Satur</span><input type="range" id="c3" min="0" max="510" value="255" oninput="onSlider(2,this)"><span class="slider-val" id="v_c3">0</span></div> <hr class="slider-divider"> <div class="slider-row"><span class="slider-label red">R</span><input type="range" id="c4" min="-255" max="255" value="0" oninput="onSlider(2,this)"><span class="slider-val" id="v_c4">0</span></div> <div class="slider-row"><span class="slider-label green">G</span><input type="range" id="c5" min="-255" max="255" value="0" oninput="onSlider(2,this)"><span class="slider-val" id="v_c5">0</span></div> <div class="slider-row"><span class="slider-label blue">K</span><input type="range" id="c6" min="-255" max="255" value="0" oninput="onSlider(2,this)"><span class="slider-val" id="v_c6">0</span></div> <button class="card-reset-btn" onclick="document.getElementById("pricingModal").classList.add("active"); document.body.style.overflow="hidden";">Reset</button> </div> </div> </div><!-- /images-grid --> <!-- EXTRA SEO CONTENT SECTION --> <div id="seoSection" class="seo-articles-container" style="max-width: 1224px; margin: 48px auto 16px; padding: 32px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.25); clear: both;"> <h2 style="font-family: "Syne", sans-serif; font-size: 1.6rem; color: var(--accent); margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em;"> Turn Your Photos Into a Printable, Interactive Origami Puzzle! </h2> <p style="font-size: 0.85rem; color: var(--text); margin-bottom: 24px; line-height: 1.6;"> Welcome to FoldMyPhotos, the world's ultimate tool to convert your favorite pictures into a mesmerizing 3D trihexaflexagon paper trick puzzle. Designing a custom folding printout has never been this seamless and fast. </p> <div class="seo-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;"> <div style="background: var(--surface2); padding: 20px; border-radius: 8px; border: 1px solid rgba(229, 195, 101, 0.15);"> <h3 style="font-family: "Syne", sans-serif; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;"> <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--accent);"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg> What is a Trihexaflexagon? </h3> <p style="font-size: 0.78rem; text-align: justify; line-height: 1.5; color: var(--text-dim);"> A trihexaflexagon is a magical, flat hexagon folded from a single strip of paper. By pinching and flexing the corners, it reveals three hidden faces. With our generator, you can map your own family pictures, memories, artwork, or corporate promotional designs onto these faces. As you fold and play, your pictures cycle and transition dynamically right before your eyes! </p> </div> <div style="background: var(--surface2); padding: 20px; border-radius: 8px; border: 1px solid rgba(229, 195, 101, 0.15);"> <h3 style="font-family: "Syne", sans-serif; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;"> <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--accent);"><path d="M5 13l4 4L19 7"/></svg> Why Choose FoldMyPhotos? </h3> <ul style="font-size: 0.75rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--text-dim);"> <li><strong>100% Privacy-First:</strong> All image processing, scaling, and slicing are performed locally in your browser. No files are uploaded to any server.</li> <li><strong>Professional Output:</strong> Generates crisp 300 DPI templates perfectly scaled to standard printer settings.</li> <li><strong>3D Interactive Fold:</strong> No complex origami instruction diagrams! Our physical 3D animation guides your hands with zero confusion.</li> <li><strong>Memorable gift:</strong> Great for customized wedding cards, birthday gifts, educational school craft hobbies, or unique promotional business items.</li> </ul> </div> </div> <h3 style="font-family: "Syne", sans-serif; font-size: 1.2rem; color: var(--text); margin-bottom: 16px; border-left: 3px solid var(--accent); padding-left: 10px;"> How to Design and Assemble Your Flexagon </h3> <div class="seo-steps-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> <div style="padding: 12px; border-bottom: 1px solid var(--border);"> <h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">1. Upload Your Pictures</h4> <p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">Select three of your favorite photos. In Demo mode, you can upload up to two photos to preview, while PRO mode unlocks all three photos for the complete paper origami puzzle experience.</p> </div> <div style="padding: 12px; border-bottom: 1px solid var(--border);"> <h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">2. Fine-tune Image Effects</h4> <p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">Adjust key values like brightness, contrast, and saturation. You can even customize RGB channels independently using our local editor filters to create gorgeous, harmonious colors.</p> </div> <div style="padding: 12px; border-bottom: 1px solid var(--border);"> <h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">3. Generate and Export to PDF / JPG</h4> <p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">Choose your template cut lines and line colors (black or white), then click Generate. Download your high-resolution (300 DPI), print-ready A4 template in JPG or PDF format instantly.</p> </div> <div style="padding: 12px; border-bottom: 1px solid var(--border);"> <h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">4. Cut, Glue and Fold with 3D Guide</h4> <p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">Print the template on standard A4 paper. Follow our interactive 3D folding simulator overlay in the "Fold" tab to easily assemble your puzzle with pristine precision. Apply glue to designated zones, and enjoy folding!</p> </div> </div> </div> <style> @media(max-width: 768px) { .seo-grid, .seo-steps-grid { grid-template-columns: 1fr !important; } } </style> </div><!-- /editor-area --> </div><!-- /tab-editor --> <!-- PREVIEW TAB --> <div class="tab-panel" id="tab-preview"> <div class="preview-tab-area"> <canvas id="fullPreview" style="display:none;"></canvas> <p id="noPreview" style="color:var(--text-dim);font-size:0.8rem;text-align:center;padding:60px 0;">Generate the flexagon in the Editor tab first.</p> </div> </div> <!-- FOLD TAB --> <div class="tab-panel" id="tab-fold"> <div class="editor-area fold-editor-area"> <div class="canvas3d-wrapper"> <canvas id="canvas3d" style="width: 100%; height: 100%; display: block;"></canvas> <!-- DEBUG KÉPERNYŐ OVERLAY (KIKOMMENTELVE) <div id="debugLayer" style="position: absolute; top: 12px; right: 12px; background: rgba(14,14,20,0.85); padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.72rem; min-width: 290px; z-index: 10; pointer-events: none; line-height: 1.5; color: #fff;"> <div style="color: var(--accent); font-weight: bold; margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; display: flex; align-items: center; gap: 6px;"> <span style="display: inline-block; width: 8px; height: 8px; background: #ff5555; border-radius: 50%;" id="debugStatusPulse"></span> 3D MODELÁCIÓS LOGOK (DEBUG) </div> <div> <span style="color: var(--text-dim);">Fázis kód:</span> <span id="dbgPhase" style="color: #ffb86c; font-weight: bold;">0 - Várakozás</span> </div> <div> <span style="color: var(--text-dim);">Fázis Név:</span> <span id="dbgPhaseName" style="color: #fff;">Alapállapot (Nyitott papír)</span> </div> <div> <span style="color: var(--text-dim);">Aktív Parancs:</span> <span id="dbgCommand" style="font-family: monospace; color: var(--accent2); background: rgba(0,0,0,0.4); padding: 2px 4px; border-radius: 2px;">n/a</span> </div> <div style="margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 0.65rem; color: var(--text-dim);"> <span>Geometria:</span> <span id="dbgCounts" style="color: #50fa7b;">18 pont / 20 háromszög</span> </div> </div> --> </div> </div> </div> </div><!-- /tabs-content-area --> <!-- SIDEBAR --> <div class="sidebar"> <div class="editor-preview-only"> <div class="progress-wrap" id="progressWrap"> <div class="progress-label" id="progressLabel">Processing...</div> <div class="progress-bar-bg"><div class="progress-bar-fill" id="progressFill"></div></div> </div> <div class="sidebar-options"> <div class="toggle-group" id="lineColorGroup"> <span class="toggle-label" style="flex:1">Line color</span> <select id="lineColor" class="color-select"> <option value="#000000">Black</option> <option value="#ffffff">White</option> </select> </div> <div class="toggle-group"> <span class="toggle-label">Cut lines</span> <label class="toggle"><input type="checkbox" id="optLines" checked><span class="toggle-slider"></span></label> </div> </div> <button class="generate-btn" id="generateBtn" onclick="generateFlexagon()"> <span class="btn-text">▶ Generate</span> <div class="spinner"></div> </button> <div id="statusMsg" class="status-msg"></div> <div class="download-group"> <a class="dl-btn" id="dlJpg" href="#" download="flexagon_A4.jpg" style="display:none"> <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Save JPG (A4) </a> <a class="dl-btn" id="dlPdf" href="#" style="display:none" onclick="downloadPDF(event)"> <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Save PDF (A4) </a> <button class="dl-btn" id="printBtn" style="display:none" onclick="printA4()"> <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg> Print </button> </div> <div class="info-section"> <div class="info-title">Status</div> <div class="info-row"><span class="info-key">1. kép</span><span class="info-val warn" id="st1">Missing</span></div> <div class="info-row"><span class="info-key">2. kép</span><span class="info-val warn" id="st2">Missing</span></div> <div class="info-row"><span class="info-key">3. kép</span><span class="info-val warn" id="st3">Missing</span></div> <div class="info-row"><span class="info-key">Output</span><span class="info-val" id="stOut">2480 × 3508 px (A4)</span></div> <div class="info-row"><span class="info-key">Resolution</span><span class="info-val">300 DPI</span></div> </div> </div> <div class="fold-only"> <div class="sidebar-options"> <h4 style="font-family: "Syne", sans-serif; font-size: 0.85rem; margin-bottom: 8px; color: var(--text);">Controls</h4> <button id="btnPlay3d" class="generate-btn" style="margin-bottom: 10px;">Play / Pause</button> <button id="btnReset3d" class="dl-btn" style="justify-content: center;">Reset</button> </div> </div> </div><!-- /sidebar --> </div><!-- /main-layout --> <script src="assets/flexagon_core.js?v=1781096506"></script> <script src="assets/app.js?v=1781096506"></script> <script src="assets/3d.js?v=1781096506"></script> <!-- MODAL --> <div class="modal-overlay" id="helpModal"> <div class="modal-content" style="max-width: 500px;"> <h3>Help</h3> <div style="margin-bottom:15px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">What is this service?</h4> <p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">Design your own printable, foldable trick puzzle game or promotional gift from your photos.</p> </div> </div> <div style="margin-bottom:15px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">How to use</h4> <p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">Upload, edit and apply filters to your photos. The system generates 2 printable flexagon templates. We provide interactive 3D assistance for assembly.</p> </div> </div> <div style="margin-bottom:15px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Features (Demo vs PRO)</h4> <ul style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4; padding-left:14px; list-style:circle;"> <li>Demo: You can upload up to 2 photos.</li> <li>PRO: You can upload 3 photos for the full experience.</li> </ul> </div> </div> <div style="margin-bottom:20px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Subscription</h4> <p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">PRO requires registration. Purchase access for 7 days or 30 days via secure, one-time (non-recurring) Stripe payment.</p> </div> </div> <div style="text-align: right; margin-top: 20px;"> <button class="modal-close" onclick="document.getElementById("helpModal").classList.remove("active"); document.body.style.overflow="";">Close</button> </div> </div> </div> <div class="modal-overlay" id="privacyModal"> <div class="modal-content" style="max-width: 500px;"> <h3>Privacy Policy</h3> <div style="margin-bottom:15px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"/></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Local Processing</h4> <p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">Uploaded images are not sent to any server; all processing happens locally in your browser.</p> </div> </div> <div style="margin-bottom:15px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Secure Payments</h4> <p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">We do not store payment information. All payments are handled via secure, one-time Stripe checkout.</p> </div> </div> <div style="margin-bottom:20px; display:flex; gap:10px;"> <svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg> <div> <h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">Essential Cookies</h4> <p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">We only use essential cookies (e.g., language preference and session handling) to ensure proper functioning.</p> </div> </div> <div style="text-align: right; margin-top: 20px;"> <button class="modal-close" onclick="document.getElementById("privacyModal").classList.remove("active"); document.body.style.overflow="";">Close</button> </div> </div> </div> <!-- AUTH & PRICING MODALS --> <style> .auth-input { width: 100%; padding: 10px; margin-bottom: 15px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-family: 'DM Mono', monospace; font-size: 0.8rem; } .auth-input:focus { border-color: var(--accent); outline: none; } .auth-btn { width: 100%; background: var(--accent); color: #000; font-family: 'Syne', sans-serif; font-weight: bold; padding: 12px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .auth-btn:hover { background: var(--accent2); } .pricing-card { border: 1px solid var(--border); border-radius: 8px; padding: 20px; text-align: center; margin-bottom: 15px; background: var(--surface2); transition: all 0.3s; position: relative; overflow: hidden; } .pricing-card.popular { border-color: var(--accent); } .pricing-card.popular::before { content: 'BEST VALUE'; position: absolute; top: 10px; right: -30px; background: var(--accent); color: #000; font-size: 0.6rem; font-weight: bold; padding: 4px 30px; transform: rotate(45deg); font-family: 'Syne', sans-serif; } .pricing-card:hover { border-color: var(--accent); box-shadow: 0 4px 15px rgba(229,195,101,0.15); transform: translateY(-2px); } .price { font-size: 1.8rem; font-family: 'Syne', sans-serif; font-weight: bold; color: var(--accent); margin: 10px 0; } .pricing-btn { display: inline-block; width: 100%; background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 10px; border-radius: 6px; cursor: pointer; text-decoration: none; font-family: 'Syne', sans-serif; font-weight: bold; transition: all 0.2s; } .pricing-btn:hover { background: var(--accent); color: #000; } .toggle-auth { color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 0.75rem; text-align: center; display: block; margin-top: 10px; } .error-msg { color: var(--accent3); background: rgba(255,107,71,0.1); padding: 8px; border-radius: 4px; font-size: 0.75rem; margin-bottom: 15px; border: 1px solid var(--accent3); } </style> <!-- Login / Reg Modal --> <div class="modal-overlay " id="loginModal"> <div class="modal-content" style="max-width: 400px;"> <h3 id="authTitle" style="text-align: center; font-size: 1.4rem;">Login</h3> <form method="POST" action="?" id="authForm"> <input type="hidden" name="csrf_token" value="958440f15cb24156b04371251963dd8b049842033e22b32eb1d76011984a9dd7"> <input type="hidden" name="action" id="authAction" value="login"> <input type="email" name="email" id="authEmail" class="auth-input" placeholder="Email Address" required> <input type="password" name="password" id="authPassword" class="auth-input" placeholder="Password (min 6 chars)" required minlength="6"> <button type="submit" class="auth-btn" id="authSubmit">Sign In</button> </form> <div class="toggle-auth" id="toggleAuthRegisterBtn" onclick="toggleAuthMode()">Don't have an account? Register here.</div> <div class="toggle-auth" id="toggleAuthForgotBtn" onclick="toggleForgotMode()" style="color:var(--text-dim);">Elfelejtett jelszó?</div> <div style="text-align: center; margin-top: 20px;"> <button type="button" class="modal-close" onclick="document.getElementById("loginModal").classList.remove("active"); const err = document.querySelector("#loginModal .error-msg"); if(err) err.style.display="none"; document.getElementById("loginModal").querySelectorAll("input:not([type=hidden])").forEach(i => i.value=''); document.body.style.overflow='';">Bezárás</button> </div> </div> </div> <script> let authMode = 'login'; function toggleForgotMode() { authMode = 'forgot'; document.getElementById('authTitle').innerText = 'Jelszó visszaállítása'; document.getElementById('authAction').value = 'forgot_password'; document.getElementById('authPassword').style.display = 'none'; document.getElementById('authPassword').removeAttribute('required'); document.getElementById('authSubmit').innerText = 'Küldés'; document.getElementById('toggleAuthRegisterBtn').style.display = 'none'; document.getElementById('toggleAuthForgotBtn').innerText = 'Vissza a bejelentkezéshez'; document.getElementById('toggleAuthForgotBtn').onclick = () => { authMode = 'register'; toggleAuthMode(); toggleAuthMode(); }; } </script> <!-- Account Modal --> <div class="modal-overlay" id="accountModal"> <div class="modal-content" style="max-width: 400px; text-align: center;"> <h3>Your Account</h3> <div style="margin: 20px 0; padding: 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;"> <svg width="48" height="48" fill="none" stroke="var(--accent)" stroke-width="2" viewBox="0 0 24 24" style="margin-bottom: 10px;"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> <div style="font-family: "Syne", sans-serif; font-size: 1.1rem; color: var(--text); margin-bottom: 5px;"> </div> <div style="display:inline-block; background: rgba(255,255,255,0.1); color: var(--text-dim); padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; border: 1px solid var(--border); margin-bottom: 10px;">FREE DEMO</div> <div style="margin-top: 10px;"> <button class="pricing-btn" onclick="document.getElementById("accountModal").classList.remove("active"); document.getElementById("pricingModal").classList.add("active");" style="width: auto; padding: 6px 15px; font-size: 0.75rem;">UPGRADE TO PRO</button> </div> </div> <form method="POST" action="?"> <input type="hidden" name="csrf_token" value="958440f15cb24156b04371251963dd8b049842033e22b32eb1d76011984a9dd7"> <input type="hidden" name="action" value="logout"> <button type="submit" class="auth-btn" style="background: transparent; border: 1px solid var(--border); color: var(--text);">Log Out</button> </form> <div style="text-align: center; margin-top: 10px;"> <button class="modal-close" onclick="document.getElementById("accountModal").classList.remove("active"); document.body.style.overflow="";">Close</button> </div> </div> </div> <!-- Pricing/Checkout Modal --> <div class="modal-overlay" id="pricingModal"> <div class="modal-content" style="max-width: 600px;"> <h3 style="text-align: center; font-size: 1.5rem; margin-bottom: 20px;">Upgrade to PRO</h3> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;"> <!-- 1 Month --> <div class="pricing-card"> <svg width="32" height="32" fill="none" stroke="var(--text-dim)" stroke-width="2" viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg> <h4 style="font-family: "Syne", sans-serif; margin-top: 10px;"><span style="font-size:1.4em;" class="price">7</span> Days Access</h4> <div class="price">$5.00</div> <p style="font-size: 0.75rem; color: var(--text-dim); margin-bottom: 20px; line-height: 1.4;">One-time payment.<br>No recurring billing.</p> </div> <!-- 1 Year --> <div class="pricing-card popular"> <svg width="32" height="32" fill="none" stroke="var(--accent)" stroke-width="2" viewBox="0 0 24 24"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg> <h4 style="font-family: "Syne", sans-serif; margin-top: 10px;"><span style="font-size:1.5em;" class="price">30</span> Days Access</h4> <div class="price">$15.00</div> <p style="font-size: 0.75rem; color: var(--text-dim); margin-bottom: 20px; line-height: 1.4;">One-time payment.<br>No recurring billing.</p> </div> </div> <div style="text-align: center; margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--border);"> <div style="display: flex; gap: 10px; justify-content: center;"> <button class="pricing-btn" style="width: auto; padding: 10px 20px; border-color: var(--border); color: var(--text);" onclick="document.getElementById("pricingModal").classList.remove("active"); document.getElementById("loginModal").classList.add("active"); toggleAuthMode("login");">Login</button> <button class="pricing-btn" style="width: auto; padding: 10px 20px;" onclick="document.getElementById("pricingModal").classList.remove("active"); document.getElementById("loginModal").classList.add("active"); toggleAuthMode("register");">Create Free Account</button> <button class="pricing-btn" style="width: auto; padding: 10px 20px; border-color: var(--border); color: var(--text);" onclick="document.getElementById("pricingModal").classList.remove("active"); document.body.style.overflow="";">Close</button> </div> </div> </div> </div> <!-- Feedback Modals (Success / Error) --> <script> function toggleAuthMode(forceMode) { const currentMode = document.getElementById('authAction').value; const newMode = (typeof forceMode === 'string') ? forceMode : (currentMode === 'login' ? 'register' : 'login'); document.getElementById('authAction').value = newMode; document.getElementById('authTitle').innerText = newMode === 'register' ? 'Create Account' : 'Login'; document.getElementById('authSubmit').innerText = newMode === 'register' ? 'Register' : 'Sign In'; const regBtn = document.getElementById('toggleAuthRegisterBtn'); if(regBtn) { regBtn.style.display = 'block'; regBtn.innerText = newMode === 'register' ? 'Already have an account? Login here.' : 'Don\'t have an account? Register here.'; } const pwd = document.getElementById('authPassword'); if(pwd) { pwd.style.display = 'block'; pwd.setAttribute('required', 'required'); } const forgotBtn = document.getElementById('toggleAuthForgotBtn'); if(forgotBtn) { forgotBtn.innerText = 'Elfelejtett jelszó?'; forgotBtn.onclick = toggleForgotMode; } const errMsg = document.querySelector('#loginModal .error-msg'); if (errMsg) errMsg.style.display = 'none'; } </script> <script> window.toggleDropdown = function(id) { const el = document.getElementById(id); const wasOpen = el.classList.contains('open'); document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open')); if (!wasOpen) { el.classList.add('open'); } }; document.addEventListener('click', function(e) { if (!e.target.closest('.dropdown')) { document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open')); } }); window.downloadPDF = function(e) { e.preventDefault(); if (!state.generated) return; const btn = document.getElementById('dlPdf'); const ogText = btn.innerHTML; btn.innerHTML = 'Generálás...'; setTimeout(() => { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4" }); const imgData = state.generated.toDataURL("image/jpeg", 0.95); pdf.addImage(imgData, 'JPEG', 0, 0, 210, 297); pdf.save("flexagon_A4.pdf"); btn.innerHTML = ogText; }, 50); }; window.printA4 = function() { if (!state.generated) return; const dataUrl = state.generated.toDataURL('image/jpeg', 0.98); const win = window.open(''); win.document.write(`<html><head><title>Flexagon Nyomtatása</title><style>@page { size: A4 portrait; margin: 0; } body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; }</style></head><body><img src="${dataUrl}" style="max-width: 100vw; max-height: 100vh; width: 100%; object-fit: contain;" onload="window.print();"></body>
Összesen 6 elfogadott szabály!
Összesen 1 hiba!
A kulcsszavak olyan szavak vagy kifejezések, amelyek egy tartalom fő témáját jelölik. Segítségükkel a keresőmotorok és a felhasználók könnyebben megtalálják az adott oldalt vagy cikket a releváns keresések során.
| Kulcsszó | db | Title | Descripton | Heading |
| your | 21 | |||
| and | 21 | |||
| the | 16 | |||
| paper | 12 | |||
| photos | 9 | |||
| for | 9 | |||
| our | 8 | |||
| fold | 7 | |||
| puzzle | 7 | |||
| you | 7 | |||
| Kulcsszó (2 szavas) | db | Title | Descripton | Heading |
| you can | 3 | |||
| one time | 3 | |||
| 0 contr | 2 | |||
| 0 satur | 2 | |||
| 0 r | 2 | |||
| 0 g | 2 | |||
| 0 k | 2 | |||
| 0 reset | 2 | |||
| a trihexaflexagon | 2 | |||
| to any | 2 | |||
| Kulcsszó (3 szavas) | db | Title | Descripton | Heading |
| to any server | 2 | |||
| you can upload | 2 | |||
| time payment no | 2 | |||
| pixe flex flexagonmaker | 1 | |||
| by pixe hu | 1 | |||
| english magyar deutsch | 1 | |||
| español français italiano | 1 | |||
| help diy crafts | 1 | |||
| tips policies contact | 1 | |||
| us editor preview | 1 |
Összesen 1 figyelmeztetés!
Összesen 1 elfogadott szabály!
Összesen 2 elfogadott szabály!
- <a href="?lang=en" style="color: var(--accent);">
- <a href="?lang=hu" style="">
- <a href="?lang=de" style="">
- <a href="?lang=es" style="">
- <a href="?lang=fr" style="">
- <a href="?lang=it" style="">
- <a class="dl-btn" id="dlJpg" href="#" download="flexagon_A4.jpg" style="display:none">
- <a class="dl-btn" id="dlPdf" href="#" style="display:none" onclick="downloadPDF(event)">
Összesen 4 hiba!
Az inline CSS olyan stílus, amelyet közvetlenül egy HTML elem style attribútumában határozunk meg. Hátránya, hogy nehezíti a kód karbantarthatóságát, rontja a teljesítményt, és megnehezíti a stílusok egységes kezelését. Érdemes helyette külső vagy belső CSS fájlokat használni.
<div style="position: sticky; top: 0; z-index: 2000; background: var(--bg);">
<a href="?lang=en" style="color: var(--accent);">
<div class="tabs-content-area" style="min-width: 0;">
<input type="file" id="file1" accept="image/*" style="display:none" onchange="loadImageFile(0, this.files[0])">
<canvas id="prev1" style="display:none">
<input type="file" id="file2" accept="image/*" style="display:none" onchange="loadImageFile(1, this.files[0])">
<canvas id="prev2" style="display:none">
<div class="image-column" id="card3" style="position: relative;">
<div style="position: absolute; inset: 0; z-index: 50; cursor: pointer;" onclick="document.getElementById("pricingModal").classList.add("active"); document.body.style.overflow="hidden";" title="Unlock PRO">
<input type="file" id="file3" accept="image/*" style="display:none" onchange="loadImageFile(2, this.files[0])">
<canvas id="prev3" style="display:none">
<div id="seoSection" class="seo-articles-container" style="max-width: 1224px; margin: 48px auto 16px; padding: 32px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.25); clear: both;">
<h2 style="font-family: "Syne", sans-serif; font-size: 1.6rem; color: var(--accent); margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em;">
<p style="font-size: 0.85rem; color: var(--text); margin-bottom: 24px; line-height: 1.6;">
<div class="seo-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;">
<div style="background: var(--surface2); padding: 20px; border-radius: 8px; border: 1px solid rgba(229, 195, 101, 0.15);">
<h3 style="font-family: "Syne", sans-serif; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--accent);">
<p style="font-size: 0.78rem; text-align: justify; line-height: 1.5; color: var(--text-dim);">
<div style="background: var(--surface2); padding: 20px; border-radius: 8px; border: 1px solid rgba(229, 195, 101, 0.15);">
<h3 style="font-family: "Syne", sans-serif; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--accent);">
<ul style="font-size: 0.75rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--text-dim);">
<h3 style="font-family: "Syne", sans-serif; font-size: 1.2rem; color: var(--text); margin-bottom: 16px; border-left: 3px solid var(--accent); padding-left: 10px;">
<div class="seo-steps-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
<div style="padding: 12px; border-bottom: 1px solid var(--border);">
<h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">
<p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">
<div style="padding: 12px; border-bottom: 1px solid var(--border);">
<h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">
<p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">
<div style="padding: 12px; border-bottom: 1px solid var(--border);">
<h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">
<p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">
<div style="padding: 12px; border-bottom: 1px solid var(--border);">
<h4 style="font-size: 0.82rem; color: var(--accent); margin-bottom: 4px;">
<p style="font-size: 0.75rem; line-height: 1.4; color: var(--text-dim);">
<canvas id="fullPreview" style="display:none;">
<p id="noPreview" style="color:var(--text-dim);font-size:0.8rem;text-align:center;padding:60px 0;">
<canvas id="canvas3d" style="width: 100%; height: 100%; display: block;">
<!-- DEBUG KÉPERNYŐ OVERLAY (KIKOMMENTELVE) <div id="debugLayer" style="position: absolute; top: 12px; right: 12px; background: rgba(14,14,20,0.85); padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.72rem; min-width: 290px; z-index: 10; pointer-events: none; line-height: 1.5; color: #fff;">
<div style="color: var(--accent); font-weight: bold; margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; display: flex; align-items: center; gap: 6px;">
<span style="display: inline-block; width: 8px; height: 8px; background: #ff5555; border-radius: 50%;" id="debugStatusPulse">
<span style="color: var(--text-dim);">
<span id="dbgPhase" style="color: #ffb86c; font-weight: bold;">
<span style="color: var(--text-dim);">
<span id="dbgPhaseName" style="color: #fff;">
<span style="color: var(--text-dim);">
<span id="dbgCommand" style="font-family: monospace; color: var(--accent2); background: rgba(0,0,0,0.4); padding: 2px 4px; border-radius: 2px;">
<div style="margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 0.65rem; color: var(--text-dim);">
<span id="dbgCounts" style="color: #50fa7b;">
<span class="toggle-label" style="flex:1">
<a class="dl-btn" id="dlJpg" href="#" download="flexagon_A4.jpg" style="display:none">
<a class="dl-btn" id="dlPdf" href="#" style="display:none" onclick="downloadPDF(event)">
<button class="dl-btn" id="printBtn" style="display:none" onclick="printA4()">
<h4 style="font-family: "Syne", sans-serif; font-size: 0.85rem; margin-bottom: 8px; color: var(--text);">
<button id="btnPlay3d" class="generate-btn" style="margin-bottom: 10px;">
<button id="btnReset3d" class="dl-btn" style="justify-content: center;">
<div class="modal-content" style="max-width: 500px;">
<div style="margin-bottom:15px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="margin-bottom:15px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="margin-bottom:15px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<ul style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4; padding-left:14px; list-style:circle;">
<div style="margin-bottom:20px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="text-align: right; margin-top: 20px;">
<div class="modal-content" style="max-width: 500px;">
<div style="margin-bottom:15px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="margin-bottom:15px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="margin-bottom:20px; display:flex; gap:10px;">
<svg style="flex-shrink:0; color:var(--accent)" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<h4 style="color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px; font-size:0.9rem;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="text-align: right; margin-top: 20px;">
<div class="modal-content" style="max-width: 400px;">
<h3 id="authTitle" style="text-align: center; font-size: 1.4rem;">
<div class="toggle-auth" id="toggleAuthForgotBtn" onclick="toggleForgotMode()" style="color:var(--text-dim);">
<div style="text-align: center; margin-top: 20px;">
<div class="modal-content" style="max-width: 400px; text-align: center;">
<div style="margin: 20px 0; padding: 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;">
<svg width="48" height="48" fill="none" stroke="var(--accent)" stroke-width="2" viewBox="0 0 24 24" style="margin-bottom: 10px;">
<div style="font-family: "Syne", sans-serif; font-size: 1.1rem; color: var(--text); margin-bottom: 5px;">
<div style="display:inline-block; background: rgba(255,255,255,0.1); color: var(--text-dim); padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; border: 1px solid var(--border); margin-bottom: 10px;">
<div style="margin-top: 10px;">
<button class="pricing-btn" onclick="document.getElementById("accountModal").classList.remove("active"); document.getElementById("pricingModal").classList.add("active");" style="width: auto; padding: 6px 15px; font-size: 0.75rem;">
<button type="submit" class="auth-btn" style="background: transparent; border: 1px solid var(--border); color: var(--text);">
<div style="text-align: center; margin-top: 10px;">
<div class="modal-content" style="max-width: 600px;">
<h3 style="text-align: center; font-size: 1.5rem; margin-bottom: 20px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<h4 style="font-family: "Syne", sans-serif; margin-top: 10px;">
<span style="font-size:1.4em;" class="price">
<p style="font-size: 0.75rem; color: var(--text-dim); margin-bottom: 20px; line-height: 1.4;">
<h4 style="font-family: "Syne", sans-serif; margin-top: 10px;">
<span style="font-size:1.5em;" class="price">
<p style="font-size: 0.75rem; color: var(--text-dim); margin-bottom: 20px; line-height: 1.4;">
<div style="text-align: center; margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--border);">
<div style="display: flex; gap: 10px; justify-content: center;">
<button class="pricing-btn" style="width: auto; padding: 10px 20px; border-color: var(--border); color: var(--text);" onclick="document.getElementById("pricingModal").classList.remove("active"); document.getElementById("loginModal").classList.add("active"); toggleAuthMode("login");">
<button class="pricing-btn" style="width: auto; padding: 10px 20px;" onclick="document.getElementById("pricingModal").classList.remove("active"); document.getElementById("loginModal").classList.add("active"); toggleAuthMode("register");">
<button class="pricing-btn" style="width: auto; padding: 10px 20px; border-color: var(--border); color: var(--text);" onclick="document.getElementById("pricingModal").classList.remove("active"); document.body.style.overflow="";">
<img src="${dataUrl}" style="max-width: 100vw; max-height: 100vh; width: 100%; object-fit: contain;" onload="window.print();">
<span style="color:red;">
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-right:5px;">
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-right:5px;">
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-right:5px;">
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-right:5px;">
<div class="modal-content" style="max-width: 580px; text-align: left;">
<h3 style="font-family:"Syne",sans-serif; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px;">
<p style="font-size:0.8rem; color:var(--text); line-height:1.5; margin-bottom:16px;">
<div style="display:flex; flex-direction:column; gap:14px; max-height: 380px; overflow-y:auto; padding-right:6px;">
<div style="background:var(--surface2); padding:12px; border-radius:6px; border-left:3px solid var(--accent);">
<h4 style="font-size:0.85rem; color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="background:var(--surface2); padding:12px; border-radius:6px; border-left:3px solid var(--accent);">
<h4 style="font-size:0.85rem; color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="background:var(--surface2); padding:12px; border-radius:6px; border-left:3px solid var(--accent);">
<h4 style="font-size:0.85rem; color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="background:var(--surface2); padding:12px; border-radius:6px; border-left:3px solid var(--accent);">
<h4 style="font-size:0.85rem; color:var(--text); font-family:"Syne",sans-serif; margin-bottom:4px;">
<p style="font-size:0.75rem; color:var(--text-dim); margin-bottom:0; line-height:1.4;">
<div style="text-align: right; margin-top: 20px; border-top:1px solid var(--border); padding-top:12px;">
<div class="modal-content" style="max-width: 580px; text-align: left;">
<h3 style="font-family:"Syne",sans-serif; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px;">
<div style="display:flex; flex-direction:column; gap:14px; max-height:400px; overflow-y:auto; padding-right:6px;">
<h4 style="font-size:0.85rem; color:var(--accent); margin-bottom:4px; display:flex; gap:6px; align-items:start;">
<span style="background:var(--accent); color:#000; font-size:0.65rem; padding:1px 5px; border-radius:3px; margin-top:2px; flex-shrink:0;">
<p style="font-size:0.76rem; color:var(--text-dim); line-height:1.4; padding-left:22px; margin-bottom:0;">
<div style="border-top: 1px solid var(--border); padding-top:10px;">
<h4 style="font-size:0.85rem; color:var(--accent); margin-bottom:4px; display:flex; gap:6px; align-items:start;">
<span style="background:var(--accent); color:#000; font-size:0.65rem; padding:1px 5px; border-radius:3px; margin-top:2px; flex-shrink:0;">
<p style="font-size:0.76rem; color:var(--text-dim); line-height:1.4; padding-left:22px; margin-bottom:0;">
<div style="border-top: 1px solid var(--border); padding-top:10px;">
<h4 style="font-size:0.85rem; color:var(--accent); margin-bottom:4px; display:flex; gap:6px; align-items:start;">
<span style="background:var(--accent); color:#000; font-size:0.65rem; padding:1px 5px; border-radius:3px; margin-top:2px; flex-shrink:0;">
<p style="font-size:0.76rem; color:var(--text-dim); line-height:1.4; padding-left:22px; margin-bottom:0;">
<div style="border-top: 1px solid var(--border); padding-top:10px;">
<h4 style="font-size:0.85rem; color:var(--accent); margin-bottom:4px; display:flex; gap:6px; align-items:start;">
<span style="background:var(--accent); color:#000; font-size:0.65rem; padding:1px 5px; border-radius:3px; margin-top:2px; flex-shrink:0;">
<p style="font-size:0.76rem; color:var(--text-dim); line-height:1.4; padding-left:22px; margin-bottom:0;">
<div style="text-align: right; margin-top: 20px; border-top:1px solid var(--border); padding-top:12px;">
<div class="modal-content" style="max-width: 500px; text-align: left;">
<h3 style="font-family:"Syne",sans-serif; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:15px;">
<p style="font-size:0.8rem; color:var(--text); line-height:1.5; margin-bottom:16px;">
<div style="background:var(--surface2); padding:16px; border-radius:6px; border:1px solid var(--border); margin-bottom:16px; display:flex; flex-direction:column; gap:10px;">
<div style="display:flex; align-items:center; gap:8px;">
<span style="font-family:"DM Mono",monospace; font-size:0.82rem; color:var(--text); font-weight:700;">
<div style="font-size:0.75rem; color:var(--text-dim);">
<div style="font-size:0.7rem; color:var(--text-dim); border-top: 1px dashed var(--border); padding-top:10px; line-height:1.3;">
<div style="text-align: right; margin-top: 20px; border-top:1px solid var(--border); padding-top:12px;">
Inline CSS leírása
Összesen 1 hiba!
A HTML kimenet tömörítése csökkenti a fájl méretét, gyorsítja az oldal betöltését, csökkenti a sávszélesség-használatot, és javítja a SEO-t és a felhasználói élményt.
Összesen 1 elfogadott szabály!
A <table> használatát érdemes kerülni, mert nem rugalmas a dizájn szempontjából, és nehezíti a mobilbarát, reszponzív weboldalak készítését. A táblázatok inkább adatok megjelenítésére szolgálnak, nem pedig oldalstruktúrák formázására. A CSS rugalmasabb, könnyebben karbantartható és jobb SEO-t biztosít.
Összesen 1 elfogadott szabály!
Az elavult kódok és attribútumok azok, amelyek már nem támogatottak a modern böngészők vagy a webes szabványok által. Ilyen például a <font> tag vagy a bgcolor attribútum. Ezeket azért érdemes kerülni, mert nem biztosítanak jó kompatibilitást a különböző eszközökkel, nem felelnek meg a webes szabványoknak, és hátráltathatják a weboldal fejlődését, például a reszponzív dizájn vagy az akadálymentesség szempontjából. A helyettesítő modern megoldások (pl. CSS) jobban támogatottak, könnyebben karbantarthatók és elősegítik a jobb teljesítményt.
Összesen 2 elfogadott szabály!
A robots.txt egy szöveges fájl, amelyet a weboldal gyökérkönyvtárában helyezünk el, és arra szolgál, hogy szabályozza, mely keresőrobotok (például Googlebot) férhetnek hozzá az oldal bizonyos részeihez. Ezzel megadhatjuk, hogy a keresőmotorok indexelhetik-e az oldalt, vagy éppen mely URL-eket ne kövessenek. Segít a keresőoptimalizálásban, például ha nem akarjuk, hogy bizonyos oldalak megjelenjenek a keresési eredmények között.
Összesen 1 figyelmeztetés!
A strukturált adatok olyan formázott információk, amelyeket a weboldal HTML-jébe ágyazunk be, és amelyeket a keresőmotorok (például Google) könnyen értelmezhetnek. Ezek az adatok segítenek a keresőmotoroknak jobban megérteni az oldal tartalmát, például termékek, események, értékelések, receptek stb. A strukturált adatokat leggyakrabban JSON-LD, Microdata vagy RDFa formátumban alkalmazzák. A használatuk elősegíti a rich snippetek (gazdag találatok) megjelenését a keresőmotorokban, ami javíthatja a weboldal láthatóságát és kattintási arányát.
Összesen 1 figyelmeztetés!
Az AMP (Accelerated Mobile Pages) egy olyan technológia, amely a mobil weboldalak betöltési sebességének gyorsítására szolgál. Az AMP oldalak minimalizálják a kódot, optimalizálják a képeket és egyes elemeket, hogy azok gyorsabban jelenjenek meg a mobil eszközökön. Az AMP előnyös, mert javítja a felhasználói élményt a gyorsabb betöltéssel, csökkenti a weboldal adatforgalmát, és pozitív hatással lehet a SEO-ra, mivel a Google előnyben részesíti a gyorsan betöltődő mobiloldalakat a keresési eredményekben.
Összesen 1 figyelmeztetés!
<title>FoldMyPhotos - Free Printable Flexagon Generator from Photos</title>
Karakterszám: 60 (Ajánlott: 50–60 karakter)
Összesen 2 elfogadott szabály!
A szöveg/kód arány egy SEO mutató, amely a weboldalon található szöveges tartalom és a HTML kód mennyiségét viszonyítja egymáshoz. A magas szöveg/kód arány azt jelenti, hogy az oldal több releváns szöveges tartalmat tartalmaz, míg alacsony arány esetén túl sok a felesleges kód vagy médiaelem, amelyek nem hozzák hozzá a tartalomhoz. A keresőmotorok általában a nagyobb szöveges tartalommal rendelkező oldalakat preferálják, mert ezek jobban tükrözik az oldal valódi tartalmát, így érdemes ezt az arányt optimalizálni a jobb SEO érdekében.
Összesen 1 hiba!
Összesen 1 kép van az oldalon!
Összesen 4 hiba!
Összesen 1 figyelmeztetés!
Sajnos ezen még dolgozni érdemes. Weboldaladon rengeteg olyan hibát találtunk, amelyek megakadályozzák hogy a SEO-ból szép eredményeket érj el. Vedd fel velünk a kapcsolatot, hogy orvosolhassuk ezeket, és felállíthassuk SEO stratégiád!
Keresőoptimalizálás cikkek SEO szakembereinktől, saját kutatásunk, gyakorlati tapasztalataink és külföldi irodalom alapján.
