testhtml2

Running

App Files Files Community

openfree commited on Nov 13, 2024

Commit

1bd4bc0

verified ·

1 Parent(s): c6207dc

Update index.html

Browse files

Files changed (1) hide show

index.html +332 -242

index.html CHANGED Viewed

@@ -3,326 +3,416 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Memory Match Game</title>
     <style>
-        :root {
-            --card-width: 120px;
-            --card-height: 150px;
-            --primary-color: #2c3e50;
-            --secondary-color: #3498db;
-        }
         * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
         body {
-            min-height: 100vh;
-            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            color: white;
         }
-        .game-container {
-            margin-top: 2rem;
-            text-align: center;
         }
-        .controls {
-            margin: 1rem 0;
             display: flex;
-            gap: 1rem;
-            justify-content: center;
             align-items: center;
         }
-        .btn {
-            padding: 0.5rem 1rem;
             border: none;
-            border-radius: 5px;
-            background: rgba(255, 255, 255, 0.2);
-            color: white;
             cursor: pointer;
-            transition: all 0.3s ease;
         }
-        .btn:hover {
-            background: rgba(255, 255, 255, 0.3);
         }
-        .stats {
             display: flex;
-            gap: 2rem;
-            margin: 1rem;
-            font-size: 1.2rem;
         }
-        .board {
             display: grid;
             gap: 10px;
-            padding: 20px;
-            perspective: 1000px;
         }
-        .card {
-            width: var(--card-width);
-            height: var(--card-height);
-            position: relative;
-            transform-style: preserve-3d;
-            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            cursor: pointer;
         }
-        .card.flipped {
-            transform: rotateY(180deg);
         }
-        .card.matched {
-            transform: rotateY(180deg) scale(0.95);
-            opacity: 0.8;
         }
-        .card-face {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            backface-visibility: hidden;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2rem;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
-        .card-front {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            transform: rotateY(180deg);
         }
-        .card-back {
-            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
         }
         .modal {
             position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(0, 0, 0, 0.9);
-            padding: 2rem;
             border-radius: 10px;
-            text-align: center;
-            display: none;
         }
-        @keyframes match {
-            0%, 100% { transform: rotateY(180deg) scale(1); }
-            50% { transform: rotateY(180deg) scale(1.1); }
         }
-        @keyframes mismatch {
-            0%, 100% { transform: rotateY(180deg); }
-            20%, 40%, 60%, 80% { transform: rotateY(180deg) translateX(-10px); }
-            30%, 50%, 70%, 90% { transform: rotateY(180deg) translateX(10px); }
         }
     </style>
 </head>
 <body>
-    <div class="game-container">
-        <h1>Memory Match</h1>
-        <div class="controls">
-            <select id="difficulty" class="btn">
-                <option value="8">Easy (4x4)</option>
-                <option value="18">Medium (6x6)</option>
-                <option value="32">Hard (8x8)</option>
-            </select>
-            <button class="btn" id="start">New Game</button>
-        </div>
-        <div class="stats">
-            <div>Moves: <span id="moves">0</span></div>
-            <div>Time: <span id="timer">0:00</span></div>
-            <div>Score: <span id="score">0</span></div>
         </div>
-        <div class="board" id="board"></div>
     </div>
-    <div class="modal" id="win-modal">
-        <h2>Congratulations!</h2>
-        <p>You completed the game in <span id="final-time"></span></p>
-        <p>Final Score: <span id="final-score"></span></p>
-        <button class="btn" onclick="startGame()">Play Again</button>
     </div>
     <script>
-        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        let gameState = {
-            flippedCards: [],
-            matches: 0,
-            moves: 0,
-            score: 0,
-            timer: 0,
-            gameStarted: false,
-            timerInterval: null
-        };
-        const emojis = ['🎮', '🎲', '🎯', '🎨', '🎭', '🎪', '🎫', '🎬',
-                       '🎤', '🎧', '🎷', '🎸', '🎹', '🎺', '🎻', '🥁',
-                       '⚽️', '🏀', '🏈', '⚾️', '🎾', '🏐', '🏉', '🎱',
-                       '🏓', '🏸', '🥊', '🥋', '🎣', '⛳️', '🏹', '🎽'];
-        function createAudioBuffer(frequency, duration) {
-            const sampleRate = audioContext.sampleRate;
-            const buffer = audioContext.createBuffer(1, duration * sampleRate, sampleRate);
-            const data = buffer.getChannelData(0);
-            for (let i = 0; i < buffer.length; i++) {
-                data[i] = Math.sin(2 * Math.PI * frequency * i / sampleRate) *
-                         Math.exp(-5 * i / buffer.length);
             }
-            return buffer;
         }
-        const matchSound = createAudioBuffer(440, 0.1);
-        const mismatchSound = createAudioBuffer(220, 0.1);
-        function playSound(buffer) {
-            const source = audioContext.createBufferSource();
-            source.buffer = buffer;
-            source.connect(audioContext.destination);
-            source.start();
         }
-        function createBoard() {
-            const board = document.getElementById('board');
-            const difficulty = parseInt(document.getElementById('difficulty').value);
-            const pairs = difficulty;
-            const size = Math.sqrt(pairs * 2);
-            board.style.gridTemplateColumns = `repeat(${size}, var(--card-width))`;
-            board.innerHTML = '';
-            const selectedEmojis = emojis.slice(0, pairs);
-            const cards = [...selectedEmojis, ...selectedEmojis]
-                .sort(() => Math.random() - 0.5);
-            cards.forEach((emoji, index) => {
-                const card = document.createElement('div');
-                card.className = 'card';
-                card.dataset.value = emoji;
-                card.dataset.index = index;
-                card.innerHTML = `
-                    <div class="card-face card-front">${emoji}</div>
-                    <div class="card-face card-back">?</div>
-                `;
-                card.addEventListener('click', flipCard);
-                board.appendChild(card);
             });
         }
-        function flipCard() {
-            if (!gameState.gameStarted) {
-                startTimer();
-                gameState.gameStarted = true;
-            }
-            const card = this;
-            if (card.classList.contains('flipped') ||
-                gameState.flippedCards.length >= 2) return;
-            card.classList.add('flipped');
-            gameState.flippedCards.push(card);
-            if (gameState.flippedCards.length === 2) {
-                gameState.moves++;
-                document.getElementById('moves').textContent = gameState.moves;
-                checkMatch();
-            }
         }
-        function checkMatch() {
-            const [card1, card2] = gameState.flippedCards;
-            const match = card1.dataset.value === card2.dataset.value;
-            if (match) {
-                playSound(matchSound);
-                card1.classList.add('matched');
-                card2.classList.add('matched');
-                gameState.matches++;
-                gameState.score += 100;
-                card1.style.animation = card2.style.animation = 'match 0.5s ease';
-                if (gameState.matches === parseInt(document.getElementById('difficulty').value)) {
-                    endGame();
-                }
-            } else {
-                playSound(mismatchSound);
-                card1.style.animation = card2.style.animation = 'mismatch 0.5s ease';
-                gameState.score = Math.max(0, gameState.score - 20);
-                setTimeout(() => {
-                    card1.classList.remove('flipped');
-                    card2.classList.remove('flipped');
-                }, 1000);
-            }
-            setTimeout(() => {
-                card1.style.animation = card2.style.animation = '';
-            }, 500);
-            document.getElementById('score').textContent = gameState.score;
-            gameState.flippedCards = [];
-        }
-        function startTimer() {
-            gameState.timerInterval = setInterval(() => {
-                gameState.timer++;
-                const minutes = Math.floor(gameState.timer / 60);
-                const seconds = gameState.timer % 60;
-                document.getElementById('timer').textContent =
-                    `${minutes}:${seconds.toString().padStart(2, '0')}`;
-            }, 1000);
-        }
-        function endGame() {
-            clearInterval(gameState.timerInterval);
-            const modal = document.getElementById('win-modal');
-            document.getElementById('final-time').textContent =
-                document.getElementById('timer').textContent;
-            document.getElementById('final-score').textContent = gameState.score;
-            modal.style.display = 'block';
-        }
-        function startGame() {
-            gameState = {
-                flippedCards: [],
-                matches: 0,
-                moves: 0,
-                score: 0,
-                timer: 0,
-                gameStarted: false,
-                timerInterval: null
-            };
-            document.getElementById('moves').textContent = '0';
-            document.getElementById('timer').textContent = '0:00';
-            document.getElementById('score').textContent = '0';
-            document.getElementById('win-modal').style.display = 'none';
-            createBoard();
-            clearInterval(gameState.timerInterval);
         }
-        document.getElementById('start').addEventListener('click', startGame);
-        document.getElementById('difficulty').addEventListener('change', startGame);
-        // Initial game setup
-        startGame();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Calendar</title>
     <style>
         * {
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
+            font-family: 'Arial', sans-serif;
         }
         body {
+            background: #f5f5f5;
+            padding: 20px;
         }
+        .calendar-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+            padding: 20px;
         }
+        .calendar-header {
             display: flex;
+            justify-content: space-between;
             align-items: center;
+            margin-bottom: 20px;
         }
+        .month-nav {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .nav-btn {
+            background: none;
             border: none;
+            font-size: 24px;
             cursor: pointer;
+            color: #333;
+            padding: 5px 10px;
         }
+        .current-month {
+            font-size: 24px;
+            font-weight: bold;
         }
+        .filter-controls {
             display: flex;
+            gap: 10px;
         }
+        .filter-btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            background: #eee;
+            transition: 0.3s;
+        }
+        .filter-btn.active {
+            background: #007bff;
+            color: white;
+        }
+        .calendar-grid {
             display: grid;
+            grid-template-columns: repeat(7, 1fr);
             gap: 10px;
         }
+        .day-header {
+            text-align: center;
+            font-weight: bold;
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: 5px;
         }
+        .day-cell {
+            min-height: 120px;
+            padding: 10px;
+            background: #fff;
+            border: 1px solid #eee;
+            border-radius: 5px;
+            transition: 0.3s;
         }
+        .day-cell:hover {
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
         }
+        .day-cell.different-month {
+            background: #f8f9fa;
+            color: #999;
+        }
+        .event {
+            margin: 5px 0;
+            padding: 5px 10px;
+            border-radius: 3px;
+            font-size: 12px;
+            cursor: move;
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from {
+                transform: translateY(-10px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
         }
+        .event.work { background: #ffcdd2; }
+        .event.personal { background: #c8e6c9; }
+        .event.meeting { background: #bbdefb; }
+        .event.dragging {
+            opacity: 0.5;
+            transform: scale(0.95);
         }
+        .add-event-btn {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: #007bff;
+            color: white;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
+            transition: 0.3s;
+        }
+        .add-event-btn:hover {
+            transform: scale(1.1);
         }
         .modal {
+            display: none;
             position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background: white;
+            padding: 20px;
             border-radius: 10px;
+            width: 90%;
+            max-width: 400px;
+        }
+        .form-group {
+            margin: 15px 0;
+        }
+        input, select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
         }
+        .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
         }
+        .modal-btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
         }
+        .save-btn { background: #007bff; color: white; }
+        .cancel-btn { background: #eee; }
     </style>
 </head>
 <body>
+    <div class="calendar-container">
+        <div class="calendar-header">
+            <div class="month-nav">
+                <button class="nav-btn" onclick="changeMonth(-1)">←</button>
+                <div class="current-month"></div>
+                <button class="nav-btn" onclick="changeMonth(1)">→</button>
+            </div>
+            <div class="filter-controls">
+                <button class="filter-btn active" data-type="all">All</button>
+                <button class="filter-btn" data-type="work">Work</button>
+                <button class="filter-btn" data-type="personal">Personal</button>
+                <button class="filter-btn" data-type="meeting">Meeting</button>
+            </div>
         </div>
+        <div class="calendar-grid"></div>
     </div>
+    <button class="add-event-btn" onclick="openModal()">+</button>
+    <div class="modal">
+        <div class="modal-content">
+            <h2>Add Event</h2>
+            <div class="form-group">
+                <input type="text" id="eventTitle" placeholder="Event Title">
+            </div>
+            <div class="form-group">
+                <select id="eventType">
+                    <option value="work">Work</option>
+                    <option value="personal">Personal</option>
+                    <option value="meeting">Meeting</option>
+                </select>
+            </div>
+            <div class="modal-buttons">
+                <button class="modal-btn cancel-btn" onclick="closeModal()">Cancel</button>
+                <button class="modal-btn save-btn" onclick="saveEvent()">Save</button>
+            </div>
+        </div>
     </div>
     <script>
+        let currentDate = new Date();
+        let events = [];
+        let selectedDate = null;
+        let draggedEvent = null;
+        function initCalendar() {
+            updateMonthDisplay();
+            renderCalendar();
+            initEventListeners();
+        }
+        function updateMonthDisplay() {
+            const months = ['January', 'February', 'March', 'April', 'May', 'June',
+                          'July', 'August', 'September', 'October', 'November', 'December'];
+            document.querySelector('.current-month').textContent =
+                `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
+        }
+        function renderCalendar() {
+            const grid = document.querySelector('.calendar-grid');
+            grid.innerHTML = '';
+            // Add day headers
+            const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+            days.forEach(day => {
+                const dayHeader = document.createElement('div');
+                dayHeader.className = 'day-header';
+                dayHeader.textContent = day;
+                grid.appendChild(dayHeader);
+            });
+            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+            // Add padding days from previous month
+            const paddingDays = firstDay.getDay();
+            const prevLastDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
+            for (let i = paddingDays - 1; i >= 0; i--) {
+                const dayCell = createDayCell(prevLastDay.getDate() - i, true);
+                grid.appendChild(dayCell);
+            }
+            // Add current month days
+            for (let day = 1; day <= lastDay.getDate(); day++) {
+                const dayCell = createDayCell(day, false);
+                grid.appendChild(dayCell);
+            }
+            // Add padding days for next month
+            const remainingDays = 42 - (paddingDays + lastDay.getDate());
+            for (let i = 1; i <= remainingDays; i++) {
+                const dayCell = createDayCell(i, true);
+                grid.appendChild(dayCell);
             }
         }
+        function createDayCell(day, isDifferentMonth) {
+            const cell = document.createElement('div');
+            cell.className = `day-cell${isDifferentMonth ? ' different-month' : ''}`;
+            cell.innerHTML = `<div class="day-number">${day}</div>`;
+            cell.addEventListener('dragover', e => e.preventDefault());
+            cell.addEventListener('drop', handleDrop);
+            // Add events for this day
+            if (!isDifferentMonth) {
+                const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
+                const dayEvents = events.filter(event => {
+                    const eventDate = new Date(event.date);
+                    return eventDate.toDateString() === date.toDateString();
+                });
+                dayEvents.forEach(event => {
+                    const eventElement = createEventElement(event);
+                    cell.appendChild(eventElement);
+                });
+            }
+            return cell;
         }
+        function createEventElement(event) {
+            const eventDiv = document.createElement('div');
+            eventDiv.className = `event ${event.type}`;
+            eventDiv.textContent = event.title;
+            eventDiv.draggable = true;
+            eventDiv.dataset.eventId = event.id;
+            eventDiv.addEventListener('dragstart', e => {
+                draggedEvent = event;
+                e.target.classList.add('dragging');
+            });
+            eventDiv.addEventListener('dragend', e => {
+                e.target.classList.remove('dragging');
             });
+            return eventDiv;
         }
+        function handleDrop(e) {
+            e.preventDefault();
+            if (!draggedEvent) return;
+            const dayCell = e.target.closest('.day-cell');
+            if (!dayCell) return;
+            const dayNumber = dayCell.querySelector('.day-number').textContent;
+            const newDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayNumber);
+            // Update event date
+            const eventIndex = events.findIndex(e => e.id === draggedEvent.id);
+            events[eventIndex].date = newDate;
+            draggedEvent = null;
+            renderCalendar();
         }
+        function changeMonth(delta) {
+            currentDate.setMonth(currentDate.getMonth() + delta);
+            updateMonthDisplay();
+            renderCalendar();
+        }
+        function openModal() {
+            document.querySelector('.modal').style.display = 'flex';
+        }
+        function closeModal() {
+            document.querySelector('.modal').style.display = 'none';
+        }
+        function saveEvent() {
+            const title = document.getElementById('eventTitle').value;
+            const type = document.getElementById('eventType').value;
+            if (!title) return;
+            const newEvent = {
+                id: Date.now(),
+                title,
+                type,
+                date: new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+            };
+            events.push(newEvent);
+            renderCalendar();
+            closeModal();
+            document.getElementById('eventTitle').value = '';
         }
+        function initEventListeners() {
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                    e.target.classList.add('active');
+                    const type = e.target.dataset.type;
+                    document.querySelectorAll('.event').forEach(event => {
+                        if (type === 'all' || event.classList.contains(type)) {
+                            event.style.display = 'block';
+                        } else {
+                            event.style.display = 'none';
+                        }
+                    });
+                });
+            });
+        }
+        // Initialize calendar
+        initCalendar();
     </script>
 </body>
 </html>