Te Reo Māori AI Image Generator
Storage: 0/50
Image Gallery
Generated images will appear here
Click “Generate” to create your first image
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
<!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 => `
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.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>
Generated images will appear here
Click “Generate” to create your first image
