Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tier List Maker | Dandifo</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| /* Tier List Maker Specific Styles */ | |
| .tier-list-container { | |
| width: 100%; | |
| max-width: 900px; | |
| border: 1px solid #333; | |
| background-color: #1a1a1a; | |
| margin: 0 auto; | |
| } | |
| .tier-row { | |
| display: flex; | |
| min-height: 85px; | |
| border-bottom: 1px solid #222; | |
| } | |
| .tier-label { | |
| width: 100px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| font-weight: bold; | |
| color: #000; | |
| flex-shrink: 0; | |
| } | |
| .s-tier { background-color: #ff7f7f; } | |
| .a-tier { background-color: #ffbf7f; } | |
| .b-tier { background-color: #ffdf7f; } | |
| .c-tier { background-color: #ffff7f; } | |
| .d-tier { background-color: #bfff7f; } | |
| .f-tier { background-color: #7fffbf; } | |
| .tier-drop-zone { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| padding: 5px; | |
| background-color: #1a1a1a; | |
| min-height: 85px; | |
| gap: 5px; | |
| } | |
| .character-pool { | |
| width: 100%; | |
| max-width: 900px; | |
| min-height: 200px; | |
| background-color: #111; | |
| padding: 10px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| justify-content: flex-start; | |
| border: 1px solid #333; | |
| margin: 20px auto; | |
| } | |
| .char-card { | |
| width: 70px; | |
| height: 70px; | |
| position: relative; | |
| cursor: grab; | |
| background-color: #222; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| transition: transform 0.1s; | |
| } | |
| .char-card:active { | |
| cursor: grabbing; | |
| transform: scale(1.05); | |
| } | |
| .char-card img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| pointer-events: none; | |
| } | |
| .char-name { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| font-size: 9px; | |
| text-align: center; | |
| padding: 1px 0; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <h1 class="text-4xl font-bold mb-2 text-primary">Dandys World Tier List Maker</h1> | |
| <p class="text-lg mb-6 text-gray-400">Drag and drop toons to create your custom tier list</p> | |
| <div class="flex justify-center gap-4 mb-6"> | |
| <button id="share-twitter" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"> | |
| <i data-feather="twitter" class="mr-2"></i>Share | |
| </button> | |
| <button id="reset-list" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded"> | |
| <i data-feather="refresh-cw" class="mr-2"></i>Reset | |
| </button> | |
| </div> | |
| <div class="tier-list-container" id="tier-list"> | |
| <div class="tier-row"> | |
| <div class="tier-label s-tier">S</div> | |
| <div class="tier-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <div class="tier-row"> | |
| <div class="tier-label a-tier">A</div> | |
| <div class="tier-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <div class="tier-row"> | |
| <div class="tier-label b-tier">B</div> | |
| <div class="tier-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <div class="tier-row"> | |
| <div class="tier-label c-tier">C</div> | |
| <div class="tier-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <div class="tier-row"> | |
| <div class="tier-label d-tier">D</div> | |
| <div class="tier-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <div class="tier-row"> | |
| <div class="tier-label f-tier">F</div> | |
| <div class="tier-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mt-8 mb-2 text-primary">Character Pool</h3> | |
| <div class="character-pool" id="char-pool" ondrop="drop(event)" ondragover="allowDrop(event)"> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c1"> | |
| <img src="http://static.photos/gaming/70x70/1"> | |
| <div class="char-name">Connie</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c2"> | |
| <img src="http://static.photos/gaming/70x70/2"> | |
| <div class="char-name">Bobette</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c3"> | |
| <img src="http://static.photos/gaming/70x70/3"> | |
| <div class="char-name">Boxten</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c4"> | |
| <img src="http://static.photos/gaming/70x70/4"> | |
| <div class="char-name">Brightney</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c5"> | |
| <img src="http://static.photos/gaming/70x70/5"> | |
| <div class="char-name">Coal</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c6"> | |
| <img src="http://static.photos/gaming/70x70/6"> | |
| <div class="char-name">Astro</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c7"> | |
| <img src="http://static.photos/gaming/70x70/7"> | |
| <div class="char-name">Cosmo</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c8"> | |
| <img src="http://static.photos/gaming/70x70/8"> | |
| <div class="char-name">Dandy</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c9"> | |
| <img src="http://static.photos/gaming/70x70/9"> | |
| <div class="char-name">Finn</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c10"> | |
| <img src="http://static.photos/gaming/70x70/10"> | |
| <div class="char-name">Flutter</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c11"> | |
| <img src="http://static.photos/gaming/70x70/11"> | |
| <div class="char-name">Gigi</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c12"> | |
| <img src="http://static.photos/gaming/70x70/12"> | |
| <div class="char-name">Ginger</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c13"> | |
| <img src="http://static.photos/gaming/70x70/13"> | |
| <div class="char-name">Glisten</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c14"> | |
| <img src="http://static.photos/gaming/70x70/14"> | |
| <div class="char-name">Goob</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c15"> | |
| <img src="http://static.photos/gaming/70x70/15"> | |
| <div class="char-name">Looey</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c16"> | |
| <img src="http://static.photos/gaming/70x70/16"> | |
| <div class="char-name">Pebble</div> | |
| </div> | |
| <div class="char-card" draggable="true" ondragstart="drag(event)" id="c17"> | |
| <img src="http://static.photos/gaming/70x70/17"> | |
| <div class="char-name">Poppy</div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Drag and Drop functionality | |
| function drag(ev) { | |
| ev.dataTransfer.setData("text", ev.target.id); | |
| } | |
| function allowDrop(ev) { | |
| ev.preventDefault(); | |
| } | |
| function drop(ev) { | |
| ev.preventDefault(); | |
| var data = ev.dataTransfer.getData("text"); | |
| var draggedElement = document.getElementById(data); | |
| if (ev.target.classList.contains('tier-drop-zone') || ev.target.classList.contains('character-pool')) { | |
| ev.target.appendChild(draggedElement); | |
| } else { | |
| var targetZone = ev.target.closest('.tier-drop-zone') || ev.target.closest('.character-pool'); | |
| if (targetZone) { | |
| targetZone.appendChild(draggedElement); | |
| } | |
| } | |
| } | |
| // Reset functionality | |
| document.getElementById('reset-list').addEventListener('click', function() { | |
| var pool = document.getElementById('char-pool'); | |
| var cards = document.querySelectorAll('.char-card'); | |
| cards.forEach(card => pool.appendChild(card)); | |
| }); | |
| // Share functionality | |
| document.getElementById('share-twitter').addEventListener('click', function() { | |
| alert('Share your tier list on Twitter!'); | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |