765 lines
25 KiB
HTML
765 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Goa GEL Platform - Demo Presentation</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
background: #0f172a;
|
||
|
|
color: #e2e8f0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide {
|
||
|
|
display: none;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 60px 80px;
|
||
|
|
animation: fadeIn 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide.active {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(20px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: #6366f1;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
border-bottom: 3px solid #6366f1;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: #a855f7;
|
||
|
|
margin: 20px 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p, li {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
line-height: 1.8;
|
||
|
|
color: #cbd5e1;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
list-style: none;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
padding: 10px 0;
|
||
|
|
padding-left: 30px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
li::before {
|
||
|
|
content: "▸";
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
color: #6366f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-slide {
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-slide h1 {
|
||
|
|
font-size: 4.5rem;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-slide .subtitle {
|
||
|
|
font-size: 2rem;
|
||
|
|
color: #94a3b8;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-slide .tagline {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: #6366f1;
|
||
|
|
border: 2px solid #6366f1;
|
||
|
|
padding: 15px 40px;
|
||
|
|
border-radius: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 40px;
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-3 {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
background: linear-gradient(135deg, #1e293b, #334155);
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card h3 {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.architecture-diagram {
|
||
|
|
background: #1e293b;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 40px;
|
||
|
|
margin: 30px 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 20px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-box {
|
||
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||
|
|
padding: 20px 40px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
min-width: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-box.frontend {
|
||
|
|
background: linear-gradient(135deg, #06b6d4, #0891b2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-box.backend {
|
||
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-box.database {
|
||
|
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-box.blockchain {
|
||
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||
|
|
}
|
||
|
|
|
||
|
|
.arch-arrow {
|
||
|
|
font-size: 2rem;
|
||
|
|
color: #6366f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-stack {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 15px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-badge {
|
||
|
|
background: #334155;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 1rem;
|
||
|
|
border: 1px solid #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-icon {
|
||
|
|
font-size: 3rem;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 30px;
|
||
|
|
right: 40px;
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn {
|
||
|
|
background: #6366f1;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 15px 25px;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 1rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn:hover {
|
||
|
|
background: #4f46e5;
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-counter {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 30px;
|
||
|
|
left: 40px;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #64748b;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 40px;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #64748b;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight {
|
||
|
|
color: #6366f1;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow-diagram {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 15px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin: 30px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow-step {
|
||
|
|
background: linear-gradient(135deg, #1e293b, #334155);
|
||
|
|
padding: 20px 30px;
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 2px solid #6366f1;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow-arrow {
|
||
|
|
color: #6366f1;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
padding: 15px 20px;
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
background: #334155;
|
||
|
|
color: #6366f1;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-badge {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 5px 15px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-complete {
|
||
|
|
background: #10b981;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.two-col {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 60px;
|
||
|
|
align-items: start;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="logo">Government of Goa</div>
|
||
|
|
|
||
|
|
<!-- Slide 1: Title -->
|
||
|
|
<div class="slide active" id="slide1">
|
||
|
|
<div class="title-slide" style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||
|
|
<h1>Goa GEL Platform</h1>
|
||
|
|
<p class="subtitle">Blockchain-Powered e-Licensing System</p>
|
||
|
|
<p class="tagline">Transparent • Secure • Efficient</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 2: Problem Statement -->
|
||
|
|
<div class="slide" id="slide2">
|
||
|
|
<h2>The Challenge</h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">📋</div>
|
||
|
|
<h3>Manual Processes</h3>
|
||
|
|
<p>Paper-based applications causing delays and inefficiencies</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🔍</div>
|
||
|
|
<h3>Lack of Transparency</h3>
|
||
|
|
<p>Citizens unable to track application status in real-time</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🏢</div>
|
||
|
|
<h3>Siloed Departments</h3>
|
||
|
|
<p>No unified system for multi-department approvals</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">📄</div>
|
||
|
|
<h3>Document Tampering</h3>
|
||
|
|
<p>No mechanism to verify authenticity of issued licenses</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 3: Solution Overview -->
|
||
|
|
<div class="slide" id="slide3">
|
||
|
|
<h2>Our Solution</h2>
|
||
|
|
<p style="font-size: 1.6rem; margin-bottom: 30px;">A unified blockchain-powered platform for government e-licensing</p>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🌐</div>
|
||
|
|
<h3>Digital Portal</h3>
|
||
|
|
<p>Single window for all license applications with role-based access</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">⛓️</div>
|
||
|
|
<h3>Blockchain Integration</h3>
|
||
|
|
<p>Immutable records for approvals, documents, and issued licenses</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🔄</div>
|
||
|
|
<h3>Automated Workflows</h3>
|
||
|
|
<p>Configurable multi-stage approval processes</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🔐</div>
|
||
|
|
<h3>NFT Licenses</h3>
|
||
|
|
<p>Tamper-proof digital certificates as blockchain tokens</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 4: System Architecture -->
|
||
|
|
<div class="slide" id="slide4">
|
||
|
|
<h2>System Architecture</h2>
|
||
|
|
<div class="architecture-diagram">
|
||
|
|
<div class="arch-row">
|
||
|
|
<div class="arch-box frontend">Angular Frontend</div>
|
||
|
|
</div>
|
||
|
|
<div class="arch-arrow">↓ ↑</div>
|
||
|
|
<div class="arch-row">
|
||
|
|
<div class="arch-box backend">NestJS API Server</div>
|
||
|
|
</div>
|
||
|
|
<div class="arch-arrow">↓ ↑</div>
|
||
|
|
<div class="arch-row">
|
||
|
|
<div class="arch-box database">PostgreSQL</div>
|
||
|
|
<div class="arch-box database">Redis</div>
|
||
|
|
<div class="arch-box database">MinIO</div>
|
||
|
|
<div class="arch-box blockchain">Hyperledger Besu</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid" style="grid-template-columns: repeat(4, 1fr); gap: 20px;">
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<p><strong>PostgreSQL</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Primary Database</p>
|
||
|
|
</div>
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<p><strong>Redis</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Caching & Sessions</p>
|
||
|
|
</div>
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<p><strong>MinIO</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Document Storage</p>
|
||
|
|
</div>
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<p><strong>Besu</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Blockchain Network</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 5: Technology Stack -->
|
||
|
|
<div class="slide" id="slide5">
|
||
|
|
<h2>Technology Stack</h2>
|
||
|
|
<div class="two-col">
|
||
|
|
<div>
|
||
|
|
<h3>Frontend</h3>
|
||
|
|
<div class="tech-stack">
|
||
|
|
<span class="tech-badge">Angular 21</span>
|
||
|
|
<span class="tech-badge">Angular Material</span>
|
||
|
|
<span class="tech-badge">TailwindCSS</span>
|
||
|
|
<span class="tech-badge">RxJS</span>
|
||
|
|
<span class="tech-badge">Playwright</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Backend</h3>
|
||
|
|
<div class="tech-stack">
|
||
|
|
<span class="tech-badge">NestJS</span>
|
||
|
|
<span class="tech-badge">TypeScript</span>
|
||
|
|
<span class="tech-badge">Knex ORM</span>
|
||
|
|
<span class="tech-badge">JWT Auth</span>
|
||
|
|
<span class="tech-badge">Swagger</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3>Blockchain</h3>
|
||
|
|
<div class="tech-stack">
|
||
|
|
<span class="tech-badge">Hyperledger Besu</span>
|
||
|
|
<span class="tech-badge">Solidity</span>
|
||
|
|
<span class="tech-badge">Hardhat</span>
|
||
|
|
<span class="tech-badge">ethers.js</span>
|
||
|
|
<span class="tech-badge">Blockscout</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Infrastructure</h3>
|
||
|
|
<div class="tech-stack">
|
||
|
|
<span class="tech-badge">Docker</span>
|
||
|
|
<span class="tech-badge">PostgreSQL</span>
|
||
|
|
<span class="tech-badge">Redis</span>
|
||
|
|
<span class="tech-badge">MinIO</span>
|
||
|
|
<span class="tech-badge">Nginx</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 6: Workflow Process -->
|
||
|
|
<div class="slide" id="slide6">
|
||
|
|
<h2>License Application Workflow</h2>
|
||
|
|
<div class="flow-diagram">
|
||
|
|
<div class="flow-step">
|
||
|
|
<div class="feature-icon">👤</div>
|
||
|
|
<p><strong>Citizen</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Submits Application</p>
|
||
|
|
</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">
|
||
|
|
<div class="feature-icon">📝</div>
|
||
|
|
<p><strong>Document Upload</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Hash stored on chain</p>
|
||
|
|
</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">
|
||
|
|
<div class="feature-icon">🏛️</div>
|
||
|
|
<p><strong>Dept. Review</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Multi-stage approval</p>
|
||
|
|
</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">
|
||
|
|
<div class="feature-icon">✅</div>
|
||
|
|
<p><strong>Approval</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Recorded on blockchain</p>
|
||
|
|
</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">
|
||
|
|
<div class="feature-icon">🎫</div>
|
||
|
|
<p><strong>NFT License</strong></p>
|
||
|
|
<p style="font-size: 1rem;">Issued as token</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card" style="margin-top: 40px;">
|
||
|
|
<h3>Blockchain Records at Each Step</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Document hashes stored for integrity verification</li>
|
||
|
|
<li>Each approval decision recorded immutably</li>
|
||
|
|
<li>Final license minted as NFT with full audit trail</li>
|
||
|
|
<li>Real-time status visible to all stakeholders</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 7: Smart Contracts -->
|
||
|
|
<div class="slide" id="slide7">
|
||
|
|
<h2>Blockchain Smart Contracts</h2>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>Contract</th>
|
||
|
|
<th>Purpose</th>
|
||
|
|
<th>Key Functions</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>LicenseNFT</strong></td>
|
||
|
|
<td>Mint licenses as NFT certificates</td>
|
||
|
|
<td>mintLicense(), verifyLicense(), revokeLicense()</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>DocumentChain</strong></td>
|
||
|
|
<td>Store document hashes</td>
|
||
|
|
<td>registerDocument(), verifyDocument()</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>ApprovalManager</strong></td>
|
||
|
|
<td>Record approval decisions</td>
|
||
|
|
<td>recordApproval(), getApprovalHistory()</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>WorkflowRegistry</strong></td>
|
||
|
|
<td>Manage workflow definitions</td>
|
||
|
|
<td>registerWorkflow(), getWorkflowStages()</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<div class="card" style="margin-top: 30px;">
|
||
|
|
<h3>Network: Hyperledger Besu (IBFT 2.0)</h3>
|
||
|
|
<p>Private permissioned network with ~5 second block times and Proof of Authority consensus</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 8: User Roles -->
|
||
|
|
<div class="slide" id="slide8">
|
||
|
|
<h2>User Roles & Dashboards</h2>
|
||
|
|
<div class="grid grid-3">
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">👨💼</div>
|
||
|
|
<h3>Administrator</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Manage departments</li>
|
||
|
|
<li>Configure workflows</li>
|
||
|
|
<li>View audit logs</li>
|
||
|
|
<li>Platform analytics</li>
|
||
|
|
<li>User management</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🏢</div>
|
||
|
|
<h3>Department</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Review applications</li>
|
||
|
|
<li>Approve/reject requests</li>
|
||
|
|
<li>Request documents</li>
|
||
|
|
<li>View assigned queue</li>
|
||
|
|
<li>Track department KPIs</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">👤</div>
|
||
|
|
<h3>Citizen</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Submit applications</li>
|
||
|
|
<li>Upload documents</li>
|
||
|
|
<li>Track status</li>
|
||
|
|
<li>View timeline</li>
|
||
|
|
<li>Download licenses</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 9: Key Features -->
|
||
|
|
<div class="slide" id="slide9">
|
||
|
|
<h2>Key Features</h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<h3>Visual Workflow Builder</h3>
|
||
|
|
<p>Drag-and-drop interface to create multi-stage, multi-department approval workflows</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>Real-time Blockchain Explorer</h3>
|
||
|
|
<p>Live view of blocks, transactions, and network health integrated in dashboard</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>Document Integrity</h3>
|
||
|
|
<p>SHA-256 hashes stored on blockchain for tamper-proof verification</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>Comprehensive Audit Trail</h3>
|
||
|
|
<p>Every action logged with user, timestamp, and correlation IDs</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>Webhook Notifications</h3>
|
||
|
|
<p>Real-time event notifications to external systems</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<h3>API-First Design</h3>
|
||
|
|
<p>RESTful API with Swagger documentation for integrations</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 10: Security -->
|
||
|
|
<div class="slide" id="slide10">
|
||
|
|
<h2>Security & Compliance</h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">🔐</div>
|
||
|
|
<h3>Authentication</h3>
|
||
|
|
<ul>
|
||
|
|
<li>JWT-based authentication</li>
|
||
|
|
<li>Role-based access control</li>
|
||
|
|
<li>API key auth for departments</li>
|
||
|
|
<li>Session management with Redis</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">⛓️</div>
|
||
|
|
<h3>Blockchain Security</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Private permissioned network</li>
|
||
|
|
<li>IBFT 2.0 consensus</li>
|
||
|
|
<li>Immutable audit trail</li>
|
||
|
|
<li>Cryptographic verification</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">📊</div>
|
||
|
|
<h3>Data Protection</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Encrypted storage</li>
|
||
|
|
<li>Secure file handling</li>
|
||
|
|
<li>Input validation</li>
|
||
|
|
<li>SQL injection prevention</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="feature-icon">📝</div>
|
||
|
|
<h3>Audit & Compliance</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Complete action logging</li>
|
||
|
|
<li>Correlation ID tracking</li>
|
||
|
|
<li>Exportable audit reports</li>
|
||
|
|
<li>Blockchain verification</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 11: Demo Stats -->
|
||
|
|
<div class="slide" id="slide11">
|
||
|
|
<h2>Platform Statistics</h2>
|
||
|
|
<div class="grid" style="grid-template-columns: repeat(3, 1fr);">
|
||
|
|
<div class="card" style="text-align: center;">
|
||
|
|
<p style="font-size: 4rem; color: #6366f1; font-weight: 700;">266</p>
|
||
|
|
<p style="font-size: 1.2rem;">API Tests Passing</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" style="text-align: center;">
|
||
|
|
<p style="font-size: 4rem; color: #10b981; font-weight: 700;">37</p>
|
||
|
|
<p style="font-size: 1.2rem;">E2E Tests</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" style="text-align: center;">
|
||
|
|
<p style="font-size: 4rem; color: #f59e0b; font-weight: 700;">4</p>
|
||
|
|
<p style="font-size: 1.2rem;">Smart Contracts</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" style="text-align: center;">
|
||
|
|
<p style="font-size: 4rem; color: #8b5cf6; font-weight: 700;">441</p>
|
||
|
|
<p style="font-size: 1.2rem;">Source Files</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" style="text-align: center;">
|
||
|
|
<p style="font-size: 4rem; color: #06b6d4; font-weight: 700;">100K+</p>
|
||
|
|
<p style="font-size: 1.2rem;">Lines of Code</p>
|
||
|
|
</div>
|
||
|
|
<div class="card" style="text-align: center;">
|
||
|
|
<p style="font-size: 4rem; color: #ec4899; font-weight: 700;">9</p>
|
||
|
|
<p style="font-size: 1.2rem;">Docker Services</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Slide 12: Thank You -->
|
||
|
|
<div class="slide" id="slide12">
|
||
|
|
<div class="title-slide" style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||
|
|
<h1>Thank You</h1>
|
||
|
|
<p class="subtitle">Goa GEL Blockchain e-Licensing Platform</p>
|
||
|
|
<div style="margin-top: 50px;">
|
||
|
|
<p style="font-size: 1.3rem; color: #64748b;">Demo URLs</p>
|
||
|
|
<p style="font-size: 1.5rem; margin: 10px 0;">Frontend: <span class="highlight">http://localhost:4200</span></p>
|
||
|
|
<p style="font-size: 1.5rem; margin: 10px 0;">API Docs: <span class="highlight">http://localhost:3001/api/docs</span></p>
|
||
|
|
<p style="font-size: 1.5rem; margin: 10px 0;">Blockchain Explorer: <span class="highlight">http://localhost:4000</span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<div class="navigation">
|
||
|
|
<button class="nav-btn" onclick="prevSlide()">← Previous</button>
|
||
|
|
<button class="nav-btn" onclick="nextSlide()">Next →</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide-counter">
|
||
|
|
<span id="currentSlide">1</span> / <span id="totalSlides">12</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let currentSlide = 1;
|
||
|
|
const totalSlides = 12;
|
||
|
|
|
||
|
|
document.getElementById('totalSlides').textContent = totalSlides;
|
||
|
|
|
||
|
|
function showSlide(n) {
|
||
|
|
const slides = document.querySelectorAll('.slide');
|
||
|
|
|
||
|
|
if (n > totalSlides) currentSlide = 1;
|
||
|
|
if (n < 1) currentSlide = totalSlides;
|
||
|
|
|
||
|
|
slides.forEach(slide => slide.classList.remove('active'));
|
||
|
|
document.getElementById('slide' + currentSlide).classList.add('active');
|
||
|
|
document.getElementById('currentSlide').textContent = currentSlide;
|
||
|
|
}
|
||
|
|
|
||
|
|
function nextSlide() {
|
||
|
|
currentSlide++;
|
||
|
|
showSlide(currentSlide);
|
||
|
|
}
|
||
|
|
|
||
|
|
function prevSlide() {
|
||
|
|
currentSlide--;
|
||
|
|
showSlide(currentSlide);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Keyboard navigation
|
||
|
|
document.addEventListener('keydown', (e) => {
|
||
|
|
if (e.key === 'ArrowRight' || e.key === ' ') {
|
||
|
|
nextSlide();
|
||
|
|
} else if (e.key === 'ArrowLeft') {
|
||
|
|
prevSlide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Click navigation
|
||
|
|
document.addEventListener('click', (e) => {
|
||
|
|
if (e.target.closest('.navigation') || e.target.closest('.nav-btn')) return;
|
||
|
|
|
||
|
|
const x = e.clientX;
|
||
|
|
const width = window.innerWidth;
|
||
|
|
|
||
|
|
if (x > width * 0.7) {
|
||
|
|
nextSlide();
|
||
|
|
} else if (x < width * 0.3) {
|
||
|
|
prevSlide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|