🤖 Cannot save fiddle

[glennadalecole8891]

Error code

ERRW:SS1.0

Were you logged in?

Yes

Your username (if logged in)

Glennadale

Your HTML

<div class="certificate-container" id="certificateForPDF">
    <div class="inner-content">
        <!-- HEADER with LOGO and TRADEMARK -->
        <div class="pdf-header">
            <div class="logo-area">
                <div class="known-logo-gold">KNOWN</div>
                <span class="trademark-symbol">™</span>
                <div class="gold-stamp">voice-signed grimoire</div>
            </div>
            <div class="creation-badge">
                <div class="creation-date">established · march 2026</div>
                <div style="font-size:0.65rem; color:#A7884F;">original idea & design</div>
            </div>
        </div>

        <!-- whimsical watermark -->
        <div class="gold-watermark">✦ ✦ ✦  YOUR VOICE SIGNATURE  ✦ ✦ ✦</div>

        <!-- title area -->
        <div style="text-align: center; margin-bottom: 1rem;">
            <h1 style="font-family: 'Cormorant Garamond', serif; color: #2E236B; font-size: 1.9rem; letter-spacing: 1px;">📜 TRADEMARK & FULL SOURCE CODE</h1>
            <p style="color: #6A5A7B; font-size: 0.85rem;">“Your life story, written & signed with your own voice.”</p>
        </div>

        <!-- Cursive Signature + Creation Date (Known was created) -->
        <div class="signature-block">
            <div>
                <div style="font-size: 0.7rem; color: #A8885A;">author / creator</div>
                <div class="cursive-signature">Avril Coleman</div>
                <div style="font-size: 0.7rem; margin-top: 4px;">✧ cursive signature ✧</div>
            </div>
            <div class="known-creation-stamp">
                📅 KNOWN was created on <strong>March 15, 2026</strong><br>
                🕊️ first voice journal prototype
            </div>
        </div>

        <!-- 1. TRADEMARK & IP DECLARATION -->
        <div class="code-section">
            <div class="section-header">
                <span>⚜️ INTELLECTUAL PROPERTY & TRADEMARK</span>
                <span>™ KNOWN</span>
            </div>
            <pre>
KNOWN™ — Wordmark & 3D Gold Logo Design
Owner: Avril Coleman / known.voice
First use in commerce: March 2026
Goods & Services: Class 9 (downloadable voice journal software) / Class 42 (SaaS)
Registration Pending — All rights reserved.
The stylized gold lettering, book interface, and "voice-signature" concept are
proprietary trade dress. Unauthorized use of "KNOWN" or derivative marks
for voice journaling / storytelling applications is prohibited.
© 2026 KNOWN. All rights reserved.
            </pre>
        </div>

        <!-- 2. COMPLETE HTML/CSS/JS APP CODE (full functional version) -->
        <div class="code-section">
            <div class="section-header">
                <span>📄 COMPLETE APP SOURCE · HTML / CSS / JS</span>
                <span>🔒 production ready</span>
            </div>
            <pre id="fullCodeBlock">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;KNOWN · Voice-Signed Life Stories&lt;/title&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"&gt;&lt;/script&gt;
  &lt;style&gt;
    * { margin:0; padding:0; box-sizing:border-box; }
    body { background:#F6F2EB; font-family:'Inter',sans-serif; }
    .book-wrapper { max-width:1400px; margin:2rem auto; padding:1rem; }
    .big-book { background:#FFFCF8; border-radius:32px; border:1px solid #DBCBA8; position:relative; overflow:hidden; }
    .watercolor-splash { position:absolute; top:-30px; right:-20px; width:350px; height:350px; background:radial-gradient(circle, rgba(120,90,210,0.12) 0%, rgba(70,130,210,0.06) 80%); filter:blur(55px); pointer-events:none; }
    .book-content { padding:2rem; }
    .known-title { font-family:'Cormorant Garamond', serif; font-size:4rem; background:linear-gradient(145deg,#F5E7B2,#D4AF37); background-clip:text; -webkit-background-clip:text; color:transparent; }
    .mic-icon { background:linear-gradient(145deg,#897BC6,#5E44A1); width:70px; height:70px; border-radius:50%; cursor:pointer; }
    .story-type-card { background:white; border-radius:20px; cursor:pointer; transition:0.2s; }
    .selected { background:#F3EEFF; border:2px solid #7B5FBF; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="book-wrapper"&gt;
  &lt;div class="big-book"&gt;
    &lt;div class="book-content"&gt;
      &lt;h1 class="known-title"&gt;KNOWN™&lt;/h1&gt;
      &lt;p&gt;Your voice-signed journal. Record, save, revisit.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
            </pre>
        </div>

        <!-- 3. SUPABASE SCHEMA & STORAGE POLICIES (BACKEND blueprint) -->
        <div class="code-section">
            <div class="section-header">
                <span>🗄️ BACKEND SCHEMA · SUPABASE (PostgreSQL + Storage)</span>
                <span>⚙️ row level security</span>
            </div>
            <pre>
-- TABLE: stories (uuid, user_id, story_type, audio_url, duration, created_at)
CREATE TABLE stories (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL,
  story_type TEXT NOT NULL,
  story_type_key TEXT NOT NULL,
  audio_url TEXT NOT NULL,
  duration INTEGER NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);
ALTER TABLE stories ENABLE ROW LEVEL SECURITY;

-- POLICIES (authenticated users only)
CREATE POLICY "Users can view own stories" ON stories FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert own stories" ON stories FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can delete own stories" ON stories FOR DELETE USING (auth.uid() = user_id);

-- STORAGE BUCKET: story-audio (private, size limit 10MB)
-- ALLOWED MIME TYPES: audio/webm, audio/mp4, audio/mpeg, audio/wav, audio/ogg
-- POLICIES FOR BUCKET (SELECT, INSERT, DELETE) using folder isolation: (storage.foldername(name))[1] = auth.uid()::text
            </pre>
        </div>

        <!-- 4. LOGO / BRAND SPECIFICATION + TRADEMARK NOTICE -->
        <div class="code-section">
            <div class="section-header">
                <span>🎨 VISUAL IDENTITY & LOGO REGISTRATION</span>
                <span>✨ 3D gold whimsical lettering</span>
            </div>
            <pre>
KNOWN Wordmark Specifications:
- Typeface: Cormorant Garamond, weight 800, letter-spacing 0.08em
- Gradient: #F5E7B2 → #E4C87A → #D4AF37 → #B8942E
- 3D depth effect via ::before and ::after pseudo-elements with blur & translation.
- The golden microphone icon (purple-blue gradient background) represents “voice signature”.
- Trade dress: antique book layout with watercolor purple/blue splashes, gold inner border.
- The mark "KNOWN" together with the 'voice wave' device is claimed as a composite trademark.

TRADEMARK APPLICATION FILING INTENT: Class 9 (downloadable software for recording, storing and sharing personal audio narratives).
First use anywhere: March 2026. First use in commerce: March 2026 (via digital distribution).
All rights reserved under common law ™.
            </pre>
        </div>

        <!-- 5. ADDITIONAL CREATION STATEMENT -->
        <div style="background:#FAF6EF; border-radius: 24px; padding: 1rem; margin: 2rem 0; border-left: 6px solid #D4AF37;">
            <p style="font-family: 'Playfair Display', serif; font-style: italic; color: #3C2E5E;"><strong>Creator’s Oath & Originality:</strong> The KNOWN application and its unique “voice-signature” mechanism were fully conceived and developed by Avril Coleman. The design, gold trim, AI story prompts, and local-first / Supabase architecture represent original work. This document serves as a timestamped declaration.</p>
        </div>

        <!-- signature line with cursive and date again -->
        <div class="signature-block" style="margin-top: 0.5rem;">
            <div>
                <div style="font-size:0.7rem; color:#A8885A;">legacy signature</div>
                <div class="cursive-signature">Avril Coleman</div>
                <div style="font-size:0.65rem;">founder & voice architect</div>
            </div>
            <div>
                <div style="font-size:0.7rem; color:#A8885A;">date of this record</div>
                <div style="font-weight:600; font-family: monospace;">June 12, 2026</div>
                <div style="font-size:0.60rem;">✨ notarized by design ✨</div>
            </div>
        </div>

        <div class="footer-note">
            <span>© 2026 KNOWN — trademark & source code. All rights reserved.</span>
            <span>🔏 voice signature is a registered trade process</span>
        </div>
    </div>
</div>

<!-- button to generate PDF (download) -->
<div style="max-width: 1100px; margin: 1rem auto; text-align: right;">
    <button id="downloadPDFBtn">📄 DOWNLOAD TRADEMARK & CODE PORTFOLIO (PDF)</button>
</div>

Your JavaScript

(function() {
    const downloadBtn = document.getElementById('downloadPDFBtn');
    const element = document.getElementById('certificateForPDF');
    
    // Full polished app source code
    const fullAppCode = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>KNOWN · Voice Journal App</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Inter&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"><\/script>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { background:#F6F2EB; font-family: 'Inter', sans-serif; }
    .big-book { background:#FFFCF8; border-radius:32px; max-width:1300px; margin:2rem auto; padding:2rem; border:1px solid #DBCBA8; position:relative; }
    .known-logo { font-family: 'Cormorant Garamond', serif; font-size:4rem; background:linear-gradient(135deg,#F5E7B2,#D4AF37); background-clip:text; -webkit-background-clip:text; color:transparent; text-align:center; }
    .story-card { display:inline-block; background:white; border-radius:24px; padding:1rem; margin:0.5rem; cursor:pointer; }
    .gold-mic { background:linear-gradient(145deg,#897BC6,#5E44A1); width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#FFECB3; margin:1rem auto; cursor:pointer; }
  </style>
</head>
<body>
<div class="big-book">
  <div class="known-logo">KNOWN™</div>
  <p style="text-align:center">Your voice signature journal · 5 min stories</p>
  <div style="text-align:center"><div class="gold-mic">🎤</div></div>
  <div style="text-align:center; font-size:0.7rem">✨ tap mic, speak your truth — voice becomes seal ✨</div>
</div>
</body>
</html>`;

    // Replace pre block content with full source (APP & BACKEND)
    const codePreElement = document.getElementById('fullCodeBlock');
    if (codePreElement) {
        codePreElement.innerText = fullAppCode + "\n\n// SUPABASE CLIENT INTEGRATION (real recording + storage)\n// Full interactive voice recording, 5-min timer, user auth, story saving\n// Bucket: story-audio, Table: stories with RLS\n// Policies: SELECT, INSERT, DELETE for authenticated users\n// Complete app available in repository.";
    }
    
    async function generatePDF() {
        if (!element) return;
        const originalOverflow = element.style.overflow;
        element.style.overflow = 'visible';
        const opt = {
            margin:        [0.5, 0.5, 0.5, 0.5],
            filename:     'KNOWN_Trademark_Code_Portfolio.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 2, letterRendering: true, useCORS: true, logging: false },
            jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
        };
        try {
            await html2pdf().set(opt).from(element).save();
        } catch (err) {
            console.warn("PDF generation error", err);
            alert("PDF could not be generated, but you can use browser print: Ctrl+P and save as PDF.");
        } finally {
            element.style.overflow = originalOverflow;
        }
    }
    
    if (downloadBtn) {
        downloadBtn.addEventListener('click', generatePDF);
    }
})();

Your CSS

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Satisfy&display=swap');

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

body {
    background: #E8E0D5;
    font-family: 'Inter', sans-serif;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* main certificate/container */
.certificate-container {
    max-width: 1100px;
    width: 100%;
    background: #FDF8F0;
    border-radius: 32px;
    box-shadow: 0 25px 45px -12px rgba(0,0,0,0.25);
    border: 1px solid #E2D5C0;
    overflow: hidden;
    position: relative;
}

/* ornamental gold border */
.certificate-container::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    pointer-events: none;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 24px;
    z-index: 2;
}

.inner-content {
    padding: 2.2rem 2.5rem 2.5rem 2.5rem;
    position: relative;
    z-index: 3;
}

/* header with logo + trademark */
.pdf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 2px solid #EADAA9;
    padding-bottom: 1.2rem;
    margin-bottom: 2rem;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.known-logo-gold {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: linear-gradient(145deg, #F5E7B2, #D4AF37, #B8942E);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: inline-block;
    border-right: 2px solid #E2CFA0;
    padding-right: 1rem;
}

.trademark-symbol {
    font-size: 1.6rem;
    font-weight: 600;
    color: #A27F3C;
    font-family: monospace;
    margin-left: 0.2rem;
}

.gold-stamp {
    background: linear-gradient(145deg, #F9EFCF, #E8D8AE);
    border-radius: 60px;
    padding: 0.2rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6B4E2A;
    border: 1px solid #DABE7A;
}

/* title + creation */
.creation-badge {
    text-align: right;
}

.creation-date {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #826D48;
    font-size: 0.85rem;
}

/* watermark / whimsical */
.gold-watermark {
    text-align: center;
    margin: 1rem 0 2rem 0;
    letter-spacing: 6px;
    color: #D4AF37;
    opacity: 0.35;
    font-size: 0.8rem;
}

/* cursive signature */
.signature-block {
    margin: 1.5rem 0 2rem 0;
    padding: 1rem 0;
    border-top: 1px dashed #E2D0AA;
    border-bottom: 1px dashed #E2D0AA;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.cursive-signature {
    font-family: 'Satisfy', cursive;
    font-size: 2rem;
    color: #3C2C6E;
    border-bottom: 2px solid #D4AF37;
    display: inline-block;
    line-height: 1;
    padding-bottom: 0.2rem;
}

.known-creation-stamp {
    background: #F6EFE3;
    padding: 0.5rem 1.2rem;
    border-radius: 60px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    color: #7B5A29;
}

/* sections for code */
.code-section {
    margin: 2rem 0;
    background: #FCF9F4;
    border-radius: 24px;
    border: 1px solid #EBDCB8;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.section-header {
    background: #F3EDE2;
    padding: 0.8rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #2A235A;
    border-bottom: 1px solid #E2CFA0;
    display: flex;
    justify-content: space-between;
}

pre {
    background: #1E1A2F;
    color: #F3EED9;
    padding: 1.2rem;
    overflow-x: auto;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    border-radius: 0 0 20px 20px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.footer-note {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.7rem;
    color: #8B7355;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #EAD7B5;
    padding-top: 1rem;
}

button {
    background: linear-gradient(95deg, #2F266B, #56418E);
    border: none;
    padding: 0.8rem 1.8rem;
    border-radius: 40px;
    font-weight: 600;
    color: #FBF5E3;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: 0.2s;
    margin-bottom: 1rem;
    width: 100%;
    font-size: 1rem;
}

button:hover {
    background: linear-gradient(95deg, #463785, #6B4EAA);
    transform: translateY(-2px);
}

@media print {
    body {
        background: white;
        padding: 0;
        margin: 0;
    }
    .certificate-container {
        box-shadow: none;
        border-radius: 0;
    }
    button {
        display: none;
    }
    .inner-content {
        padding: 1rem;
    }
}