forked from UKSOURCE/cms.hailearning.edu.vn
first commit
This commit is contained in:
r2xrzh9q2z-lab
191
views/index.ejs
Normal file
191
views/index.ejs
Normal file
@@ -0,0 +1,191 @@
|
||||
<!-- Hero Section -->
|
||||
<section class="container">
|
||||
<div class="hero"
|
||||
style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); margin-top: 2rem; overflow: hidden; position: relative;">
|
||||
<div class="position-absolute top-0 end-0 p-3 d-none d-lg-block">
|
||||
<div class="d-flex gap-2">
|
||||
<div class="rounded-circle bg-white bg-opacity-10" style="width: 12px; height: 12px;"></div>
|
||||
<div class="rounded-circle bg-white bg-opacity-10" style="width: 12px; height: 12px;"></div>
|
||||
<div class="rounded-circle bg-white bg-opacity-10" style="width: 12px; height: 12px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="fw-bold mb-4 text-white">API Management</h1>
|
||||
<p class="lead mb-4 text-white-50">Simple dashboard to control your APIs</p>
|
||||
<div class="d-flex gap-3">
|
||||
<% if (locals.user) { %>
|
||||
<a href="/admin/dashboard" class="btn btn-lg"
|
||||
style="background-color: white; color: var(--primary-color); font-weight: 600;">
|
||||
<i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
|
||||
</a>
|
||||
<% } else { %>
|
||||
<a href="/auth/login" class="btn btn-lg"
|
||||
style="background-color: white; color: var(--primary-color); font-weight: 600;">
|
||||
<i class="fas fa-sign-in-alt me-2"></i>Login
|
||||
</a>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 d-none d-lg-block text-center">
|
||||
<div style="position: relative; z-index: 1;">
|
||||
<div class="position-absolute"
|
||||
style="top: -20px; right: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: -1;">
|
||||
</div>
|
||||
<div class="position-absolute"
|
||||
style="bottom: -30px; left: -20px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: -1;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<% if (locals.user) { %>
|
||||
<!-- Features Section -->
|
||||
<section class="container py-5">
|
||||
<div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
|
||||
<div class="card-body p-4 p-lg-5">
|
||||
<div class="text-center mb-5">
|
||||
<span class="badge rounded-pill px-3 py-2 mb-2"
|
||||
style="background-color: rgba(184, 183, 106, 0.1); color: var(--primary-color);">Features</span>
|
||||
<h2 class="fw-bold" style="color: var(--primary-color);">Key Features</h2>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 border-0 shadow-sm" style="border-radius: 15px; transition: transform 0.3s;">
|
||||
<div class="card-body p-4">
|
||||
<div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4"
|
||||
style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-lock fa-lg" style="color: var(--primary-color);"></i>
|
||||
</div>
|
||||
<h4 class="card-title fw-bold" style="color: var(--primary-color);">High Security</h4>
|
||||
<p class="card-text text-muted">Secure user authentication system with password encryption.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 border-0 shadow-sm" style="border-radius: 15px; transition: transform 0.3s;">
|
||||
<div class="card-body p-4">
|
||||
<div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4"
|
||||
style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-chart-line fa-lg" style="color: var(--primary-color);"></i>
|
||||
</div>
|
||||
<h4 class="card-title fw-bold" style="color: var(--primary-color);">Analytics Dashboard</h4>
|
||||
<p class="card-text text-muted">Monitor and analyze data through visual charts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 border-0 shadow-sm" style="border-radius: 15px; transition: transform 0.3s;">
|
||||
<div class="card-body p-4">
|
||||
<div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4"
|
||||
style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-cogs fa-lg" style="color: var(--primary-color);"></i>
|
||||
</div>
|
||||
<h4 class="card-title fw-bold" style="color: var(--primary-color);">API Integration</h4>
|
||||
<p class="card-text text-muted">Provides API endpoints for easy data integration into other
|
||||
applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="container py-5">
|
||||
<div class="card border-0 shadow-sm"
|
||||
style="border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white;">
|
||||
<div class="card-body p-4 p-lg-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h2 class="fw-bold mb-4 text-white">Start Using CMS-GGCamp Today</h2>
|
||||
<p class="lead mb-4 text-white-50">Experience simple and effective API management system</p>
|
||||
<a href="/admin/dashboard" class="btn btn-lg"
|
||||
style="background-color: white; color: var(--primary-color); font-weight: 600; border-radius: 10px; padding: 12px 30px;">
|
||||
<i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<% } else { %>
|
||||
<!-- Info Section for non-logged in users -->
|
||||
<section class="container py-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100" style="border-radius: 20px; overflow: hidden;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
||||
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
||||
<i class="fas fa-shield-alt fa-lg" style="color: var(--primary-color);"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0" style="color: var(--primary-color);">Secure Access</h3>
|
||||
</div>
|
||||
<p class="text-muted mb-4">Our CMS provides secure access to manage your content with advanced
|
||||
authentication and authorization features.</p>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
|
||||
<span class="text-muted">Role-based access control</span>
|
||||
</li>
|
||||
<li class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
|
||||
<span class="text-muted">Encrypted data transmission</span>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
|
||||
<span class="text-muted">Secure session management</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100" style="border-radius: 20px; overflow: hidden;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
|
||||
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
|
||||
<i class="fas fa-code fa-lg" style="color: var(--primary-color);"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0" style="color: var(--primary-color);">API Integration</h3>
|
||||
</div>
|
||||
<p class="text-muted mb-4">Access our comprehensive API documentation and integrate your applications
|
||||
seamlessly.</p>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
|
||||
<span class="text-muted">RESTful API endpoints</span>
|
||||
</li>
|
||||
<li class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
|
||||
<span class="text-muted">JSON data format</span>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<i class="fas fa-check-circle me-2" style="color: var(--primary-color);"></i>
|
||||
<span class="text-muted">Detailed documentation</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-center mt-auto">
|
||||
<a href="/auth/login" class="btn btn-primary px-4 py-2" style="border-radius: 10px;">
|
||||
<i class="fas fa-sign-in-alt me-2"></i>Login to Access
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<% } %>
|
||||
Reference in New Issue
Block a user