body.html
Changed around line 1
+
+
+
+
+
Create Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Welcome!
+
Thank you for signing up
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://signup3d.scroll.pub
+ metaTags
+ editButton /edit.html
+ title 3D Interactive Signup Experience
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # signup3d.scroll.pub
+ Website generated by Claude from prompt: i want to build a high level of sign up form with creativity and it should be look like a 3d moving sign up page
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const formBox = document.querySelector('.form-box');
+ const signupForm = document.getElementById('signupForm');
+ const resetBtn = document.querySelector('.reset-btn');
+
+ // Add floating effect
+ document.addEventListener('mousemove', (e) => {
+ const { clientX, clientY } = e;
+ const xAxis = (window.innerWidth / 2 - clientX) / 25;
+ const yAxis = (window.innerHeight / 2 - clientY) / 25;
+ formBox.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+ });
+
+ // Remove floating effect when mouse leaves
+ document.addEventListener('mouseleave', () => {
+ formBox.style.transform = 'rotateY(0) rotateX(0)';
+ });
+
+ signupForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ // Add success animation
+ formBox.classList.add('flipped');
+
+ // Clear form
+ signupForm.reset();
+ });
+
+ resetBtn.addEventListener('click', () => {
+ formBox.classList.remove('flipped');
+ });
+
+ // Add input animations
+ const inputs = document.querySelectorAll('input');
+ inputs.forEach(input => {
+ input.addEventListener('focus', () => {
+ input.parentElement.classList.add('focused');
+ });
+
+ input.addEventListener('blur', () => {
+ if (input.value === '') {
+ input.parentElement.classList.remove('focused');
+ }
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #6c63ff;
+ --secondary-color: #4CAF50;
+ --background: #f0f2f5;
+ --text-color: #2c3e50;
+ --shadow-color: rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', sans-serif;
+ background: var(--background);
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ perspective: 1000px;
+ }
+
+ .container {
+ width: 100%;
+ padding: 20px;
+ }
+
+ .form-container {
+ max-width: 400px;
+ margin: 0 auto;
+ perspective: 1000px;
+ }
+
+ .form-box {
+ position: relative;
+ width: 100%;
+ height: 500px;
+ transform-style: preserve-3d;
+ transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ }
+
+ .form-box.flipped {
+ transform: rotateY(180deg);
+ }
+
+ .form-face {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ background: white;
+ padding: 30px;
+ border-radius: 20px;
+ box-shadow: 0 15px 35px var(--shadow-color);
+ }
+
+ .back {
+ transform: rotateY(180deg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+
+ h1, h2 {
+ color: var(--text-color);
+ text-align: center;
+ margin-bottom: 30px;
+ }
+
+ .input-group {
+ position: relative;
+ margin-bottom: 30px;
+ }
+
+ input {
+ width: 100%;
+ padding: 10px 0;
+ font-size: 16px;
+ border: none;
+ border-bottom: 2px solid #ddd;
+ outline: none;
+ transition: 0.3s;
+ }
+
+ label {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ color: #999;
+ transition: 0.3s;
+ pointer-events: none;
+ }
+
+ input:focus ~ label,
+ input:valid ~ label {
+ top: -20px;
+ font-size: 12px;
+ color: var(--primary-color);
+ }
+
+ .highlight {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ width: 0;
+ background: var(--primary-color);
+ transition: 0.3s;
+ }
+
+ input:focus ~ .highlight {
+ width: 100%;
+ }
+
+ .submit-btn, .reset-btn {
+ width: 100%;
+ padding: 12px;
+ border: none;
+ border-radius: 25px;
+ background: var(--primary-color);
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+ transition: 0.3s;
+ }
+
+ .submit-btn:hover, .reset-btn:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+ }
+
+ @media (max-width: 480px) {
+ .form-container {
+ width: 90%;
+ }
+
+ .form-face {
+ padding: 20px;
+ }
+ }