index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Tales & Dangerous Dungeons</title>
    <meta name="description" content="Embark on thrilling adventures with Dark Tales & Dangerous Dungeons! Discover AI-generated campaigns released weekly—join the quest!"/>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="assets/css/style.css">
    <script type="text/javascript" src="assets/js/script.js"> </script>
    
    <script type="text/javascript" src="assets/js/hero-content.js"> </script>
    <!-- Add these in your HTML head -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const generateButton = document.getElementById('generateRSS');
            const generator = new RSSGenerator();
            
            generateButton.addEventListener('click', () => {
                generator.generateRSS();
            });
        });
    </script>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    .share-links {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px; /* Space between grid items */
        list-style-type: none;
        padding: 0;
    }
    .share-link {
        padding: 10px; /* Padding for the badges */
        border-radius: 12px; /* Rounded corners */
        color: white;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        transition: background-color 0.3s ease, transform 0.3s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        height: 40px; /* Fixed height for rectangular shape */
        display: flex;
        align-items: center;
        justify-content: center; /* Center align text */
    }
    .facebook { background: #3b5998; }
    .twitter { background: #1da1f2; }
    .linkedin { background: #0077b5; }
    .pinterest { background: #bd081c; }
    .whatsapp { background: #25D366; }
    .telegram { background: #0088cc; }
    .reddit { background: #ff4500; }
    .instagram { background: #c32aa3; }
    .mastodon { background: #4c4c4c; }
    .matrix { background: #00ff00; }
    .nostr { background: #ffcc00; }
    .email { background: #0077cc; } /* Blue background for email */
    .copy-button {
        background: #555;
        color: white;
        border: none;
        border-radius: 12px; /* Rounded corners */
        padding: 10px; /* Padding for the button */
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        transition: background-color 0.3s ease, transform 0.3s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        height: 40px; /* Fixed height for rectangular shape */
        display: flex;
        align-items: center;
        justify-content: center; /* Center align text */
        grid-column: 1 / -1; /* Span across all columns */
    }

    .share-link:hover, .copy-button:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }
</style>
</head>
<body>
    <header class="hero">
        <div class="hero-content">
            <h1 id="hero-headline">The Dungeon Scribe's Vault</h1>
            <div id="hero-intro">Explore an endless archive of mystical adventures, each crafted through arcane automation for your tabletop campaigns.</div>
            <div class="hero-whoami">
                <h2>The Nature of the Vault</h2>
                <p>
                    Within these digital halls lies an ever-expanding collection of automated adventures, each born from the 
                    marriage of artificial intelligence and careful human curation. The Vault's enchanted machinery transforms 
                    simple inspirations into fully-realized campaigns and dungeons, maintaining consistency through a 
                    methodical seven-phase ritual.
                </p>
    
                <h2>The Seven-Phase Ritual</h2>
                <div class="ritual-phases">
                    <div class="phase">
                        <h3>1. The Spark</h3>
                        <p>Every tale begins with inspiration - a vivid scene, a mysterious location, or an intriguing concept 
                           provided by the Vault's keeper.</p>
                    </div>
    
                    <div class="phase">
                        <h3>2. The Weaving</h3>
                        <p>Our automated Scribe takes this spark and begins its arcane calculations, transforming it into the 
                           foundation of a greater narrative.</p>
                    </div>
    
                    <div class="phase">
                        <h3>3. The Blueprint</h3>
                        <p>The narrative crystallizes into a series of One-Page Dungeons, each capturing the essence of a 
                           chapter or location within the greater tale.</p>
                    </div>
    
                    <div class="phase">
                        <h3>4. The Illumination</h3>
                        <p>Details flourish as the Scribe breathes life into characters, enriches locations with atmosphere, 
                           and imbues items with histories and purposes.</p>
                    </div>
    
                    <div class="phase">
                        <h3>5. The Visualization</h3>
                        <p>Through digital alchemy, three unique illustrations manifest for each adventure, complete with 
                           carefully crafted descriptions.</p>
                    </div>
    
                    <div class="phase">
                        <h3>6. The Purification</h3>
                        <p>Each element undergoes scrutiny to ensure originality and freedom from existing intellectual 
                           properties.</p>
                    </div>
    
                    <div class="phase">
                        <h3>7. The Binding</h3>
                        <p>All components are woven together into a cohesive document, sealed within the Vault until its 
                           appointed release.</p>
                    </div>
                </div>
    
                <div class="vault-schedule">
                    <h2>The Vault's Rhythm</h2>
                    <p>
                        Each week, one complete adventure emerges from the Vault's depths, freely available to all seekers 
                        of tales. This consistent flow is maintained through careful automation and curation.
                    </p>
                </div>
    
                <div class="technical-note">
                    <h2>A Note on Origins</h2>
                    <p>
                        While the first adventure was crafted by hand to establish our standards, all subsequent tales 
                        emerge through our automated ritual. The Vault's keeper provides initial direction, but the 
                        Scribe's machinery handles the intricate work of expansion and refinement.
                    </p>ll
                </div>
            </div>
    
            <div class="hero-donate">
                <h2>Supporting the Vault</h2>
                <p>
                    Though all adventures are freely given, those wishing to support the continuation of this work may 
                    contribute through Monero:
                </p>
                <pre class="monero-address"><code>43H3Uqnc9rfEsJjUXZYmam45MbtWmREFSANAWY5hijY4aht8cqYaT2BCNhfBhua5XwNdx9Tb6BEdt4tjUHJDwNW5H7mTiwe</code></pre>
                <p>
                    Or with Bitcoin.
                </p>
                <pre class="bitcoin-address"><code>bc1qew5kx0srtp8c4hlpw8ax0gllhnpsnp9ylthpas</code></pre>
                <p class="support-note">Your support keeps the arcane machinery running and the Vault expanding.</p>
            </div>
    
            <footer class="hero-footer">
                <p class="scribe-signature">
                    — The Dungeon Scribe<br>
                    <em>May your dice roll true</em>
                </p>
            </footer>
        </div>
    </header>
    <main class="main-content">
        <a href="feed.xml" class="rss-button">Subscribe to the Vault</a>
        <nav class="story-navigator">
            <div class="story-list">
                <h2>Stories</h2>
                <ul class="story-entries">
                    <li class="loading">Loading stories...</li>
                </ul>
            </div>
            
            <div class="episode-container">
                <h2 class="current-story-title">Select a Story</h2>
                <ul class="episode-entries"></ul>
            </div>
        </nav>
        <div class="content-display">
            <p>Select a story to begin your adventure...</p>
        </div>
    </main>

    <h2>Share this site</h2>
    <ul class="share-links">
        <li><a id="facebook" class="share-link facebook" href="#" target="_blank">Facebook</a></li>
        <li><a id="twitter" class="share-link twitter" href="#" target="_blank">Twitter</a></li>
        <li><a id="linkedin" class="share-link linkedin" href="#" target="_blank">LinkedIn</a></li>
        <li><a id="pinterest" class="share-link pinterest" href="#" target="_blank">Pinterest</a></li>
        <li><a id="whatsapp" class="share-link whatsapp" href="#" target="_blank">WhatsApp</a></li>
        <li><a id="telegram" class="share-link telegram" href="#" target="_blank">Telegram</a></li>
        <li><a id="reddit" class="share-link reddit" href="#" target="_blank">Reddit</a></li>
        <li><a id="instagram" class="share-link instagram" href="#" target="_blank">Instagram</a></li>
        <li><a id="mastodon" class="share-link mastodon" href="#" target="_blank">Mastodon</a></li>
        <li><a id="matrix" class="share-link matrix" href="#" target="_blank">Matrix</a></li>
        <li><a id="nostr" class="share-link nostr" href="#" target="_blank">Nostr</a></li>
        <li><a id="email" class="share-link email" href="#">Email</a></li>
        <li><button id="copyButton" class="copy-button">Copy Link</button></li>
    </ul>

    <script>
        const domain = window.location.href; // Get the current page URL
        const message = "Check out this great site!";
        const hashtag = "MyWebsite";
        const emailSubject = "Check this out!";
        const emailBody = `I found this website that you might like: ${domain}`;

        // Social Media Sharing Links
        document.getElementById('facebook').href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(domain)}`;
        document.getElementById('twitter').href = `https://twitter.com/intent/tweet?url=${encodeURIComponent(domain)}&text=${encodeURIComponent(message)}&hashtags=${hashtag}`;
        document.getElementById('linkedin').href = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(domain)}`;
        document.getElementById('pinterest').href = `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(domain)}`;
        document.getElementById('whatsapp').href = `https://wa.me/?text=${encodeURIComponent(domain)}`;
        document.getElementById('telegram').href = `https://t.me/share/url?url=${encodeURIComponent(domain)}`;
        document.getElementById('reddit').href = `https://www.reddit.com/submit?url=${encodeURIComponent(domain)}`;
        document.getElementById('instagram').href = `https://www.instagram.com/?url=${encodeURIComponent(domain)}`;
        document.getElementById('mastodon').href = `https://mastodon.social/share?text=${encodeURIComponent(domain)}`;
        document.getElementById('matrix').href = `https://matrix.to/#/${encodeURIComponent(domain)}`;
        document.getElementById('nostr').href = `https://nostr.com/share?url=${encodeURIComponent(domain)}`;
        
        // Email Sharing
        document.getElementById('email').href = `mailto:?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;

        // Copy to Clipboard Functionality
        document.getElementById('copyButton').onclick = function() {
            navigator.clipboard.writeText(domain).then(() => {
                alert('Link copied to clipboard!');
            }).catch(err => {
                console.error('Error copying link: ', err);
            });
        };
    </script>
</body>
</html>