<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #editor-container {
            display: none;
        }

        #certificate-container {
            display: block;
        }

        #editor-toolbar {
            margin-bottom: 10px;
        }

        .form-control {
            margin-bottom: 10px;
        }
    </style>
    <title>Student Character Certificate</title>
</head>
<body>

<div class="container mt-5" id="certificate-container">
    <div class="text-center">
        <img src="school_logo.png" alt="School Logo" style="max-width: 100px;">
        <h2 class="mt-3">School Name</h2>
        <p>Address: School Address</p>
    </div>

    <hr>

    <h3 class="mt-4">Character Certificate</h3>
    <div id="certificate-content">
        <p>qqqThis is to certify that <strong>[Student Name]</strong> has been a student of this school and has shown good character and conduct throughout the academic year.</p>
        <p>He/She has actively participated in various school activities and has demonstrated excellent behavior.</p>
        <p>This certificate is issued on <strong>[Date]</strong>.</p>
    </div>
</div>

<div class="container mt-5" id="editor-container">
    <div id="editor-toolbar">
        <label for="font-size">Font Size:</label>
        <input type="number" id="font-size" class="form-control" value="16">
        <label for="font-bold">Bold:</label>
        <input type="checkbox" id="font-bold" class="form-check-input">
        <label for="text-color">Text Color:</label>
        <input type="color" id="text-color" class="form-control" value="#000000">
    </div>

    <div id="editor"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/quill@1.3.6/dist/quill.js"></script>
<script>
    const certificateContainer = document.getElementById('certificate-container');
    const editorContainer = document.getElementById('editor-container');
    const fontSizeInput = document.getElementById('font-size');
    const boldCheckbox = document.getElementById('font-bold');
    const textColorInput = document.getElementById('text-color');
    const editorElement = document.getElementById('editor');
    const certificateContentElement = document.getElementById('certificate-content');

    const quill = new Quill(editorElement, {
        theme: 'snow',
    });

    function updateEditorStyles() {
        quill.format('size', `${fontSizeInput.value}px`);
        quill.format('bold', boldCheckbox.checked);
        quill.format('color', textColorInput.value);
    }

    fontSizeInput.addEventListener('input', updateEditorStyles);
    boldCheckbox.addEventListener('change', updateEditorStyles);
    textColorInput.addEventListener('input', updateEditorStyles);

    function toggleEditor() {
        certificateContainer.style.display = 'none';
        editorContainer.style.display = 'block';

        // Set initial editor content to match certificate content
        quill.clipboard.dangerouslyPasteHTML(certificateContentElement.innerHTML);
    }

    function printCertificate() {
        certificateContainer.style.display = 'block';
        editorContainer.style.display = 'none()';

        // Get the HTML content from Quill editor and set it in the certificate content
        const editorContent = quill.root.innerHTML;
        certificateContentElement.innerHTML = editorContent;
    }
</script>

<button class="btn btn-primary" onclick="toggleEditor()">Edit Certificate</button>
<button class="btn btn-success" onclick="printCertificate()">Print Certificate</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
