commit 431e377678fd96737d7ab9aefff11f75f4eb0fa3
Author: root <root@hub.scroll.pub> Date: 2024-12-30 02:24:38 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..46ee1f7 --- /dev/null +++ b/body.html @@ -0,0 +1,49 @@ +<header> + <h1>Welcome to LoginScape</h1> + <p>Your gateway to secure and stylish authentication</p> +</header> + +<main> + <section class="login-section"> + <div class="login-container"> + <h2>Login</h2> + <form id="loginForm"> + <div class="input-group"> + <label for="username">Username or Email</label> + <input type="text" id="username" name="username" required> + </div> + <div class="input-group"> + <label for="password">Password</label> + <input type="password" id="password" name="password" required> + </div> + <div class="options"> + <label> + <input type="checkbox" id="rememberMe"> Remember me + </label> + <a href="#" class="forgot-password">Forgot password?</a> + </div> + <button type="submit" class="login-btn">Login</button> + </form> + + <div class="divider">OR</div> + + <div class="qr-login"> + <h3>QR Code Login</h3> + <div class="qr-code-placeholder"></div> + <p>Scan the QR code with your mobile device</p> + </div> + </div> + + <div class="register-prompt"> + <p>Don't have an account? <a href="#" class="register-link">Register here</a></p> + </div> + </section> +</main> + +<footer> + <nav> + <a href="#">Privacy Policy</a> + <a href="#">Terms of Service</a> + <a href="#">Contact Us</a> + </nav> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..70d2fc4 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://loginscape.scroll.pub +metaTags +editButton /edit.html +title LoginScape - Secure and Stylish Login Experience +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..8346a40 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "2ef8ee50-6eb6-4c62-a50e-d6f1a95eb834", + "object": "chat.completion", + "created": 1735525453, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nloginscape.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://loginscape.scroll.pub\nmetaTags\neditButton /edit.html\ntitle LoginScape - Secure and Stylish Login Experience\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Welcome to LoginScape</h1>\n <p>Your gateway to secure and stylish authentication</p>\n</header>\n\n<main>\n <section class=\"login-section\">\n <div class=\"login-container\">\n <h2>Login</h2>\n <form id=\"loginForm\">\n <div class=\"input-group\">\n <label for=\"username\">Username or Email</label>\n <input type=\"text\" id=\"username\" name=\"username\" required>\n </div>\n <div class=\"input-group\">\n <label for=\"password\">Password</label>\n <input type=\"password\" id=\"password\" name=\"password\" required>\n </div>\n <div class=\"options\">\n <label>\n <input type=\"checkbox\" id=\"rememberMe\"> Remember me\n </label>\n <a href=\"#\" class=\"forgot-password\">Forgot password?</a>\n </div>\n <button type=\"submit\" class=\"login-btn\">Login</button>\n </form>\n\n <div class=\"divider\">OR</div>\n\n <div class=\"qr-login\">\n <h3>QR Code Login</h3>\n <div class=\"qr-code-placeholder\"></div>\n <p>Scan the QR code with your mobile device</p>\n </div>\n </div>\n\n <div class=\"register-prompt\">\n <p>Don't have an account? <a href=\"#\" class=\"register-link\">Register here</a></p>\n </div>\n </section>\n</main>\n\n<footer>\n <nav>\n <a href=\"#\">Privacy Policy</a>\n <a href=\"#\">Terms of Service</a>\n <a href=\"#\">Contact Us</a>\n </nav>\n</footer>\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --border-color: #e2e8f0;\n --shadow-color: rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.login-section {\n max-width: 400px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px var(--shadow-color);\n}\n\n.login-container {\n margin-bottom: 1.5rem;\n}\n\nh2 {\n font-size: 1.8rem;\n margin-bottom: 1.5rem;\n text-align: center;\n}\n\n.input-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n font-size: 1rem;\n}\n\n.options {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 1rem 0;\n}\n\n.forgot-password {\n color: var(--primary-color);\n text-decoration: none;\n}\n\n.login-btn {\n width: 100%;\n padding: 0.75rem;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.login-btn:hover {\n background-color: var(--secondary-color);\n}\n\n.divider {\n text-align: center;\n margin: 1.5rem 0;\n position: relative;\n}\n\n.divider::before,\n.divider::after {\n content: '';\n position: absolute;\n top: 50%;\n width: 45%;\n height: 1px;\n background-color: var(--border-color);\n}\n\n.divider::before {\n left: 0;\n}\n\n.divider::after {\n right: 0;\n}\n\n.qr-login {\n text-align: center;\n}\n\n.qr-code-placeholder {\n width: 150px;\n height: 150px;\n margin: 1rem auto;\n background-color: var(--border-color);\n border-radius: 8px;\n}\n\n.register-prompt {\n text-align: center;\n margin-top: 1rem;\n}\n\n.register-link {\n color: var(--primary-color);\n text-decoration: none;\n font-weight: 500;\n}\n\nfooter {\n margin-top: auto;\n padding: 1rem;\n background-color: white;\n text-align: center;\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 1rem;\n}\n\nfooter a {\n color: var(--text-color);\n text-decoration: none;\n}\n\n@media (max-width: 480px) {\n .login-section {\n margin: 1rem;\n padding: 1.5rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n h2 {\n font-size: 1.5rem;\n }\n}\n---script.js---\ndocument.getElementById('loginForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const username = document.getElementById('username').value;\n const password = document.getElementById('password').value;\n const rememberMe = document.getElementById('rememberMe').checked;\n \n // Basic validation\n if (username.trim() === '' || password.trim() === '') {\n alert('Please fill in all fields');\n return;\n }\n \n // Simulate login process\n console.log('Logging in with:', { username, password, rememberMe });\n \n // Here you would typically make an API call to authenticate the user\n // For demonstration purposes, we'll just show a success message\n alert('Login successful!');\n \n // Reset form\n this.reset();\n});\n\n// QR Code Login Simulation\nconst qrPlaceholder = document.querySelector('.qr-code-placeholder');\nqrPlaceholder.addEventListener('click', function() {\n alert('QR Code login functionality would be implemented here');\n // In a real implementation, this would generate and display a QR code\n // that could be scanned by a mobile device for authentication\n});\n\n// Register link\ndocument.querySelector('.register-link').addEventListener('click', function(e) {\n e.preventDefault();\n alert('Registration functionality would be implemented here');\n // This would typically redirect to a registration page\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 255, + "completion_tokens": 1624, + "total_tokens": 1879, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 255 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..24b6320 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# loginscape.scroll.pub +Website generated by DeepSeek from prompt: 创建一个登录页面,页面要包含普通的登录方式,二维码扫描登录方式,注册,记住密码等功能 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6219204 --- /dev/null +++ b/script.js @@ -0,0 +1,38 @@ +document.getElementById('loginForm').addEventListener('submit', function(e) { + e.preventDefault(); + + const username = document.getElementById('username').value; + const password = document.getElementById('password').value; + const rememberMe = document.getElementById('rememberMe').checked; + + // Basic validation + if (username.trim() === '' || password.trim() === '') { + alert('Please fill in all fields'); + return; + } + + // Simulate login process + console.log('Logging in with:', { username, password, rememberMe }); + + // Here you would typically make an API call to authenticate the user + // For demonstration purposes, we'll just show a success message + alert('Login successful!'); + + // Reset form + this.reset(); +}); + +// QR Code Login Simulation +const qrPlaceholder = document.querySelector('.qr-code-placeholder'); +qrPlaceholder.addEventListener('click', function() { + alert('QR Code login functionality would be implemented here'); + // In a real implementation, this would generate and display a QR code + // that could be scanned by a mobile device for authentication +}); + +// Register link +document.querySelector('.register-link').addEventListener('click', function(e) { + e.preventDefault(); + alert('Registration functionality would be implemented here'); + // This would typically redirect to a registration page +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..54bc0ca --- /dev/null +++ b/style.css @@ -0,0 +1,181 @@ +:root { + --primary-color: #2563eb; + --secondary-color: #1e40af; + --background-color: #f8fafc; + --text-color: #1e293b; + --border-color: #e2e8f0; + --shadow-color: rgba(0, 0, 0, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + text-align: center; + padding: 2rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.login-section { + max-width: 400px; + margin: 2rem auto; + padding: 2rem; + background: white; + border-radius: 12px; + box-shadow: 0 4px 6px var(--shadow-color); +} + +.login-container { + margin-bottom: 1.5rem; +} + +h2 { + font-size: 1.8rem; + margin-bottom: 1.5rem; + text-align: center; +} + +.input-group { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +input { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 1rem; +} + +.options { + display: flex; + justify-content: space-between; + align-items: center; + margin: 1rem 0; +} + +.forgot-password { + color: var(--primary-color); + text-decoration: none; +} + +.login-btn { + width: 100%; + padding: 0.75rem; + background-color: var(--primary-color); + color: white; + border: none; + border-radius: 8px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.login-btn:hover { + background-color: var(--secondary-color); +} + +.divider { + text-align: center; + margin: 1.5rem 0; + position: relative; +} + +.divider::before, +.divider::after { + content: ''; + position: absolute; + top: 50%; + width: 45%; + height: 1px; + background-color: var(--border-color); +} + +.divider::before { + left: 0; +} + +.divider::after { + right: 0; +} + +.qr-login { + text-align: center; +} + +.qr-code-placeholder { + width: 150px; + height: 150px; + margin: 1rem auto; + background-color: var(--border-color); + border-radius: 8px; +} + +.register-prompt { + text-align: center; + margin-top: 1rem; +} + +.register-link { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; +} + +footer { + margin-top: auto; + padding: 1rem; + background-color: white; + text-align: center; +} + +footer nav { + display: flex; + justify-content: center; + gap: 1rem; +} + +footer a { + color: var(--text-color); + text-decoration: none; +} + +@media (max-width: 480px) { + .login-section { + margin: 1rem; + padding: 1.5rem; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.5rem; + } +} \ No newline at end of file