{"id":93558,"date":"2024-11-27T13:46:41","date_gmt":"2024-11-27T13:46:41","guid":{"rendered":"https:\/\/www.mesh-web.dev\/ekenade\/?page_id=93558"},"modified":"2024-11-27T15:24:00","modified_gmt":"2024-11-27T15:24:00","slug":"signinsignup","status":"publish","type":"page","link":"https:\/\/ekena.de\/sq\/signinsignup\/","title":{"rendered":"SignIn&SignUp"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Sign In & Sign Up<\/title>\r\n <style>\r\n \/* General Styles *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: Arial, sans-serif;\r\n }\r\n\r\n body {\r\n height: 100vh;\r\n }\r\n\r\n \/* Centering the Form Section *\/\r\n .auth-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: calc(100vh - 100px); \/* Adjust for the footer height *\/\r\n margin-top: 50px; \/* Add some spacing from the header *\/\r\n }\r\n\r\n \/* Authentication Section *\/\r\n .auth-section {\r\n display: flex;\r\n flex-wrap: wrap;\r\n width: 90%;\r\n max-width: 800px;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 15px;\r\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);\r\n overflow: hidden;\r\n padding: 20px;\r\n }\r\n\r\n \/* Divider Line *\/\r\n .divider {\r\n width: 2px;\r\n background-color: #ddd;\r\n margin: 0 20px; \/* Space around the line *\/\r\n }\r\n\r\n \/* Authentication Box *\/\r\n .auth-box {\r\n flex: 1;\r\n min-width: 300px;\r\n padding: 30px;\r\n }\r\n\r\n .auth-box h2 {\r\n margin-bottom: 15px;\r\n font-size: 1.5em;\r\n color: #333;\r\n }\r\n\r\n \/* Form Styles *\/\r\n .auth-box form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .auth-box input {\r\n padding: 10px;\r\n border: none;\r\n border-bottom: 2px solid #ddd;\r\n font-size: 0.9em;\r\n transition: border-color 0.3s ease;\r\n }\r\n\r\n .auth-box input:focus {\r\n border-color: #6BCB4E;\r\n }\r\n\r\n .auth-box .btn {\r\n background-color: #6BCB4E;\r\n color: white;\r\n padding: 10px;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n font-size: 1em;\r\n transition: background-color 0.3s ease;\r\n text-align: center;\r\n }\r\n\r\n .auth-box .btn:hover {\r\n background-color: #57a945;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media screen and (max-width: 768px) {\r\n .auth-section {\r\n flex-direction: column;\r\n max-width: 90%;\r\n }\r\n\r\n .divider {\r\n display: none; \/* Hide the divider on small screens *\/\r\n }\r\n\r\n .auth-box {\r\n padding: 15px;\r\n }\r\n }\r\n\r\n @media screen and (max-width: 480px) {\r\n .auth-box h2 {\r\n font-size: 1.3em;\r\n }\r\n\r\n .auth-box .btn {\r\n font-size: 0.9em;\r\n padding: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"auth-wrapper\">\r\n <div class=\"auth-section\">\r\n <!-- Sign In Form -->\r\n <div class=\"auth-box\">\r\n <h2>Sign In<\/h2>\r\n <form id=\"signin-form\" onsubmit=\"handleSignIn(event)\">\r\n <input type=\"email\" id=\"signin-email\" placeholder=\"Enter your email\" required>\r\n <input type=\"password\" id=\"signin-password\" placeholder=\"Enter your password\" required>\r\n <button type=\"submit\" class=\"btn\">Sign In<\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <!-- Create Account Form -->\r\n <div class=\"auth-box\">\r\n <h2>Create Account<\/h2>\r\n <form id=\"signup-form\" onsubmit=\"handleSignUp(event)\">\r\n <input type=\"text\" id=\"signup-username\" placeholder=\"Choose a username\" required>\r\n <input type=\"email\" id=\"signup-email\" placeholder=\"Enter your email\" required>\r\n <input type=\"password\" id=\"signup-password\" placeholder=\"Create a password\" required>\r\n <input type=\"password\" id=\"confirm-password\" placeholder=\"Confirm your password\" required>\r\n <button type=\"submit\" class=\"btn\">Create Account<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const accountPageUrl = \"https:\/\/ekena.de\/mein-account\/\";\r\n\r\n \/\/ Handle Sign In\r\n function handleSignIn(event) {\r\n event.preventDefault(); \/\/ Prevent form submission\r\n\r\n \/\/ Optional: Validate email and password here\r\n const email = document.getElementById(\"signin-email\").value;\r\n const password = document.getElementById(\"signin-password\").value;\r\n\r\n \/\/ Mock successful login (replace with your authentication logic)\r\n if (email && password) {\r\n alert(\"Logged in successfully!\");\r\n window.location.href = accountPageUrl; \/\/ Redirect to account page\r\n } else {\r\n alert(\"Invalid login credentials!\");\r\n }\r\n }\r\n\r\n \/\/ Handle Sign Up\r\n function handleSignUp(event) {\r\n event.preventDefault(); \/\/ Prevent form submission\r\n\r\n \/\/ Validate the form\r\n const username = document.getElementById(\"signup-username\").value;\r\n const email = document.getElementById(\"signup-email\").value;\r\n const password = document.getElementById(\"signup-password\").value;\r\n const confirmPassword = document.getElementById(\"confirm-password\").value;\r\n\r\n if (password !== confirmPassword) {\r\n alert(\"Passwords do not match!\");\r\n return;\r\n }\r\n\r\n \/\/ Mock successful registration (replace with your registration logic)\r\n if (username && email && password) {\r\n alert(\"Account created successfully!\");\r\n window.location.href = accountPageUrl; \/\/ Redirect to account page\r\n } else {\r\n alert(\"Please fill out all fields!\");\r\n }\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sign In & Sign Up Sign In Sign In Create Account Create Account<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"slim_seo":{"title":"SignIn&SignUp - Ekena","description":"Sign In & Sign Up Sign In Sign In Create Account Create Account"},"footnotes":""},"class_list":["post-93558","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/pages\/93558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/comments?post=93558"}],"version-history":[{"count":46,"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/pages\/93558\/revisions"}],"predecessor-version":[{"id":93617,"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/pages\/93558\/revisions\/93617"}],"wp:attachment":[{"href":"https:\/\/ekena.de\/sq\/wp-json\/wp\/v2\/media?parent=93558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}