Untitled
unknown
plain_text
a month ago
6.0 kB
1
Indexable
Never
<div id="select-grid"> <div class="selected-character"><img src="avatar/avatar1.png" alt="Character 1"></div> <input type="text" id="username" placeholder="Enter your username"> </div> <div class="character-selection"> <div class="characters"> <div class="character"><img src="avatar/avatar1.png" alt="Character 1"></div> <div class="character"><img src="avatar/avatar2.png" alt="Character 2"></div> <div class="character"><img src="avatar/avatar3.png" alt="Character 3"></div> <div class="character"><img src="avatar/avatar4.png" alt="Character 4"></div> <div class="character"><img src="avatar/avatar5.png" alt="Character 5"></div> <div class="character"><img src="avatar/avatar6.png" alt="Character 6"></div> <div class="character"><img src="avatar/avatar1.png" alt="Character 1"></div> <div class="character"><img src="avatar/avatar2.png" alt="Character 2"></div> <div class="character"><img src="avatar/avatar3.png" alt="Character 3"></div> <div class="character"><img src="avatar/avatar4.png" alt="Character 4"></div> <div class="character"><img src="avatar/avatar5.png" alt="Character 5"></div> <div class="character"><img src="avatar/avatar6.png" alt="Character 6"></div> <!-- Add more characters here --> </div> <button class="select-btn">Ready</button> </div> <style> .character-selection { display: flex; flex-direction: column; align-items: center; } div#select-grid { text-align: center; } .characters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .character { padding: 5px; border: 1px solid #ccc; cursor: pointer; } .selected-character { text-align: center; } .character img { width: 90px; /* Adjust the size of the images */ height: 90px; /* Adjust the size of the images */ } .character.selected { background-color: lightblue; animation: highlight 0.5s infinite alternate; } .selected-character { margin-top: 20px; } button { margin-top: 10px; } input { margin-top: 10px; padding: 5px; } </style> <script> const characters = document.querySelectorAll('.character'); const selectBtn = document.querySelector('.select-btn'); const selectedCharacter = document.querySelector('.selected-character'); const usernameInput = document.getElementById('username'); let selectedCharacterIndex = localStorage.getItem('selectedCharacterIndex') || 0; let savedUsername = localStorage.getItem('username') || ''; characters.forEach((character, index) => { character.addEventListener('click', () => { characters.forEach((c) => c.classList.remove('selected')); character.classList.add('selected'); selectedCharacterIndex = index; localStorage.setItem('selectedCharacterIndex', selectedCharacterIndex); }); }); selectBtn.addEventListener('click', () => { const selectedImageSrc = document.querySelector('.character.selected img').getAttribute('src'); selectedCharacter.textContent = `Selected: ${characters[selectedCharacterIndex].textContent}`; localStorage.setItem('selectedCharacter', characters[selectedCharacterIndex].textContent); savedUsername = usernameInput.value; localStorage.setItem('username', savedUsername); selectedCharacter.innerHTML = `<img src="${selectedImageSrc}" alt="Selected Character Image"><br>Username: ${savedUsername}`; }); // Highlight the selected character when the page is loaded characters[selectedCharacterIndex].classList.add('selected'); selectedCharacter.textContent = `Selected: ${characters[selectedCharacterIndex].textContent}`; selectedCharacter.innerHTML += `<br>Username: ${savedUsername}`; usernameInput.value = savedUsername; // Load the selected character image and name from localStorage on page load document.addEventListener('DOMContentLoaded', function() { const defaultCharacterImage = 'avatar/avatar1.png'; const defaultCharacterName = 'Default Character'; if (localStorage.getItem('selectedCharacterIndex')) { const selectedCharacterIndex = localStorage.getItem('selectedCharacterIndex'); const selectedImageSrc = localStorage.getItem('selectedCharacterImage'); const selectedCharacterName = characters[selectedCharacterIndex].textContent; selectedCharacter.innerHTML = `<img src="${selectedImageSrc}" alt="Selected Character Image"><br>Username: ${localStorage.getItem('username')}`; } else { selectedCharacter.innerHTML = `<img src="${defaultCharacterImage}" alt="${defaultCharacterName}">`; localStorage.setItem('selectedCharacterIndex', -1); localStorage.setItem('selectedCharacterImage', defaultCharacterImage); localStorage.setItem('selectedCharacter', defaultCharacterName); } }); // Update the character selection and username in local storage characters.forEach((character, index) => { character.addEventListener('click', () => { characters.forEach((c) => c.classList.remove('selected')); character.classList.add('selected'); localStorage.setItem('selectedCharacterIndex', index); const selectedImageSrc = character.querySelector('img').getAttribute('src'); localStorage.setItem('selectedCharacterImage', selectedImageSrc); localStorage.setItem('selectedCharacter', character.textContent); }); }); function saveSelection() { const selectedCharacter = 'avatar/avatar1.png'; // Replace with the actual selected character image path const username = document.getElementById('username').value; localStorage.setItem('selectedCharacter', selectedCharacter); // Store the selected character image path localStorage.setItem('username', username); window.location.href = 'demo2.html'; // Redirect to the next page } </script>
Leave a Comment