Difference between revisions of "Form:Domains Creation"

From End to Dawn
Jump to navigation Jump to search
Line 1: Line 1:
−
<noinclude>
+
<!DOCTYPE html>
−
This is the "Domains Creation" form.
+
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <title>Domain Creation Form</title>
 +
    <link href="https://fonts.googleapis.com/css2?family=Limelight&family=Poiret+One&family=Belleza&display=swap" rel="stylesheet">
 +
    <style>
 +
        * {
 +
            margin: 0;
 +
            padding: 0;
 +
            box-sizing: border-box;
 +
        }
  
−
To create a page with this form, enter the Domain Code below.
+
        body {
−
If a page with that name already exists, you will be sent to a form to edit that page.
+
            background-color: #030303;
 +
            color: #DC7;
 +
            font-family: 'Belleza', 'Avant Garde', sans-serif;
 +
            padding: 20px;
 +
        }
  
−
If you upload an image and name it <nowiki>{{PAGENAME}}</nowiki>.png or .gif or any of the other image file types MediaWiki supports, where <nowiki>{{PAGENAME}}</nowiki> is the name of your domain page, that image should show up as a title image at the top of your domain page.
+
        .container {
 +
            max-width: 1200px;
 +
            margin: 0 auto;
 +
            background-color: #000;
 +
            border: 6px double #DC7;
 +
            padding: 30px;
 +
        }
  
−
If you have '''any''' trouble with this form or the pages created by it, please use the "[[Form_talk:Domain Creation|Discussion]]" tab at the top of this page to log that feedback.  
+
        h1 {
 +
            font-family: "Limelight", cursive;
 +
            color: #DC7;
 +
            font-size: 2.5em;
 +
            text-align: center;
 +
            margin-bottom: 20px;
 +
        }
  
 +
        .instructions {
 +
            background-color: #111;
 +
            border: 2px solid #DC7;
 +
            padding: 20px;
 +
            margin-bottom: 30px;
 +
            border-radius: 5px;
 +
        }
  
−
{{#forminput:form=Domains Creation|namespace selector=Category|placeholder=Domain Code}}
+
        .instructions h2 {
 +
            font-family: "Poiret One", cursive;
 +
            color: #DC7;
 +
            font-size: 1.3em;
 +
            margin-bottom: 10px;
 +
        }
  
−
</noinclude><includeonly>
+
        .instructions p {
−
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #AAAAAA;"></div>
+
            margin-bottom: 10px;
−
{{{for template|Domains}}}
+
            line-height: 1.6;
−
{| class="formtable"
+
        }
−
! Title Picture:
 
−
| {{{field|titlepic|uploadable|image preview}}}
 
−
|-
 
−
! Region*:
 
−
| {{{field|region|input type=tree|top category=Region|hideroot|mandatory}}}
 
−
|-
 
−
! City, State*:
 
−
| {{{field|citystate|input type=textarea}}}
 
−
|-
 
−
! DST*:
 
−
| {{{field|dst|mandatory}}}
 
−
|-
 
−
! DST Email*:
 
−
| {{{field|dstemail|mandatory}}}
 
−
|-
 
−
! DC*:
 
−
| {{{field|dc|mandatory}}}
 
−
|-
 
−
! DC Email*:
 
−
| {{{field|dcemail|mandatory}}}
 
−
|}
 
−
{{{end template}}}
 
  
 +
        .instructions ul {
 +
            margin-left: 20px;
 +
            margin-top: 10px;
 +
        }
  
−
{{{standard input|summary}}}
+
        .instructions li {
 +
            list-style-type: disc;
 +
            margin-bottom: 5px;
 +
        }
  
−
{{{standard input|minor edit}}} {{{standard input|watch}}}
+
        .form-section {
 +
            margin-bottom: 25px;
 +
        }
  
−
{{{standard input|save}}} {{{standard input|preview}}} {{{standard input|changes}}} {{{standard input|cancel}}}
+
        .form-section h2 {
−
</includeonly>
+
            font-family: "Poiret One", cursive;
 +
            color: #DC7;
 +
            font-size: 1.5em;
 +
            margin-bottom: 15px;
 +
        }
 +
 
 +
        .formtable {
 +
            width: 100%;
 +
            border-collapse: collapse;
 +
            margin-bottom: 25px;
 +
        }
 +
 
 +
        .formtable tr {
 +
            border-bottom: 1px solid #444;
 +
        }
 +
 
 +
        .formtable th {
 +
            text-align: right;
 +
            padding: 15px 20px;
 +
            width: 200px;
 +
            vertical-align: top;
 +
            font-weight: bold;
 +
            color: #DC7;
 +
        }
 +
 
 +
        .formtable td {
 +
            padding: 15px 20px;
 +
        }
 +
 
 +
        .required {
 +
            color: #F88;
 +
        }
 +
 
 +
        label {
 +
            display: block;
 +
            margin-bottom: 8px;
 +
            font-weight: bold;
 +
            color: #DC7;
 +
        }
 +
 
 +
        input[type="text"],
 +
        input[type="email"],
 +
        input[type="file"],
 +
        select,
 +
        textarea {
 +
            width: 100%;
 +
            padding: 10px;
 +
            background-color: #222;
 +
            border: 2px solid #DC7;
 +
            color: #DC7;
 +
            font-family: 'Belleza', 'Avant Garde', sans-serif;
 +
            font-size: 16px;
 +
        }
 +
 
 +
        textarea {
 +
            min-height: 80px;
 +
            resize: vertical;
 +
        }
 +
 
 +
        input[type="text"]:focus,
 +
        input[type="email"]:focus,
 +
        input[type="file"]:focus,
 +
        select:focus,
 +
        textarea:focus {
 +
            outline: none;
 +
            border-color: #FFF;
 +
            background-color: #333;
 +
        }
 +
 
 +
        .image-preview {
 +
            margin-top: 10px;
 +
            max-width: 300px;
 +
            border: 2px solid #DC7;
 +
            display: none;
 +
        }
 +
 
 +
        .image-preview.show {
 +
            display: block;
 +
        }
 +
 
 +
        .image-preview img {
 +
            width: 100%;
 +
            height: auto;
 +
        }
 +
 
 +
        .help-text {
 +
            font-size: 14px;
 +
            color: #AAA;
 +
            margin-top: 5px;
 +
        }
 +
 
 +
        .button-group {
 +
            display: flex;
 +
            gap: 15px;
 +
            margin-top: 30px;
 +
            flex-wrap: wrap;
 +
        }
 +
 
 +
        button {
 +
            padding: 12px 24px;
 +
            background-color: #DC7;
 +
            color: #000;
 +
            border: none;
 +
            font-family: "Poiret One", cursive;
 +
            font-size: 18px;
 +
            font-weight: bold;
 +
            cursor: pointer;
 +
            transition: all 0.3s;
 +
        }
 +
 
 +
        button:hover {
 +
            background-color: #FFF;
 +
            transform: translateY(-2px);
 +
        }
 +
 
 +
        button:active {
 +
            transform: translateY(0);
 +
        }
 +
 
 +
        button:disabled {
 +
            background-color: #555;
 +
            color: #888;
 +
            cursor: not-allowed;
 +
            transform: none;
 +
        }
 +
 
 +
        .secondary-btn {
 +
            background-color: #555;
 +
            color: #DC7;
 +
        }
 +
 
 +
        .secondary-btn:hover {
 +
            background-color: #777;
 +
        }
 +
 
 +
        .output-section {
 +
            margin-top: 40px;
 +
            padding-top: 30px;
 +
            border-top: 3px solid #DC7;
 +
        }
 +
 
 +
        .output-box {
 +
            background-color: #111;
 +
            border: 2px solid #DC7;
 +
            padding: 20px;
 +
            font-family: monospace;
 +
            font-size: 14px;
 +
            white-space: pre-wrap;
 +
            word-wrap: break-word;
 +
            max-height: 500px;
 +
            overflow-y: auto;
 +
            display: none;
 +
        }
 +
 
 +
        .output-box.show {
 +
            display: block;
 +
        }
 +
 
 +
        .copy-notification {
 +
            position: fixed;
 +
            top: 20px;
 +
            right: 20px;
 +
            background-color: #DC7;
 +
            color: #000;
 +
            padding: 15px 25px;
 +
            border-radius: 5px;
 +
            font-weight: bold;
 +
            opacity: 0;
 +
            transition: opacity 0.3s;
 +
            pointer-events: none;
 +
            z-index: 1000;
 +
        }
 +
 
 +
        .copy-notification.show {
 +
            opacity: 1;
 +
        }
 +
 
 +
        .checkbox-group {
 +
            display: flex;
 +
            gap: 20px;
 +
            margin-top: 15px;
 +
        }
 +
 
 +
        .checkbox-group label {
 +
            display: flex;
 +
            align-items: center;
 +
            gap: 8px;
 +
            cursor: pointer;
 +
        }
 +
 
 +
        input[type="checkbox"] {
 +
            width: auto;
 +
            cursor: pointer;
 +
        }
 +
 
 +
        @media (max-width: 768px) {
 +
            .formtable th,
 +
            .formtable td {
 +
                display: block;
 +
                width: 100%;
 +
                text-align: left;
 +
            }
 +
 
 +
            .formtable th {
 +
                padding-bottom: 5px;
 +
            }
 +
 
 +
            .formtable td {
 +
                padding-top: 5px;
 +
            }
 +
        }
 +
    </style>
 +
</head>
 +
<body>
 +
    <div class="copy-notification" id="copyNotification">Copied to clipboard!</div>
 +
   
 +
    <div class="container">
 +
        <h1>Domain Creation Form</h1>
 +
       
 +
        <div class="instructions">
 +
            <h2>Instructions</h2>
 +
            <p>Use this form to create a new domain page. Please fill in all required fields marked with <span class="required">*</span>.</p>
 +
            <ul>
 +
                <li>If you upload an image and name it <strong>[DomainName].png</strong> (or .gif, .jpg, .jpeg, .webp), where [DomainName] matches your domain page name, that image will automatically display as the title image.</li>
 +
                <li>All required fields must be completed before generating the page.</li>
 +
                <li>The form will generate the wiki code needed to create your domain page.</li>
 +
            </ul>
 +
        </div>
 +
       
 +
        <form id="domainForm">
 +
            <table class="formtable">
 +
                <tr>
 +
                    <th>Domain Code <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <input type="text" id="domainCode" name="domainCode" required>
 +
                        <p class="help-text">Enter the domain code (this will be the page name)</p>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>Title Picture:</th>
 +
                    <td>
 +
                        <input type="file" id="titlepic" name="titlepic" accept="image/*">
 +
                        <p class="help-text">Optional: Upload an image for the domain. If left blank, the form will look for an image named [DomainCode].png/jpg/gif/etc.</p>
 +
                        <div class="image-preview" id="imagePreview">
 +
                            <img id="previewImg" src="" alt="Image preview">
 +
                        </div>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>Region <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <select id="region" name="region" required>
 +
                            <option value="">Select a region...</option>
 +
                            <option value="Northeast">Northeast</option>
 +
                            <option value="Southeast">Southeast</option>
 +
                            <option value="Midwest">Midwest</option>
 +
                            <option value="Southwest">Southwest</option>
 +
                            <option value="West">West</option>
 +
                            <option value="Northwest">Northwest</option>
 +
                            <option value="International">International</option>
 +
                        </select>
 +
                        <p class="help-text">Select the region this domain belongs to</p>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>City, State <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <textarea id="citystate" name="citystate" required></textarea>
 +
                        <p class="help-text">Enter the city and state for this domain</p>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>DST <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <input type="text" id="dst" name="dst" required>
 +
                        <p class="help-text">Domain Storyteller name</p>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>DST Email <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <input type="email" id="dstemail" name="dstemail" required>
 +
                        <p class="help-text">Domain Storyteller email address</p>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>DC <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <input type="text" id="dc" name="dc" required>
 +
                        <p class="help-text">Domain Coordinator name</p>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <th>DC Email <span class="required">*</span>:</th>
 +
                    <td>
 +
                        <input type="email" id="dcemail" name="dcemail" required>
 +
                        <p class="help-text">Domain Coordinator email address</p>
 +
                    </td>
 +
                </tr>
 +
            </table>
 +
 
 +
            <div class="checkbox-group">
 +
                <label>
 +
                    <input type="checkbox" id="minorEdit" name="minorEdit">
 +
                    This is a minor edit
 +
                </label>
 +
                <label>
 +
                    <input type="checkbox" id="watchPage" name="watchPage" checked>
 +
                    Watch this page
 +
                </label>
 +
            </div>
 +
 
 +
            <div class="button-group">
 +
                <button type="submit">Save Page</button>
 +
                <button type="button" id="previewBtn" class="secondary-btn">Preview</button>
 +
                <button type="button" id="copyBtn" class="secondary-btn" disabled>Copy Code</button>
 +
                <button type="button" id="resetBtn" class="secondary-btn">Cancel</button>
 +
            </div>
 +
        </form>
 +
 
 +
        <div class="output-section">
 +
            <h2>Generated Wiki Code</h2>
 +
            <div class="output-box" id="outputBox"></div>
 +
        </div>
 +
    </div>
 +
 
 +
    <script>
 +
        const form = document.getElementById('domainForm');
 +
        const outputBox = document.getElementById('outputBox');
 +
        const copyBtn = document.getElementById('copyBtn');
 +
        const resetBtn = document.getElementById('resetBtn');
 +
        const previewBtn = document.getElementById('previewBtn');
 +
        const copyNotification = document.getElementById('copyNotification');
 +
        const imageInput = document.getElementById('titlepic');
 +
        const imagePreview = document.getElementById('imagePreview');
 +
        const previewImg = document.getElementById('previewImg');
 +
 
 +
        imageInput.addEventListener('change', function(e) {
 +
            const file = e.target.files[0];
 +
            if (file) {
 +
                const reader = new FileReader();
 +
                reader.onload = function(e) {
 +
                    previewImg.src = e.target.result;
 +
                    imagePreview.classList.add('show');
 +
                };
 +
                reader.readAsDataURL(file);
 +
            } else {
 +
                imagePreview.classList.remove('show');
 +
            }
 +
        });
 +
 
 +
        form.addEventListener('submit', function(e) {
 +
            e.preventDefault();
 +
            generateTemplate();
 +
        });
 +
 
 +
        previewBtn.addEventListener('click', function() {
 +
            generateTemplate(true);
 +
        });
 +
 
 +
        copyBtn.addEventListener('click', function() {
 +
            const text = outputBox.textContent;
 +
            navigator.clipboard.writeText(text).then(function() {
 +
                showCopyNotification();
 +
            });
 +
        });
 +
 
 +
        resetBtn.addEventListener('click', function() {
 +
            if (confirm('Are you sure you want to cancel? All entered data will be lost.')) {
 +
                form.reset();
 +
                outputBox.textContent = '';
 +
                outputBox.classList.remove('show');
 +
                copyBtn.disabled = true;
 +
                imagePreview.classList.remove('show');
 +
            }
 +
        });
 +
 
 +
        function generateTemplate(isPreview = false) {
 +
            const domainCode = document.getElementById('domainCode').value;
 +
            const titlepicFile = document.getElementById('titlepic').files[0];
 +
            const titlepicName = titlepicFile ? titlepicFile.name : '';
 +
            const region = document.getElementById('region').value;
 +
            const citystate = document.getElementById('citystate').value;
 +
            const dst = document.getElementById('dst').value;
 +
            const dstemail = document.getElementById('dstemail').value;
 +
            const dc = document.getElementById('dc').value;
 +
            const dcemail = document.getElementById('dcemail').value;
 +
 
 +
            let output = '';
 +
           
 +
            if (isPreview) {
 +
                output += '=== PREVIEW MODE ===\n\n';
 +
            }
 +
 
 +
            output += `{{Domain\n`;
 +
            output += `|titlepic=${titlepicName}\n`;
 +
            output += `|region=${region}\n`;
 +
            output += `|citystate=${citystate}\n`;
 +
            output += `|dst=${dst}\n`;
 +
            output += `|dstemail=${dstemail}\n`;
 +
            output += `|dc=${dc}\n`;
 +
            output += `|dcemail=${dcemail}\n`;
 +
            output += `}}`;
 +
 
 +
            output += `\n\n<!-- IMPORTANT: Create these subpages for the template to work correctly -->\n\n`;
 +
            output += `Page: "${domainCode} DST"\nContent: ${dst}\n\n`;
 +
            output += `Page: "${domainCode} DST Email"\nContent: ${dstemail}\n\n`;
 +
            output += `Page: "${domainCode} DC"\nContent: ${dc}\n\n`;
 +
            output += `Page: "${domainCode} DC Email"\nContent: ${dcemail}\n\n`;
 +
 
 +
            if (titlepicName) {
 +
                output += `\n<!-- Image file to upload: ${titlepicName} -->\n`;
 +
            } else {
 +
                output += `\n<!-- No image uploaded. The template will look for: ${domainCode}.png, .jpg, .gif, .jpeg, or .webp -->\n`;
 +
            }
 +
 
 +
            output += `\n<!-- Page will be added to categories: Domain, ${region}, Masquerade ${domainCode} -->\n`;
 +
 
 +
            outputBox.textContent = output;
 +
            outputBox.classList.add('show');
 +
            copyBtn.disabled = false;
 +
 
 +
            if (!isPreview) {
 +
                window.scrollTo({
 +
                    top: document.body.scrollHeight,
 +
                    behavior: 'smooth'
 +
                });
 +
            }
 +
        }
 +
 
 +
        function showCopyNotification() {
 +
            copyNotification.classList.add('show');
 +
            setTimeout(function() {
 +
                copyNotification.classList.remove('show');
 +
            }, 2000);
 +
        }
 +
    </script>
 +
</body>
 +
</html>

Revision as of 18:25, 4 October 2025

<!DOCTYPE html> <html lang="en"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Domain Creation Form</title>
   <link href="https://fonts.googleapis.com/css2?family=Limelight&family=Poiret+One&family=Belleza&display=swap" rel="stylesheet">
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           background-color: #030303;
           color: #DC7;
           font-family: 'Belleza', 'Avant Garde', sans-serif;
           padding: 20px;
       }

       .container {
           max-width: 1200px;
           margin: 0 auto;
           background-color: #000;
           border: 6px double #DC7;
           padding: 30px;
       }

       h1 {
           font-family: "Limelight", cursive;
           color: #DC7;
           font-size: 2.5em;
           text-align: center;
           margin-bottom: 20px;
       }

       .instructions {
           background-color: #111;
           border: 2px solid #DC7;
           padding: 20px;
           margin-bottom: 30px;
           border-radius: 5px;
       }

       .instructions h2 {
           font-family: "Poiret One", cursive;
           color: #DC7;
           font-size: 1.3em;
           margin-bottom: 10px;
       }

       .instructions p {
           margin-bottom: 10px;
           line-height: 1.6;
       }

       .instructions ul {
           margin-left: 20px;
           margin-top: 10px;
       }

       .instructions li {
           list-style-type: disc;
           margin-bottom: 5px;
       }

       .form-section {
           margin-bottom: 25px;
       }

       .form-section h2 {
           font-family: "Poiret One", cursive;
           color: #DC7;
           font-size: 1.5em;
           margin-bottom: 15px;
       }

       .formtable {
           width: 100%;
           border-collapse: collapse;
           margin-bottom: 25px;
       }

       .formtable tr {
           border-bottom: 1px solid #444;
       }

       .formtable th {
           text-align: right;
           padding: 15px 20px;
           width: 200px;
           vertical-align: top;
           font-weight: bold;
           color: #DC7;
       }

       .formtable td {
           padding: 15px 20px;
       }

       .required {
           color: #F88;
       }

       label {
           display: block;
           margin-bottom: 8px;
           font-weight: bold;
           color: #DC7;
       }

       input[type="text"],
       input[type="email"],
       input[type="file"],
       select,
       textarea {
           width: 100%;
           padding: 10px;
           background-color: #222;
           border: 2px solid #DC7;
           color: #DC7;
           font-family: 'Belleza', 'Avant Garde', sans-serif;
           font-size: 16px;
       }

       textarea {
           min-height: 80px;
           resize: vertical;
       }

       input[type="text"]:focus,
       input[type="email"]:focus,
       input[type="file"]:focus,
       select:focus,
       textarea:focus {
           outline: none;
           border-color: #FFF;
           background-color: #333;
       }

       .image-preview {
           margin-top: 10px;
           max-width: 300px;
           border: 2px solid #DC7;
           display: none;
       }

       .image-preview.show {
           display: block;
       }

       .image-preview img {
           width: 100%;
           height: auto;
       }

       .help-text {
           font-size: 14px;
           color: #AAA;
           margin-top: 5px;
       }

       .button-group {
           display: flex;
           gap: 15px;
           margin-top: 30px;
           flex-wrap: wrap;
       }

       button {
           padding: 12px 24px;
           background-color: #DC7;
           color: #000;
           border: none;
           font-family: "Poiret One", cursive;
           font-size: 18px;
           font-weight: bold;
           cursor: pointer;
           transition: all 0.3s;
       }

       button:hover {
           background-color: #FFF;
           transform: translateY(-2px);
       }

       button:active {
           transform: translateY(0);
       }

       button:disabled {
           background-color: #555;
           color: #888;
           cursor: not-allowed;
           transform: none;
       }

       .secondary-btn {
           background-color: #555;
           color: #DC7;
       }

       .secondary-btn:hover {
           background-color: #777;
       }

       .output-section {
           margin-top: 40px;
           padding-top: 30px;
           border-top: 3px solid #DC7;
       }

       .output-box {
           background-color: #111;
           border: 2px solid #DC7;
           padding: 20px;
           font-family: monospace;
           font-size: 14px;
           white-space: pre-wrap;
           word-wrap: break-word;
           max-height: 500px;
           overflow-y: auto;
           display: none;
       }

       .output-box.show {
           display: block;
       }

       .copy-notification {
           position: fixed;
           top: 20px;
           right: 20px;
           background-color: #DC7;
           color: #000;
           padding: 15px 25px;
           border-radius: 5px;
           font-weight: bold;
           opacity: 0;
           transition: opacity 0.3s;
           pointer-events: none;
           z-index: 1000;
       }

       .copy-notification.show {
           opacity: 1;
       }

       .checkbox-group {
           display: flex;
           gap: 20px;
           margin-top: 15px;
       }

       .checkbox-group label {
           display: flex;
           align-items: center;
           gap: 8px;
           cursor: pointer;
       }

       input[type="checkbox"] {
           width: auto;
           cursor: pointer;
       }

       @media (max-width: 768px) {
           .formtable th,
           .formtable td {
               display: block;
               width: 100%;
               text-align: left;
           }

           .formtable th {
               padding-bottom: 5px;
           }

           .formtable td {
               padding-top: 5px;
           }
       }
   </style>

</head> <body>

Copied to clipboard!

Domain Creation Form

Instructions

Use this form to create a new domain page. Please fill in all required fields marked with *.

  • If you upload an image and name it [DomainName].png (or .gif, .jpg, .jpeg, .webp), where [DomainName] matches your domain page name, that image will automatically display as the title image.
  • All required fields must be completed before generating the page.
  • The form will generate the wiki code needed to create your domain page.
       <form id="domainForm">
Domain Code *: 
                       <input type="text" id="domainCode" name="domainCode" required>

Enter the domain code (this will be the page name)
Title Picture: 
                       <input type="file" id="titlepic" name="titlepic" accept="image/*">

Optional: Upload an image for the domain. If left blank, the form will look for an image named [DomainCode].png/jpg/gif/etc.

                           <img id="previewImg" src="" alt="Image preview">
Region *: 
                       <select id="region" name="region" required>
                           <option value="">Select a region...</option>
                           <option value="Northeast">Northeast</option>
                           <option value="Southeast">Southeast</option>
                           <option value="Midwest">Midwest</option>
                           <option value="Southwest">Southwest</option>
                           <option value="West">West</option>
                           <option value="Northwest">Northwest</option>
                           <option value="International">International</option>
                       </select>

Select the region this domain belongs to
City, State *: 
                       <textarea id="citystate" name="citystate" required></textarea>

Enter the city and state for this domain
DST *: 
                       <input type="text" id="dst" name="dst" required>

Domain Storyteller name
DST Email *: 
                       <input type="email" id="dstemail" name="dstemail" required>

Domain Storyteller email address
DC *: 
                       <input type="text" id="dc" name="dc" required>

Domain Coordinator name
DC Email *: 
                       <input type="email" id="dcemail" name="dcemail" required>

Domain Coordinator email address

 
               <label>
                   <input type="checkbox" id="minorEdit" name="minorEdit">
                   This is a minor edit
               </label>
               <label>
                   <input type="checkbox" id="watchPage" name="watchPage" checked>
                   Watch this page
               </label>

               <button type="submit">Save Page</button>
               <button type="button" id="previewBtn" class="secondary-btn">Preview</button>
               <button type="button" id="copyBtn" class="secondary-btn" disabled>Copy Code</button>
               <button type="button" id="resetBtn" class="secondary-btn">Cancel</button>

       </form>

Generated Wiki Code

   <script>
       const form = document.getElementById('domainForm');
       const outputBox = document.getElementById('outputBox');
       const copyBtn = document.getElementById('copyBtn');
       const resetBtn = document.getElementById('resetBtn');
       const previewBtn = document.getElementById('previewBtn');
       const copyNotification = document.getElementById('copyNotification');
       const imageInput = document.getElementById('titlepic');
       const imagePreview = document.getElementById('imagePreview');
       const previewImg = document.getElementById('previewImg');

       imageInput.addEventListener('change', function(e) {
           const file = e.target.files[0];
           if (file) {
               const reader = new FileReader();
               reader.onload = function(e) {
                   previewImg.src = e.target.result;
                   imagePreview.classList.add('show');
               };
               reader.readAsDataURL(file);
           } else {
               imagePreview.classList.remove('show');
           }
       });

       form.addEventListener('submit', function(e) {
           e.preventDefault();
           generateTemplate();
       });

       previewBtn.addEventListener('click', function() {
           generateTemplate(true);
       });

       copyBtn.addEventListener('click', function() {
           const text = outputBox.textContent;
           navigator.clipboard.writeText(text).then(function() {
               showCopyNotification();
           });
       });

       resetBtn.addEventListener('click', function() {
           if (confirm('Are you sure you want to cancel? All entered data will be lost.')) {
               form.reset();
               outputBox.textContent = ;
               outputBox.classList.remove('show');
               copyBtn.disabled = true;
               imagePreview.classList.remove('show');
           }
       });

       function generateTemplate(isPreview = false) {
           const domainCode = document.getElementById('domainCode').value;
           const titlepicFile = document.getElementById('titlepic').files[0];
           const titlepicName = titlepicFile ? titlepicFile.name : ;
           const region = document.getElementById('region').value;
           const citystate = document.getElementById('citystate').value;
           const dst = document.getElementById('dst').value;
           const dstemail = document.getElementById('dstemail').value;
           const dc = document.getElementById('dc').value;
           const dcemail = document.getElementById('dcemail').value;

           let output = ;
           
           if (isPreview) {
               output += '=== PREVIEW MODE ===\n\n';
           }

           output += `{{Domain\n`;
           output += `|titlepic=${titlepicName}\n`;
           output += `|region=${region}\n`;
           output += `|citystate=${citystate}\n`;
           output += `|dst=${dst}\n`;
           output += `|dstemail=${dstemail}\n`;
           output += `|dc=${dc}\n`;
           output += `|dcemail=${dcemail}\n`;
           output += `}}`;

           output += `\n\n\n\n`;
           output += `Page: "${domainCode} DST"\nContent: ${dst}\n\n`;
           output += `Page: "${domainCode} DST Email"\nContent: ${dstemail}\n\n`;
           output += `Page: "${domainCode} DC"\nContent: ${dc}\n\n`;
           output += `Page: "${domainCode} DC Email"\nContent: ${dcemail}\n\n`;

           if (titlepicName) {
               output += `\n\n`;
           } else {
               output += `\n\n`;
           }

           output += `\n\n`;

           outputBox.textContent = output;
           outputBox.classList.add('show');
           copyBtn.disabled = false;

           if (!isPreview) {
               window.scrollTo({
                   top: document.body.scrollHeight,
                   behavior: 'smooth'
               });
           }
       }

       function showCopyNotification() {
           copyNotification.classList.add('show');
           setTimeout(function() {
               copyNotification.classList.remove('show');
           }, 2000);
       }
   </script>

</body> </html>

Retrieved from "https://endtodawn.wiki.modernenigmasociety.org/index.php?title=Form:Domains_Creation&oldid=2898"