|
|
| Line 1: |
Line 1: |
| | <noinclude> | | <noinclude> |
| − | This is the "Domain Form" template. | + | This is the "Domain" template. |
| − | Use this form to create a new Domain page with all the necessary information.
| + | It should be called in the following format: |
| − | </noinclude><includeonly> | + | <pre> |
| − | <div style="max-width: 900px; margin: 0 auto; background: #000; border: 4px double #DC7; padding: 30px; border-radius: 8px;"> | + | {{Domain |
| − | <h2 style="font-family: Georgia, serif; color: #DC7; text-align: center; margin-bottom: 10px; font-size: 2em;">Domain Information Form</h2>
| + | |titlepic= |
| − | <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>
| + | |region= |
| − |
| + | }} |
| − | <div id=" domainFormContainer"> | + | </pre> |
| − | <form id="domainForm">
| + | Edit the page to see the template text. |
| − | <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>
| + | </noinclude><includeonly>__NOTOC__ __NOEDITSECTION__ |
| − |
| + | <div id="domain-container"> |
| − | <div style="margin-bottom: 20px;">
| + | <div id="domain-title" class="clearfix">{{PAGENAME}} |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;"> | + | <div id="domain-title-image">{{#if: {{{titlepic|}}}|[[File:{{{titlepic}}}|center]]| |
| − | Title Picture | + | {{#ifexist: File:{{PAGENAME}}.png|[[File:{{PAGENAME}}.png|center]] |
| − | <span style="font-size: 0.85em; color: #999; font-weight: normal;">(Optional - filename with extension)</span>
| + | |{{#ifexist: File:{{PAGENAME}}.jpg|[[File:{{PAGENAME}}.jpg|center]] |
| − | </label> | + | |{{#ifexist: File:{{PAGENAME}}.jpeg|[[File:{{PAGENAME}}.jpeg|center]] |
| − | <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;">
| + | |{{#ifexist: File:{{PAGENAME}}.gif|[[File:{{PAGENAME}}.gif|center]] |
| − | </div>
| + | |{{#ifexist: File:{{PAGENAME}}.webp|[[File:{{PAGENAME}}.webp|center]] |
| − |
| + | }} |
| − | <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>
| + | </div> |
| | + | </div> |
| | + | <div id="domain-info"> |
| | + | {| id="domain-info-table" |
| | + | ! Region |
| | + | | [[:Category:{{{region}}}|{{{region}}}]] |
| | + | |- |
| | + | ! Domain Storyteller |
| | + | | {{:{{PAGENAME}} DST}} |
| | + | | [[{{PAGENAME}} DST|Click here to edit]] |
| | + | |- |
| | + | ! Domain Storyteller's Email |
| | + | | [mailto:{{:{{PAGENAME}} DST Email}} {{:{{PAGENAME}} DST Email}}] |
| | + | | [[{{PAGENAME}} DST Email|Click here to edit]] |
| | + | |- |
| | + | ! Domain Coordinator |
| | + | | {{:{{PAGENAME}} DC}} |
| | + | | [[{{PAGENAME}} DC|Click here to edit]] |
| | + | |- |
| | + | ! Domain Coordinator's Email |
| | + | | [mailto:{{:{{PAGENAME}} DC Email}} {{:{{PAGENAME}} DC Email}}] |
| | + | | [[{{PAGENAME}} DC Email|Click here to edit]] |
| | + | |} |
| | + | </div> |
| | + | </div> |
| | | | |
| − | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
| + | '''Location:''' {{{city|}}}, {{{state|}}} |
| − | <div>
| |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
| |
| − | City <span style="color: #ff6b6b;">*</span>
| |
| − | </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>
| |
| | | | |
| − | <div>
| + | == Domain Staff == |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
| |
| − | State <span style="color: #ff6b6b;">*</span>
| |
| − | </label>
| |
| − | <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;">
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | <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>
| + | '''Domain Storyteller:''' {{{dst_name|}}} |
| | | | |
| − | <div style="margin-bottom: 20px;">
| + | '''Email:''' {{{dst_email|}}} |
| − | <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>
| |
| | | | |
| − | <div style="margin-bottom: 20px;">
| + | '''Domain Coordinator:''' {{{dc_name|}}} |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
| |
| − | DST Email <span style="color: #ff6b6b;">*</span>
| |
| − | </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>
| |
| | | | |
| − | <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>
| + | '''Email:''' {{{dc_email|}}} |
| | | | |
| − | <div style="margin-bottom: 20px;">
| + | {{#if: {{{notes|}}}| |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
| + | == Notes == |
| − | 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>
| |
| | | | |
| − | <div style="margin-bottom: 20px;">
| + | {{{notes}}} |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
| + | }} |
| − | DC Email <span style="color: #ff6b6b;">*</span>
| |
| − | </label>
| |
| − | <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;">
| |
| − | </div>
| |
| | | | |
| − | <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>
| + | [[Category:Domain]] |
| − | | + | {{#if: {{{region}}}|[[Category:{{{region}}}]]}} |
| − | <div style="margin-bottom: 20px;">
| + | {{#css: |
| − | <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #DC7;">
| + | .mw-body h1.firstHeading { |
| − | Additional Notes
| + | font-family: "Limelight", cursive; |
| − | <span style="font-size: 0.85em; color: #999; font-weight: normal;">(Optional)</span>
| + | color: #DC7; |
| − | </label>
| + | font-weight: bold; |
| − | <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>
| + | font-size: 22px; |
| − | </div>
| + | } |
| − |
| + | #mw-content-text { |
| − | <div style="display: flex; gap: 15px; margin-top: 30px;">
| + | padding: 5px; |
| − | <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>
| + | background-color: #000; |
| − | <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>
| + | border-style: double; |
| − | </div>
| + | border-color: #DC7; |
| − | </form>
| + | border-width: thick; |
| − |
| + | } |
| − | <div id="domainOutput" style="margin-top: 30px; display: none;">
| + | #domain-title { |
| − | <div style="font-weight: bold; margin-bottom: 10px; color: #DC7; font-size: 1.1em;">Generated Template Code:</div>
| + | font-family: "Limelight", cursive; |
| − | <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>
| + | color: #DC7; |
| − | <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>
| + | font-size: 4em; |
| − | </div>
| + | text-align: center; |
| − | </div> | + | } |
| − | </div>
| + | div#bodyContent.mw-body-content h2, .my-h2 { |
| − | | + | font-family: "Poiret One", cursive; |
| − | <script>
| + | color: #DC7; |
| − | document.getElementById('domainForm').addEventListener('submit', function(e) {
| + | font-weight: bold; |
| − | e.preventDefault(); | + | size: 18px; |
| − | | + | } |
| − | const titlepic = document.getElementById('titlepic').value.trim();
| + | div#bodyContent.mw-body-content h3, .my-h3 { |
| − | const region = document.getElementById('region').value.trim(); | + | font-family: "Poiret One", cursive; |
| − | const city = document.getElementById('city').value.trim(); | + | color: #DC7; |
| − | const state = document.getElementById('state').value.trim(); | + | font-weight: bold; |
| − | const dstName = document.getElementById('dstName').value.trim();
| + | size: 16px; |
| − | const dstEmail = document.getElementById('dstEmail').value.trim();
| + | } |
| − | const dcName = document.getElementById('dcName').value.trim(); | + | div#bodyContent.mw-body-content p, div#bodyContent.mw-body-content td, div#bodyContent.mw-body-content th, div#bodyContent.mw-body-content ul { |
| − | const dcEmail = document.getElementById('dcEmail').value.trim(); | + | font-size: 16px; |
| − | const notes = document.getElementById('notes').value.trim(); | + | font-family: 'Belleza', 'Avant Garde', sans-serif; |
| − |
| + | color: #DC7; |
| − | if (!region || !city || !state || !dstName || !dstEmail || !dcName || !dcEmail) {
| + | vertical-align:top; |
| − | alert('Please fill in all required fields!');
| + | text-align:left; |
| − | return;
| + | list-style:none; |
| − | }
| + | } |
| − |
| + | #domain-title-image { |
| − | let templateCode = '{{Domain\n'; | + | max-width: 100%; |
| − | | + | } |
| − | if (titlepic) { | + | #domain-title-image img { |
| − | templateCode += '|titlepic=' + titlepic + '\n';
| + | height: auto; |
| − | }
| + | max-width: 80%; |
| − |
| + | } |
| − | templateCode += '|region=' + region + '\n'; | + | div#domain-info { |
| − | templateCode += '}}\n\n';
| + | max-width: 80%; |
| − |
| + | margin: auto; |
| − | templateCode += "'''Location:''' " + city + ", " + state + '\n\n'; | + | margin-top: 20px; |
| − |
| + | } |
| − | templateCode += '== Domain Staff ==\n\n';
| + | table#domain-info-table { |
| − | templateCode += "'''Domain Storyteller:''' " + dstName + '\n'; | + | vertical-align: top; |
| − | templateCode += "'''Email:''' " + dstEmail + '\n\n';
| + | text-align:left; |
| − | templateCode += "'''Domain Coordinator:''' " + dcName + '\n';
| + | margin: auto; |
| − | templateCode += "'''Email:''' " + dcEmail + '\n'; | + | } |
| − |
| + | div#content.mw-body { |
| − | if (notes) {
| + | background-color: #030303; |
| − | templateCode += '\n== Notes ==\n\n' + notes + '\n';
| + | } |
| − | }
| + | div#catlinks.catlinks { |
| − |
| + | background-color: #000; |
| − | document.getElementById('domainOutputCode').value = templateCode;
| + | border-color: #DC7; |
| − | document.getElementById('domainOutput').style.display = 'block'; | + | font-family: 'Belleza', 'Avant Garde', sans-serif; |
| − |
| + | } |
| − | document.getElementById('domainOutput').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
| + | div#catlinks.catlinks a { |
| − | }); | + | vertical-align: bottom; |
| − | | + | } |
| − | function clearDomainForm() {
| + | div#bodyContent.mw-body-content img { |
| − | document.getElementById('domainForm').reset(); | + | max-width: 100% |
| − | document.getElementById('domainOutput').style.display = 'none'; | + | } |
| | + | div#bodyContent.mw-body-content a:link, div#bodyContent.mw-body-content a.external:link { |
| | + | color: #FFF; |
| | + | } |
| | + | div#bodyContent.mw-body-content a:visited, div#bodyContent.mw-body-content a.external:visited { |
| | + | color: #FFC; |
| | + | } |
| | + | div#bodyContent.mw-body-content a:hover, div#bodyContent.mw-body-content a.external:hover { |
| | + | color: #FF9; |
| | + | } |
| | + | div#bodyContent.mw-body-content a:active, div#bodyContent.mw-body-content a.external:active { |
| | + | color: #FFD; |
| | + | } |
| | + | div#bodyContent.mw-body-content a.new, div#bodyContent.mw-body-content a.new:visited { |
| | + | } |
| | + | a.mw-helplink { |
| | + | font-size: 16px; |
| | + | font-family: 'Belleza', 'Avant Garde', sans-serif; |
| | + | color: #DC7; |
| | } | | } |
| − | | + | .clearfix::after { |
| − | function copyDomainCode() {
| + | content: ""; |
| − | const outputCode = document.getElementById('domainOutputCode'); | + | clear: both; |
| − | outputCode.select();
| + | display: table; |
| − | document.execCommand('copy');
| |
| − |
| |
| − | const btn = event.target;
| |
| − | const originalText = btn.textContent; | |
| − | btn.textContent = 'Copied!';
| |
| − | btn.style.background = '#3a7c3a';
| |
| − |
| |
| − | setTimeout(function() {
| |
| − | btn.textContent = originalText;
| |
| − | btn.style.background = '#2a5c2a';
| |
| − | }, 2000); | |
| | } | | } |
| − | </script>
| + | }} |
| | </includeonly> | | </includeonly> |
