* Create overlay DOM structure
()
| 19 | * Create overlay DOM structure |
| 20 | */ |
| 21 | createOverlay() { |
| 22 | // Overlay container |
| 23 | this.element = document.createElement('div'); |
| 24 | this.element.className = 'tutorial-overlay'; |
| 25 | this.element.style.display = 'none'; |
| 26 | |
| 27 | // Content card |
| 28 | const card = document.createElement('div'); |
| 29 | card.className = 'tutorial-card'; |
| 30 | |
| 31 | // Header |
| 32 | const header = document.createElement('div'); |
| 33 | header.className = 'tutorial-header'; |
| 34 | |
| 35 | this.titleElement = document.createElement('h3'); |
| 36 | this.titleElement.className = 'tutorial-title'; |
| 37 | header.appendChild(this.titleElement); |
| 38 | |
| 39 | this.progressElement = document.createElement('div'); |
| 40 | this.progressElement.className = 'tutorial-progress'; |
| 41 | header.appendChild(this.progressElement); |
| 42 | |
| 43 | const closeBtn = document.createElement('button'); |
| 44 | closeBtn.className = 'tutorial-close btn'; |
| 45 | closeBtn.textContent = '×'; |
| 46 | closeBtn.setAttribute('aria-label', 'Close tutorial'); |
| 47 | closeBtn.onclick = () => this.hide(); |
| 48 | header.appendChild(closeBtn); |
| 49 | |
| 50 | card.appendChild(header); |
| 51 | |
| 52 | // Content |
| 53 | this.contentElement = document.createElement('div'); |
| 54 | this.contentElement.className = 'tutorial-content'; |
| 55 | card.appendChild(this.contentElement); |
| 56 | |
| 57 | // Action prompt |
| 58 | this.actionElement = document.createElement('div'); |
| 59 | this.actionElement.className = 'tutorial-action'; |
| 60 | card.appendChild(this.actionElement); |
| 61 | |
| 62 | // Navigation |
| 63 | const nav = document.createElement('div'); |
| 64 | nav.className = 'tutorial-nav'; |
| 65 | |
| 66 | this.prevBtn = document.createElement('button'); |
| 67 | this.prevBtn.className = 'btn'; |
| 68 | this.prevBtn.textContent = 'Previous'; |
| 69 | this.prevBtn.onclick = () => this.manager.previous(); |
| 70 | nav.appendChild(this.prevBtn); |
| 71 | |
| 72 | this.tryBtn = document.createElement('button'); |
| 73 | this.tryBtn.className = 'btn primary'; |
| 74 | this.tryBtn.textContent = 'Try This Code'; |
| 75 | this.tryBtn.onclick = () => this.loadStepCode(); |
| 76 | nav.appendChild(this.tryBtn); |
| 77 | |
| 78 | this.nextBtn = document.createElement('button'); |
no test coverage detected