Spaces:

hmaras
/

dandy-s-meta-mastermind

Running

App Files Files Community

hmaras commited on 22 days ago

Commit

2b188f0

verified ·

1 Parent(s): 92ff83d

<!DOCTYPE html>

Browse files

<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* --- GENEL TASARIM (CSS) --- */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #121212; /* Koyu Tema */
color: #e0e0e0;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

h2 {
color: #ffffff;
margin-bottom: 5px;
font-size: 28px;
}

.subtitle {
color: #aaaaaa;
font-size: 14px;
margin-bottom: 20px;
}

/* Butonlar Alanı */
.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
}

.btn-blue { background-color: #3b82f6; color: white; }
.btn-dark { background-color: #333; color: white; border: 1px solid #555; }

/* Tier Listesi Ana Kutusu */
.tier-list-container {
width: 100%;
max-width: 900px;
border: 1px solid #333;
background-color: #000;
}

/* Tier Satırları */
.tier-row {
display: flex;
min-height: 85px;
border-bottom: 1px solid #222;
}

/* Sol Taraftaki Harf Etiketleri */
.tier-label {
width: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
color: #000;
flex-shrink: 0;
}

/* Tier Renkleri (Görseldeki gibi) */
.s-tier { background-color: #ff7f7f; } /* Kırmızı */
.a-tier { background-color: #ffbf7f; } /* Turuncu */
.b-tier { background-color: #ffdf7f; } /* Sarı */
.c-tier { background-color: #ffff7f; } /* Açık Sarı */
.d-tier { background-color: #bfff7f; } /* Açık Yeşil */
.f-tier { background-color: #7fffbf; } /* Turkuaz/Yeşil */

/* Sürükle-Bırak Alanı (Drop Zone) */
.tier-drop-zone {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px;
background-color: #1a1a1a;
min-height: 85px;
gap: 5px;
}

/* Sağdaki Ayarlar Kutusu (Görseldeki Çark Simgeleri) */
.tier-settings {
width: 40px;
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-left: 1px solid #222;
}

.settings-icon {
color: white;
font-size: 18px;
cursor: pointer;
padding: 5px;
}

/* Karakter Havuzu (Alt Kısım) */
.pool-title {
text-align: left;
width: 100%;
max-width: 900px;
margin-top: 20px;
margin-bottom: 5px;
color: #ff5555; /* Pin Images rengi */
font-weight: bold;
display: flex;
align-items: center;
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;
}

/* Sürüklenebilir Karakter Kartları */
.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; /* Sürükleme sorununu önler */
}

/* İsim Etiketi (Opsiyonel) */
.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>

<h2>Dandys World Toons Tier List Maker</h2>
<div class="subtitle">Create a dandys world toons tier list. Check out our other templates.</div>

<div class="controls">
<button class="btn btn-blue">Share on Twitter</button>
<button class="btn btn-blue">Share on FB</button>
<button class="btn btn-dark">📷 Download Image</button>
<button class="btn btn-dark">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 class="tier-settings">
<span class="settings-icon">⚙️</span>
<div style="display:flex; flex-direction:column;">
<span class="settings-icon">▲</span>
<span class="settings-icon">▼</span>
</div>
</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 class="tier-settings"><span class="settings-icon">⚙️</span></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 class="tier-settings"><span class="settings-icon">⚙️</span></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 class="tier-settings"><span class="settings-icon">⚙️</span></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 class="tier-settings"><span class="settings-icon">⚙️</span></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 class="tier-settings"><span class="settings-icon">⚙️</span></div>
</div>

</div>

<div class="pool-title">📌 Pin Images</div>
<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="LINK_FOR_CONNIE.png"><div class="char-name">Connie</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c2"><img src="LINK_FOR_BOBETTE.png"><div class="char-name">Bobette</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c3"><img src="LINK_FOR_BOXTEN.png"><div class="char-name">Boxten</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c4"><img src="LINK_FOR_BRIGHTNEY.png"><div class="char-name">Brightney</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c5"><img src="LINK_FOR_COAL.png"><div class="char-name">Coal</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c6"><img src="LINK_FOR_ASTRO.png"><div class="char-name">Astro</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c7"><img src="LINK_FOR_COSMO.png"><div class="char-name">Cosmo</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c8"><img src="LINK_FOR_DANDY.png"><div class="char-name">Dandy</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c9"><img src="LINK_FOR_FINN.png"><div class="char-name">Finn</div></div>

<div class="char-card" draggable="true" ondragstart="drag(event)" id="c10"><img src="LINK_FOR_FLUTTER.png"><div class="char-name">Flutter</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c11"><img src="LINK_FOR_GIGI.png"><div class="char-name">Gigi</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c12"><img src="LINK_FOR_GINGER.png"><div class="char-name">Ginger</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c13"><img src="LINK_FOR_GLISTEN.png"><div class="char-name">Glisten</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c14"><img src="LINK_FOR_GOOB.png"><div class="char-name">Goob</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c15"><img src="LINK_FOR_LOOEY.png"><div class="char-name">Looey</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c16"><img src="LINK_FOR_PEBBLE.png"><div class="char-name">Pebble</div></div>
<div class="char-card" draggable="true" ondragstart="drag(event)" id="c17"><img src="LINK_FOR_POPPY.png"><div class="char-name">Poppy</div></div>

</div>

<script>
/* --- SÜRÜKLE BIRAK MANTIĞI (JS) --- */

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);

// Hedef öğe "tier-drop-zone" veya "character-pool" ise ekle
if (ev.target.classList.contains('tier-drop-zone') || ev.target.classList.contains('character-pool')) {
ev.target.appendChild(draggedElement);
}
// Hedef bir "char-card" ise veya içindeki resimse, kartın olduğu ebeveyne ekle
else {
var targetZone = ev.target.closest('.tier-drop-zone') || ev.target.closest('.character-pool');
if (targetZone) {
targetZone.appendChild(draggedElement);
}
}
}

// Basit Reset Fonksiyonu (Opsiyonel)
document.querySelector('.btn-dark:last-child').addEventListener('click', function() {
var pool = document.getElementById('char-pool');
var cards = document.querySelectorAll('.char-card');
cards.forEach(card => pool.appendChild(card));
});

</script>

</body>
</html>

Files changed (4) hide show

components/footer.js +2 -1
components/navbar.js +4 -2
script.js +42 -0
tier-list-maker.html +272 -0

components/footer.js CHANGED Viewed

@@ -44,8 +44,9 @@ class CustomFooter extends HTMLElement {
               <h4 class="text-lg font-semibold mb-4">Resources</h4>
               <ul class="space-y-2">
                 <li><a href="/tier-list.html" class="footer-link">Tier List</a></li>
                 <li><a href="/build-calculator.html" class="footer-link">Build Calculator</a></li>
-                <li><a href="/main-characters.html" class="footer-link">Main Characters</a></li>
                 <li><a href="/guides.html" class="footer-link">Guides</a></li>
               </ul>
             </div>

               <h4 class="text-lg font-semibold mb-4">Resources</h4>
               <ul class="space-y-2">
                 <li><a href="/tier-list.html" class="footer-link">Tier List</a></li>
+                <li><a href="/tier-list-maker.html" class="footer-link">Tier Maker</a></li>
                 <li><a href="/build-calculator.html" class="footer-link">Build Calculator</a></li>
+<li><a href="/main-characters.html" class="footer-link">Main Characters</a></li>
                 <li><a href="/guides.html" class="footer-link">Guides</a></li>
               </ul>
             </div>

components/navbar.js CHANGED Viewed

@@ -38,8 +38,9 @@ class CustomNavbar extends HTMLElement {
 <!-- Desktop Navigation -->
             <div class="hidden md:flex items-center space-x-8">
               <a href="/tier-list.html" class="nav-link">Tier List</a>
               <a href="/build-calculator.html" class="nav-link">Build Calculator</a>
-              <a href="/guides.html" class="nav-link">Guides</a>
               <a href="/community.html" class="nav-link">Community</a>
               <a href="/about.html" class="nav-link">About</a>
 <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
@@ -57,8 +58,9 @@ class CustomNavbar extends HTMLElement {
           <div id="mobile-menu" class="mobile-menu md:hidden">
             <div class="pt-4 pb-2 space-y-2">
               <a href="/tier-list.html" class="block nav-link px-3 py-2">Tier List</a>
               <a href="/build-calculator.html" class="block nav-link px-3 py-2">Build Calculator</a>
-              <a href="/guides.html" class="block nav-link px-3 py-2">Guides</a>
               <a href="/community.html" class="block nav-link px-3 py-2">Community</a>
               <a href="/about.html" class="block nav-link px-3 py-2">About</a>
 <button class="w-full text-left bg-primary text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition">

 <!-- Desktop Navigation -->
             <div class="hidden md:flex items-center space-x-8">
               <a href="/tier-list.html" class="nav-link">Tier List</a>
+              <a href="/tier-list-maker.html" class="nav-link">Tier Maker</a>
               <a href="/build-calculator.html" class="nav-link">Build Calculator</a>
+<a href="/guides.html" class="nav-link">Guides</a>
               <a href="/community.html" class="nav-link">Community</a>
               <a href="/about.html" class="nav-link">About</a>
 <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
           <div id="mobile-menu" class="mobile-menu md:hidden">
             <div class="pt-4 pb-2 space-y-2">
               <a href="/tier-list.html" class="block nav-link px-3 py-2">Tier List</a>
+              <a href="/tier-list-maker.html" class="block nav-link px-3 py-2">Tier Maker</a>
               <a href="/build-calculator.html" class="block nav-link px-3 py-2">Build Calculator</a>
+<a href="/guides.html" class="block nav-link px-3 py-2">Guides</a>
               <a href="/community.html" class="block nav-link px-3 py-2">Community</a>
               <a href="/about.html" class="block nav-link px-3 py-2">About</a>
 <button class="w-full text-left bg-primary text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition">

script.js CHANGED Viewed

@@ -1,6 +1,48 @@
 // Build Calculator and Utility Handling
 document.addEventListener('DOMContentLoaded', function() {
 // Star Rating Functionality
 document.addEventListener('click', function(e) {
     if (e.target.classList.contains('star')) {

+// Tier List Maker Drag & Drop
+function initializeDragDrop() {
+    document.addEventListener('dragstart', function(ev) {
+        if (ev.target.classList.contains('char-card')) {
+            ev.dataTransfer.setData("text", ev.target.id);
+        }
+    });
+    document.addEventListener('dragover', function(ev) {
+        if (ev.target.classList.contains('tier-drop-zone') ||
+            ev.target.classList.contains('character-pool') ||
+            ev.target.closest('.tier-drop-zone') ||
+            ev.target.closest('.character-pool')) {
+            ev.preventDefault();
+        }
+    });
+    document.addEventListener('drop', function(ev) {
+        if (ev.target.classList.contains('tier-drop-zone') ||
+            ev.target.classList.contains('character-pool')) {
+            ev.preventDefault();
+            var data = ev.dataTransfer.getData("text");
+            var draggedElement = document.getElementById(data);
+            ev.target.appendChild(draggedElement);
+        } else {
+            var targetZone = ev.target.closest('.tier-drop-zone') ||
+                            ev.target.closest('.character-pool');
+            if (targetZone) {
+                ev.preventDefault();
+                var data = ev.dataTransfer.getData("text");
+                var draggedElement = document.getElementById(data);
+                targetZone.appendChild(draggedElement);
+            }
+        }
+    });
+}
 // Build Calculator and Utility Handling
 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize drag and drop if on tier list maker page
+    if (document.getElementById('tier-list')) {
+        initializeDragDrop();
+    }
 // Star Rating Functionality
 document.addEventListener('click', function(e) {
     if (e.target.classList.contains('star')) {

tier-list-maker.html ADDED Viewed

	@@ -0,0 +1,272 @@

+<!DOCTYPE html>
+<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>