Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra-sites domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php on line 6131

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: session_start(): Session cannot be started after headers have already been sent in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/chatbot-ai-free-models/includes/class-chatbot-main.php on line 88
add image – Taonga

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARTEP STUDIO PDP - Projects Display Platform</title>
    <style>
        :root {
            --yellow: #FFD700;
            --dark-bg: #000000;
            --window-bg: #111111;
            --section-bg: #222222;
            --glow: 0 0 15px var(--yellow);
            --glow-strong: 0 0 25px var(--yellow), 0 0 35px var(--yellow);
            --accent: #00ff88;
            --danger: #ff4444;
            --success: #44ff44;
            --code-bg: #0a0a0a;
            --card-bg: #1a1a1a;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: var(--dark-bg);
            color: var(--yellow);
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            min-height: 100vh;
            overflow: hidden;
            background-image: 
                radial-gradient(circle at 10% 20%, #1a1a1a 2%, transparent 2%),
                radial-gradient(circle at 80% 80%, #1a1a1a 2%, transparent 2%),
                linear-gradient(45deg, transparent 48%, #1a1a1a 49%, #1a1a1a 51%, transparent 52%);
            background-size: 30px 30px, 40px 40px, 60px 60px;
            animation: backgroundShift 20s ease-in-out infinite;
        }

        @keyframes backgroundShift {
            0%, 100% { background-position: 0 0, 0 0, 0 0; }
            50% { background-position: 30px 30px, -40px -40px, 60px 60px; }
        }

        .app-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .main-header {
            background: var(--section-bg);
            border-bottom: 2px solid var(--yellow);
            padding: 15px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 60px;
            z-index: 1000;
        }

        .logo {
            font-size: 2em;
            font-weight: bold;
            color: var(--yellow);
            text-shadow: var(--glow);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo .subtitle {
            font-size: 0.4em;
            color: var(--accent);
            font-weight: normal;
            text-shadow: none;
        }

        .header-controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .toggle-btn {
            background: var(--yellow);
            color: var(--dark-bg);
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
        }

        .toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--glow);
        }

        .toggle-btn.active {
            background: var(--accent);
            box-shadow: var(--glow-strong);
        }

        .content-area {
            flex: 1;
            display: flex;
            overflow: hidden;
            padding: 15px;
            gap: 15px;
        }

        .dashboard-view {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .search-bar {
            background: var(--section-bg);
            border: 2px solid var(--yellow);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
        }

        .search-input {
            flex: 1;
            padding: 12px;
            background: var(--code-bg);
            border: 2px solid var(--accent);
            border-radius: 8px;
            color: var(--accent);
            font-family: inherit;
            font-size: 14px;
        }

        .webapps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
            overflow-y: auto;
            padding: 10px;
            flex: 1;
        }

        .webapp-card {
            background: var(--card-bg);
            border: 2px solid var(--yellow);
            border-radius: 12px;
            padding: 25px;
            transition: all 0.3s ease;
            cursor: pointer;
            height: fit-content;
        }

        .webapp-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--glow-strong);
        }

        .webapp-card h3 {
            color: var(--accent);
            margin-bottom: 12px;
            font-size: 1.3em;
        }

        .webapp-card p {
            color: #ccc;
            font-size: 0.95em;
            margin-bottom: 18px;
            min-height: 70px;
            line-height: 1.5;
        }

        .webapp-card .category {
            background: var(--yellow);
            color: var(--dark-bg);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            display: inline-block;
            margin-bottom: 12px;
        }

        .webapp-card .date {
            font-size: 0.75em;
            color: #888;
        }

        .window-container {
            display: flex;
            flex: 1;
            gap: 15px;
            height: calc(100vh - 120px);
        }

        .stretchy-window {
            background: var(--window-bg);
            border: 2px solid var(--yellow);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            min-width: 300px;
            resize: both;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .stretchy-window.collapsed {
            width: 0 !important;
            min-width: 0;
            border: none;
            opacity: 0;
            padding: 0;
        }

        .window-header {
            background: var(--section-bg);
            padding: 15px 20px;
            border-bottom: 2px solid var(--yellow);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
            cursor: move;
            min-height: 50px;
        }

        .window-controls {
            display: flex;
            gap: 10px;
        }

        .window-btn {
            background: none;
            border: 1px solid var(--yellow);
            color: var(--yellow);
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
        }

        .window-btn:hover {
            background: var(--yellow);
            color: var(--dark-bg);
        }

        .window-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--yellow) var(--dark-bg);
        }

        .window-content::-webkit-scrollbar {
            width: 8px;
        }

        .window-content::-webkit-scrollbar-track {
            background: var(--dark-bg);
        }

        .window-content::-webkit-scrollbar-thumb {
            background: var(--yellow);
            border-radius: 4px;
        }

        .editor-panel {
            flex: 1;
            min-width: 400px;
        }

        .preview-panel {
            flex: 1;
            min-width: 400px;
        }

        .form-field {
            margin: 18px 0;
        }

        .form-field label {
            display: block;
            color: var(--yellow);
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 14px;
            text-transform: uppercase;
        }

        .form-field input,
        .form-field textarea,
        .form-field select {
            width: 100%;
            padding: 12px;
            background: var(--code-bg);
            border: 2px solid var(--yellow);
            border-radius: 8px;
            color: var(--yellow);
            font-family: inherit;
            font-size: 14px;
            box-sizing: border-box;
        }

        .form-field input:focus,
        .form-field textarea:focus,
        .form-field select:focus {
            outline: none;
            box-shadow: var(--glow);
        }

        .code-editor {
            width: 100%;
            height: 300px;
            background: var(--code-bg);
            border: 2px solid var(--yellow);
            border-radius: 8px;
            padding: 15px;
            color: var(--yellow);
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
            overflow: auto;
            white-space: pre;
            tab-size: 2;
        }

        .preview-frame {
            width: 100%;
            height: 400px;
            background: white;
            border: 2px solid var(--accent);
            border-radius: 8px;
        }

        .btn {
            background: var(--yellow);
            color: var(--dark-bg);
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--glow);
        }

        .btn.accent {
            background: var(--accent);
        }

        .btn.danger {
            background: var(--danger);
            color: #ffffff;
        }

        .btn.success {
            background: var(--success);
        }

        .btn.small {
            padding: 8px 15px;
            font-size: 12px;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            margin: 25px 0;
            flex-wrap: wrap;
        }

        .tab-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .tab-btn {
            background: var(--section-bg);
            color: var(--yellow);
            border: 2px solid var(--yellow);
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .tab-btn.active {
            background: var(--yellow);
            color: var(--dark-bg);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .notification {
            position: fixed;
            top: 30px;
            right: 30px;
            background: var(--yellow);
            color: var(--dark-bg);
            padding: 20px 30px;
            border-radius: 12px;
            font-weight: bold;
            z-index: 10000;
            box-shadow: var(--glow-strong);
            transform: translateX(400px);
            transition: transform 0.3s ease;
            font-size: 16px;
            max-width: 400px;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.error {
            background: var(--danger);
            color: #ffffff;
        }

        .notification.success {
            background: var(--success);
            color: var(--dark-bg);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            z-index: 10000;
            overflow-y: auto;
        }

        .modal-content {
            max-width: 900px;
            margin: 30px auto;
            background: var(--window-bg);
            border: 3px solid var(--yellow);
            border-radius: 20px;
            padding: 30px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .modal-header h2 {
            color: var(--yellow);
            margin: 0;
        }

        .admin-panel {
            background: var(--section-bg);
            border: 2px solid var(--danger);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
        }

        .admin-panel h4 {
            color: var(--danger);
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.3em;
        }

        @media (max-width: 1200px) {
            .window-container {
                flex-direction: column;
            }
            .stretchy-window {
                width: 100% !important;
                height: 400px;
            }
        }

        @media (max-width: 768px) {
            .main-header {
                padding: 10px 15px;
                flex-direction: column;
                gap: 10px;
            }
            .logo {
                font-size: 1.5em;
            }
            .header-controls {
                gap: 10px;
                flex-wrap: wrap;
            }
            .toggle-btn {
                padding: 8px 12px;
                font-size: 12px;
            }
            .webapps-grid {
                grid-template-columns: 1fr;
            }
            .content-area {
                padding: 10px;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="main-header">
            <div class="logo">
                🎨 ARTEP STUDIO PDP
                <div class="subtitle">Projects Display Platform</div>
            </div>
            <div class="header-controls">
                <button class="toggle-btn active" onclick="showView('dashboard')">🏠 DASHBOARD</button>
                <button class="toggle-btn" onclick="showView('editor')">⚡ CREATE APP</button>
                <button class="toggle-btn" onclick="adminAccess()" style="opacity: 0.3;">🔐 ADMIN</button>
            </div>
        </div>

        <div class="content-area">
            <div class="dashboard-view" id="dashboard-view">
                <div class="search-bar">
                    <input type="text" class="search-input" id="search-input" placeholder="Search WebApps..." oninput="searchWebApps()">
                    <button class="btn accent" onclick="searchWebApps()">🔍 SEARCH</button>
                </div>
                <div class="webapps-grid" id="webapps-grid"></div>
            </div>

            <div class="dashboard-view collapsed" id="editor-view">
                <div class="window-container">
                    <div class="stretchy-window editor-panel">
                        <div class="window-header">
                            <span>⚡ Create New WebApp</span>
                            <div class="window-controls">
                                <button class="window-btn" onclick="clearEditor()">🗑️</button>
                                <button class="window-btn" onclick="showView('dashboard')">✖️</button>
                            </div>
                        </div>
                        <div class="window-content">
                            <div class="form-field">
                                <label>WebApp Title:</label>
                                <input type="text" id="app-title" placeholder="Enter title" oninput="autoSave()">
                            </div>
                            <div class="form-field">
                                <label>Category:</label>
                                <select id="app-category" oninput="autoSave()">
                                    <option value="landing-page">Landing Page</option>
                                    <option value="dashboard">Dashboard</option>
                                    <option value="ecommerce">E-commerce</option>
                                    <option value="portfolio">Portfolio</option>
                                    <option value="game">Game</option>
                                    <option value="utility">Utility</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div class="form-field">
                                <label>Description:</label>
                                <textarea id="app-description" rows="3" placeholder="Description" oninput="autoSave()"></textarea>
                            </div>
                            <div class="tab-container">
                                <button class="tab-btn active" onclick="switchTab('code')">💻 Code</button>
                                <button class="tab-btn" onclick="switchTab('embed')">🔗 Embed</button>
                                <button class="tab-btn" onclick="switchTab('canva')">🎨 Canva</button>
                            </div>
                            <div id="code-tab" class="tab-content active">
                                <div class="form-field">
                                    <label>Code:</label>
                                    <textarea class="code-editor" id="code-editor" oninput="autoSave()"></textarea>
                                </div>
                            </div>
                            <div id="embed-tab" class="tab-content">
                                <div class="form-field">
                                    <label>URL:</label>
                                    <input type="url" id="embed-url" oninput="autoSave()">
                                </div>
                                <div class="form-field">
                                    <label>Height:</label>
                                    <input type="number" id="embed-height" value="600" oninput="autoSave()">
                                </div>
                            </div>
                            <div id="canva-tab" class="tab-content">
                                <div class="form-field">
                                    <label>Canva URL:</label>
                                    <input type="url" id="canva-url" oninput="autoSave()">
                                </div>
                                <div class="form-field">
                                    <label>Height:</label>
                                    <input type="number" id="canva-height" value="800" oninput="autoSave()">
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="btn success" onclick="saveWebApp()">💾 Save</button>
                                <button class="btn accent" onclick="previewContent()">👁️ Preview</button>
                                <button class="btn" onclick="loadTemplate()">📄 Template</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stretchy-window preview-panel collapsed" id="preview-panel">
                        <div class="window-header">
                            <span>🖥️ Preview</span>
                            <div class="window-controls">
                                <button class="window-btn" onclick="togglePreview()">👁️</button>
                                <button class="window-btn" onclick="showView('dashboard')">✖️</button>
                            </div>
                        </div>
                        <div class="window-content">
                            <iframe class="preview-frame" id="preview-frame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="admin-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>🔐 Admin Panel</h2>
                <button class="btn danger" onclick="closeAdmin()">✖️ Close</button>
            </div>
            <div class="admin-panel">
                <h4>Settings</h4>
                <div class="form-field">
                    <label>Password:</label>
                    <input type="password" id="admin-password">
                </div>
                <div class="form-field">
                    <label>Title:</label>
                    <input type="text" id="platform-title" value="ARTEP STUDIO PDP">
                </div>
                <div class="form-field">
                    <label>Subtitle:</label>
                    <input type="text" id="platform-subtitle" value="Projects Display Platform">
                </div>
                <div style="display: flex; gap: 15px; margin-top: 20px;">
                    <button class="btn success" onclick="saveAdminSettings()">💾 Save</button>
                    <button class="btn" onclick="exportData()">📤 Export</button>
                    <button class="btn danger" onclick="clearAllData()">🗑️ Clear</button>
                </div>
            </div>
            <div class="admin-panel">
                <h4>Dev Notes</h4>
                <textarea id="dev-notes" rows="8"></textarea>
                <button class="btn success" style="margin-top: 20px;" onclick="saveDevNotes()">💾 Save Notes</button>
            </div>
        </div>
    </div>

    <div class="modal" id="view-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="view-app-title">Preview</h2>
                <button class="btn danger" onclick="closeViewModal()">✖️ Close</button>
            </div>
            <div class="window-content">
                <iframe class="preview-frame" id="view-frame" style="height: 70vh;"></iframe>
                <div style="margin-top: 20px; text-align: center;">
                    <p>URL: <span id="app-url" style="color: var(--accent);"></span></p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let webApps = JSON.parse(localStorage.getItem('artepWebApps')) || [];
        let adminSettings = JSON.parse(localStorage.getItem('artepAdminSettings')) || {
            title: 'ARTEP STUDIO PDP',
            subtitle: 'Projects Display Platform',
            devNotes: ''
        };
        let autoSaveTimeout;

        document.addEventListener('DOMContentLoaded', () => {
            updatePlatformTitle();
            loadWebApps();
            loadAutoSave();
        });

        function showView(view) {
            const dashboardView = document.getElementById('dashboard-view');
            const editorView = document.getElementById('editor-view');
            const buttons = document.querySelectorAll('.toggle-btn');
            
            buttons.forEach(btn => btn.classList.remove('active'));
            if(view === 'dashboard') {
                dashboardView.classList.remove('collapsed');
                editorView.classList.add('collapsed');
                buttons[0].classList.add('active');
                loadWebApps();
            } else {
                dashboardView.classList.add('collapsed');
                editorView.classList.remove('collapsed');
                buttons[1].classList.add('active');
            }
        }

        function switchTab(tabName) {
            document.querySelectorAll('.tab-btn, .tab-content').forEach(el => el.classList.remove('active'));
            event.target.classList.add('active');
            document.getElementById(`${tabName}-tab`).classList.add('active');
        }

        function updatePlatformTitle() {
            document.querySelector('.logo').innerHTML = `🎨 ${adminSettings.title}<div class="subtitle">${adminSettings.subtitle}

`; }

function loadWebApps() { const grid = document.getElementById('webapps-grid'); grid.innerHTML = webApps.map(app => `

<div class="category">${app.category}

${app.title}</h3> <p>${app.description}

Created: ${new Date(app.date).toLocaleDateString()}</div> </div> `).join(''); } function autoSave() { clearTimeout(autoSaveTimeout); autoSaveTimeout = setTimeout(() => { localStorage.setItem('editorState', JSON.stringify({ title: document.getElementById('app-title').value, category: document.getElementById('app-category').value, description: document.getElementById('app-description').value, code: document.getElementById('code-editor').value, embedUrl: document.getElementById('embed-url').value, embedHeight: document.getElementById('embed-height').value, canvaUrl: document.getElementById('canva-url').value, canvaHeight: document.getElementById('canva-height').value })); }, 500); } function loadAutoSave() { const saved = JSON.parse(localStorage.getItem('editorState')); if(saved) { document.getElementById('app-title').value = saved.title || ''; document.getElementById('app-category').value = saved.category || 'landing-page'; document.getElementById('app-description').value = saved.description || ''; document.getElementById('code-editor').value = saved.code || ''; document.getElementById('embed-url').value = saved.embedUrl || ''; document.getElementById('embed-height').value = saved.embedHeight || 600; document.getElementById('canva-url').value = saved.canvaUrl || ''; document.getElementById('canva-height').value = saved.canvaHeight || 800; } } function previewContent() { const previewPanel = document.getElementById('preview-panel'); previewPanel.classList.remove('collapsed'); const iframe = document.getElementById('preview-frame'); let content = ''; if(document.querySelector('.tab-btn.active').textContent.includes('Code')) { content = document.getElementById('code-editor').value; } else if(document.querySelector('.tab-btn.active').textContent.includes('Embed')) { const url = document.getElementById('embed-url').value; const height = document.getElementById('embed-height').value || 600; content = `<iframe src="${url}" style="width:100%;height:${height}px;border:none;"></iframe>`; } else { const url = document.getElementById('canva-url').value; const height = document.getElementById('canva-height').value || 800; content = `<iframe src="${url}" style="width:100%;height:${height}px;border:none;"></iframe>`; } iframe.srcdoc = content; } function saveWebApp() { const title = document.getElementById('app-title').value; if(!title) { showNotification('Please enter a title', 'error'); return; } const newApp = { id: Date.now().toString(), title: title, category: document.getElementById('app-category').value, description: document.getElementById('app-description').value, code: document.getElementById('code-editor').value, embedUrl: document.getElementById('embed-url').value, embedHeight: document.getElementById('embed-height').value, canvaUrl: document.getElementById('canva-url').value, canvaHeight: document.getElementById('canva-height').value, date: new Date().toISOString() }; webApps.push(newApp); localStorage.setItem('artepWebApps', JSON.stringify(webApps)); showNotification('WebApp saved!', 'success'); localStorage.removeItem('editorState'); clearEditor(); showView('dashboard'); } function viewWebApp(id) { const app = webApps.find(a => a.id === id); if(!app) return; const iframe = document.getElementById('view-frame'); let content = ''; if(app.code) { content = app.code; } else if(app.embedUrl) { content = `<iframe src="${app.embedUrl}" style="width:100%;height:${app.embedHeight || 600}px;border:none;"></iframe>`; } else if(app.canvaUrl) { content = `<iframe src="${app.canvaUrl}" style="width:100%;height:${app.canvaHeight || 800}px;border:none;"></iframe>`; } iframe.srcdoc = content; document.getElementById('view-app-title').textContent = app.title; document.getElementById('app-url').textContent = `${window.location.href}#${id}`; document.getElementById('view-modal').style.display = 'block'; } function adminAccess() { document.getElementById('admin-modal').style.display = 'block'; } function closeAdmin() { document.getElementById('admin-modal').style.display = 'none'; } function saveAdminSettings() { const password = document.getElementById('admin-password').value; if(password !== '7203') { showNotification('Invalid password', 'error'); return; } adminSettings.title = document.getElementById('platform-title').value; adminSettings.subtitle = document.getElementById('platform-subtitle').value; localStorage.setItem('artepAdminSettings', JSON.stringify(adminSettings)); updatePlatformTitle(); showNotification('Settings saved!', 'success'); } function showNotification(text, type = '') { // Remove existing notifications document.querySelectorAll('.notification').forEach(n => n.remove()); const notification = document.createElement('div'); notification.className = `notification ${type} show`; notification.textContent = text; document.body.appendChild(notification); setTimeout(() => { notification.classList.remove('show'); setTimeout(() => notification.remove(), 300); }, 3000); } function clearEditor() { document.getElementById('app-title').value = ''; document.getElementById('app-category').value = 'landing-page'; document.getElementById('app-description').value = ''; document.getElementById('code-editor').value = ''; document.getElementById('embed-url').value = ''; document.getElementById('embed-height').value = '600'; document.getElementById('canva-url').value = ''; document.getElementById('canva-height').value = '800'; localStorage.removeItem('editorState'); } function loadTemplate() { document.getElementById('code-editor').value = `

Welcome to My WebApp

This is a sample WebApp created with ARTEP STUDIO PDP

`; autoSave(); showNotification('Template loaded!', 'success'); } function closeViewModal() { document.getElementById('view-modal').style.display = 'none'; } function exportData() { const password = document.getElementById('admin-password').value; if(password !== '7203') { showNotification('Invalid password', 'error'); return; } const data = { webApps: webApps, settings: adminSettings }; const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `artep-backup-${new Date().toISOString().split('T')[0]}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); showNotification('Data exported!', 'success'); } function clearAllData() { const password = document.getElementById('admin-password').value; if(password !== '7203') { showNotification('Invalid password', 'error'); return; } if(confirm('Clear ALL data?')) { localStorage.clear(); webApps = []; adminSettings = { title: 'ARTEP STUDIO PDP', subtitle: 'Projects Display Platform' }; location.reload(); } } function saveDevNotes() { const password = document.getElementById('admin-password').value; if(password !== '7203') { showNotification('Invalid password', 'error'); return; } adminSettings.devNotes = document.getElementById('dev-notes').value; localStorage.setItem('artepAdminSettings', JSON.stringify(adminSettings)); showNotification('Notes saved!', 'success'); } function searchWebApps() { const searchTerm = document.getElementById('search-input').value.toLowerCase(); const filtered = webApps.filter(app => app.title.toLowerCase().includes(searchTerm) || app.category.toLowerCase().includes(searchTerm) || (app.description && app.description.toLowerCase().includes(searchTerm)) ); const grid = document.getElementById('webapps-grid'); if(filtered.length === 0) { grid.innerHTML = '<div class="webapp-card" style="text-align: center; grid-column: 1 / -1;">No WebApps found</div>'; return; } grid.innerHTML = filtered.map(app => ` <div class="webapp-card" onclick="viewWebApp('${app.id}')">

${app.category}</div> <h3>${app.title}

${app.description}</p> <div class="date">Created: ${new Date(app.date).toLocaleDateString()}</div> </div> `).join(''); } function togglePreview() { document.getElementById('preview-panel').classList.toggle('collapsed'); } </script> </body> </html>

Generator Studio – Create Any Generator

Create Any Generator You Imagine

AI-powered toolkit to build custom generators, chat interfaces, coding environments, and more

Generator Creator

AI Assistant: Hello! Describe the type of generator you want to create.

You: I want a quote generator with styling options

AI Assistant: Great! What styling options do you need?

Generator Type

Select Components

Buttons

Dropdowns

Collapses

Text Fields

Cards

Modals

Color Palette

Font Selection

Button Style

Icon Library

Preview

Generator Preview

Your generated tool will appear here

Custom generator components will be rendered here for real-time preview

Create With Our Generator Tools

AI Chat Interface

Create customizable AI chat interfaces with various prompt options and response styling.

Coding Interface

Build code generators with syntax highlighting and customization options.

Image Generator

Create tools for generating and customizing images with various styling options.

Generator Library

Quote Generator

Random quotes with customizable styling and themes.

Form Builder

Dynamic form creation tool with validation.

Code Snippet Generator

Generate formatted code samples with syntax highlighting.

Image Carousel Builder

Create responsive image carousels with custom controls.

Taonga Ai Assistantx

► Necessary Cookies Standard

Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.

None

► Functional Cookies Remark

Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.

None

► Analytical Cookies Remark

Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.

None

► Advertisement Cookies Remark

Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.

None