☰

Smartschool AI

Voeg een AI-assistent toe aan Smartschool via iframe

// ==UserScript==
// @name         Smartschool AI
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Voeg een AI-assistent toe aan Smartschool via iframe
// @author       Kian
// @match        https://*.smartschool.be/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Styles
    GM_addStyle(`
        .ss-ai-container {
            position: fixed;
            bottom: 100px;
            right: 20px;
            z-index: 9999;
            width: 400px;
            height: 500px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        .ss-ai-header {
            padding: 8px;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #12957D;
            color: white;
            border-radius: 12px 12px 0 0;
            font-size: 14px;
        }
        .ss-ai-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 10000;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #12957D;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-size: 24px;
        }
        .ss-ai-iframe {
            flex: 1;
            border: none;
            width: 100%;
        }
    `);

    // Floating toggle button
    const toggleButton = document.createElement('div');
    toggleButton.className = 'ss-ai-toggle';
    toggleButton.textContent = '🤖';
    document.body.appendChild(toggleButton);

    // Panel
    const helperPanel = document.createElement('div');
    helperPanel.className = 'ss-ai-container';
    helperPanel.innerHTML = `
        <div class="ss-ai-header">
            <span>AI Assistent</span>
            <button class="ss-close-button">×</button>
        </div>
        <iframe class="ss-ai-iframe" src="https://www.openassistantgpt.io/embed/1234123/window"></iframe>
    `;
    document.body.appendChild(helperPanel);

    // Toggle panel
    toggleButton.addEventListener('click', () => {
        helperPanel.style.display = helperPanel.style.display === 'none' ? 'flex' : 'none';
    });

    // Close button
    helperPanel.querySelector('.ss-close-button').addEventListener('click', () => {
        helperPanel.style.display = 'none';
    });
})();