|
|
| (29 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <div class="infobox-idea"> | | <div class="infobox-idea"> |
| <figure class="infobox-image"> | | <div class="infobox-wishes">{{#SimpleImg: /images/thumb/5/5f/What_Do_I_Want.png/300px-What_Do_I_Want.png|40|40|Image of a person thinking. Question marks, money and the word 'free' are in the background.|profile-image}} |
| [[File:What Do I Want.png|center|300px]]
| | <div class="infobox-heading"><strong>What Do I Want?</strong></div> |
| </figure>
| |
| | |
| <div class="infobox-meta">
| |
| <div class="infobox-user">
| |
| <div class="user-avatar">
| |
| [[File:{{{userimage|Placeholder.png}}}|40px|link=]]
| |
| </div>
| |
| <div class="user-name">{{{username|Anonymous}}}</div>
| |
| </div>
| |
| <div class="infobox-actions"> | |
| <button class="infobox-tab" data-tab="about-me">About Me</button>
| |
| <button class="infobox-tab" data-tab="about-idea">About My Idea</button>
| |
| </div>
| |
| </div> | | </div> |
| | | <p class="infobox-wishes-p">While I give this idea away freely, here's what I'd like if you decide to make my idea come true.</p> |
| <div class="infobox-panel about-me active"> | | <div class="infobox-wishes-panel"> |
| <div class="panel-content short">{{{aboutme|}}}</div>
| | <ul class="infobox-list"> |
| <div class="panel-content full" style="display:none;">{{{aboutme|}}}</div>
| | {{#if:{{{wish1|}}}|<li>{{{wish1}}}</li>|}} |
| <button class="show-more" onclick="this.previousElementSibling.style.display='block'; this.style.display='none';">Show More</button>
| | {{#if:{{{wish2|}}}|<li>{{{wish2}}}</li>|}} |
| | {{#if:{{{wish3|}}}|<li>{{{wish3}}}</li>|}} |
| | {{#if:{{{wish4|}}}|<li>{{{wish4}}}</li>|}} |
| | {{#if:{{{wish5|}}}|<li>{{{wish5}}}</li>|}} |
| | {{#if:{{{wish6|}}}|<li>{{{wish6}}}</li>|}} |
| | {{#if:{{{wish7|}}}|<li>{{{wish7}}}</li>|}} |
| | {{#if:{{{wish8|}}}|<li>{{{wish8}}}</li>|}} |
| | {{#if:{{{wish9|}}}|<li>{{{wish9}}}</li>|}} |
| | {{#if:{{{wish10|}}}|<li>{{{wish10}}}</li>|}} |
| | {{#if:{{{wish11|}}}|<li>{{{wish11}}}</li>|}} |
| | {{#if:{{{wish12|}}}|<li>{{{wish12}}}</li>|}} |
| | </ul> |
| | </div> |
| </div> | | </div> |
|
| |
| <div class="infobox-panel about-idea" style="display:none;">
| |
| {{{aboutidea|}}}
| |
| </div>
| |
|
| |
| <div class="infobox-note">
| |
| I give this idea away freely. Here's what I'd like if you decide to make my idea come true, though you're under no obligation
| |
| </div>
| |
|
| |
| <ul class="infobox-list">
| |
| {{#if:{{{point1|}}}|<li>{{{point1}}}</li>|}}
| |
| {{#if:{{{point2|}}}|<li>{{{point2}}}</li>|}}
| |
| {{#if:{{{point3|}}}|<li>{{{point3}}}</li>|}}
| |
| {{#if:{{{point4|}}}|<li>{{{point4}}}</li>|}}
| |
| {{#if:{{{point5|}}}|<li>{{{point5}}}</li>|}}
| |
| {{#if:{{{point6|}}}|<li>{{{point6}}}</li>|}}
| |
| {{#if:{{{point7|}}}|<li>{{{point7}}}</li>|}}
| |
| {{#if:{{{point8|}}}|<li>{{{point8}}}</li>|}}
| |
| {{#if:{{{point9|}}}|<li>{{{point9}}}</li>|}}
| |
| {{#if:{{{point10|}}}|<li>{{{point10}}}</li>|}}
| |
| {{#if:{{{point11|}}}|<li>{{{point11}}}</li>|}}
| |
| {{#if:{{{point12|}}}|<li>{{{point12}}}</li>|}}
| |
| </ul>
| |
| </div> | | </div> |
|
| |
| <script>
| |
| document.addEventListener('DOMContentLoaded', function () {
| |
| document.querySelectorAll('.infobox-tab').forEach(button => {
| |
| button.addEventListener('click', () => {
| |
| const tab = button.dataset.tab;
| |
| document.querySelectorAll('.infobox-panel').forEach(panel => panel.style.display = 'none');
| |
| document.querySelector('.infobox-panel.' + tab).style.display = 'block';
| |
| document.querySelectorAll('.infobox-tab').forEach(b => b.classList.remove('active'));
| |
| button.classList.add('active');
| |
| });
| |
| });
| |
| });
| |
| </script>
| |
