Changes to loginflow.scroll.pub

root

23 days ago

Initial commit

body.html

Changed around line 1

+   
+     
+       
+       
+     
+ 
+     
+       
+         Welcome Back
+         
+           
+           Email
+         
+         
+           
+           Password
+         
+         
+           
+             
+             Remember me
+           
+           Forgot password?
+         
+         
+         
+           Don't have an account? Register now
+         
+       
+ 
+       
+         Scan to Login
+         
+           
+           
+         
+         Open your mobile app to scan
+       
+     
+   

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://loginflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Modern Login Portal
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01YawbMZqwgVHAB3Lr4AMber",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll create a login page with animated switching between traditional and QR code login methods.\n\n---domain---\nloginflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://loginflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Modern Login Portal\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    \n      \n      \n    \n    \n    \n      \n        Welcome Back\n        \n          \n          Email\n        
\n        \n          \n          Password\n        
\n        \n          \n            \n            Remember me\n          \n          Forgot password?\n        
\n        \n        \n          Don't have an account? Register now\n        
\n      \n\n      \n        Scan to Login\n        \n          
\n          
\n        
\n        Open your mobile app to scan
\n      
\n    
\n  
\n\n\n---style.css---\n:root {\n  --primary-color: #4a90e2;\n  --secondary-color: #f5f6fa;\n  --text-color: #2c3e50;\n  --border-color: #dcdde1;\n  --animation-duration: 0.3s;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: linear-gradient(135deg, #667eea, #764ba2);\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-color);\n}\n\n.login-container {\n  width: 100%;\n  max-width: 400px;\n  padding: 20px;\n}\n\n.login-box {\n  background: white;\n  border-radius: 20px;\n  box-shadow: 0 15px 30px rgba(0,0,0,0.1);\n  overflow: hidden;\n}\n\n.login-switcher {\n  display: flex;\n  border-bottom: 1px solid var(--border-color);\n}\n\n.login-switcher button {\n  flex: 1;\n  padding: 20px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--text-color);\n  position: relative;\n  transition: var(--animation-duration);\n}\n\n.login-switcher button.active {\n  color: var(--primary-color);\n}\n\n.login-switcher button.active::after {\n  content: '';\n  position: absolute;\n  bottom: -1px;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background: var(--primary-color);\n  animation: slideIn var(--animation-duration) ease;\n}\n\n.login-forms {\n  position: relative;\n  height: 400px;\n}\n\n.login-form {\n  padding: 30px;\n  position: absolute;\n  width: 100%;\n  opacity: 0;\n  transform: translateX(50px);\n  transition: all var(--animation-duration);\n  visibility: hidden;\n}\n\n.login-form.active {\n  opacity: 1;\n  transform: translateX(0);\n  visibility: visible;\n}\n\n.input-group {\n  position: relative;\n  margin-bottom: 20px;\n}\n\n.input-group input {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--border-color);\n  border-radius: 8px;\n  font-size: 16px;\n  transition: var(--animation-duration);\n}\n\n.input-group label {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  transition: var(--animation-duration);\n  pointer-events: none;\n}\n\n.input-group input:focus + label,\n.input-group input:valid + label {\n  top: 0;\n  font-size: 12px;\n  background: white;\n  padding: 0 5px;\n}\n\n.options {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 20px 0;\n}\n\n.remember {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.login-button {\n  width: 100%;\n  padding: 15px;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  font-size: 16px;\n  cursor: pointer;\n  transition: var(--animation-duration);\n}\n\n.login-button:hover {\n  background: #357abd;\n}\n\n.qr-container {\n  position: relative;\n  width: 200px;\n  height: 200px;\n  margin: 30px auto;\n}\n\n.qr-code {\n  width: 100%;\n  height: 100%;\n  background: \n    linear-gradient(90deg, black 25%, transparent 25%) 0 0,\n    linear-gradient(90deg, black 25%, transparent 25%) 0 100%,\n    linear-gradient(0deg, black 25%, transparent 25%) 0 0,\n    linear-gradient(0deg, black 25%, transparent 25%) 100% 0;\n  background-repeat: no-repeat;\n  background-size: 50px 2px, 50px 2px, 2px 50px, 2px 50px;\n}\n\n.scan-animation {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  background: var(--primary-color);\n  animation: scan 2s linear infinite;\n}\n\n@keyframes scan {\n  0% { top: 0; }\n  100% { top: 100%; }\n}\n\n@keyframes slideIn {\n  from { transform: scaleX(0); }\n  to { transform: scaleX(1); }\n}\n\n@media (max-width: 480px) {\n  .login-container {\n    padding: 10px;\n  }\n  \n  .login-form {\n    padding: 20px;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const switcherButtons = document.querySelectorAll('.login-switcher button');\n  const loginForms = document.querySelectorAll('.login-form');\n  const credentialsForm = document.getElementById('credentials-login');\n  const rememberCheckbox = document.getElementById('remember');\n  \n  // Login method switcher\n  switcherButtons.forEach(button => {\n    button.addEventListener('click', () => {\n      const loginType = button.dataset.type;\n      \n      // Update active states\n      switcherButtons.forEach(btn => btn.classList.remove('active'));\n      button.classList.add('active');\n      \n      // Switch forms with animation\n      loginForms.forEach(form => {\n        form.classList.remove('active');\n        if (form.id === `${loginType}-login`) {\n          form.classList.add('active');\n        }\n      });\n    });\n  });\n  \n  // Handle form submission\n  credentialsForm.addEventListener('submit', (e) => {\n    e.preventDefault();\n    const email = document.getElementById('email').value;\n    const password = document.getElementById('password').value;\n    \n    // Here you would typically handle the login logic\n    console.log('Login attempt:', { email, password, remember: rememberCheckbox.checked });\n  });\n  \n  // Remember me functionality\n  const savedEmail = localStorage.getItem('rememberedEmail');\n  if (savedEmail) {\n    document.getElementById('email').value = savedEmail;\n    rememberCheckbox.checked = true;\n  }\n  \n  rememberCheckbox.addEventListener('change', () => {\n    const email = document.getElementById('email').value;\n    if (rememberCheckbox.checked) {\n      localStorage.setItem('rememberedEmail', email);\n    } else {\n      localStorage.removeItem('rememberedEmail');\n    }\n  });\n  \n  // Auto-focus email input on page load\n  document.getElementById('email').focus();\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, modern design with smooth animations\n2. Responsive layout that works on all devices\n3. Interactive form with floating labels\n4. Animated QR code scanner effect\n5. Smooth transition between login methods\n6. Remember me functionality using localStorage\n7. Accessibility features\n8. Modern CSS with variables and gradients\n9. Clean semantic HTML structure\n10. Form validation and proper input handling\n\nThe design uses a beautiful gradient background with a clean white login box, smooth animations for all interactions, and a professional look and feel. The QR code login option includes a scanning animation effect, and the switching between login methods is handled with smooth transitions."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 327,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2558
+   }
+ }

readme.scroll

Changed around line 1

+ # loginflow.scroll.pub

+ Website generated by Claude from prompt: 创建一个登录页面，页面要包含普通的登录方式，二维码扫描登录方式。登录方式切换需要有动画演示，注册，记住密码等功能

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const switcherButtons = document.querySelectorAll('.login-switcher button');
+   const loginForms = document.querySelectorAll('.login-form');
+   const credentialsForm = document.getElementById('credentials-login');
+   const rememberCheckbox = document.getElementById('remember');
+ 
+   // Login method switcher
+   switcherButtons.forEach(button => {
+     button.addEventListener('click', () => {
+       const loginType = button.dataset.type;
+ 
+       // Update active states
+       switcherButtons.forEach(btn => btn.classList.remove('active'));
+       button.classList.add('active');
+ 
+       // Switch forms with animation
+       loginForms.forEach(form => {
+         form.classList.remove('active');
+         if (form.id === `${loginType}-login`) {
+           form.classList.add('active');
+         }
+       });
+     });
+   });
+ 
+   // Handle form submission
+   credentialsForm.addEventListener('submit', (e) => {
+     e.preventDefault();
+     const email = document.getElementById('email').value;
+     const password = document.getElementById('password').value;
+ 
+     // Here you would typically handle the login logic
+     console.log('Login attempt:', { email, password, remember: rememberCheckbox.checked });
+   });
+ 
+   // Remember me functionality
+   const savedEmail = localStorage.getItem('rememberedEmail');
+   if (savedEmail) {
+     document.getElementById('email').value = savedEmail;
+     rememberCheckbox.checked = true;
+   }
+ 
+   rememberCheckbox.addEventListener('change', () => {
+     const email = document.getElementById('email').value;
+     if (rememberCheckbox.checked) {
+       localStorage.setItem('rememberedEmail', email);
+     } else {
+       localStorage.removeItem('rememberedEmail');
+     }
+   });
+ 
+   // Auto-focus email input on page load
+   document.getElementById('email').focus();
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4a90e2;
+   --secondary-color: #f5f6fa;
+   --text-color: #2c3e50;
+   --border-color: #dcdde1;
+   --animation-duration: 0.3s;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+   background: linear-gradient(135deg, #667eea, #764ba2);
+   min-height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   color: var(--text-color);
+ }
+ 
+ .login-container {
+   width: 100%;
+   max-width: 400px;
+   padding: 20px;
+ }
+ 
+ .login-box {
+   background: white;
+   border-radius: 20px;
+   box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+   overflow: hidden;
+ }
+ 
+ .login-switcher {
+   display: flex;
+   border-bottom: 1px solid var(--border-color);
+ }
+ 
+ .login-switcher button {
+   flex: 1;
+   padding: 20px;
+   border: none;
+   background: none;
+   cursor: pointer;
+   font-size: 16px;
+   color: var(--text-color);
+   position: relative;
+   transition: var(--animation-duration);
+ }
+ 
+ .login-switcher button.active {
+   color: var(--primary-color);
+ }
+ 
+ .login-switcher button.active::after {
+   content: '';
+   position: absolute;
+   bottom: -1px;
+   left: 0;
+   width: 100%;
+   height: 2px;
+   background: var(--primary-color);
+   animation: slideIn var(--animation-duration) ease;
+ }
+ 
+ .login-forms {
+   position: relative;
+   height: 400px;
+ }
+ 
+ .login-form {
+   padding: 30px;
+   position: absolute;
+   width: 100%;
+   opacity: 0;
+   transform: translateX(50px);
+   transition: all var(--animation-duration);
+   visibility: hidden;
+ }
+ 
+ .login-form.active {
+   opacity: 1;
+   transform: translateX(0);
+   visibility: visible;
+ }
+ 
+ .input-group {
+   position: relative;
+   margin-bottom: 20px;
+ }
+ 
+ .input-group input {
+   width: 100%;
+   padding: 12px;
+   border: 1px solid var(--border-color);
+   border-radius: 8px;
+   font-size: 16px;
+   transition: var(--animation-duration);
+ }
+ 
+ .input-group label {
+   position: absolute;
+   left: 12px;
+   top: 50%;
+   transform: translateY(-50%);
+   color: #999;
+   transition: var(--animation-duration);
+   pointer-events: none;
+ }
+ 
+ .input-group input:focus + label,
+ .input-group input:valid + label {
+   top: 0;
+   font-size: 12px;
+   background: white;
+   padding: 0 5px;
+ }
+ 
+ .options {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin: 20px 0;
+ }
+ 
+ .remember {
+   display: flex;
+   align-items: center;
+   gap: 8px;
+   cursor: pointer;
+ }
+ 
+ .login-button {
+   width: 100%;
+   padding: 15px;
+   background: var(--primary-color);
+   color: white;
+   border: none;
+   border-radius: 8px;
+   font-size: 16px;
+   cursor: pointer;
+   transition: var(--animation-duration);
+ }
+ 
+ .login-button:hover {
+   background: #357abd;
+ }
+ 
+ .qr-container {
+   position: relative;
+   width: 200px;
+   height: 200px;
+   margin: 30px auto;
+ }
+ 
+ .qr-code {
+   width: 100%;
+   height: 100%;
+   background:
+     linear-gradient(90deg, black 25%, transparent 25%) 0 0,
+     linear-gradient(90deg, black 25%, transparent 25%) 0 100%,
+     linear-gradient(0deg, black 25%, transparent 25%) 0 0,
+     linear-gradient(0deg, black 25%, transparent 25%) 100% 0;
+   background-repeat: no-repeat;
+   background-size: 50px 2px, 50px 2px, 2px 50px, 2px 50px;
+ }
+ 
+ .scan-animation {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 4px;
+   background: var(--primary-color);
+   animation: scan 2s linear infinite;
+ }
+ 
+ @keyframes scan {
+   0% { top: 0; }
+   100% { top: 100%; }
+ }
+ 
+ @keyframes slideIn {
+   from { transform: scaleX(0); }
+   to { transform: scaleX(1); }
+ }
+ 
+ @media (max-width: 480px) {
+   .login-container {
+     padding: 10px;
+   }
+ 
+   .login-form {
+     padding: 20px;
+   }
+ }