commit f23f1d2436b055dffa9e6d4928a46d99d84eab9c
Author: root <root@hub.scroll.pub> Date: 2025-01-08 04:50:35 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..e47d022 --- /dev/null +++ b/body.html @@ -0,0 +1,34 @@ +<header class="header"> + <h1>Welcome to <span class="highlight">LoginEffect</span></h1> + <p>Experience a modern login system with stunning effects.</p> +</header> + +<main class="container"> + <div class="login-box"> + <div class="login-header"> + <h2>Login</h2> + <div class="icons"> + <span class="icon user-icon"></span> + <span class="icon lock-icon"></span> + </div> + </div> + <form id="loginForm" class="login-form"> + <div class="input-group"> + <label for="username">Username</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> + <button type="submit" class="submit-btn">Login</button> + </form> + <div class="login-footer"> + <p>Don't have an account? <a href="#">Sign up</a></p> + </div> + </div> +</main> + +<footer class="footer"> + <p>Designed with ❤️ by LoginEffect</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..f8fb0c6 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://logineffect.scroll.pub +metaTags +editButton /edit.html +title Modern Login System with Effects +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..b070574 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "7ab20ab4-7a73-48e8-ac2e-bb6c253cfca5", + "object": "chat.completion", + "created": 1736311807, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nlogineffect.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://logineffect.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Modern Login System with Effects\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"header\">\n <h1>Welcome to <span class=\"highlight\">LoginEffect</span></h1>\n <p>Experience a modern login system with stunning effects.</p>\n</header>\n\n<main class=\"container\">\n <div class=\"login-box\">\n <div class=\"login-header\">\n <h2>Login</h2>\n <div class=\"icons\">\n <span class=\"icon user-icon\"></span>\n <span class=\"icon lock-icon\"></span>\n </div>\n </div>\n <form id=\"loginForm\" class=\"login-form\">\n <div class=\"input-group\">\n <label for=\"username\">Username</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 <button type=\"submit\" class=\"submit-btn\">Login</button>\n </form>\n <div class=\"login-footer\">\n <p>Don't have an account? <a href=\"#\">Sign up</a></p>\n </div>\n </div>\n</main>\n\n<footer class=\"footer\">\n <p>Designed with ❤️ by LoginEffect</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a29bfe;\n --background-color: #f5f6fa;\n --text-color: #2d3436;\n --shadow-color: rgba(108, 92, 231, 0.2);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 20px;\n}\n\n.header {\n text-align: center;\n margin-bottom: 40px;\n}\n\n.highlight {\n color: var(--primary-color);\n}\n\n.container {\n width: 100%;\n max-width: 400px;\n}\n\n.login-box {\n background: white;\n padding: 30px;\n border-radius: 15px;\n box-shadow: 0 10px 30px var(--shadow-color);\n animation: fadeIn 1s ease-in-out;\n}\n\n.login-header {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.icons {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 10px;\n}\n\n.icon {\n width: 24px;\n height: 24px;\n background-size: cover;\n}\n\n.user-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhNSA1IDAgMTAwIDEwIDUgNSAwIDAwMC0xMHptMCA4YTQgNCAwIDExMC04IDQgNCAwIDAxMCA4eiIgZmlsbD0iIzZjNWNlNyIvPjwvc3ZnPg==');\n}\n\n.lock-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDhoLTFWM2EzIDMgMCAwMC0zLTNoLThhMyAzIDAgMDAtMyAzdjVoLTFhMiAyIDAgMDAtMiAydjEwYTIgMiAwIDAwMiAyaDEyYTIgMiAwIDAwMi0yVjEwYTIgMiAwIDAwLTItMnptLTYgOWEyIDIgMCAxMTAtNCAyIDIgMCAwMTAgNHoiIGZpbGw9IiM2YzVjZTciLz48L3N2Zz4=');\n}\n\n.input-group {\n margin-bottom: 20px;\n}\n\n.input-group label {\n display: block;\n margin-bottom: 5px;\n}\n\n.input-group input {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--secondary-color);\n border-radius: 5px;\n font-size: 16px;\n}\n\n.submit-btn {\n width: 100%;\n padding: 10px;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.submit-btn:hover {\n background-color: var(--secondary-color);\n}\n\n.login-footer {\n text-align: center;\n margin-top: 20px;\n}\n\n.login-footer a {\n color: var(--primary-color);\n text-decoration: none;\n}\n\n.footer {\n text-align: center;\n margin-top: 40px;\n color: var(--secondary-color);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 480px) {\n .login-box {\n padding: 20px;\n }\n}\n\n---script.js---\ndocument.getElementById('loginForm').addEventListener('submit', function(event) {\n event.preventDefault();\n const username = document.getElementById('username').value;\n const password = document.getElementById('password').value;\n\n // Basic validation\n if (username && password) {\n alert('Login successful!');\n // Here you can add your login logic\n } else {\n alert('Please fill in all fields.');\n }\n});\n\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 249, + "completion_tokens": 1456, + "total_tokens": 1705, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 249 + }, + "system_fingerprint": "fp_3a5770e1b4" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..e046a99 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,3 @@ +# logineffect.scroll.pub + +website generated by DeepSeek from prompt: um sistema de login super moderno, com efeitos, e icones \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..60b7dc4 --- /dev/null +++ b/script.js @@ -0,0 +1,13 @@ +document.getElementById('loginForm').addEventListener('submit', function(event) { + event.preventDefault(); + const username = document.getElementById('username').value; + const password = document.getElementById('password').value; + + // Basic validation + if (username && password) { + alert('Login successful!'); + // Here you can add your login logic + } else { + alert('Please fill in all fields.'); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..457d08b --- /dev/null +++ b/style.css @@ -0,0 +1,140 @@ +:root { + --primary-color: #6c5ce7; + --secondary-color: #a29bfe; + --background-color: #f5f6fa; + --text-color: #2d3436; + --shadow-color: rgba(108, 92, 231, 0.2); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + padding: 20px; +} + +.header { + text-align: center; + margin-bottom: 40px; +} + +.highlight { + color: var(--primary-color); +} + +.container { + width: 100%; + max-width: 400px; +} + +.login-box { + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 30px var(--shadow-color); + animation: fadeIn 1s ease-in-out; +} + +.login-header { + text-align: center; + margin-bottom: 20px; +} + +.icons { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 10px; +} + +.icon { + width: 24px; + height: 24px; + background-size: cover; +} + +.user-icon { + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhNSA1IDAgMTAwIDEwIDUgNSAwIDAwMC0xMHptMCA4YTQgNCAwIDExMC04IDQgNCAwIDAxMCA4eiIgZmlsbD0iIzZjNWNlNyIvPjwvc3ZnPg=='); +} + +.lock-icon { + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDhoLTFWM2EzIDMgMCAwMC0zLTNoLThhMyAzIDAgMDAtMyAzdjVoLTFhMiAyIDAgMDAtMiAydjEwYTIgMiAwIDAwMiAyaDEyYTIgMiAwIDAwMi0yVjEwYTIgMiAwIDAwLTItMnptLTYgOWEyIDIgMCAxMTAtNCAyIDIgMCAwMTAgNHoiIGZpbGw9IiM2YzVjZTciLz48L3N2Zz4='); +} + +.input-group { + margin-bottom: 20px; +} + +.input-group label { + display: block; + margin-bottom: 5px; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid var(--secondary-color); + border-radius: 5px; + font-size: 16px; +} + +.submit-btn { + width: 100%; + padding: 10px; + background-color: var(--primary-color); + color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.submit-btn:hover { + background-color: var(--secondary-color); +} + +.login-footer { + text-align: center; + margin-top: 20px; +} + +.login-footer a { + color: var(--primary-color); + text-decoration: none; +} + +.footer { + text-align: center; + margin-top: 40px; + color: var(--secondary-color); +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (max-width: 480px) { + .login-box { + padding: 20px; + } +}