commit c4ef5a1882982b0bee17ac7d8d251170aa6be3d2
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 08:52:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d005925
--- /dev/null
+++ b/body.html
@@ -0,0 +1,25 @@
+<main class="container">
+ <form id="registrationForm" novalidate>
+ <h1>Business Registration</h1>
+
+ <div class="form-group">
+ <label for="name">Full Name</label>
+ <input type="text" id="name" name="name" required>
+ <span class="error" id="nameError"></span>
+ </div>
+
+ <div class="form-group">
+ <label for="phone">Phone Number</label>
+ <input type="tel" id="phone" name="phone" placeholder="+86 XXX-XXXX-XXXX" required>
+ <span class="error" id="phoneError"></span>
+ </div>
+
+ <div class="form-group">
+ <label for="email">Business Email</label>
+ <input type="email" id="email" name="email" required>
+ <span class="error" id="emailError"></span>
+ </div>
+
+ <button type="submit">Register</button>
+ </form>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..3154b9b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://signup.scroll.pub
+metaTags
+editButton /edit.html
+title Business Registration Form
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..2374e1e
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01CwTAMVUPhRVPtB45wbWhbx",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a professional registration website with the specified validation requirements.\n\n---domain---\nsignup.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://signup.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Business Registration Form\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main class=\"container\">\n <form id=\"registrationForm\" novalidate>\n <h1>Business Registration</h1>\n \n <div class=\"form-group\">\n <label for=\"name\">Full Name</label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <span class=\"error\" id=\"nameError\"></span>\n </div>\n\n <div class=\"form-group\">\n <label for=\"phone\">Phone Number</label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+86 XXX-XXXX-XXXX\" required>\n <span class=\"error\" id=\"phoneError\"></span>\n </div>\n\n <div class=\"form-group\">\n <label for=\"email\">Business Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <span class=\"error\" id=\"emailError\"></span>\n </div>\n\n <button type=\"submit\">Register</button>\n </form>\n</main>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --error-color: #e74c3c;\n --success-color: #2ecc71;\n --bg-color: #f9fafb;\n --text-color: #2c3e50;\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, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n background: var(--bg-color);\n color: var(--text-color);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.container {\n width: 100%;\n max-width: 480px;\n padding: 2rem;\n}\n\nform {\n background: white;\n padding: 2.5rem;\n border-radius: 12px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.1);\n animation: formAppear 0.6s ease-out;\n}\n\n@keyframes formAppear {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\nh1 {\n color: var(--primary-color);\n margin-bottom: 2rem;\n text-align: center;\n font-size: 1.8rem;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--primary-color);\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid #e2e8f0;\n border-radius: 6px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--accent-color);\n box-shadow: 0 0 0 3px rgba(52,152,219,0.1);\n}\n\n.error {\n display: block;\n color: var(--error-color);\n font-size: 0.875rem;\n margin-top: 0.5rem;\n min-height: 1.25rem;\n}\n\nbutton {\n width: 100%;\n padding: 0.875rem;\n background: var(--accent-color);\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.3s ease, transform 0.2s ease;\n}\n\nbutton:hover {\n background: #2980b9;\n transform: translateY(-1px);\n}\n\nbutton:active {\n transform: translateY(1px);\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 1rem;\n }\n \n form {\n padding: 1.5rem;\n }\n \n h1 {\n font-size: 1.5rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const form = document.getElementById('registrationForm');\n const nameInput = document.getElementById('name');\n const phoneInput = document.getElementById('phone');\n const emailInput = document.getElementById('email');\n \n const nameError = document.getElementById('nameError');\n const phoneError = document.getElementById('phoneError');\n const emailError = document.getElementById('emailError');\n \n const personalEmailDomains = [\n 'qq.com',\n '163.com',\n 'gmail.com',\n 'yahoo.com',\n 'hotmail.com',\n 'outlook.com'\n ];\n \n const validatePhone = (phone) => {\n // Chinese phone number format validation\n const phoneRegex = /^(\\+86\\s?)?1[3-9]\\d{9}$/;\n return phoneRegex.test(phone.replace(/[\\s-]/g, ''));\n };\n \n const validateEmail = (email) => {\n const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n if (!emailRegex.test(email)) return false;\n \n const domain = email.split('@')[1].toLowerCase();\n return !personalEmailDomains.includes(domain);\n };\n \n const showError = (element, errorText) => {\n element.textContent = errorText;\n element.parentElement.querySelector('input').classList.add('error');\n };\n \n const clearError = (element) => {\n element.textContent = '';\n element.parentElement.querySelector('input').classList.remove('error');\n };\n \n form.addEventListener('submit', (e) => {\n e.preventDefault();\n let isValid = true;\n \n // Clear previous errors\n [nameError, phoneError, emailError].forEach(clearError);\n \n // Validate name\n if (!nameInput.value.trim()) {\n showError(nameError, 'Please enter your name');\n isValid = false;\n }\n \n // Validate phone\n if (!validatePhone(phoneInput.value)) {\n showError(phoneError, 'Please enter a valid Chinese phone number');\n isValid = false;\n }\n \n // Validate email\n if (!validateEmail(emailInput.value)) {\n showError(emailError, 'Please enter a valid business email address');\n isValid = false;\n }\n \n if (isValid) {\n // Form is valid, you can submit the data here\n alert('Registration successful!');\n form.reset();\n }\n });\n \n // Real-time validation\n [nameInput, phoneInput, emailInput].forEach(input => {\n input.addEventListener('input', () => {\n clearError(document.getElementById(`${input.id}Error`));\n });\n });\n});\n---end---\n\nThis implementation features:\n\n1. Clean, semantic HTML5 structure\n2. Beautiful animations and transitions\n3. Mobile-responsive design\n4. Comprehensive form validation:\n - Name validation\n - Chinese phone number format validation\n - Business email validation (blocks personal email domains)\n5. Real-time error clearing\n6. Accessible form elements with proper labels\n7. Modern CSS with custom properties\n8. Smooth hover and focus states\n9. Error message handling\n10. Clean and professional design\n\nThe form includes proper validation for Chinese phone numbers and ensures only business email addresses are accepted. The UI is clean and professional with subtle animations and feedback for user interactions."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 353,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2130
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..12be38d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# signup1.scroll.pub
+Website generated by Claude from prompt: 创建一个报名网站，有三个选项需要填写：姓名、电话以及公司邮箱，其中电话和公司邮箱都需要做格式的验证，邮箱不允许 qq.com，163.com，gmail.com 等非商业邮箱
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d4a1e46
--- /dev/null
+++ b/script.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const form = document.getElementById('registrationForm');
+ const nameInput = document.getElementById('name');
+ const phoneInput = document.getElementById('phone');
+ const emailInput = document.getElementById('email');
+
+ const nameError = document.getElementById('nameError');
+ const phoneError = document.getElementById('phoneError');
+ const emailError = document.getElementById('emailError');
+
+ const personalEmailDomains = [
+ 'qq.com',
+ '163.com',
+ 'gmail.com',
+ 'yahoo.com',
+ 'hotmail.com',
+ 'outlook.com'
+ ];
+
+ const validatePhone = (phone) => {
+ // Chinese phone number format validation
+ const phoneRegex = /^(\+86\s?)?1[3-9]\d{9}$/;
+ return phoneRegex.test(phone.replace(/[\s-]/g, ''));
+ };
+
+ const validateEmail = (email) => {
+ const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ if (!emailRegex.test(email)) return false;
+
+ const domain = email.split('@')[1].toLowerCase();
+ return !personalEmailDomains.includes(domain);
+ };
+
+ const showError = (element, errorText) => {
+ element.textContent = errorText;
+ element.parentElement.querySelector('input').classList.add('error');
+ };
+
+ const clearError = (element) => {
+ element.textContent = '';
+ element.parentElement.querySelector('input').classList.remove('error');
+ };
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ let isValid = true;
+
+ // Clear previous errors
+ [nameError, phoneError, emailError].forEach(clearError);
+
+ // Validate name
+ if (!nameInput.value.trim()) {
+ showError(nameError, 'Please enter your name');
+ isValid = false;
+ }
+
+ // Validate phone
+ if (!validatePhone(phoneInput.value)) {
+ showError(phoneError, 'Please enter a valid Chinese phone number');
+ isValid = false;
+ }
+
+ // Validate email
+ if (!validateEmail(emailInput.value)) {
+ showError(emailError, 'Please enter a valid business email address');
+ isValid = false;
+ }
+
+ if (isValid) {
+ // Form is valid, you can submit the data here
+ alert('Registration successful!');
+ form.reset();
+ }
+ });
+
+ // Real-time validation
+ [nameInput, phoneInput, emailInput].forEach(input => {
+ input.addEventListener('input', () => {
+ clearError(document.getElementById(`${input.id}Error`));
+ });
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c0330fb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,127 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --error-color: #e74c3c;
+ --success-color: #2ecc71;
+ --bg-color: #f9fafb;
+ --text-color: #2c3e50;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ background: var(--bg-color);
+ color: var(--text-color);
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.container {
+ width: 100%;
+ max-width: 480px;
+ padding: 2rem;
+}
+
+form {
+ background: white;
+ padding: 2.5rem;
+ border-radius: 12px;
+ box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+ animation: formAppear 0.6s ease-out;
+}
+
+@keyframes formAppear {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+h1 {
+ color: var(--primary-color);
+ margin-bottom: 2rem;
+ text-align: center;
+ font-size: 1.8rem;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ color: var(--primary-color);
+ font-weight: 500;
+}
+
+input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 2px solid #e2e8f0;
+ border-radius: 6px;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+}
+
+input:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
+}
+
+.error {
+ display: block;
+ color: var(--error-color);
+ font-size: 0.875rem;
+ margin-top: 0.5rem;
+ min-height: 1.25rem;
+}
+
+button {
+ width: 100%;
+ padding: 0.875rem;
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+ background: #2980b9;
+ transform: translateY(-1px);
+}
+
+button:active {
+ transform: translateY(1px);
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 1rem;
+ }
+
+ form {
+ padding: 1.5rem;
+ }
+
+ h1 {
+ font-size: 1.5rem;
+ }
+}
\ No newline at end of file