From 73980a67756ebcb585a47d022f77955b5262b564 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 11 Sep 2025 14:27:27 +0000 Subject: [PATCH 1/2] Initial plan From e3c8d4f6c4c37e109f1cc5d1ccbfc91ec5c02599 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 11 Sep 2025 14:33:56 +0000 Subject: [PATCH 2/2] Create basic frontend template and DOCS folder Co-authored-by: longsizhuo <114939201+longsizhuo@users.noreply.github.com> --- css/style.css | 310 ++++++++++++++++++++++++++++++++++++++++++++++++ docs/README.md | 54 +++++++++ docs/index.html | 207 ++++++++++++++++++++++++++++++++ index.html | 81 +++++++++++++ js/script.js | 122 +++++++++++++++++++ 5 files changed, 774 insertions(+) create mode 100644 css/style.css create mode 100644 docs/README.md create mode 100644 docs/index.html create mode 100644 index.html create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..a0fb8b5b --- /dev/null +++ b/css/style.css @@ -0,0 +1,310 @@ +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f8f9fa; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header and Navigation */ +.navbar { + background-color: #2c3e50; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; +} + +.nav-logo { + color: #ecf0f1; + font-size: 1.5rem; + font-weight: bold; +} + +.nav-menu { + display: flex; + list-style: none; + margin: 0; +} + +.nav-item { + margin-left: 2rem; +} + +.nav-link { + color: #ecf0f1; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav-link:hover { + color: #3498db; +} + +/* Hamburger menu */ +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background-color: #ecf0f1; + margin: 3px 0; + transition: 0.3s; +} + +/* Hero section */ +.hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + text-align: center; + padding: 150px 0 100px; + margin-top: 70px; +} + +.hero-content h1 { + font-size: 3rem; + margin-bottom: 1rem; + animation: fadeInUp 1s ease; +} + +.hero-content p { + font-size: 1.2rem; + margin-bottom: 2rem; + animation: fadeInUp 1s ease 0.2s both; +} + +.cta-button { + background-color: #e74c3c; + color: white; + padding: 15px 30px; + border: none; + border-radius: 5px; + font-size: 1.1rem; + cursor: pointer; + transition: all 0.3s ease; + animation: fadeInUp 1s ease 0.4s both; +} + +.cta-button:hover { + background-color: #c0392b; + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0,0,0,0.2); +} + +/* About section */ +.about { + padding: 80px 0; + background-color: white; +} + +.about h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 2rem; + color: #2c3e50; +} + +.about p { + text-align: center; + font-size: 1.2rem; + margin-bottom: 3rem; + color: #666; +} + +.features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.feature { + text-align: center; + padding: 2rem; + background-color: #f8f9fa; + border-radius: 10px; + transition: transform 0.3s ease; +} + +.feature:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0,0,0,0.1); +} + +.feature h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #2c3e50; +} + +/* Contact section */ +.contact { + padding: 80px 0; + background-color: #f8f9fa; +} + +.contact h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 1rem; + color: #2c3e50; +} + +.contact p { + text-align: center; + font-size: 1.2rem; + margin-bottom: 3rem; + color: #666; +} + +.contact-form { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.contact-form input, +.contact-form textarea { + padding: 15px; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; + transition: border-color 0.3s ease; +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: #3498db; +} + +.contact-form textarea { + min-height: 120px; + resize: vertical; +} + +.contact-form button { + background-color: #3498db; + color: white; + padding: 15px; + border: none; + border-radius: 5px; + font-size: 1.1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.contact-form button:hover { + background-color: #2980b9; +} + +/* Footer */ +footer { + background-color: #2c3e50; + color: #ecf0f1; + text-align: center; + padding: 2rem 0; +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive design */ +@media screen and (max-width: 768px) { + .nav-menu { + position: fixed; + left: -100%; + top: 70px; + flex-direction: column; + background-color: #2c3e50; + width: 100%; + text-align: center; + transition: 0.3s; + box-shadow: 0 10px 27px rgba(0,0,0,0.05); + padding: 2rem 0; + } + + .nav-menu.active { + left: 0; + } + + .nav-item { + margin: 1rem 0; + } + + .hamburger { + display: flex; + } + + .hamburger.active .bar:nth-child(2) { + opacity: 0; + } + + .hamburger.active .bar:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + .hamburger.active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } + + .hero-content h1 { + font-size: 2rem; + } + + .features { + grid-template-columns: 1fr; + } +} + +@media screen and (max-width: 480px) { + .hero { + padding: 120px 0 80px; + } + + .hero-content h1 { + font-size: 1.8rem; + } + + .about, .contact { + padding: 60px 0; + } +} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..08f67cc9 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,54 @@ +# InvolutionHell Documentation + +Welcome to the official documentation for InvolutionHell! + +## Table of Contents + +1. [Getting Started](./getting-started.md) +2. [Installation Guide](./installation.md) +3. [Configuration](./configuration.md) +4. [API Reference](./api-reference.md) +5. [Examples](./examples.md) +6. [Troubleshooting](./troubleshooting.md) + +## Overview + +InvolutionHell is a cutting-edge platform that explores the depths of technological innovation. This documentation provides comprehensive guides and references to help you get the most out of our platform. + +## Quick Start + +1. **Clone the repository** + ```bash + git clone https://github.com/InvolutionHell/involutionhell.github.io.git + ``` + +2. **Navigate to the project** + ```bash + cd involutionhell.github.io + ``` + +3. **Open in your browser** + Simply open `index.html` in your preferred web browser. + +## Features + +- **Responsive Design**: Works perfectly on desktop and mobile devices +- **Modern UI**: Clean and intuitive user interface +- **Fast Loading**: Optimized for performance +- **Easy Customization**: Simple to modify and extend + +## Contributing + +We welcome contributions! Please read our contributing guidelines before submitting pull requests. + +## Support + +If you need help or have questions: + +1. Check our [troubleshooting guide](./troubleshooting.md) +2. Visit our main website +3. Contact us through the contact form + +## License + +This project is licensed under the MIT License. See the LICENSE file for details. \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..677eac5a --- /dev/null +++ b/docs/index.html @@ -0,0 +1,207 @@ + + + + + + Documentation - InvolutionHell + + + + +
+ +
+ +
+ ← Back to Home + +
+

Documentation

+ +
+ +
+

InvolutionHell Documentation

+ +

Welcome to the InvolutionHell documentation. This guide will help you get started with our platform and explore its features.

+ +

Getting Started

+

InvolutionHell is a cutting-edge platform designed for innovative developers and creators. To begin your journey:

+
    +
  1. Clone the repository
    2. +
  2. Install dependencies
    3. +
  3. Configure your environment
    4. +
  4. Start building!
    5. +
+ +

Installation

+

To install InvolutionHell, you can use the following command:

+ 
git clone https://github.com/InvolutionHell/involutionhell.github.io.git
+cd involutionhell.github.io
+npm install
+ +

Configuration

+

Configuration is simple and straightforward. Create a config.json file in your project root:

+ 
{
+  "name": "Your Project",
+  "version": "1.0.0",
+  "features": {
+    "analytics": true,
+    "optimization": true
+  }
+}
+ +

API Reference

+

Our API provides powerful endpoints for integration:

+ + +

Examples

+

Here are some basic examples to get you started:

+ 
// Initialize the platform
+const involution = new InvolutionHell({
+  mode: 'development',
+  features: ['analytics', 'optimization']
+});
+
+// Start processing
+involution.start();
+ +

Troubleshooting

+

Common issues and solutions:

+ + +

For more help, please visit our contact page or check our GitHub repository.

+
+
+ + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..181501d7 --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + InvolutionHell + + + +
+ +
+ +
+
+
+

Welcome to InvolutionHell

+

A place where innovation meets complexity

+ +
+
+ +
+
+

About Us

+

InvolutionHell is a cutting-edge platform that explores the depths of technological innovation.

+
+
+

Innovation

+

Pushing the boundaries of what's possible

+
+
+

Complexity

+

Embracing intricate solutions for complex problems

+
+
+

Excellence

+

Delivering quality in every project

+
+
+
+
+ +
+
+

Get in Touch

+

Ready to dive into the involution? Contact us today.

+
+ + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 00000000..99943a0b --- /dev/null +++ b/js/script.js @@ -0,0 +1,122 @@ +// Mobile navigation toggle +document.addEventListener('DOMContentLoaded', function() { + const hamburger = document.querySelector('.hamburger'); + const navMenu = document.querySelector('.nav-menu'); + + hamburger.addEventListener('click', function() { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); + + // Close mobile menu when clicking on a link + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', function() { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + }); + }); + + // Smooth scrolling for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + // Form submission handler + const contactForm = document.querySelector('.contact-form'); + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Get form data + const formData = new FormData(this); + const name = this.querySelector('input[type="text"]').value; + const email = this.querySelector('input[type="email"]').value; + const message = this.querySelector('textarea').value; + + // Simple validation + if (!name || !email || !message) { + alert('Please fill in all fields'); + return; + } + + // Simulate form submission + alert('Thank you for your message! We will get back to you soon.'); + this.reset(); + }); + } + + // Add scroll effect to navbar + window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.style.backgroundColor = '#1a252f'; + } else { + navbar.style.backgroundColor = '#2c3e50'; + } + }); + + // Animate elements on scroll + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, observerOptions); + + // Observe feature cards + document.querySelectorAll('.feature').forEach(feature => { + feature.style.opacity = '0'; + feature.style.transform = 'translateY(20px)'; + feature.style.transition = 'all 0.6s ease'; + observer.observe(feature); + }); +}); + +// Utility functions +function scrollToTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); +} + +// Add a simple typing effect to the hero title +function typeWriter(element, text, speed = 100) { + let i = 0; + element.innerHTML = ''; + + function type() { + if (i < text.length) { + element.innerHTML += text.charAt(i); + i++; + setTimeout(type, speed); + } + } + + type(); +} + +// Initialize typing effect on page load +window.addEventListener('load', function() { + const heroTitle = document.querySelector('.hero-content h1'); + if (heroTitle) { + const originalText = heroTitle.textContent; + typeWriter(heroTitle, originalText, 80); + } +}); \ No newline at end of file