|
|
| (47 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!DOCTYPE html> | + | <noinclude> |
| − | <html lang="en">
| + | This is the "Domain" form. |
| − | <head>
| + | To create a page with this form, enter the Domain Code below; |
| − | <meta charset="UTF-8">
| + | if a page with that name already exists, you will be sent to a form to edit that page. |
| − | <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 {
| + | {{#forminput:form=Domains Creation}} |
| − | background-color: #030303;
| + | </noinclude><includeonly> |
| − | color: #DC7;
| + | <div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #AAAAAA;"></div> |
| − | font-family: 'Belleza', 'Avant Garde', sans-serif;
| |
| − | padding: 20px;
| |
| − | }
| |
| | | | |
| − | .container {
| + | {{{for template|Domain}}} |
| − | max-width: 1200px;
| + | {| class="formtable" |
| − | margin: 0 auto;
| + | ! scope="row"| Domain Code: |
| − | background-color: #000;
| + | | {{{standard input|page name|mandatory}}} <!-- Page title --> |
| − | border: 6px double #DC7;
| + | |- |
| − | padding: 30px;
| + | ! scope="row"| Domain Code (for category): |
| − | }
| + | | {{{field|domain|input type=text|mandatory}}} <!-- Template param --> |
| | + | |- |
| | + | ! scope="row"| Domain Name: |
| | + | | {{{field|domainname|input type=text}}} |
| | + | |- |
| | + | ! scope="row"| Title Image: |
| | + | | {{{field|titlepic|uploadable}}} |
| | + | |- |
| | + | ! scope="row"| Region: |
| | + | | {{{field|region|input type=tree|mandatory|top category=Region}}} |
| | + | |- |
| | + | ! scope="row"| City: |
| | + | | {{{field|city|input type=text}}} |
| | + | |- |
| | + | ! scope="row"| State: |
| | + | | {{{field|state |
| | + | |input type=dropdown |
| | + | |values=Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Pennsylvania,Rhode Island,South Carolina,South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming,District of Columbia |
| | + | }}} |
| | + | |- |
| | + | ! scope="row"| Domain Storyteller: |
| | + | | {{{field|dst_name|input type=text}}} |
| | + | |- |
| | + | ! scope="row"| Domain Storyteller Email: |
| | + | | {{{field|dst_email|input type=email}}} |
| | | | |
| − | h1 {
| + | {{{for template|DomainCategory|create page=Category:{{page name}}}}} |
| − | font-family: "Limelight", cursive;
| + | This will auto-generate the category page. |
| − | color: #DC7;
| + | {{{end template}}} |
| − | font-size: 2.5em;
| |
| − | text-align: center;
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| | | | |
| − | .instructions {
| + | '''Free text:''' |
| − | background-color: #111;
| + | {{{standard input|free text|rows=10}}} |
| − | border: 2px solid #DC7;
| |
| − | padding: 20px;
| |
| − | margin-bottom: 30px;
| |
| − | border-radius: 5px;
| |
| − | }
| |
| | | | |
| − | .instructions h2 {
| + | {{{standard input|summary}}} |
| − | font-family: "Poiret One", cursive;
| + | {{{standard input|minor edit}}} {{{standard input|watch}}} |
| − | color: #DC7;
| |
| − | font-size: 1.3em;
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| | | | |
| − | .instructions p {
| + | {{{standard input|save}}} {{{standard input|preview}}} {{{standard input|changes}}} {{{standard input|cancel}}} |
| − | margin-bottom: 10px;
| + | </includeonly> |
| − | 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>
| |
| − | <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> | |
