testhtml-login

Running

App Files Files Community

openfree commited on Nov 13, 2024

Commit

80f8c29

verified ·

1 Parent(s): b5d652f

Update index.html

Browse files

Files changed (1) hide show

index.html +187 -336

index.html CHANGED Viewed

@@ -3,430 +3,281 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Calendar with LocalStorage</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;
-        // LocalStorage에서 이벤트 데이터 로드
-        function loadEvents() {
-            const savedEvents = localStorage.getItem('calendarEvents');
-            if (savedEvents) {
-                events = JSON.parse(savedEvents).map(event => ({
-                    ...event,
-                    date: new Date(event.date)
-                }));
             }
-        }
-        // LocalStorage에 이벤트 데이터 저장
-        function saveEvents() {
-            localStorage.setItem('calendarEvents', JSON.stringify(events));
         }
-        function initCalendar() {
-            loadEvents(); // 초기화 시 저장된 이벤트 로드
-            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 = '';
-            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);
-            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);
             }
-            for (let day = 1; day <= lastDay.getDate(); day++) {
-                const dayCell = createDayCell(day, false);
-                grid.appendChild(dayCell);
             }
-            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);
-            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);
-            const eventIndex = events.findIndex(e => e.id === draggedEvent.id);
-            events[eventIndex].date = newDate;
-            saveEvents(); // 드래그 앤 드롭 후 저장
-            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);
-            saveEvents(); // 새 이벤트 추가 후 저장
-            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';
-                        }
-                    });
-                });
-            });
         }
-        // 초기화
-        initCalendar();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login & Register</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: linear-gradient(45deg, #6b5b95, #feb236);
         }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+            width: 400px;
         }
+        .form-group {
             margin-bottom: 20px;
         }
+        h2 {
+            text-align: center;
             color: #333;
+            margin-bottom: 30px;
         }
+        input {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            outline: none;
         }
+        input:focus {
+            border-color: #6b5b95;
         }
+        button {
+            width: 100%;
+            padding: 12px;
+            background: #6b5b95;
+            color: white;
             border: none;
+            border-radius: 8px;
+            font-size: 16px;
             cursor: pointer;
+            transition: all 0.3s ease;
         }
+        button:hover {
+            background: #574a7a;
         }
+        .switch-form {
+            text-align: center;
+            margin-top: 20px;
         }
+        .switch-form a {
+            color: #6b5b95;
+            text-decoration: none;
+            font-weight: 600;
         }
+        .alert {
             padding: 10px;
+            margin: 10px 0;
+            border-radius: 8px;
+            display: none;
         }
+        .alert-success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
         }
+        .alert-error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
         }
+        .password-requirements {
             font-size: 12px;
+            color: #666;
+            margin-top: 5px;
         }
+        .loading {
             display: none;
+            text-align: center;
+            margin-top: 10px;
         }
+        .loading::after {
+            content: "...";
+            animation: dots 1s steps(5, end) infinite;
         }
+        @keyframes dots {
+            0%, 20% { content: "."; }
+            40% { content: ".."; }
+            60%, 100% { content: "..."; }
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <div id="loginForm">
+            <h2>Login</h2>
+            <div class="alert alert-error" id="loginError"></div>
+            <form onsubmit="handleLogin(event)">
+                <div class="form-group">
+                    <input type="email" id="loginEmail" placeholder="Email" required>
+                </div>
+                <div class="form-group">
+                    <input type="password" id="loginPassword" placeholder="Password" required>
+                </div>
+                <button type="submit">Login</button>
+                <div class="loading" id="loginLoading">Processing</div>
+            </form>
+            <div class="switch-form">
+                Don't have an account? <a href="#" onclick="toggleForms()">Register</a>
             </div>
         </div>
+        <div id="registerForm" style="display: none;">
+            <h2>Register</h2>
+            <div class="alert alert-success" id="registerSuccess"></div>
+            <div class="alert alert-error" id="registerError"></div>
+            <form onsubmit="handleRegister(event)">
+                <div class="form-group">
+                    <input type="email" id="registerEmail" placeholder="Email" required>
+                </div>
+                <div class="form-group">
+                    <input type="password" id="registerPassword" placeholder="Password" required>
+                    <div class="password-requirements">
+                        Password must be at least 8 characters long and contain letters and numbers
+                    </div>
+                </div>
+                <div class="form-group">
+                    <input type="password" id="confirmPassword" placeholder="Confirm Password" required>
+                </div>
+                <button type="submit">Register</button>
+                <div class="loading" id="registerLoading">Processing</div>
+            </form>
+            <div class="switch-form">
+                Already have an account? <a href="#" onclick="toggleForms()">Login</a>
             </div>
         </div>
     </div>
     <script>
+        // Mock user database
+        let users = [];
+        function toggleForms() {
+            const loginForm = document.getElementById('loginForm');
+            const registerForm = document.getElementById('registerForm');
+            if (loginForm.style.display === 'none') {
+                loginForm.style.display = 'block';
+                registerForm.style.display = 'none';
+            } else {
+                loginForm.style.display = 'none';
+                registerForm.style.display = 'block';
             }
+            // Clear all alerts and forms
+            clearAlerts();
+            document.querySelectorAll('form').forEach(form => form.reset());
         }
+        function clearAlerts() {
+            document.querySelectorAll('.alert').forEach(alert => {
+                alert.style.display = 'none';
+            });
+            document.querySelectorAll('.loading').forEach(loading => {
+                loading.style.display = 'none';
+            });
         }
+        function validatePassword(password) {
+            const minLength = 8;
+            const hasLetter = /[a-zA-Z]/.test(password);
+            const hasNumber = /\d/.test(password);
+            return password.length >= minLength && hasLetter && hasNumber;
         }
+        async function handleRegister(event) {
+            event.preventDefault();
+            clearAlerts();
+            const email = document.getElementById('registerEmail').value;
+            const password = document.getElementById('registerPassword').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+            const loading = document.getElementById('registerLoading');
+            const success = document.getElementById('registerSuccess');
+            const error = document.getElementById('registerError');
+            if (!validatePassword(password)) {
+                error.textContent = 'Password must be at least 8 characters long and contain both letters and numbers';
+                error.style.display = 'block';
+                return;
             }
+            if (password !== confirmPassword) {
+                error.textContent = 'Passwords do not match';
+                error.style.display = 'block';
+                return;
             }
+            if (users.some(user => user.email === email)) {
+                error.textContent = 'Email already registered';
+                error.style.display = 'block';
+                return;
             }
+            loading.style.display = 'block';
+            // Simulate API call
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            users.push({ email, password });
+            loading.style.display = 'none';
+            success.textContent = 'Registration successful! Please login.';
+            success.style.display = 'block';
+            // Clear form
+            event.target.reset();
+            // Switch to login form after 2 seconds
+            setTimeout(toggleForms, 2000);
+        }
+        async function handleLogin(event) {
+            event.preventDefault();
+            clearAlerts();
+            const email = document.getElementById('loginEmail').value;
+            const password = document.getElementById('loginPassword').value;
+            const loading = document.getElementById('loginLoading');
+            const error = document.getElementById('loginError');
+            loading.style.display = 'block';
+            // Simulate API call
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            const user = users.find(u => u.email === email && u.password === password);
+            loading.style.display = 'none';
+            if (user) {
+                alert('Login successful!');
+                event.target.reset();
+            } else {
+                error.textContent = 'Invalid email or password';
+                error.style.display = 'block';
+            }
         }
     </script>
 </body>
 </html>