Add main application page, key generation and download is working
This commit is contained in:
Julio Cesar
275
templates/index.html
Normal file
275
templates/index.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SecureKey Manager - OpenPGP Key Management</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.6s ease-out',
|
||||
'slide-up': 'slideUp 0.5s ease-out',
|
||||
'pulse-success': 'pulse 1s ease-in-out infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' }
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(30px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Inter', sans-serif;
|
||||
} */
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.drag-zone.drag-over {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: #6366f1;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen gradient-bg">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header -->
|
||||
<header class="text-center mb-8 animate-fade-in">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<i class="fas fa-shield-alt text-3xl text-white"></i>
|
||||
<h1 class="text-4xl font-bold text-white">SecureKey Manager</h1>
|
||||
</div>
|
||||
<p class="text-white/80 max-w-2xl mx-auto text-lg">
|
||||
Generate OpenPGP key pairs and decrypt files securely.
|
||||
All cryptographic operations are performed via secure API endpoints.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Navigation Tabs -->
|
||||
<nav class="flex justify-center mb-8 animate-slide-up">
|
||||
<div class="glass-morphism rounded-full p-1 shadow-lg">
|
||||
<div class="flex gap-1">
|
||||
<button id="tab-generate"
|
||||
class="tab-button px-6 py-3 rounded-full font-medium transition-all duration-300 flex items-center gap-2 text-white active"
|
||||
data-tab="generate" aria-label="Generate Keys Tab">
|
||||
<i class="fas fa-key"></i>
|
||||
Generate Keys
|
||||
</button>
|
||||
<button id="tab-decrypt"
|
||||
class="tab-button px-6 py-3 rounded-full font-medium transition-all duration-300 flex items-center gap-2 text-white/70 hover:text-white"
|
||||
data-tab="decrypt" aria-label="Decrypt Files Tab">
|
||||
<i class="fas fa-file-text"></i>
|
||||
Decrypt Files
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content Container -->
|
||||
<main class="max-w-4xl mx-auto">
|
||||
<!-- Key Generation Tab -->
|
||||
<section id="generate-section" class="tab-content">
|
||||
<div
|
||||
class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-8 border border-white/20 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 animate-fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<i class="fas fa-key text-3xl text-indigo-600 mb-3"></i>
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-2">Generate OpenPGP Key Pair</h2>
|
||||
<p class="text-gray-600">Create a new key pair for secure communication</p>
|
||||
</div>
|
||||
|
||||
<form id="key-generation-form" class="space-y-6">
|
||||
<!-- Full Name -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-user mr-2"></i>Full Name *
|
||||
</label>
|
||||
<input type="text" id="name" name="name" required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
||||
placeholder="Enter your full name" aria-describedby="name-error" autofocus value="juliocesar">
|
||||
<div id="name-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<!-- Email Address -->
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-envelope mr-2"></i>Email Address *
|
||||
</label>
|
||||
<input type="email" id="email" name="email" required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
||||
placeholder="Enter your email address" aria-describedby="email-error" value="juliocesar@example.com">
|
||||
<div id="email-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<!-- Passphrase -->
|
||||
<div>
|
||||
<label for="passphrase" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-lock mr-2"></i>Passphrase *
|
||||
</label>
|
||||
<input type="password" id="passphrase" name="passphrase" required minlength="8"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
||||
placeholder="Enter a strong passphrase (min 8 characters)" aria-describedby="passphrase-error"
|
||||
value="strongpassphrase">
|
||||
<div id="passphrase-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Passphrase -->
|
||||
<div>
|
||||
<label for="confirm-passphrase" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-lock mr-2"></i>Confirm Passphrase *
|
||||
</label>
|
||||
<input type="password" id="confirm-passphrase" name="confirm-passphrase" required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
||||
placeholder="Confirm your passphrase" aria-describedby="confirm-passphrase-error"
|
||||
value="strongpassphrase">
|
||||
<div id="confirm-passphrase-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<!-- Optional Comment -->
|
||||
<div>
|
||||
<label for="comment" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-comment mr-2"></i>Comment (Optional)
|
||||
</label>
|
||||
<textarea id="comment" name="comment" rows="3"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors resize-none"
|
||||
placeholder="Add an optional comment to your key"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Generate Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" id="generate-btn"
|
||||
class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-indigo-700 focus:ring-4 focus:ring-indigo-200 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
aria-describedby="generate-status">
|
||||
<i class="fas fa-key mr-2"></i>Generate Key Pair
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Generation Status -->
|
||||
<div id="generation-status" class="mt-6 text-center hidden">
|
||||
<div id="loading-status" class="flex items-center justify-center gap-3 text-indigo-600">
|
||||
<i class="fas fa-spinner animate-spin"></i>
|
||||
<span>Generating your key pair...</span>
|
||||
</div>
|
||||
<div id="success-status" class="text-green-600 hidden animate-pulse-success">
|
||||
<i class="fas fa-check-circle mr-2"></i>
|
||||
<span>Key pair generated successfully! Public key downloaded.</span>
|
||||
</div>
|
||||
<div id="error-status" class="text-red-600 hidden">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<span id="error-message"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- File Decryption Tab -->
|
||||
<section id="decrypt-section" class="tab-content hidden">
|
||||
<div
|
||||
class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-8 border border-white/20 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 animate-fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<i class="fas fa-file-shield text-3xl text-indigo-600 mb-3"></i>
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-2">Decrypt Files</h2>
|
||||
<p class="text-gray-600">Upload encrypted files to decrypt them securely</p>
|
||||
</div>
|
||||
|
||||
<!-- File Upload Zone -->
|
||||
<div id="drop-zone"
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-400 hover:bg-indigo-50/50 transition-all duration-300"
|
||||
role="button" tabindex="0" aria-label="File upload area">
|
||||
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
|
||||
<h3 class="text-lg font-semibold text-gray-700 mb-2">Drag & Drop Files Here</h3>
|
||||
<p class="text-gray-500 mb-4">or click to select files</p>
|
||||
<button type="button" id="select-files-btn"
|
||||
class="bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700 transition-colors">
|
||||
Select Files
|
||||
</button>
|
||||
<input type="file" id="file-input" multiple accept=".asc,.gpg,.pgp,.txt" class="hidden"
|
||||
aria-describedby="file-info">
|
||||
<div id="file-info" class="text-sm text-gray-500 mt-4">
|
||||
Supported formats: .asc, .gpg, .pgp, .txt | Max size: 10MB per file
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File List -->
|
||||
<div id="file-list" class="mt-6 space-y-3 hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-700">Files to Decrypt</h3>
|
||||
<div id="files-container" class="space-y-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Decryption Form -->
|
||||
<form id="decryption-form" class="mt-6 space-y-4 hidden">
|
||||
<div>
|
||||
<label for="private-key" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-key mr-2"></i>Private Key *
|
||||
</label>
|
||||
<textarea id="private-key" name="private-key" rows="6" required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors resize-none font-mono text-sm"
|
||||
placeholder="Paste your private key here..." aria-describedby="private-key-error"></textarea>
|
||||
<div id="private-key-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="key-passphrase" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-lock mr-2"></i>Key Passphrase *
|
||||
</label>
|
||||
<input type="password" id="key-passphrase" name="key-passphrase" required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
||||
placeholder="Enter your private key passphrase" aria-describedby="key-passphrase-error">
|
||||
<div id="key-passphrase-error" class="text-red-500 text-sm mt-1 hidden" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="submit" id="decrypt-btn"
|
||||
class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-indigo-700 focus:ring-4 focus:ring-indigo-200 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<i class="fas fa-unlock mr-2"></i>Decrypt Files
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Decryption Status -->
|
||||
<div id="decryption-status" class="mt-6 hidden">
|
||||
<div id="decryption-progress" class="bg-gray-200 rounded-full h-2 mb-4">
|
||||
<div id="progress-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300"
|
||||
style="width: 0%"></div>
|
||||
</div>
|
||||
<div id="decryption-message" class="text-center text-gray-600"></div>
|
||||
<div id="decryption-results" class="mt-4 space-y-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user