Difference between revisions of "Form:Domains Creation"

From End to Dawn
Jump to navigation Jump to search
Line 1: Line 1:
−
<!DOCTYPE html>
+
<noinclude>
−
<html lang="en">
+
This is the "Domain Form" template.
−
<head>
+
Use this form to create a new Domain page with all the necessary information.
−
    <meta charset="UTF-8">
+
</noinclude><includeonly>
−
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
<div style="max-width: 900px; margin: 0 auto; background: #000; border: 4px double #DC7; padding: 30px; border-radius: 8px;">
−
    <title>Domain Creation Form</title>
+
  <h2 style="font-family: Georgia, serif; color: #DC7; text-align: center; margin-bottom: 10px; font-size: 2em;">Domain Information Form</h2>
−
    <link href="https://fonts.googleapis.com/css2?family=Limelight&family=Poiret+One&family=Belleza&display=swap" rel="stylesheet">
+
  <p style="text-align: center; color: #AAA; margin-bottom: 30px; font-size: 0.9em;">Fill out the form below to create domain page content</p>
−
    <style>
+
 
−
         * {
+
  <div id="domainFormContainer">
−
            margin: 0;
+
     <form id="domainForm">
−
            padding: 0;
+
      <div style="color: #DC7; font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #DC7; font-weight: bold;">Basic Information</div>
−
            box-sizing: border-box;
+
     
−
        }
+
      <div style="margin-bottom: 20px;">
 +
        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
 +
          Title Picture
 +
          <span style="font-size: 0.85em; color: #999; font-weight: normal;">(Optional - filename with extension)</span>
 +
        </label>
 +
        <input type="text" id="titlepic" name="titlepic" placeholder="Leave blank to use auto-detection" style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
 +
      </div>
 +
     
 +
      <div style="margin-bottom: 20px;">
 +
         <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
 +
          Region <span style="color: #ff6b6b;">*</span>
 +
        </label>
 +
        <input type="text" id="region" name="region" placeholder="Enter region name" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
 +
      </div>
  
−
         body {
+
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
−
            background-color: #030303;
+
         <div>
−
             color: #DC7;
+
          <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
            font-family: 'Belleza', 'Avant Garde', sans-serif;
+
             City <span style="color: #ff6b6b;">*</span>
−
            padding: 20px;
+
          </label>
−
         }
+
          <input type="text" id="city" name="city" placeholder="Enter city" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
 +
         </div>
  
−
         .container {
+
         <div>
−
            max-width: 1200px;
+
          <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
            margin: 0 auto;
+
             State <span style="color: #ff6b6b;">*</span>
−
            background-color: #000;
+
          </label>
−
            border: 6px double #DC7;
+
          <input type="text" id="state" name="state" placeholder="Enter state" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
−
            padding: 30px;
+
         </div>
−
        }
+
      </div>
−
 
 
−
        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 {
+
      <div style="color: #DC7; font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #DC7; font-weight: bold;">Domain Storyteller (DST)</div>
−
            background-color: #555;
 
−
            color: #DC7;
 
−
        }
 
  
−
         .secondary-btn:hover {
+
      <div style="margin-bottom: 20px;">
−
            background-color: #777;
+
         <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
        }
+
          DST Name <span style="color: #ff6b6b;">*</span>
 +
        </label>
 +
        <input type="text" id="dstName" name="dstName" placeholder="Enter Domain Storyteller name" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
 +
      </div>
  
−
        .output-section {
+
      <div style="margin-bottom: 20px;">
−
            margin-top: 40px;
+
        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
            padding-top: 30px;
+
          DST Email <span style="color: #ff6b6b;">*</span>
−
            border-top: 3px solid #DC7;
+
        </label>
−
        }
+
        <input type="email" id="dstEmail" name="dstEmail" placeholder="dst@example.com" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
 +
      </div>
  
−
        .output-box {
+
      <div style="color: #DC7; font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #DC7; font-weight: bold;">Domain Coordinator (DC)</div>
−
            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 {
+
      <div style="margin-bottom: 20px;">
−
            display: block;
+
        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
         }
+
          DC Name <span style="color: #ff6b6b;">*</span>
 +
        </label>
 +
         <input type="text" id="dcName" name="dcName" placeholder="Enter Domain Coordinator name" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
 +
      </div>
  
−
        .copy-notification {
+
      <div style="margin-bottom: 20px;">
−
            position: fixed;
+
        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
            top: 20px;
+
          DC Email <span style="color: #ff6b6b;">*</span>
−
            right: 20px;
+
        </label>
−
            background-color: #DC7;
+
        <input type="email" id="dcEmail" name="dcEmail" placeholder="dc@example.com" required style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px;">
−
            color: #000;
+
      </div>
−
            padding: 15px 25px;
 
−
            border-radius: 5px;
 
−
            font-weight: bold;
 
−
            opacity: 0;
 
−
            transition: opacity 0.3s;
 
−
            pointer-events: none;
 
−
            z-index: 1000;
 
−
        }
 
  
−
        .copy-notification.show {
+
      <div style="color: #DC7; font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #DC7; font-weight: bold;">Additional Information</div>
−
            opacity: 1;
 
−
        }
 
  
−
        .checkbox-group {
+
      <div style="margin-bottom: 20px;">
−
            display: flex;
+
        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
−
            gap: 20px;
+
          Additional Notes
−
            margin-top: 15px;
+
          <span style="font-size: 0.85em; color: #999; font-weight: normal;">(Optional)</span>
−
        }
+
         </label>
−
 
+
         <textarea id="notes" name="notes" placeholder="Enter any additional notes..." style="width: 100%; padding: 12px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-size: 16px; border-radius: 4px; min-height: 100px; resize: vertical;"></textarea>
−
        .checkbox-group label {
+
      </div>
−
            display: flex;
+
     
−
            align-items: center;
+
      <div style="display: flex; gap: 15px; margin-top: 30px;">
−
            gap: 8px;
+
         <button type="submit" style="flex: 1; padding: 15px; font-size: 16px; font-weight: bold; border: 2px solid #DC7; border-radius: 4px; cursor: pointer; background: #DC7; color: #000;">Generate Template Code</button>
−
            cursor: pointer;
+
        <button type="button" onclick="clearDomainForm()" style="flex: 1; padding: 15px; font-size: 16px; font-weight: bold; border: 2px solid #DC7; border-radius: 4px; cursor: pointer; background: transparent; color: #DC7;">Clear Form</button>
−
         }
+
      </div>
−
 
+
    </form>
−
         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">
+
     <div id="domainOutput" style="margin-top: 30px; display: none;">
−
        <h1>Domain Creation Form</h1>
+
      <div style="font-weight: bold; margin-bottom: 10px; color: #DC7; font-size: 1.1em;">Generated Template Code:</div>
−
       
+
      <textarea id="domainOutputCode" readonly style="width: 100%; padding: 15px; background: #1a1a1a; border: 2px solid #DC7; color: #DC7; font-family: Courier New, monospace; font-size: 14px; min-height: 200px; border-radius: 4px; resize: vertical;"></textarea>
−
        <div class="instructions">
+
      <button onclick="copyDomainCode()" style="width: 100%; margin-top: 10px; padding: 12px; background: #2a5c2a; color: #DC7; border: 2px solid #3a7c3a; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">Copy to Clipboard</button>
−
            <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>
 
     </div>
 +
  </div>
 +
</div>
  
−
    <script>
+
<script>
−
        const form = document.getElementById('domainForm');
+
document.getElementById('domainForm').addEventListener('submit', function(e) {
−
        const outputBox = document.getElementById('outputBox');
+
  e.preventDefault();
−
        const copyBtn = document.getElementById('copyBtn');
+
 
−
        const resetBtn = document.getElementById('resetBtn');
+
  const titlepic = document.getElementById('titlepic').value.trim();
−
        const previewBtn = document.getElementById('previewBtn');
+
  const region = document.getElementById('region').value.trim();
−
        const copyNotification = document.getElementById('copyNotification');
+
  const city = document.getElementById('city').value.trim();
−
        const imageInput = document.getElementById('titlepic');
+
  const state = document.getElementById('state').value.trim();
−
        const imagePreview = document.getElementById('imagePreview');
+
  const dstName = document.getElementById('dstName').value.trim();
−
        const previewImg = document.getElementById('previewImg');
+
  const dstEmail = document.getElementById('dstEmail').value.trim();
−
 
+
  const dcName = document.getElementById('dcName').value.trim();
−
        imageInput.addEventListener('change', function(e) {
+
  const dcEmail = document.getElementById('dcEmail').value.trim();
−
            const file = e.target.files[0];
+
  const notes = document.getElementById('notes').value.trim();
−
            if (file) {
+
 
−
                const reader = new FileReader();
+
  if (!region || !city || !state || !dstName || !dstEmail || !dcName || !dcEmail) {
−
                reader.onload = function(e) {
+
    alert('Please fill in all required fields!');
−
                    previewImg.src = e.target.result;
+
    return;
−
                    imagePreview.classList.add('show');
+
  }
−
                };
+
 
−
                reader.readAsDataURL(file);
+
  let templateCode = '{{Domain\n';
−
            } else {
+
 
−
                imagePreview.classList.remove('show');
+
  if (titlepic) {
−
            }
+
    templateCode += '|titlepic=' + titlepic + '\n';
−
        });
+
  }
−
 
+
 
−
        form.addEventListener('submit', function(e) {
+
  templateCode += '|region=' + region + '\n';
−
            e.preventDefault();
+
  templateCode += '}}\n\n';
−
            generateTemplate();
+
 
−
        });
+
  templateCode += "'''Location:''' " + city + ", " + state + '\n\n';
−
 
+
 
−
        previewBtn.addEventListener('click', function() {
+
  templateCode += '== Domain Staff ==\n\n';
−
            generateTemplate(true);
+
  templateCode += "'''Domain Storyteller:''' " + dstName + '\n';
−
        });
+
  templateCode += "'''Email:''' " + dstEmail + '\n\n';
−
 
+
  templateCode += "'''Domain Coordinator:''' " + dcName + '\n';
−
        copyBtn.addEventListener('click', function() {
+
  templateCode += "'''Email:''' " + dcEmail + '\n';
−
            const text = outputBox.textContent;
+
 
−
            navigator.clipboard.writeText(text).then(function() {
+
  if (notes) {
−
                showCopyNotification();
+
    templateCode += '\n== Notes ==\n\n' + notes + '\n';
−
            });
+
  }
−
        });
+
 
−
 
+
  document.getElementById('domainOutputCode').value = templateCode;
−
        resetBtn.addEventListener('click', function() {
+
  document.getElementById('domainOutput').style.display = 'block';
−
            if (confirm('Are you sure you want to cancel? All entered data will be lost.')) {
+
 
−
                form.reset();
+
  document.getElementById('domainOutput').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
−
                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) {
+
function clearDomainForm() {
−
                window.scrollTo({
+
  document.getElementById('domainForm').reset();
−
                    top: document.body.scrollHeight,
+
  document.getElementById('domainOutput').style.display = 'none';
−
                    behavior: 'smooth'
+
}
−
                });
 
−
            }
 
−
        }
 
  
−
        function showCopyNotification() {
+
function copyDomainCode() {
−
            copyNotification.classList.add('show');
+
  const outputCode = document.getElementById('domainOutputCode');
−
            setTimeout(function() {
+
  outputCode.select();
−
                copyNotification.classList.remove('show');
+
  document.execCommand('copy');
−
            }, 2000);
+
 
−
        }
+
  const btn = event.target;
−
    </script>
+
  const originalText = btn.textContent;
−
</body>
+
  btn.textContent = 'Copied!';
−
</html>
+
  btn.style.background = '#3a7c3a';
 +
 
 +
  setTimeout(function() {
 +
    btn.textContent = originalText;
 +
    btn.style.background = '#2a5c2a';
 +
  }, 2000);
 +
}
 +
</script>
 +
</includeonly>

Revision as of 18:42, 4 October 2025

This is the "Domain Form" template. Use this form to create a new Domain page with all the necessary information.

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