Skip to content

🤖 Cannot save fiddle #2115

@BatManWolf

Description

@BatManWolf

Error code

ERRW:1.0:EL1.0:CE0.5:AS

Were you logged in?

Yes

Your username (if logged in)

Mr_Carbs

Your HTML

<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">


    <!-- תפריט עליון דביק ומרווח -->
    <header class="main-header">
        <nav class="nav">
            <ul>
                <li><a href="#about-project">אודות הפרויקט</a></li>
                <li><a href="#about-course">על הקורס</a></li>
                <li><a href="#units">יחידות לימוד</a></li>
                <li><a href="#resources">הרחבות וקישורים</a></li>
            </ul>
        </nav>
    </header>

    <!-- גל עליון -->
    <section class="section-waves section-main" id="about-course">
        <div class="container flex-row">
            <div class="hero-img">
                <img src="https://placehold.co/320x340/png?text=דמות+תופיע+כאן" alt="דמות לדוגמה" id="hero-placeholder">
            </div>
            <div class="hero-content">
                <h1>מדברים AI-ית שוטפת</h1>
                <h2>קורס בבינה מלאכותית</h2>
                <p>
                    קורס ייחודי וחווייתי להיכרות עם עולמות הבינה המלאכותית, פיתוח מיומנויות קריטיות בעידן החדש והטמעת כלי AI בעבודה היומיומית.<br>
                    הקורס כולל למידה אינטראקטיבית, יחידות יישומיות וליווי מעשי, בשילוב משימות ותרגול.
                </p>
            </div>
        </div>
        <div class="wave-sep">
            <svg viewBox="0 0 1440 80" width="100vw" height="80" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                <path d="M0 60 Q 720 120 1440 60 L1440 80 L0 80 Z" fill="#ffefe9"/>
            </svg>
        </div>
    </section>

    <!-- יחידות לימוד -->
    <section class="section-units" id="units">
        <h2 class="section-title">יחידות הלימוד</h2>
        <div class="units-list">
            <div class="unit-card">
                <a class="unit-img" tabindex="0" aria-label="יחידה 1" href="#"><img src="https://placehold.co/130x130/png?text=1" alt="תמונה ליחידה 1"></a>
                <div class="unit-title">מבוא לבינה מלאכותית</div>
            </div>
            <div class="unit-card">
                <a class="unit-img" tabindex="0" aria-label="יחידה 2" href="#"><img src="https://placehold.co/130x130/png?text=2" alt="תמונה ליחידה 2"></a>
                <div class="unit-title">יסודות הפרומפטינג</div>
            </div>
            <div class="unit-card">
                <a class="unit-img" tabindex="0" aria-label="יחידה 3" href="#"><img src="https://placehold.co/130x130/png?text=3" alt="תמונה ליחידה 3"></a>
                <div class="unit-title">התאמת כלי AI לעבודה השוטפת</div>
            </div>
            <div class="unit-card">
                <a class="unit-img" tabindex="0" aria-label="יחידה 4" href="#"><img src="https://placehold.co/130x130/png?text=4" alt="תמונה ליחידה 4"></a>
                <div class="unit-title">חשיבה ביקורתית בשימוש ב-AI</div>
            </div>
        </div>
    </section>

    <!-- אודות הפרויקט: אקורדיון -->
    <section class="section-about-accordion" id="about-project">
        <h2 class="section-title">אודות הפרויקט</h2>
        <div class="accordion">
            <div class="accordion-item">
                <button class="accordion-header" aria-expanded="false">
                    <span>רקע לפרויקט</span>
                    <svg width="24" height="24" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" fill="none" stroke="#5b6c86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <div class="accordion-body"></div>
            </div>
            <div class="accordion-item">
                <button class="accordion-header" aria-expanded="false">
                    <span>צוות הפיתוח והתוכן</span>
                    <svg width="24" height="24" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" fill="none" stroke="#5b6c86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <div class="accordion-body"></div>
            </div>
            <div class="accordion-item">
                <button class="accordion-header" aria-expanded="false">
                    <span>הלקוחות שלנו</span>
                    <svg width="24" height="24" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" fill="none" stroke="#5b6c86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <div class="accordion-body"></div>
            </div>
        </div>
    </section>

    <!-- גל תחתון -->
    <div class="wave-sep-bottom">
        <svg viewBox="0 0 1440 80" width="100vw" height="80" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 20 Q 720 100 1440 20 L1440 80 L0 80 Z" fill="#ffefe9"/>
        </svg>
    </div>

    <!-- הרחבות -->
    <section class="section-resources" id="resources">
        <h2 class="section-title">הרחבות וקישורים</h2>
        <div class="resources-categories">
            <div class="resource-box">
                <div class="resource-title">כלי AI לעיצוב</div>
                <ul>
                    <li><a href="https://www.canva.com/ai-image-generator/" target="_blank">Canva AI</a></li>
                    <li><a href="https://www.designify.com/" target="_blank">Designify</a></li>
                    <li><a href="https://www.khroma.co/" target="_blank">Khroma</a></li>
                    <li><a href="https://looka.com/" target="_blank">Looka</a></li>
                    <li><a href="https://logo.com/" target="_blank">Logo.com</a></li>
                </ul>
            </div>
            <div class="resource-box">
                <div class="resource-title">כלי AI לעריכת תמונות וסרטונים</div>
                <ul>
                    <li><a href="https://runwayml.com/" target="_blank">Runway ML</a></li>
                    <li><a href="https://clipdrop.co/" target="_blank">ClipDrop</a></li>
                    <li><a href="https://www.picsart.com/" target="_blank">Picsart AI</a></li>
                    <li><a href="https://removal.ai/" target="_blank">Removal.AI</a></li>
                    <li><a href="https://www.descript.com/" target="_blank">Descript</a></li>
                </ul>
            </div>
            <div class="resource-box">
                <div class="resource-title">כלי AI ליצירת מצגות</div>
                <ul>
                    <li><a href="https://gamma.app/" target="_blank">Gamma App</a></li>
                    <li><a href="https://www.beautiful.ai/" target="_blank">Beautiful.ai</a></li>
                    <li><a href="https://tome.app/" target="_blank">Tome</a></li>
                    <li><a href="https://www.visme.co/" target="_blank">Visme AI</a></li>
                </ul>
            </div>
            <div class="resource-box">
                <div class="resource-title">כלי AI לכתיבה ועריכת טקסט</div>
                <ul>
                    <li><a href="https://chat.openai.com/" target="_blank">ChatGPT</a></li>
                    <li><a href="https://www.jasper.ai/" target="_blank">Jasper</a></li>
                    <li><a href="https://quillbot.com/" target="_blank">QuillBot</a></li>
                    <li><a href="https://www.grammarly.com/" target="_blank">Grammarly</a></li>
                    <li><a href="https://www.copy.ai/" target="_blank">Copy.ai</a></li>
                </ul>
            </div>
            <div class="resource-box">
                <div class="resource-title">כלי AI לניהול זמן ותכנון</div>
                <ul>
                    <li><a href="https://clockwise.ai/" target="_blank">Clockwise</a></li>
                    <li><a href="https://motionapp.com/" target="_blank">Motion</a></li>
                    <li><a href="https://trello.com/platforms/ai" target="_blank">Trello AI</a></li>
                </ul>
            </div>
            <div class="resource-box">
                <div class="resource-title">בוטים ושירותי אוטומציה</div>
                <ul>
                    <li><a href="https://www.landbot.io/" target="_blank">Landbot</a></li>
                    <li><a href="https://www.chatbase.co/" target="_blank">Chatbase</a></li>
                    <li><a href="https://manychat.com/" target="_blank">ManyChat</a></li>
                </ul>
            </div>
            <div class="resource-box">
                <div class="resource-title">למידה ותרגול AI</div>
                <ul>
                    <li><a href="https://www.khanacademy.org/" target="_blank">Khan Academy</a></li>
                    <li><a href="https://www.coursera.org/search?query=ai" target="_blank">Coursera - קורסי AI</a></li>
                    <li><a href="https://www.udemy.com/topic/artificial-intelligence/" target="_blank">Udemy - קורסי בינה מלאכותית</a></li>
                </ul>
            </div>
        </div>
    </section>

Your JavaScript

// פתיחת/סגירת תפריט צד
        const menuBtn = document.getElementById('menuBtn');
        const sideMenu = document.getElementById('sideMenu');
        const overlay = document.getElementById('overlay');
        menuBtn.addEventListener('click', () => {
            sideMenu.classList.toggle('open');
            overlay.classList.toggle('show');
        });
        overlay.addEventListener('click', () => {
            sideMenu.classList.remove('open');
            overlay.classList.remove('show');
        });

        // ניווט דינמי בין העמודים (דף הבית, אודות, הרחבות)
        function navigateTo(page) {
            document.getElementById('mainContent').style.display = (page === 'home') ? 'block' : 'none';
            document.getElementById('aboutPage').classList.toggle('hidden', page !== 'about');
            document.getElementById('linksPage').classList.toggle('hidden', page !== 'links');
            sideMenu.classList.remove('open');
            overlay.classList.remove('show');
        }

        // פופ-אפ "בקרוב" לפרקים לא זמינים
        const episodes = document.querySelectorAll('.episode-card');
        episodes.forEach(card => {
            card.addEventListener('click', () => {
                if (card.dataset.available === "false") {
                    showPopup();
                } else if (card.dataset.link) {
                    window.open(card.dataset.link, '_blank');
                }
            });
        });

        function showPopup() {
            document.getElementById('popupBg').classList.add('show');
            document.getElementById('popup').classList.add('show');
        }
        function closePopup() {
            document.getElementById('popupBg').classList.remove('show');
            document.getElementById('popup').classList.remove('show');
        }// גלילה רכה לעוגנים
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });// גלילה רכה לעוגנים
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });

Your CSS

// פתיחת/סגירת תפריט צד
        const menuBtn = document.getElementById('menuBtn');
        const sideMenu = document.getElementById('sideMenu');
        const overlay = document.getElementById('overlay');
        menuBtn.addEventListener('click', () => {
            sideMenu.classList.toggle('open');
            overlay.classList.toggle('show');
        });
        overlay.addEventListener('click', () => {
            sideMenu.classList.remove('open');
            overlay.classList.remove('show');
        });

        // ניווט דינמי בין העמודים (דף הבית, אודות, הרחבות)
        function navigateTo(page) {
            document.getElementById('mainContent').style.display = (page === 'home') ? 'block' : 'none';
            document.getElementById('aboutPage').classList.toggle('hidden', page !== 'about');
            document.getElementById('linksPage').classList.toggle('hidden', page !== 'links');
            sideMenu.classList.remove('open');
            overlay.classList.remove('show');
        }

        // פופ-אפ "בקרוב" לפרקים לא זמינים
        const episodes = document.querySelectorAll('.episode-card');
        episodes.forEach(card => {
            card.addEventListener('click', () => {
                if (card.dataset.available === "false") {
                    showPopup();
                } else if (card.dataset.link) {
                    window.open(card.dataset.link, '_blank');
                }
            });
        });

        function showPopup() {
            document.getElementById('popupBg').classList.add('show');
            document.getElementById('popup').classList.add('show');
        }
        function closePopup() {
            document.getElementById('popupBg').classList.remove('show');
            document.getElementById('popup').classList.remove('show');
        }// גלילה רכה לעוגנים
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });// גלילה רכה לעוגנים
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });// גלילה רכה לעוגנים
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});
        });
    });
    // אקורדיון
    document.querySelectorAll('.accordion-header').forEach(btn => {
        btn.addEventListener('click', function () {
            const open = this.getAttribute('aria-expanded') === 'true';
            document.querySelectorAll('.accordion-header').forEach(h => h.setAttribute('aria-expanded', 'false'));
            if (!open) this.setAttribute('aria-expanded', 'true');
        });
    });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions