testhtml-login

Running

App Files Files Community

openfree commited on Nov 15, 2024

Commit

c05bf1e

verified ·

1 Parent(s): 80f8c29

Update index.html

Browse files

Files changed (1) hide show

index.html +262 -211

index.html CHANGED Viewed

@@ -1,283 +1,334 @@
 <!DOCTYPE html>
-<html lang="en">
 <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>

 <!DOCTYPE html>
+<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>네온 벽돌깨기 게임</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
             display: flex;
+            flex-direction: column;
             align-items: center;
+            min-height: 100vh;
+            background: #111;
+            font-family: 'Noto Sans KR', sans-serif;
+            color: #fff;
         }
+        canvas {
+            background: rgba(0,0,0,0.8);
             border-radius: 8px;
+            box-shadow: 0 0 20px rgba(0,255,255,0.3);
+            margin: 20px 0;
         }
+        .controls {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 20px;
         }
         button {
+            padding: 12px 24px;
             font-size: 16px;
+            border: none;
+            border-radius: 5px;
             cursor: pointer;
+            background: transparent;
+            color: #fff;
+            border: 2px solid #0ff;
+            box-shadow: 0 0 10px #0ff;
+            text-shadow: 0 0 5px #0ff;
+            transition: all 0.3s;
         }
         button:hover {
+            background: rgba(0,255,255,0.2);
+            box-shadow: 0 0 20px #0ff;
         }
+        .score {
+            font-size: 24px;
+            margin-bottom: 15px;
+            color: #0ff;
+            text-shadow: 0 0 10px #0ff;
         }
+        .speed-control {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
+        .speed-control label {
+            color: #0ff;
+            text-shadow: 0 0 5px #0ff;
         }
+        input[type="range"] {
+            width: 200px;
+            accent-color: #0ff;
         }
+        .speed-value {
+            color: #0ff;
+            min-width: 30px;
             text-align: center;
         }
     </style>
 </head>
 <body>
+    <div class="score">점수: <span id="score">0</span></div>
+    <canvas id="gameCanvas" width="480" height="320"></canvas>
+    <div class="speed-control">
+        <label>속도 조절:</label>
+        <input type="range" id="speedControl" min="1" max="10" value="3">
+        <span class="speed-value" id="speedValue">3</span>
+    </div>
+    <div class="controls">
+        <button id="startBtn">시작하기</button>
+        <button id="resetBtn">다시하기</button>
     </div>
     <script>
+        const canvas = document.getElementById("gameCanvas");
+        const ctx = canvas.getContext("2d");
+        const startBtn = document.getElementById("startBtn");
+        const resetBtn = document.getElementById("resetBtn");
+        const scoreElement = document.getElementById("score");
+        const speedControl = document.getElementById("speedControl");
+        const speedValue = document.getElementById("speedValue");
+        let score = 0;
+        let gameRunning = false;
+        let baseSpeed = 3;
+        const colors = [
+            '#ff0000', '#00ff00', '#0000ff', '#ff00ff', '#ffff00', '#00ffff'
+        ];
+        const ball = {
+            x: canvas.width / 2,
+            y: canvas.height - 30,
+            dx: baseSpeed,
+            dy: -baseSpeed,
+            radius: 7,
+            color: '#fff'
+        };
+        const paddle = {
+            width: 75,
+            height: 10,
+            x: (canvas.width - 75) / 2,
+            color: '#0ff'
+        };
+        const brickRowCount = 5;
+        const brickColumnCount = 8;
+        const brickWidth = 50;
+        const brickHeight = 20;
+        const brickPadding = 10;
+        const brickOffsetTop = 30;
+        const brickOffsetLeft = 25;
+        const bricks = [];
+        for(let c=0; c<brickColumnCount; c++) {
+            bricks[c] = [];
+            for(let r=0; r<brickRowCount; r++) {
+                bricks[c][r] = {
+                    x: 0,
+                    y: 0,
+                    status: 1,
+                    color: colors[Math.floor(Math.random() * colors.length)]
+                };
             }
         }
+        let rightPressed = false;
+        let leftPressed = false;
+        function drawBall() {
+            ctx.beginPath();
+            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
+            ctx.fillStyle = ball.color;
+            ctx.fill();
+            ctx.shadowBlur = 15;
+            ctx.shadowColor = ball.color;
+            ctx.closePath();
         }
+        function drawPaddle() {
+            ctx.beginPath();
+            ctx.rect(paddle.x, canvas.height-paddle.height, paddle.width, paddle.height);
+            ctx.fillStyle = paddle.color;
+            ctx.fill();
+            ctx.shadowBlur = 15;
+            ctx.shadowColor = paddle.color;
+            ctx.closePath();
         }
+        function drawBricks() {
+            for(let c=0; c<brickColumnCount; c++) {
+                for(let r=0; r<brickRowCount; r++) {
+                    if(bricks[c][r].status === 1) {
+                        const brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                        const brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                        bricks[c][r].x = brickX;
+                        bricks[c][r].y = brickY;
+                        ctx.beginPath();
+                        ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                        ctx.fillStyle = bricks[c][r].color;
+                        ctx.fill();
+                        ctx.shadowBlur = 15;
+                        ctx.shadowColor = bricks[c][r].color;
+                        ctx.closePath();
+                    }
+                }
             }
+        }
+        function updateSpeed() {
+            const newSpeed = parseInt(speedControl.value);
+            speedValue.textContent = newSpeed;
+            const speedMultiplier = newSpeed / baseSpeed;
+            ball.dx = Math.sign(ball.dx) * Math.abs(baseSpeed * speedMultiplier);
+            ball.dy = Math.sign(ball.dy) * Math.abs(baseSpeed * speedMultiplier);
+        }
+        speedControl.addEventListener('input', updateSpeed);
+        function collisionDetection() {
+            for(let c=0; c<brickColumnCount; c++) {
+                for(let r=0; r<brickRowCount; r++) {
+                    const b = bricks[c][r];
+                    if(b.status === 1) {
+                        if(ball.x > b.x && ball.x < b.x+brickWidth && ball.y > b.y && ball.y < b.y+brickHeight) {
+                            ball.dy = -ball.dy;
+                            b.status = 0;
+                            ball.color = b.color;
+                            score++;
+                            scoreElement.textContent = score;
+                            if(score === brickRowCount*brickColumnCount) {
+                                alert("축하합니다! 승리하셨습니다!");
+                                gameRunning = false;
+                            }
+                        }
+                    }
+                }
             }
+        }
+        function draw() {
+            if (!gameRunning) return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.shadowBlur = 0;
+            drawBricks();
+            drawBall();
+            drawPaddle();
+            collisionDetection();
+            if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
+                ball.dx = -ball.dx;
+            }
+            if(ball.y + ball.dy < ball.radius) {
+                ball.dy = -ball.dy;
+            } else if(ball.y + ball.dy > canvas.height-ball.radius) {
+                if(ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
+                    ball.dy = -ball.dy;
+                } else {
+                    alert("게임 오버");
+                    gameRunning = false;
+                    return;
+                }
+            }
+            if(rightPressed && paddle.x < canvas.width-paddle.width) {
+                paddle.x += 7;
+            }
+            else if(leftPressed && paddle.x > 0) {
+                paddle.x -= 7;
+            }
+            ball.x += ball.dx;
+            ball.y += ball.dy;
+            requestAnimationFrame(draw);
+        }
+        function keyDownHandler(e) {
+            if(e.key === "Right" || e.key === "ArrowRight") {
+                rightPressed = true;
+            }
+            else if(e.key === "Left" || e.key === "ArrowLeft") {
+                leftPressed = true;
+            }
+        }
+        function keyUpHandler(e) {
+            if(e.key === "Right" || e.key === "ArrowRight") {
+                rightPressed = false;
+            }
+            else if(e.key === "Left" || e.key === "ArrowLeft") {
+                leftPressed = false;
+            }
+        }
+        function mouseMoveHandler(e) {
+            const relativeX = e.clientX - canvas.offsetLeft;
+            if(relativeX > 0 && relativeX < canvas.width) {
+                paddle.x = relativeX - paddle.width/2;
+            }
+        }
+        function resetGame() {
+            score = 0;
+            scoreElement.textContent = score;
+            ball.x = canvas.width / 2;
+            ball.y = canvas.height - 30;
+            updateSpeed();
+            ball.color = '#fff';
+            paddle.x = (canvas.width - paddle.width) / 2;
+            for(let c=0; c<brickColumnCount; c++) {
+                for(let r=0; r<brickRowCount; r++) {
+                    bricks[c][r].status = 1;
+                    bricks[c][r].color = colors[Math.floor(Math.random() * colors.length)];
+                }
+            }
+            if (!gameRunning) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                drawBricks();
+                drawBall();
+                drawPaddle();
+            }
+        }
+        document.addEventListener("keydown", keyDownHandler, false);
+        document.addEventListener("keyup", keyUpHandler, false);
+        document.addEventListener("mousemove", mouseMoveHandler, false);
+        startBtn.addEventListener("click", () => {
+            if (!gameRunning) {
+                gameRunning = true;
+                draw();
             }
+        });
+        resetBtn.addEventListener("click", () => {
+            gameRunning = false;
+            resetGame();
+        });
+        resetGame();
     </script>
 </body>
 </html>