Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Theme toggler
+ const themeToggle = document.querySelector('.theme-toggle');
+ themeToggle.addEventListener('click', () => {
+ document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
+ });
+
+ // Card ripple effect
+ const cards = document.querySelectorAll('.card');
+ cards.forEach(card => {
+ card.addEventListener('click', function(e) {
+ let ripple = document.createElement('div');
+ ripple.classList.add('ripple');
+ this.appendChild(ripple);
+
+ let rect = this.getBoundingClientRect();
+ let x = e.clientX - rect.left;
+ let y = e.clientY - rect.top;
+
+ ripple.style.left = `${x}px`;
+ ripple.style.top = `${y}px`;
+
+ setTimeout(() => ripple.remove(), 1000);
+ });
+ });
+
+ // Color theme buttons
+ const colorBtns = document.querySelectorAll('.color-btn');
+ colorBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const color = btn.dataset.color;
+ document.documentElement.style.setProperty('--primary',
+ color === 'blue' ? '#4a90e2' :
+ color === 'purple' ? '#9c27b0' :
+ '#4caf50'
+ );
+ });
+ });
+
+ // Make cards draggable
+ cards.forEach(card => {
+ let isDragging = false;
+ let currentX;
+ let currentY;
+ let initialX;
+ let initialY;
+ let xOffset = 0;
+ let yOffset = 0;
+
+ card.addEventListener('mousedown', dragStart);
+ document.addEventListener('mousemove', drag);
+ document.addEventListener('mouseup', dragEnd);
+
+ function dragStart(e) {
+ initialX = e.clientX - xOffset;
+ initialY = e.clientY - yOffset;
+ if (e.target === card) {
+ isDragging = true;
+ }
+ }
+
+ function drag(e) {
+ if (isDragging) {
+ e.preventDefault();
+ currentX = e.clientX - initialX;
+ currentY = e.clientY - initialY;
+ xOffset = currentX;
+ yOffset = currentY;
+ setTranslate(currentX, currentY, card);
+ }
+ }
+
+ function setTranslate(xPos, yPos, el) {
+ el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
+ }
+
+ function dragEnd() {
+ initialX = currentX;
+ initialY = currentY;
+ isDragging = false;
+ }
+ });
+ });
