diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6760b85 --- /dev/null +++ b/.gitignore @@ -0,0 +1,30 @@ +# Development files +*.log +*.tmp +.DS_Store +Thumbs.db + +# Editor files +.vscode/ +.idea/ +*.swp +*.swo + +# Temporary files +/tmp/ + +# Backup files +*.bak +*.backup + +# Runtime files +*.pid +nohup.out + +# Dependencies (if any are added in future) +node_modules/ +vendor/ + +# Build artifacts (if any are added in future) +dist/ +build/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..aa895d7 --- /dev/null +++ b/README.md @@ -0,0 +1,159 @@ +# 🌟 Sovereign Chain - Pitch Deck Website + +A modern, responsive pitch deck website showcasing Sovereign Chain's revolutionary blockchain logistics platform. + +## 🚀 Features + +- **4 Beautiful Slides**: Welcome, Features, Technology, and Contact +- **Gradient Backgrounds**: Professional gradient designs instead of video backgrounds +- **Smooth Animations**: Fade-in effects and smooth transitions +- **Mobile Responsive**: Optimized for all device sizes +- **Keyboard Navigation**: Use arrow keys, spacebar, Home/End keys +- **Touch Support**: Swipe navigation on mobile devices +- **Auto-play**: Automatic slide progression (8-second intervals) +- **Progress Bar**: Visual progress indicator +- **Slide Indicators**: Clickable dots for quick navigation + +## 📋 Navigation Controls + +### Keyboard Shortcuts +- `→` or `↓` or `Space`: Next slide +- `←` or `↑`: Previous slide +- `Home`: Go to first slide +- `End`: Go to last slide + +### Mouse/Touch +- Click navigation buttons at the bottom +- Click slide indicator dots (top right) +- Swipe left/right on mobile devices + +## 🏗️ Project Structure + +``` +pith-deck/ +├── index.html # Main HTML file +├── css/ +│ └── style.css # All styling and responsive design +├── js/ +│ └── script.js # Interactive functionality +├── assets/ # Future assets (images, icons) +├── pith # Original HTML file (backup) +└── README.md # This file +``` + +## 🎨 Design Features + +### Gradient Backgrounds +- **Slide 1 (Welcome)**: Blue-purple gradient (#667eea → #764ba2) +- **Slide 2 (Features)**: Pink-red gradient (#f093fb → #f5576c) +- **Slide 3 (Technology)**: Blue-cyan gradient (#4facfe → #00f2fe) +- **Slide 4 (Contact)**: Green-turquoise gradient (#43e97b → #38f9d7) + +### Typography +- Modern font stack: Segoe UI, Tahoma, Geneva, Verdana, sans-serif +- Responsive font sizes that scale on mobile +- Text shadows for better readability over gradient backgrounds + +### Interactive Elements +- Hover effects on buttons +- Active states for current slide indicators +- Smooth transitions between slides +- Glass-morphism effects on feature cards + +## 🌐 Browser Compatibility + +- ✅ Chrome (latest) +- ✅ Firefox (latest) +- ✅ Safari (latest) +- ✅ Edge (latest) +- ✅ Mobile browsers (iOS/Android) + +## 🚀 Getting Started + +1. **Clone the repository**: + ```bash + git clone https://github.com/jaquelinejaque/pith-deck.git + cd pith-deck + ``` + +2. **Serve the website**: + ```bash + # Using Python + python -m http.server 8000 + + # Using Node.js (if you have http-server installed) + npx http-server + + # Using PHP + php -S localhost:8000 + ``` + +3. **Open in browser**: + Navigate to `http://localhost:8000` + +## 📱 Mobile Optimization + +The website is fully responsive and optimized for: +- **Tablets**: 768px and below +- **Mobile phones**: 480px and below +- **Touch gestures**: Swipe navigation +- **Viewport scaling**: Proper meta tags for mobile + +## 🔧 Customization + +### Adding More Slides +1. Add a new slide div in `index.html`: + ```html +
+
+

Your Title

+

Your content...

+
+
+ ``` + +2. Add a gradient background in `css/style.css`: + ```css + #slide5 { + background: linear-gradient(135deg, #color1, #color2); + } + ``` + +3. Update `totalSlides` in `js/script.js` and add a navigation button. + +### Changing Colors +Modify the gradient backgrounds in `css/style.css` by changing the hex color values in the `linear-gradient` functions. + +### Customizing Content +Update the content in the `.content` divs within each slide in `index.html`. + +## 📊 Performance + +- **Fast Loading**: No external dependencies or large assets +- **Optimized CSS**: Efficient animations and transitions +- **Minimal JavaScript**: Clean, efficient code +- **Mobile-First**: Responsive design for all devices + +## 🤝 Contributing + +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/AmazingFeature`) +3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) +4. Push to the branch (`git push origin feature/AmazingFeature`) +5. Open a Pull Request + +## 📝 License + +This project is open source and available under the [MIT License](LICENSE). + +## 📞 Contact + +For questions or support regarding this pitch deck website: + +- **Email**: contact@sovereignchain.io +- **Phone**: +1 (555) 123-CHAIN +- **Website**: www.sovereignchain.io + +--- + +*Built with ❤️ for modern web standards and accessibility* \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5e32a08 --- /dev/null +++ b/css/style.css @@ -0,0 +1,220 @@ +body, html { + margin: 0; + padding: 0; + overflow: hidden; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: #000; +} + +.slide { + position: relative; + height: 100vh; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.5s ease-in-out; +} + +.slide:not(.active) { + display: none; +} + +.slide.active { + display: flex; +} + +/* Beautiful gradient backgrounds instead of videos */ +#slide1 { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +#slide2 { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); +} + +#slide3 { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); +} + +#slide4 { + background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); +} + +.content { + position: relative; + color: white; + text-align: center; + z-index: 1; + text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); + max-width: 800px; + padding: 40px; + animation: fadeInUp 1s ease-out; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.content h1 { + font-size: 4rem; + margin-bottom: 20px; + font-weight: 700; + letter-spacing: -0.02em; +} + +.content p { + font-size: 1.5rem; + line-height: 1.6; + margin-bottom: 30px; + opacity: 0.95; +} + +.content .features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin-top: 40px; + text-align: left; +} + +.content .feature { + background: rgba(255, 255, 255, 0.1); + padding: 20px; + border-radius: 10px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.content .feature h3 { + font-size: 1.3rem; + margin-bottom: 10px; + color: #fff; +} + +.content .feature p { + font-size: 1rem; + margin: 0; + opacity: 0.9; +} + +.navigation { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; + z-index: 2; +} + +.navigation button { + background-color: rgba(255, 255, 255, 0.2); + border: 2px solid rgba(255, 255, 255, 0.3); + padding: 12px 24px; + border-radius: 25px; + cursor: pointer; + font-size: 1rem; + color: white; + font-weight: 500; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.navigation button:hover { + background-color: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.5); + transform: translateY(-2px); +} + +.navigation button.active { + background-color: rgba(255, 255, 255, 0.4); + border-color: rgba(255, 255, 255, 0.6); +} + +.slide-indicator { + position: absolute; + top: 30px; + right: 30px; + display: flex; + gap: 10px; + z-index: 2; +} + +.slide-indicator .dot { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.3); + cursor: pointer; + transition: all 0.3s ease; +} + +.slide-indicator .dot.active { + background-color: rgba(255, 255, 255, 0.8); + transform: scale(1.2); +} + +.progress-bar { + position: absolute; + top: 0; + left: 0; + height: 4px; + background: rgba(255, 255, 255, 0.8); + transition: width 0.3s ease; + z-index: 3; +} + +/* Mobile Responsiveness */ +@media (max-width: 768px) { + .content h1 { + font-size: 2.5rem; + } + + .content p { + font-size: 1.2rem; + } + + .content .features { + grid-template-columns: 1fr; + gap: 15px; + } + + .navigation { + bottom: 20px; + flex-wrap: wrap; + max-width: 90%; + justify-content: center; + } + + .navigation button { + padding: 10px 20px; + font-size: 0.9rem; + } + + .content { + padding: 20px; + } +} + +@media (max-width: 480px) { + .content h1 { + font-size: 2rem; + } + + .content p { + font-size: 1rem; + } + + .navigation button { + padding: 8px 16px; + font-size: 0.8rem; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e691f2e --- /dev/null +++ b/index.html @@ -0,0 +1,121 @@ + + + + + + Sovereign Chain - Revolutionary Blockchain Logistics + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Welcome to Sovereign Chain

+

Revolutionizing global logistics with blockchain technology.

+

The future of supply chain management is here, powered by cutting-edge blockchain innovation.

+
+
+ + +
+
+

Why Choose Us?

+

Experience unparalleled transparency, efficiency, and security in your supply chain operations.

+ +
+
+

🔗 Blockchain Security

+

Immutable ledger technology ensures complete data integrity and traceability.

+
+
+

📊 Real-time Tracking

+

Monitor your shipments and inventory with unprecedented visibility.

+
+
+

🚀 Global Scale

+

Seamlessly manage logistics operations across international borders.

+
+
+
+
+ + +
+
+

Advanced Technology Stack

+

Built on enterprise-grade blockchain infrastructure for maximum reliability.

+ +
+
+

⚡ Smart Contracts

+

Automated processes reduce costs and eliminate human error.

+
+
+

🌐 IoT Integration

+

Connect physical assets with digital tracking systems.

+
+
+

🔐 Cryptographic Proof

+

Mathematical certainty in every transaction and movement.

+
+
+

📱 Mobile Access

+

Manage your logistics from anywhere with our mobile platform.

+
+
+
+
+ + +
+
+

Ready to Transform Your Logistics?

+

Join the revolution and discover how Sovereign Chain can optimize your supply chain operations.

+

Contact us today for a personalized demonstration of our platform.

+ +
+
+

📧 Email

+

contact@sovereignchain.io

+
+
+

📞 Phone

+

+1 (555) 123-CHAIN

+
+
+

🌍 Website

+

www.sovereignchain.io

+
+
+
+
+ + +
+ + + + +
+ + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..1fb37d2 --- /dev/null +++ b/js/script.js @@ -0,0 +1,171 @@ +class PitchDeckManager { + constructor() { + this.currentSlide = 1; + this.totalSlides = 4; + this.init(); + } + + init() { + this.createSlideIndicators(); + this.createProgressBar(); + this.bindEvents(); + this.showSlide(1); + this.updateProgress(); + } + + createSlideIndicators() { + const indicatorContainer = document.querySelector('.slide-indicator'); + if (!indicatorContainer) return; + + for (let i = 1; i <= this.totalSlides; i++) { + const dot = document.createElement('div'); + dot.className = 'dot'; + dot.onclick = () => this.showSlide(i); + indicatorContainer.appendChild(dot); + } + } + + createProgressBar() { + const progressBar = document.createElement('div'); + progressBar.className = 'progress-bar'; + document.body.appendChild(progressBar); + } + + bindEvents() { + // Keyboard navigation + document.addEventListener('keydown', (e) => { + switch(e.key) { + case 'ArrowLeft': + case 'ArrowUp': + this.previousSlide(); + break; + case 'ArrowRight': + case 'ArrowDown': + case ' ': // Spacebar + this.nextSlide(); + break; + case 'Home': + this.showSlide(1); + break; + case 'End': + this.showSlide(this.totalSlides); + break; + } + }); + + // Touch/swipe support for mobile + let startX = 0; + let startY = 0; + + document.addEventListener('touchstart', (e) => { + startX = e.touches[0].clientX; + startY = e.touches[0].clientY; + }); + + document.addEventListener('touchend', (e) => { + if (!startX || !startY) return; + + const endX = e.changedTouches[0].clientX; + const endY = e.changedTouches[0].clientY; + + const diffX = startX - endX; + const diffY = startY - endY; + + // Only respond to horizontal swipes + if (Math.abs(diffX) > Math.abs(diffY)) { + if (Math.abs(diffX) > 50) { // Minimum swipe distance + if (diffX > 0) { + this.nextSlide(); + } else { + this.previousSlide(); + } + } + } + + startX = 0; + startY = 0; + }); + + // Auto-play functionality (optional) + this.startAutoPlay(); + } + + showSlide(slideNumber) { + if (slideNumber < 1 || slideNumber > this.totalSlides) return; + + // Update slide visibility + document.querySelectorAll('.slide').forEach((slide, index) => { + slide.classList.remove('active'); + if (index + 1 === slideNumber) { + slide.classList.add('active'); + } + }); + + // Update navigation buttons + document.querySelectorAll('.navigation button').forEach((button, index) => { + button.classList.remove('active'); + if (index + 1 === slideNumber) { + button.classList.add('active'); + } + }); + + // Update slide indicators + document.querySelectorAll('.slide-indicator .dot').forEach((dot, index) => { + dot.classList.remove('active'); + if (index + 1 === slideNumber) { + dot.classList.add('active'); + } + }); + + this.currentSlide = slideNumber; + this.updateProgress(); + this.restartAutoPlay(); + } + + nextSlide() { + const next = this.currentSlide >= this.totalSlides ? 1 : this.currentSlide + 1; + this.showSlide(next); + } + + previousSlide() { + const prev = this.currentSlide <= 1 ? this.totalSlides : this.currentSlide - 1; + this.showSlide(prev); + } + + updateProgress() { + const progressBar = document.querySelector('.progress-bar'); + if (progressBar) { + const progress = (this.currentSlide / this.totalSlides) * 100; + progressBar.style.width = `${progress}%`; + } + } + + startAutoPlay() { + this.stopAutoPlay(); + this.autoPlayInterval = setInterval(() => { + this.nextSlide(); + }, 8000); // Change slide every 8 seconds + } + + stopAutoPlay() { + if (this.autoPlayInterval) { + clearInterval(this.autoPlayInterval); + } + } + + restartAutoPlay() { + this.startAutoPlay(); + } +} + +// Initialize when DOM is ready +document.addEventListener('DOMContentLoaded', () => { + window.pitchDeck = new PitchDeckManager(); +}); + +// Legacy function for backward compatibility +function showSlide(slideNumber) { + if (window.pitchDeck) { + window.pitchDeck.showSlide(slideNumber); + } +} \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..2774486 --- /dev/null +++ b/robots.txt @@ -0,0 +1,5 @@ +User-agent: * +Allow: / + +# Sitemap location (if added in future) +# Sitemap: https://yoursite.com/sitemap.xml \ No newline at end of file