Form:Domains Creation

From End to Dawn
Jump to navigation Jump to search

<!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"