|
|
| Line 219: |
Line 219: |
| | <!-- Warframe Tab Selector --> | | <!-- Warframe Tab Selector --> |
| | <div class="wf-tabs"> | | <div class="wf-tabs"> |
| | + | <input type="radio" name="wf-tab" id="wf-tab-nidus"> |
| | + | <input type="radio" name="wf-tab" id="wf-tab-gara"> |
| | + | <input type="radio" name="wf-tab" id="wf-tab-ivara"> |
| | + | <input type="radio" name="wf-tab" id="wf-tab-umbra"> |
| | <div class="wf-tab-bar"> | | <div class="wf-tab-bar"> |
| − | <button class="wf-tab" data-target="wf-nidus" onclick="selectWarframe(this)">
| + | |
| − | <span class="wf-tab-indicator">▸</span> NIDUS
| + | <label class="wf-tab" for="wf-tab-nidus"> |
| − | </button>
| + | <span class="wf-tab-indicator">▸</span> NIDUS |
| − | <button class="wf-tab" data-target="wf-gara" onclick="selectWarframe(this)">
| + | </label> |
| − | <span class="wf-tab-indicator">▸</span> GARA PRIME
| + | |
| − | </button>
| + | <label class="wf-tab" for="wf-tab-gara"> |
| − | <button class="wf-tab" data-target="wf-ivara" onclick="selectWarframe(this)">
| + | <span class="wf-tab-indicator">▸</span> GARA PRIME |
| − | <span class="wf-tab-indicator">▸</span> IVARA
| + | </label> |
| − | </button>
| + | |
| − | <button class="wf-tab" id="wf-tab-umbra" data-target="wf-umbra" onclick="selectWarframe(this)">
| + | <label class="wf-tab" for="wf-tab-ivara"> |
| − | <span class="wf-tab-indicator">▸</span> UMBRA
| + | <span class="wf-tab-indicator">▸</span> IVARA |
| − | </button>
| + | </label> |
| − | </div>
| + | |
| | + | <label class="wf-tab" id="wf-tab-umbra-label" for="wf-tab-umbra"> |
| | + | <span class="wf-tab-indicator">▸</span> UMBRA |
| | + | </label> |
| | + | |
| | + | </div> |
| | | | |
| | <div class="wf-tab-prompt"> | | <div class="wf-tab-prompt"> |
| Line 540: |
Line 549: |
| | </div> | | </div> |
| | | | |
| − | <script>
| + | |
| − | function selectWarframe(btn) {
| + | |
| − | // Deactivate all tabs and panels
| + | |
| − | document.querySelectorAll('.wf-tab').forEach(t => t.classList.remove('wf-tab-active'));
| + | |
| − | document.querySelectorAll('.wf-panel').forEach(p => p.classList.remove('wf-panel-active'));
| + | |
| − | // Hide the prompt
| + | |
| − | var prompt = document.querySelector('.wf-tab-prompt');
| + | |
| − | if (prompt) prompt.style.display = 'none';
| + | |
| − | // Activate clicked tab and its panel
| + | |
| − | btn.classList.add('wf-tab-active');
| + | |
| − | var targetId = btn.getAttribute('data-target');
| + | |
| − | document.getElementById(targetId).classList.add('wf-panel-active');
| + | |
| − | | + | |
| − | // Umbra video lifecycle
| + | |
| − | var umbraVideo = document.querySelector('.wf-umbra-video');
| + | |
| − | var umbraFade = document.querySelector('.wf-umbra-fade');
| + | |
| − | if (umbraVideo && umbraFade) {
| + | |
| − | if (targetId === 'wf-umbra') {
| + | |
| − | // Reset: show video, hide fade, play from start
| + | |
| − | umbraVideo.style.opacity = '1';
| + | |
| − | umbraFade.style.opacity = '0';
| + | |
| − | umbraVideo.currentTime = 0;
| + | |
| − | umbraVideo.play().catch(function() {});
| + | |
| − | } else {
| + | |
| − | umbraVideo.pause();
| + | |
| − | umbraVideo.style.opacity = '0';
| + | |
| − | umbraFade.style.opacity = '0';
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | // When Umbra's video ends: fade to black, then reveal poster
| + | |
| − | (function() {
| + | |
| − | var video = document.querySelector('.wf-umbra-video');
| + | |
| − | var fade = document.querySelector('.wf-umbra-fade');
| + | |
| − | if (!video || !fade) return;
| + | |
| − | | + | |
| − | video.addEventListener('ended', function() {
| + | |
| − | // Fade to black over the video
| + | |
| − | fade.style.opacity = '1';
| + | |
| − | // After black is fully opaque, hide the video to reveal poster underneath
| + | |
| − | setTimeout(function() {
| + | |
| − | video.style.opacity = '0';
| + | |
| − | // Then fade out the black to show the poster
| + | |
| − | setTimeout(function() {
| + | |
| − | fade.style.opacity = '0';
| + | |
| − | }, 400);
| + | |
| − | }, 800);
| + | |
| − | });
| + | |
| − | })();
| + | |
| − | </script>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| Line 993: |
Line 952: |
| | /* === WARFRAME ROSTER (TAB SYSTEM) === */ | | /* === WARFRAME ROSTER (TAB SYSTEM) === */ |
| | .wf-tabs { margin-bottom: 40px; } | | .wf-tabs { margin-bottom: 40px; } |
| | + | .wf-tabs input[type="radio"] { |
| | + | position: absolute; |
| | + | opacity: 0; |
| | + | pointer-events: none; |
| | + | } |
| | .wf-tab-bar { | | .wf-tab-bar { |
| | display: flex; | | display: flex; |
| Line 1,060: |
Line 1,024: |
| | display: none; | | display: none; |
| | animation: fadeIn 0.4s ease; | | animation: fadeIn 0.4s ease; |
| | + | } /* ← ADD THIS closing brace */ |
| | + | |
| | + | #wf-tab-nidus:checked ~ #wf-nidus, |
| | + | #wf-tab-gara:checked ~ #wf-gara, |
| | + | #wf-tab-ivara:checked ~ #wf-ivara, |
| | + | #wf-tab-umbra:checked ~ #wf-umbra { |
| | + | display: block; |
| | + | } |
| | + | |
| | + | #wf-tab-nidus:checked ~ .wf-tab-bar label[for="wf-tab-nidus"], |
| | + | #wf-tab-gara:checked ~ .wf-tab-bar label[for="wf-tab-gara"], |
| | + | #wf-tab-ivara:checked ~ .wf-tab-bar label[for="wf-tab-ivara"], |
| | + | #wf-tab-umbra:checked ~ .wf-tab-bar label[for="wf-tab-umbra"] { |
| | + | color: var(--accent-red); |
| | + | border-color: var(--accent-red); |
| | + | background: var(--bg-primary); |
| | + | } |
| | } | | } |
| | .wf-panel-active { display: block; } | | .wf-panel-active { display: block; } |
| Line 1,078: |
Line 1,059: |
| | border: 1px solid var(--border-color); | | border: 1px solid var(--border-color); |
| | background: #000; | | background: #000; |
| | + | } |
| | + | |
| | + | .wf-tabs input[type="radio"]:checked ~ .wf-tab-prompt { |
| | + | display: none; |
| | } | | } |
| | .wf-portrait { | | .wf-portrait { |