test commit-2
This commit is contained in:
633
app/src/main.js
Normal file
633
app/src/main.js
Normal file
@@ -0,0 +1,633 @@
|
||||
import './style.css'
|
||||
|
||||
// Initialize the application
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<div class="app">
|
||||
<!-- Floating Navigation -->
|
||||
<nav class="floating-nav" id="floatingNav">
|
||||
<div class="nav-items">
|
||||
<a href="#intro" class="nav-item active" data-section="intro">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-text">Home</span>
|
||||
</a>
|
||||
<a href="#dashboard" class="nav-item" data-section="dashboard">
|
||||
<span class="nav-icon">🚀</span>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
<a href="#footer" class="nav-item" data-section="footer">
|
||||
<span class="nav-icon">📞</span>
|
||||
<span class="nav-text">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Intro Section -->
|
||||
<section class="intro-section" id="intro">
|
||||
<div class="intro-container">
|
||||
<div class="intro-content">
|
||||
<h1 class="intro-title">Welcome to the Hexr Factory Resource Page</h1>
|
||||
<p class="intro-subtext">Internal tools and services – for employees only</p>
|
||||
|
||||
<div class="loading-container" id="loadingContainer">
|
||||
<div class="loading-bar">
|
||||
<div class="loading-progress" id="loadingProgress"></div>
|
||||
</div>
|
||||
<p class="loading-text">Initializing systems...</p>
|
||||
</div>
|
||||
|
||||
<div class="scroll-indicator" id="scrollIndicator">
|
||||
<div class="scroll-arrow">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>Scroll to explore</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="intro-visual">
|
||||
<div class="hexagon-grid">
|
||||
<div class="hexagon hex-1"></div>
|
||||
<div class="hexagon hex-2"></div>
|
||||
<div class="hexagon hex-3"></div>
|
||||
<div class="hexagon hex-4"></div>
|
||||
<div class="hexagon hex-5"></div>
|
||||
<div class="hexagon hex-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dashboard Section -->
|
||||
<section class="dashboard-section" id="dashboard">
|
||||
<div class="container">
|
||||
<div class="dashboard-header">
|
||||
<h2 class="dashboard-title">Explore Our Ecosystem</h2>
|
||||
<p class="dashboard-subtitle">Access all internal tools and applications from one central hub</p>
|
||||
</div>
|
||||
|
||||
<!-- Applications Group -->
|
||||
<div class="card-group">
|
||||
<h3 class="group-title">
|
||||
<span class="group-icon">📱</span>
|
||||
Applications
|
||||
</h3>
|
||||
<div class="cards-grid">
|
||||
<div class="service-card" data-category="applications">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🎯</div>
|
||||
<h4>Dwinzo App (Main)</h4>
|
||||
<div class="service-status">
|
||||
<span class="status-badge online">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-description">Core application with full stack services</p>
|
||||
<div class="service-endpoints">
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Frontend</span>
|
||||
<a href="http://185.100.212.76:8200/" class="endpoint-btn frontend" target="_blank">
|
||||
<span class="btn-icon">🌐</span>
|
||||
<span>Web App</span>
|
||||
<span class="btn-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Backend Services</span>
|
||||
<div class="endpoint-buttons">
|
||||
<a href="http://185.100.212.76:8000/" class="endpoint-btn backend" target="_blank">
|
||||
<span class="btn-icon">⚙️</span>
|
||||
<span>API</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:5000" class="endpoint-btn socket" target="_blank">
|
||||
<span class="btn-icon">🔌</span>
|
||||
<span>Socket</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:27021" class="endpoint-btn database" target="_blank">
|
||||
<span class="btn-icon">🗄️</span>
|
||||
<span>MongoDB</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="applications">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🧪</div>
|
||||
<h4>Dwinzo-Demo App</h4>
|
||||
<div class="service-status">
|
||||
<span class="status-badge demo">Demo</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-description">Demo version with version-based updates</p>
|
||||
<div class="service-endpoints">
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Frontend</span>
|
||||
<a href="http://185.100.212.76:8300/" class="endpoint-btn frontend" target="_blank">
|
||||
<span class="btn-icon">🌐</span>
|
||||
<span>Demo Web App</span>
|
||||
<span class="btn-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Backend Services</span>
|
||||
<div class="endpoint-buttons">
|
||||
<a href="http://185.100.212.76:4999/" class="endpoint-btn backend" target="_blank">
|
||||
<span class="btn-icon">⚙️</span>
|
||||
<span>API</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:7999/" class="endpoint-btn socket" target="_blank">
|
||||
<span class="btn-icon">🔌</span>
|
||||
<span>Socket</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:27022/" class="endpoint-btn database" target="_blank">
|
||||
<span class="btn-icon">🗄️</span>
|
||||
<span>MongoDB</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="applications">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🛒</div>
|
||||
<h4>Marketplace</h4>
|
||||
<div class="service-status">
|
||||
<span class="status-badge shared">Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-description">Common marketplace for Dwinzo & Demo</p>
|
||||
<div class="service-endpoints">
|
||||
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Backend Services</span>
|
||||
<div class="endpoint-buttons">
|
||||
<a href="http://185.100.212.76:50011/" class="endpoint-btn backend" target="_blank">
|
||||
<span class="btn-icon">⚙️</span>
|
||||
<span>API</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:27020/" class="endpoint-btn database" target="_blank">
|
||||
<span class="btn-icon">🗄️</span>
|
||||
<span>MongoDB</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="applications">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🌐</div>
|
||||
<h4>Dwinzo-IoT</h4>
|
||||
<div class="service-status">
|
||||
<span class="status-badge iot">IoT</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-description">IoT backend services and monitoring</p>
|
||||
<div class="service-endpoints">
|
||||
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Backend Services</span>
|
||||
<div class="endpoint-buttons">
|
||||
<a href="http://185.100.212.76:5010/" class="endpoint-btn backend" target="_blank">
|
||||
<span class="btn-icon">⚙️</span>
|
||||
<span>API</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:23457/" class="endpoint-btn socket" target="_blank">
|
||||
<span class="btn-icon">📡</span>
|
||||
<span>MQTT</span>
|
||||
</a>
|
||||
<a href="http://185.100.212.76:8090/" class="endpoint-btn database" target="_blank">
|
||||
<span class="btn-icon">🗄️</span>
|
||||
<span>InflexDB</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="applications">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">💻</div>
|
||||
<h4>Dwinzo Website</h4>
|
||||
<div class="service-status">
|
||||
<span class="status-badge public">Public</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-description">Public website interface</p>
|
||||
<div class="service-endpoints">
|
||||
<div class="endpoint-group">
|
||||
<span class="endpoint-label">Frontend</span>
|
||||
<a href="http://185.100.212.76:4040/" class="endpoint-btn frontend" target="_blank">
|
||||
<span class="btn-icon">🌐</span>
|
||||
<span>Public Website</span>
|
||||
<span class="btn-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DevOps Tools Group -->
|
||||
<div class="card-group">
|
||||
<h3 class="group-title">
|
||||
<span class="group-icon">⚙️</span>
|
||||
DevOps Tools
|
||||
</h3>
|
||||
<div class="cards-grid">
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🐙</div>
|
||||
<h4>Gitea</h4>
|
||||
</div>
|
||||
<p class="card-description">Git repository management</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:7776/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🏗️</div>
|
||||
<h4>Jenkins</h4>
|
||||
</div>
|
||||
<p class="card-description">CI/CD automation server</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:1234/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🔍</div>
|
||||
<h4>SonarQube</h4>
|
||||
</div>
|
||||
<p class="card-description">Code quality analysis</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:12345/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🗄️</div>
|
||||
<h4>MinIO</h4>
|
||||
</div>
|
||||
<p class="card-description">Object storage service</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:9001/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">⚡</div>
|
||||
<h4>Redis</h4>
|
||||
</div>
|
||||
<p class="card-description">In-memory data structure store</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:6666/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">📡</div>
|
||||
<h4>MQTT Broker</h4>
|
||||
</div>
|
||||
<p class="card-description">Message queuing service</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:23457" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">📊</div>
|
||||
<h4>InfluxDB</h4>
|
||||
</div>
|
||||
<p class="card-description">Time series database</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:8090/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🏗️</div>
|
||||
<h4>Build Arch</h4>
|
||||
</div>
|
||||
<p class="card-description">Build architecture management</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:8088" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">📈</div>
|
||||
<h4>Prometheus</h4>
|
||||
</div>
|
||||
<p class="card-description">Monitoring and alerting</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:6789/targets/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">📊</div>
|
||||
<h4>Grafana</h4>
|
||||
</div>
|
||||
<p class="card-description">Analytics and monitoring</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:5678/a/grafana-metricsdrilldown-app/drilldown?...&nativeHistogramMetric=&layout=grid&filters-rule=&filters-prefix=&filters-suffix=&from=now-1h&to=now&timezone=Asia%2FKolkata&var-otel_resources=&var-filters=&var-otel_and_metric_filters=&var-deployment_environment=undefined&var-labelsWingman=%28none%29&search_txt=&var-metrics-reducer-sort-by=default&var-ds=celq68dj5iltsa&var-other_metric_filters=" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">📋</div>
|
||||
<h4>Jira</h4>
|
||||
</div>
|
||||
<p class="card-description">Project management</p>
|
||||
<div class="card-buttons">
|
||||
<a href="https://hexrfactory.atlassian.net/wiki/spaces" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="devops">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">📚</div>
|
||||
<h4>Confluence</h4>
|
||||
</div>
|
||||
<p class="card-description">Team collaboration</p>
|
||||
<div class="card-buttons">
|
||||
<a href="https://hexrfactory.atlassian.net/wiki/spaces" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- External Sites Group -->
|
||||
<div class="card-group">
|
||||
<h3 class="group-title">
|
||||
<span class="group-icon">🌍</span>
|
||||
External Sites
|
||||
</h3>
|
||||
<div class="cards-grid">
|
||||
<div class="service-card" data-category="external">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🏛️</div>
|
||||
<h4>Taj </h4>
|
||||
</div>
|
||||
<p class="card-description">External news portal</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:3333/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-category="external">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🌐</div>
|
||||
<h4>Global News</h4>
|
||||
</div>
|
||||
<p class="card-description">Global news platform</p>
|
||||
<div class="card-buttons">
|
||||
<a href="http://185.100.212.76:3334/" class="card-btn primary" target="_blank">
|
||||
<span>Visit</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer" id="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<div class="company-logo">
|
||||
<div class="logo-icon">🏭</div>
|
||||
<div class="logo-text">
|
||||
<h3>HEXR FACTORY</h3>
|
||||
<span>IMMERSIVE TECH</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-description">Innovative solutions for the future</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-info">
|
||||
<div class="manager-info">
|
||||
<h4>Managed by</h4>
|
||||
<p class="manager-name">Marikannan Sankarraj</p>
|
||||
</div>
|
||||
|
||||
<div class="company-info">
|
||||
<p class="company-name">HEXR FACTORY IMMERSIVE TECH PRIVATE LIMITED</p>
|
||||
<p class="copyright">© 2025 • All rights reserved • Innovative solutions for the future</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feedback-button">
|
||||
<button class="btn-feedback" id="feedbackBtn">
|
||||
<span>💬</span>
|
||||
<span>Feedback</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
`
|
||||
|
||||
// Loading animation
|
||||
let progress = 0;
|
||||
const loadingProgress = document.getElementById('loadingProgress');
|
||||
const loadingContainer = document.getElementById('loadingContainer');
|
||||
const scrollIndicator = document.getElementById('scrollIndicator');
|
||||
|
||||
const loadingInterval = setInterval(() => {
|
||||
progress += Math.random() * 15;
|
||||
if (progress >= 100) {
|
||||
progress = 100;
|
||||
clearInterval(loadingInterval);
|
||||
|
||||
setTimeout(() => {
|
||||
loadingContainer.style.opacity = '0';
|
||||
loadingContainer.style.transform = 'translateY(-20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
loadingContainer.style.display = 'none';
|
||||
scrollIndicator.style.opacity = '1';
|
||||
scrollIndicator.style.transform = 'translateY(0)';
|
||||
}, 500);
|
||||
}, 800);
|
||||
}
|
||||
|
||||
loadingProgress.style.width = progress + '%';
|
||||
}, 200);
|
||||
|
||||
// Smooth scrolling for navigation
|
||||
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'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Floating navigation active state
|
||||
const sections = document.querySelectorAll('section');
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
|
||||
function updateActiveNav() {
|
||||
let current = '';
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.clientHeight;
|
||||
if (window.scrollY >= sectionTop - 200) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
if (item.getAttribute('data-section') === current) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
|
||||
// Scroll reveal animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all cards and groups
|
||||
document.querySelectorAll('.service-card, .card-group, .dashboard-header').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Feedback button functionality
|
||||
document.getElementById('feedbackBtn').addEventListener('click', () => {
|
||||
alert('Feedback feature coming soon! Please contact Marikannan Sankarraj for any suggestions.');
|
||||
});
|
||||
|
||||
// Card hover effects and animations
|
||||
document.querySelectorAll('.service-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', () => {
|
||||
card.style.transform = 'translateY(-8px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Hexagon animation
|
||||
const hexagons = document.querySelectorAll('.hexagon');
|
||||
hexagons.forEach((hex, index) => {
|
||||
hex.style.animationDelay = `${index * 0.3}s`;
|
||||
});
|
||||
|
||||
// Enhanced button interactions
|
||||
document.querySelectorAll('.endpoint-btn').forEach(btn => {
|
||||
btn.addEventListener('mouseenter', () => {
|
||||
btn.style.transform = 'translateY(-2px) scale(1.05)';
|
||||
});
|
||||
|
||||
btn.addEventListener('mouseleave', () => {
|
||||
btn.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
899
app/src/style.css
Normal file
899
app/src/style.css
Normal file
@@ -0,0 +1,899 @@
|
||||
/* Reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Dark theme colors */
|
||||
--primary-color: #00d4ff;
|
||||
--primary-dark: #0099cc;
|
||||
--secondary-color: #1a1a2e;
|
||||
--accent-color: #ff6b6b;
|
||||
--accent-secondary: #4ecdc4;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #0f0f23;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-tertiary: #1a1a2e;
|
||||
--bg-card: rgba(255, 255, 255, 0.05);
|
||||
--bg-card-hover: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Text colors */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #b8c5d6;
|
||||
--text-muted: #8892b0;
|
||||
--text-accent: #00d4ff;
|
||||
|
||||
/* Glass morphism */
|
||||
--glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--glass-border: rgba(255, 255, 255, 0.2);
|
||||
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
|
||||
/* Shadows and effects */
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
|
||||
/* Service type colors */
|
||||
--color-frontend: #00d4ff;
|
||||
--color-backend: #ff6b6b;
|
||||
--color-socket: #4ecdc4;
|
||||
--color-database: #ffa726;
|
||||
--color-online: #4caf50;
|
||||
--color-demo: #ff9800;
|
||||
--color-shared: #9c27b0;
|
||||
--color-iot: #2196f3;
|
||||
--color-public: #8bc34a;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* Floating Navigation */
|
||||
.floating-nav {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 1000;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 0.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
transition: var(--transition-normal);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
background: var(--glass-bg);
|
||||
color: var(--text-primary);
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Intro Section */
|
||||
.intro-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.intro-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(78, 205, 196, 0.1) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.intro-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.intro-subtext {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 3rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
margin-bottom: 3rem;
|
||||
transition: var(--transition-slow);
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.loading-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--accent-secondary));
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-progress::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-accent);
|
||||
font-size: 0.9rem;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: var(--transition-slow);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scroll-arrow {
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-10px); }
|
||||
60% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
/* Hexagon Grid */
|
||||
.intro-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hexagon-grid {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--glass-border);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
animation: hexFloat 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hex-1 { top: 50px; left: 160px; animation-delay: 0s; }
|
||||
.hex-2 { top: 120px; left: 100px; animation-delay: 1s; }
|
||||
.hex-3 { top: 120px; left: 220px; animation-delay: 2s; }
|
||||
.hex-4 { top: 190px; left: 160px; animation-delay: 3s; }
|
||||
.hex-5 { top: 260px; left: 100px; animation-delay: 4s; }
|
||||
.hex-6 { top: 260px; left: 220px; animation-delay: 5s; }
|
||||
|
||||
@keyframes hexFloat {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
|
||||
50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Dashboard Section */
|
||||
.dashboard-section {
|
||||
min-height: 100vh;
|
||||
padding: 6rem 0;
|
||||
background: var(--bg-secondary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: var(--transition-slow);
|
||||
}
|
||||
|
||||
.dashboard-header.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Card Groups */
|
||||
.card-group {
|
||||
margin-bottom: 4rem;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: var(--transition-slow);
|
||||
}
|
||||
|
||||
.card-group.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.group-icon {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Service Cards */
|
||||
.service-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
transition: var(--transition-normal);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.service-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--accent-secondary));
|
||||
transform: scaleX(0);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.service-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
background: var(--bg-card-hover);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-header > div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--glass-bg);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-badge.online {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: var(--color-online);
|
||||
border: 1px solid var(--color-online);
|
||||
}
|
||||
|
||||
.status-badge.demo {
|
||||
background: rgba(255, 152, 0, 0.2);
|
||||
color: var(--color-demo);
|
||||
border: 1px solid var(--color-demo);
|
||||
}
|
||||
|
||||
.status-badge.shared {
|
||||
background: rgba(156, 39, 176, 0.2);
|
||||
color: var(--color-shared);
|
||||
border: 1px solid var(--color-shared);
|
||||
}
|
||||
|
||||
.status-badge.iot {
|
||||
background: rgba(33, 150, 243, 0.2);
|
||||
color: var(--color-iot);
|
||||
border: 1px solid var(--color-iot);
|
||||
}
|
||||
|
||||
.status-badge.public {
|
||||
background: rgba(139, 195, 74, 0.2);
|
||||
color: var(--color-public);
|
||||
border: 1px solid var(--color-public);
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Service Endpoints */
|
||||
.service-endpoints {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.endpoint-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.endpoint-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.endpoint-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.endpoint-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
transition: var(--transition-fast);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.endpoint-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.endpoint-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.endpoint-btn.frontend {
|
||||
background: linear-gradient(135deg, var(--color-frontend), rgba(0, 212, 255, 0.8));
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
|
||||
font-weight: 600;
|
||||
padding: 0.8rem 1.5rem;
|
||||
}
|
||||
|
||||
.endpoint-btn.frontend:hover {
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.endpoint-btn.backend {
|
||||
background: linear-gradient(135deg, var(--color-backend), rgba(255, 107, 107, 0.8));
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
.endpoint-btn.backend:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
|
||||
}
|
||||
|
||||
.endpoint-btn.socket {
|
||||
background: linear-gradient(135deg, var(--color-socket), rgba(78, 205, 196, 0.8));
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
|
||||
}
|
||||
|
||||
.endpoint-btn.socket:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
|
||||
}
|
||||
|
||||
.endpoint-btn.database {
|
||||
background: linear-gradient(135deg, var(--color-database), rgba(255, 167, 38, 0.8));
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(255, 167, 38, 0.3);
|
||||
}
|
||||
|
||||
.endpoint-btn.database:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 6px 20px rgba(255, 167, 38, 0.4);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.endpoint-btn.frontend:hover .btn-arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Legacy card buttons for DevOps tools */
|
||||
.card-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
transition: var(--transition-fast);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-btn.primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.card-btn.primary:hover {
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-btn.secondary {
|
||||
background: var(--glass-bg);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.card-btn.secondary:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 3rem 0 2rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 3rem;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo-text h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.logo-text span {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.manager-info h4 {
|
||||
color: var(--text-accent);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.manager-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.feedback-button {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.btn-feedback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-xl);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-feedback:hover {
|
||||
background: var(--bg-card-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.intro-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hexagon-grid {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.floating-nav {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
min-width: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.dashboard-section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.feedback-button {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.endpoint-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.endpoint-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.intro-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.intro-subtext {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.service-status {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation delays for staggered entrance */
|
||||
.service-card:nth-child(1) { transition-delay: 0.1s; }
|
||||
.service-card:nth-child(2) { transition-delay: 0.2s; }
|
||||
.service-card:nth-child(3) { transition-delay: 0.3s; }
|
||||
.service-card:nth-child(4) { transition-delay: 0.4s; }
|
||||
.service-card:nth-child(5) { transition-delay: 0.5s; }
|
||||
.service-card:nth-child(6) { transition-delay: 0.6s; }
|
||||
|
||||
/* Scroll reveal animation */
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-in {
|
||||
animation: slideInUp 0.6s ease-out forwards;
|
||||
}
|
||||
Reference in New Issue
Block a user