commit e97126281fba7d1e37e8dab88fe584ca44cb05a3
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 03:22:41 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..6ee84e8
--- /dev/null
+++ b/body.html
@@ -0,0 +1,35 @@
+<main class="container">
+ <div class="form-container">
+ <div class="form-box">
+ <div class="form-face front">
+ <h1>Create Account</h1>
+ <form id="signupForm">
+ <div class="input-group">
+ <input type="text" id="username" required>
+ <label for="username">Username</label>
+ <span class="highlight"></span>
+ </div>
+
+ <div class="input-group">
+ <input type="email" id="email" required>
+ <label for="email">Email</label>
+ <span class="highlight"></span>
+ </div>
+
+ <div class="input-group">
+ <input type="password" id="password" required>
+ <label for="password">Password</label>
+ <span class="highlight"></span>
+ </div>
+
+ <button type="submit" class="submit-btn">Sign Up</button>
+ </form>
+ </div>
+ <div class="form-face back">
+ <h2>Welcome!</h2>
+ <p>Thank you for signing up</p>
+ <button class="reset-btn">Start Over</button>
+ </div>
+ </div>
+ </div>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..0bd7dc2
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://signup3d.scroll.pub
+metaTags
+editButton /edit.html
+title 3D Interactive Signup Experience
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..acee0c6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..6ede89f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,46 @@
+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');
+ }
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6774ede
--- /dev/null
+++ b/style.css
@@ -0,0 +1,144 @@
+: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;
+ }
+}