← angrydroid

🧪 Mythic Capsule Builder Pro

Create your own digital time capsule with advanced features

Basic Settings
Gallery
Mascot
Multi-Page
Theme Remix
Badges

Basic Capsule Settings

Gallery Image Upload

Upload images for your gallery section. Drag and drop or click to select files.

Drag & drop images here or click to browse

Mascot Overlay Selector

Choose a mascot or visual relic to overlay on your capsule.

Dragon
Dragon
Phoenix
Phoenix
Owl
Owl
Cat
Cat
Upload Custom
Custom
0°

Multi-Page Capsule

Create multiple pages for your capsule. Each page will be a separate HTML file.

  • index.html (Main Page)

Theme Remix Mode

Edit the CSS directly to customize your capsule's appearance.

Badge Unlock System

Earn badges by using different features of the capsule builder.

Live Preview

Capsule generated successfully!
`; const frame = document.getElementById("previewFrame"); frame.srcdoc = html; // Store the HTML for the current page state.pages[previewPage].generatedHTML = html; showNotification('Capsule generated successfully!'); } // Save and load configuration function saveConfig() { const config = { title: document.getElementById('title').value, content: document.getElementById('content').value, theme: document.getElementById('theme').value, about: document.getElementById('about').checked, gallery: document.getElementById('gallery').checked, guestbook: document.getElementById('guestbook').checked, glow: document.getElementById('glow').checked, particles: document.getElementById('particles').checked, galleryImages: state.galleryImages, selectedMascot: state.selectedMascot, customMascot: state.customMascot, mascotPosition: state.mascotPosition, mascotRotation: state.mascotRotation, pages: state.pages, customCss: state.customCss }; const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' }); saveAs(blob, 'mythic-capsule-config.json'); showNotification('Configuration saved successfully!'); } function loadConfig(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { try { const config = JSON.parse(e.target.result); // Restore the configuration document.getElementById('title').value = config.title || ''; document.getElementById('content').value = config.content || ''; document.getElementById('theme').value = config.theme || 'indie'; document.getElementById('about').checked = config.about || false; document.getElementById('gallery').checked = config.gallery || false; document.getElementById('guestbook').checked = config.guestbook || false; document.getElementById('glow').checked = config.glow || false; document.getElementById('particles').checked = config.particles || false; state.galleryImages = config.galleryImages || []; state.selectedMascot = config.selectedMascot || null; state.customMascot = config.customMascot || null; state.mascotPosition = config.mascotPosition || 'bottom-right'; state.mascotRotation = config.mascotRotation || 0; state.pages = config.pages || { 'index': { title: 'My Mythic Capsule', content: 'Welcome...' } }; state.customCss = config.customCss || themes.indie; // Update UI elements document.getElementById('cssEditor').value = state.customCss; updateGalleryPreview(); // Update page list const pageList = document.getElementById('pageList'); const previewPage = document.getElementById('previewPage'); pageList.innerHTML = ''; previewPage.innerHTML = ''; for (const page in state.pages) { const pageName = page === 'index' ? 'Home' : page.charAt(0).toUpperCase() + page.slice(1); // Add to page list const li = document.createElement('li'); li.className = 'page-item'; li.innerHTML = ` ${page}.html
${page !== 'index' ? `` : ''}
`; pageList.appendChild(li); // Add to preview selector const option = document.createElement('option'); option.value = page; option.textContent = pageName; previewPage.appendChild(option); } // Update mascot selection document.querySelectorAll('.mascot-option').forEach(option => { option.classList.remove('selected'); if (option.dataset.mascot === state.selectedMascot) { option.classList.add('selected'); if (state.selectedMascot === 'custom') { document.getElementById('mascotUploadZone').style.display = 'block'; } } }); document.getElementById('mascotPosition').value = state.mascotPosition; document.getElementById('mascotRotation').value = state.mascotRotation; document.getElementById('rotationValue').textContent = `${state.mascotRotation}°`; generatePage(); checkBadges(); showNotification('Configuration loaded successfully!'); } catch (error) { showNotification('Error loading configuration: ' + error.message); } }; reader.readAsText(file); } } function resetConfig() { if (confirm('Are you sure you want to reset all settings? This cannot be undone.')) { // Reset form values document.getElementById('title').value = 'My Mythic Capsule'; document.getElementById('content').value = 'Welcome to my digital time capsule. This space contains memories, thoughts, and artifacts from my journey through time.'; document.getElementById('theme').value = 'indie'; document.getElementById('about').checked = true; document.getElementById('gallery').checked = false; document.getElementById('guestbook').checked = true; document.getElementById('glow').checked = false; document.getElementById('particles').checked = false; // Reset state state.galleryImages = []; state.selectedMascot = null; state.customMascot = null; state.mascotPosition = 'bottom-right'; state.mascotRotation = 0; state.pages = { 'index': { title: 'My Mythic Capsule', content: 'Welcome to my digital time capsule. This space contains memories, thoughts, and artifacts from my journey through time.' } }; state.customCss = themes.indie; // Update UI document.getElementById('cssEditor').value = themes.indie; updateGalleryPreview(); // Reset page list const pageList = document.getElementById('pageList'); const previewPage = document.getElementById('previewPage'); pageList.innerHTML = `
  • index.html (Main Page)
    • `; previewPage.innerHTML = ''; // Reset mascot selection document.querySelectorAll('.mascot-option').forEach(option => { option.classList.remove('selected'); }); document.getElementById('mascotUploadZone').style.display = 'none'; document.getElementById('mascotPosition').value = 'bottom-right'; document.getElementById('mascotRotation').value = 0; document.getElementById('rotationValue').textContent = '0°'; generatePage(); checkBadges(); showNotification('Configuration reset successfully!'); } } // Download the capsule as a ZIP file function downloadZip() { if (Object.keys(state.pages).length === 0) { showNotification('Please generate a capsule first!'); return; } const zip = new JSZip(); const imagesFolder = zip.folder("images"); // Add gallery images to the images folder state.galleryImages.forEach((img, index) => { // Convert data URL to blob const blob = dataURLToBlob(img.data); imagesFolder.file(img.name, blob); }); // Add HTML files for each page for (const page in state.pages) { const html = state.pages[page].generatedHTML || ` ${state.pages[page].title} ← angrydroid

    ${state.pages[page].title}

    ${state.pages[page].content}

    This page was not previewed. Regenerate to see the full content.

    `; const filename = page === 'index' ? 'index.html' : `${page}.html`; zip.file(filename, html); } // Add README zip.file("README.txt", ` MYTHIC CAPSULE PRO ================== This capsule was created with the Mythic Capsule Builder Pro. FEATURES INCLUDED: - Multi-page navigation - Custom theme styling - Image gallery - Mascot overlay - Responsive design INSTRUCTIONS: 1. Extract all files to a folder 2. Open index.html in a web browser 3. Navigate between pages using the links 4. Share with others to preserve your digital legacy CUSTOMIZATION: - Edit HTML files directly to modify content - Update CSS in the style tags for visual changes - Add more images to the "images" folder and update references Created: ${new Date().toISOString()} `); zip.generateAsync({ type: "blob" }).then(content => { saveAs(content, "mythic-capsule-pro.zip"); showNotification('Capsule downloaded as ZIP!'); }); } // Utility function to convert data URL to blob function dataURLToBlob(dataURL) { const parts = dataURL.split(';base64,'); const contentType = parts[0].split(':')[1]; const raw = window.atob(parts[1]); const rawLength = raw.length; const uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); } // Show notification function showNotification(message) { const notification = document.getElementById('notification'); notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); }