<title>Mythic Capsule Editor</title> <style> :root { --primary: #00ffcc; --secondary: #ff00cc; --dark: #0d0d0d; --darker: #0a0a0a; --glow: 0 0 10px #00ffcc, 0 0 20px #00ffcc; --glow-secondary: 0 0 10px #ff00cc, 0 0 20px #ff00cc; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--primary);
  font-family: 'Courier New', monospace;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  gap: 2px;
  overflow: hidden;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(0, 255, 204, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 0, 204, 0.05) 0%, transparent 20%);
}

.window {
  border: 1px solid var(--primary);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  background: rgba(10, 10, 10, 0.8);
  box-shadow: var(--glow);
  position: relative;
  overflow: hidden;
}

.window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 255, 204, 0.3);
}

h2 {
  margin: 0;
  font-size: 16px;
  color: var(--secondary);
  text-shadow: var(--glow-secondary);
  letter-spacing: 1px;
}

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

button {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 3px 8px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
}

button:hover {
  background: rgba(0, 255, 204, 0.1);
  box-shadow: var(--glow);
}

textarea {
  flex: 1;
  background: var(--darker);
  color: var(--primary);
  border: 1px solid rgba(0, 255, 204, 0.3);
  resize: none;
  padding: 10px;
  font-size: 14px;
  line-height: 1.4;
  font-family: 'Courier New', monospace;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: inset 0 0 10px rgba(0, 255, 204, 0.3), 0 0 10px rgba(0, 255, 204, 0.3);
}

iframe {
  flex: 1;
  border: 1px solid rgba(0, 255, 204, 0.3);
  background: #000;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.status-bar {
  grid-column: span 3;
  background: rgba(10, 10, 10, 0.9);
  border-top: 1px solid var(--primary);
  padding: 5px 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 -2px 10px rgba(0, 255, 204, 0.2);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--glow);
}

.status-indicator.active {
  background: #ff00cc;
  box-shadow: var(--glow-secondary);
}

.glitch-text {
  position: relative;
  animation: glitch 5s infinite;
}

@keyframes glitch {
  0% { text-shadow: 0 0 5px var(--primary); }
  25% { text-shadow: 2px 0 5px var(--secondary), -2px 0 5px var(--primary); }
  50% { text-shadow: 0 0 5px var(--primary); }
  75% { text-shadow: -2px 0 5px var(--secondary), 2px 0 5px var(--primary); }
  100% { text-shadow: 0 0 5px var(--primary); }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: rgba(0, 255, 204, 0.05);
  animation: scan 4s linear infinite;
  pointer-events: none;
}

@keyframes scan {
  0% { top: 0; }
  100% { top: 100%; }
}

.window::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0, 255, 204, 0.03) 1px, transparent 1px);
  background-size: 100% 20px;
}

.window:nth-child(2)::before {
  background: linear-gradient(90deg, var(--secondary), var(--primary));
}

.window:nth-child(3)::before {
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
}

/* Expanded window styles */
.expanded {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
}

.expanded .window-header {
  background: rgba(10, 10, 10, 0.9);
  padding: 10px;
  margin: -10px -10px 10px -10px;
}

.expanded .window-header h2 {
  font-size: 18px;
}

.expanded .window-header button:last-child {
  background: rgba(255, 0, 204, 0.2);
  border-color: var(--secondary);
  color: var(--secondary);
}

.expanded .window-header button:last-child:hover {
  background: rgba(255, 0, 204, 0.3);
  box-shadow: var(--glow-secondary);
}

/* Hidden windows when one is expanded */
.hidden {
  display: none;
}

/* Preview window specific styles */
#preview-window.expanded {
  display: flex;
  flex-direction: column;
}

#preview-window.expanded iframe {
  flex: 1;
}

</style>

HTML Editor

Format ⤢

<textarea id="htmlEditor">

Welcome to Mythic Coding

Click Me

Status: Waiting...

</textarea>

JavaScript Editor

Format ⤢

<textarea id="jsEditor">// This is your JavaScript logic function activateRitual() { const status = document.getElementById('status'); status.textContent = 'Status: Ritual Activated'; status.style.color = '#ff00cc';

// Add a cyber effect document.body.style.animation = 'glitch 0.5s'; setTimeout(() => { document.body.style.animation = ''; }, 500); }</textarea>

CSS Editor

Format ⤢

<textarea id="cssEditor">/* This is your CSS styling */ body { background: black; color: #00ffcc; font-family: monospace; margin: 0; padding: 20px; }

#capsule { border: 2px solid #00ffcc; padding: 20px; box-shadow: 0 0 20px #00ffcc; max-width: 600px; margin: 0 auto; background: rgba(0, 0, 0, 0.7); position: relative; overflow: hidden; }

#capsule::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #00ffcc, #ff00cc); }

#capsule h1 { text-align: center; margin-top: 0; text-shadow: 0 0 10px #00ffcc; }

#capsule button { display: block; margin: 20px auto; padding: 10px 20px; background: transparent; border: 1px solid #00ffcc; color: #00ffcc; font-family: inherit; cursor: pointer; transition: all 0.3s; box-shadow: 0 0 10px rgba(0, 255, 204, 0.5); }

#capsule button:hover { background: rgba(0, 255, 204, 0.1); box-shadow: 0 0 20px #00ffcc; }

#status { text-align: center; font-weight: bold; transition: color 0.3s; }</textarea>

Webview

Refresh ⤢

<iframe id="preview"></iframe>

Mythic Capsule Editor v2.0

Editors: 3 | Preview: Active

Last Update: Just now

<script> const htmlEditor = document.getElementById('htmlEditor'); const cssEditor = document.getElementById('cssEditor'); const jsEditor = document.getElementById('jsEditor'); const preview = document.getElementById('preview'); const refreshBtn = document.getElementById('refreshPreview'); const htmlFormatBtn = document.getElementById('htmlFormat'); const cssFormatBtn = document.getElementById('cssFormat'); const jsFormatBtn = document.getElementById('jsFormat'); const lastUpdateEl = document.getElementById('lastUpdate'); const previewStatusEl = document.getElementById('previewStatus'); const expandButtons = document.querySelectorAll('.expand-btn'); const windows = document.querySelectorAll('.window'); // Format HTML function formatHTML(code) { const tab = ' '; let result = ''; let indent = ''; code.split(/>\s* { if (element.match(/^\/\w/)) { indent = indent.substring(tab.length); } result += indent + '<' + element + '>\r\n'; if (element.match(/^]*[^\/]$/)) { indent += tab; } }); return result.substring(1, result.length - 3); } // Format CSS function formatCSS(code) { return code .replace(/;/g, ';\n') .replace(/{/g, ' {\n') .replace(/}/g, '\n}\n') .replace(/([^{])\n([^}])/g, '$1\n $2') .replace(/\n\s*\n/g, '\n'); } // Format JS function formatJS(code) { return code .replace(/;/g, ';\n') .replace(/{/g, ' {\n') .replace(/}/g, '\n}\n') .replace(/([^{])\n([^}])/g, '$1\n $2') .replace(/\n\s*\n/g, '\n'); } function updatePreview() { const html = htmlEditor.value; const css = `<style>${cssEditor.value}</style>`;

  const js = `<script>${jsEditor.value}<\/script>`;
  const fullContent = `${html}${css}${js}`;
  const blob = new Blob([fullContent], { type: 'text/html' });
  preview.src = URL.createObjectURL(blob);
  
  // Update status
  lastUpdateEl.textContent = new Date().toLocaleTimeString();
  previewStatusEl.textContent = 'Active';
  previewStatusEl.nextElementSibling.classList.add('active');
  setTimeout(() => {
    previewStatusEl.nextElementSibling.classList.remove('active');
  }, 1000);
}

function refreshPreview() {
  updatePreview();
  previewStatusEl.textContent = 'Refreshed';
  previewStatusEl.nextElementSibling.classList.add('active');
  setTimeout(() => {
    previewStatusEl.textContent = 'Active';
    previewStatusEl.nextElementSibling.classList.remove('active');
  }, 2000);
}

// Expand window functionality
function expandWindow(windowElement) {
  // Hide all other windows
  windows.forEach(win => {
    if (win !== windowElement) {
      win.classList.add('hidden');
    }
  });
  
  // Expand the selected window
  windowElement.classList.add('expanded');
  
  // Change button to restore
  const expandBtn = windowElement.querySelector('.expand-btn');
  expandBtn.textContent = '🗗';
  expandBtn.title = 'Restore';
}

// Restore all windows
function restoreWindows() {
  windows.forEach(win => {
    win.classList.remove('hidden', 'expanded');
  });
  
  // Change all buttons back to expand
  expandButtons.forEach(btn => {
    btn.textContent = '⤢';
    btn.title = 'Expand';
  });
}

// Event listeners for expand buttons
expandButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    const windowElement = this.closest('.window');
    
    if (windowElement.classList.contains('expanded')) {
      restoreWindows();
    } else {
      expandWindow(windowElement);
    }
  });
});

// Event listeners
htmlEditor.addEventListener('input', updatePreview);
cssEditor.addEventListener('input', updatePreview);
jsEditor.addEventListener('input', updatePreview);

refreshBtn.addEventListener('click', refreshPreview);

htmlFormatBtn.addEventListener('click', () => {
  htmlEditor.value = formatHTML(htmlEditor.value);
  updatePreview();
});

cssFormatBtn.addEventListener('click', () => {
  cssEditor.value = formatCSS(cssEditor.value);
  updatePreview();
});

jsFormatBtn.addEventListener('click', () => {
  jsEditor.value = formatJS(jsEditor.value);
  updatePreview();
});

// Initialize
updatePreview();

// Add some cyber effects
document.querySelectorAll('.window').forEach(window => {
  window.addEventListener('mouseenter', () => {
    window.style.boxShadow = '0 0 20px #00ffcc, 0 0 30px #00ffcc';
  });
  
  window.addEventListener('mouseleave', () => {
    window.style.boxShadow = '0 0 10px #00ffcc';
  });
});

</script>