Initial commit
This commit is contained in:
1246 files changed
+289342
No files matched your search
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blink_P!D#F</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #004080;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'menubar.html' %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="mt-5">Admin Panel</h1>
|
||||
<p class="lead">This is the admin panel. Manage your application here.</p>
|
||||
<p class="lead">You will get the flag in encrypted.</p>
|
||||
<p class="lead">The flag is encrypted using AES CBC Mode.</p>
|
||||
<p class="lead">Prevent changing the algorithm for encryption because we check that.</p>
|
||||
<p class="lead">You can get your encrypted flag: {{ enc_flag }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto text-danger">Admin Panel Error</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage">
|
||||
<!-- The error message will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Display the toast if there's an error message in the query string
|
||||
$(document).ready(function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get('error');
|
||||
if (error) {
|
||||
$('#toastMessage').text(error);
|
||||
$('#loginToast').toast('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!-- footer.html -->
|
||||
<footer class="bg-dark text-white text-center py-4" style="padding-top:100px; margin-top:200px">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<!-- Created By -->
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="mb-0 mr-3">Created by: <a href="#" class="text-white" rel="noopener">Wondping</a></p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Logo" class="mr-3" style="max-width: 30px;">
|
||||
<p class="mb-0 mr-3"><a href="https://github.com/fixxall" class="text-white" target="_blank" rel="noopener" aria-label="Visit GitHub profile">fixxall</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Lab Partner -->
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="http://159.223.57.92:5173/wondlab.png" alt="Lab Logo" class="mr-3" style="max-height: 30px;">
|
||||
<p class="mb-0"><a href="#" class="text-white" rel="noopener">Wondlab Security</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blink_P!D#F</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #e8f5e9;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #004d40;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.additional-images {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.additional-images img {
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gif-container {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.gif-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background-color: #004d40;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-custom:hover {
|
||||
background-color: #00332c;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.image-logos-main {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.list-unstyled li {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'menubar.html' %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<h1 class="mt-5">Welcome to the PDF Signature App!</h1>
|
||||
<p class="lead mt-3">
|
||||
Explore our app to seamlessly sign and verify PDF files. With just a few clicks, you can ensure the authenticity and integrity of your documents. Our app offers a user-friendly interface and robust features to manage your PDF signatures effectively.
|
||||
</p>
|
||||
<img class="image-logos-main" src="https://external-preview.redd.it/DZRHg1I72mCNKePOqfqjkBW-7ugWeHrLHvQoerMop48.png?auto=webp&s=2059aa00df1ce0286f68ef54e573ffae680c7453" alt="PDF Signature App" class="hero-image">
|
||||
<div class="gif-container">
|
||||
<img src="https://media.idownloadblog.com/wp-content/uploads/2016/11/Animated-GIF-Banana.gif" alt="Interactive GIF">
|
||||
</div>
|
||||
<p class="mt-4">
|
||||
Our PDF Signature App is designed to make document management simple and secure. Whether you need to sign documents for business purposes or verify the authenticity of received files, our app provides a comprehensive solution. With features like digital
|
||||
signatures, verification checks, and a user-friendly interface, you can handle all your PDF signing needs with ease.
|
||||
</p>
|
||||
<p>
|
||||
Explore our features to enhance your document security:
|
||||
</p>
|
||||
<a href="{{ url_for('sign') }}" class="btn btn-custom">Sign a PDF</a>
|
||||
<a href="{{ url_for('verify') }}" class="btn btn-custom ml-2">Verify a PDF</a>
|
||||
<div class="additional-images">
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCnoxnufWEVEbp_7ehAYKyMDlgccHFFVKNnQ&s" alt="Feature 1">
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlSnxUvz9-U6i8pam59DStrDbmFcOcdjiISQ&s" alt="Feature 2">
|
||||
</div>
|
||||
<ul class="list-unstyled">
|
||||
<li><strong>Digital Signatures:</strong> Apply secure digital signatures to your documents.</li>
|
||||
<li><strong>Verification Checks:</strong> Verify signatures to ensure document integrity.</li>
|
||||
<li><strong>User-Friendly Interface:</strong> Navigate effortlessly through our intuitive design.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
{% include 'footer.html' %}
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto text-danger">Login Error</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Invalid username or password. Please try again or contact support if the issue persists.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Display the toast if there's an error message in the query string
|
||||
$(document).ready(function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get('error');
|
||||
if (error) {
|
||||
$('#loginToast').toast('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blink_P!D#F</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #e0f7fa;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #00796b;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00796b;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #004d40;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #00796b;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 121, 107, 0.25);
|
||||
}
|
||||
|
||||
.login-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'menubar.html' %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Login</h5>
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoMYNzuJWBFsPh7z3h_AIaYV-Htr8mnGoQTg&s" alt="Login Image" class="login-image">
|
||||
<form id="loginForm" action="/login" method="post">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" name="username" id="username" class="form-control" placeholder="Username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" id="password" class="form-control" placeholder="Password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto text-danger">Login Error</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Invalid username or password.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Display the toast if there's an error message in the query string
|
||||
$(document).ready(function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get('error');
|
||||
if (error) {
|
||||
$('#loginToast').toast('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!-- menubar.html -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">
|
||||
<span class="storm-icon">⚡</span> Blink_P!D#F
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link storm-button" href="{{ url_for('index') }}">Boarding</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link storm-button" href="{{ url_for('sign') }}">Blink</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link storm-button" href="{{ url_for('verify') }}">Verifiez</a>
|
||||
</li>
|
||||
{% if isAdmin %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link storm-button" href="{{ url_for('admin_panel') }}">Those'Admin?</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link storm-button" href="{{ url_for('logout') }}">Pulang</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Add this CSS inside <style> tags in the <head> of your HTML or in a separate CSS file -->
|
||||
<style>
|
||||
.storm-icon {
|
||||
font-size: 1.5rem;
|
||||
color: #ffcc00;
|
||||
animation: lightning 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes lightning {
|
||||
0%,
|
||||
100% {
|
||||
text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00;
|
||||
}
|
||||
}
|
||||
|
||||
.storm-button {
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
overflow: hidden;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.storm-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.storm-button:hover::before {
|
||||
width: 400%;
|
||||
height: 400%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.storm-button:hover {
|
||||
color: #ffffff;
|
||||
background-color: #004080;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: #ffcc00;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blink_P!D#F</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #e0f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #00796b;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00796b;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #004d40;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.description-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gif-container {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.gif-container img {
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.custom-description {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.chatbot-gif {
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.verify-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.verify-content {
|
||||
flex: 3;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.verify-form {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #00796b;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'menubar.html' %}
|
||||
|
||||
<div class="container flex-grow-1">
|
||||
<div class="verify-container">
|
||||
<!-- Content on the left -->
|
||||
<div class="verify-content">
|
||||
<div class="custom-description">
|
||||
<h4>How It Works</h4>
|
||||
<p>Upload your PDF file using the form on the right. Our system will then apply a digital signature to your document. This ensures the authenticity and integrity of your PDF, providing you with a secure and verifiable document.</p>
|
||||
</div>
|
||||
|
||||
<div class="gif-container">
|
||||
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/hd/0792a275536851.5c4fa1ce7f309.gif" alt="Signature Animation" class="img-fluid">
|
||||
</div>
|
||||
|
||||
<div class="custom-description">
|
||||
<h4>Why Sign Your PDF?</h4>
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbJAS-3yVU30xEf7HBG_SZ4NAAHc4VeebXwQ&s" alt="Secure Documents" class="description-img">
|
||||
<p>Adding a digital signature to your PDF ensures that the document is genuine and has not been altered. It provides a higher level of security and confidence to recipients about the authenticity of the document.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chatbot GIF on the right side -->
|
||||
<div class="text-center mt-4">
|
||||
<img src="https://www.aalpha.net/wp-content/uploads/2020/11/ChatBot_ace-1.gif" alt="Chatbot Animation" class="chatbot-gif">
|
||||
</div>
|
||||
|
||||
<!-- Verification Form on the right -->
|
||||
<div class="verify-form">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Sign PDF</h5>
|
||||
<form action="/sign" method="post" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="file">Upload PDF to Sign</label>
|
||||
<input type="file" name="file" class="form-control" accept=".pdf" placeholder="File upload" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-container" style="padding-top:100px">
|
||||
<h3>Bosen mending youtube lah:</h3>
|
||||
<iframe src="https://www.youtube.com/embed/zCKQkhmW8co" title="YouTube video player" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
{% include 'footer.html' %}
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto text-danger">Sign Error</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage">
|
||||
<!-- The error message will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Display the toast if there's an error message in the query string
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get('error');
|
||||
if (error) {
|
||||
$('#toastMessage').text(error);
|
||||
$('#loginToast').toast('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blink_P!D#F</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #e0f2f1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #00796b;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00796b;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #004d40;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.description-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gif-container {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.gif-container img {
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.custom-description {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.chatbot-gif {
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.verify-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.verify-content {
|
||||
flex: 3;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.verify-form {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #00796b;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'menubar.html' %}
|
||||
|
||||
<div class="container flex-grow-1">
|
||||
<div class="verify-container">
|
||||
<!-- Content on the left -->
|
||||
<div class="verify-content">
|
||||
<div class="custom-description">
|
||||
<h4>How It Works</h4>
|
||||
<p>Upload your signed PDF file using the form on the right. Our system will then verify the digital signature on your document. This ensures that the document has not been tampered with and that the signature is valid and authentic.</p>
|
||||
</div>
|
||||
|
||||
<div class="gif-container">
|
||||
<img src="https://i.pinimg.com/originals/b9/82/77/b982770e4f0348a0a2f3b7ff25752c7b.gif" alt="Verification Animation" class="img-fluid">
|
||||
</div>
|
||||
|
||||
<div class="custom-description">
|
||||
<h4>Why Verify Your PDF?</h4>
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvPP9W-LFQnDLmpP8qASp86qOercZI_1c64A&s" alt="Secure Documents" class="description-img">
|
||||
<p>Verifying the digital signature on your PDF ensures that the document is authentic and has not been altered since it was signed. This verification process adds an extra layer of security and trust to your documents.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Verification Form on the right -->
|
||||
<div class="verify-form">
|
||||
<div class="card">
|
||||
<div class="card-body" style="width: 400px;">
|
||||
<h5 class="card-title">Verify Signature</h5>
|
||||
<form action="/verify" method="post" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="file">Upload Signed PDF</label>
|
||||
<input type="file" name="file" class="form-control" placeholder="File upload" accept=".pdf" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Verify</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chatbot GIF on the right side -->
|
||||
<div class="text-center mt-4">
|
||||
<img src="https://www.nimbleappgenie.com/images/chatboot-banner-bottom-img.gif" alt="Chatbot Animation" class="chatbot-gif">
|
||||
<div class="video-container" style="padding-top:100px">
|
||||
<h3>Bosen mending youtube lah:</h3>
|
||||
<iframe src="https://www.youtube.com/embed/2VALu2Tubbk" title="YouTube video player" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
{% include 'footer.html' %}
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto text-danger">Verify Error</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage">
|
||||
<!-- The error message will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Display the toast if there's an error message in the query string
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get('error');
|
||||
if (error) {
|
||||
$('#toastMessage').text(error);
|
||||
$('#loginToast').toast('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blink_P!D#F</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #004080;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-image {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background-color: #004080;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-custom:hover {
|
||||
background-color: #003366;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include 'menubar.html' %}
|
||||
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Verification Result</h5>
|
||||
{% if is_valid %}
|
||||
<img src="https://kompak.or.id/wp-content/uploads/2024/01/A1-Valid-Artinya-Dalam-Kepolisian-Bahasa-Gaul.jpg" alt="Valid Signature" class="result-image">
|
||||
<p class="card-text text-success">The signature is <strong>valid</strong>.</p>
|
||||
{% else %}
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRupVYejUUjYB61R0y1c8NnA18NgBkuv8pz0A&s" alt="Invalid Signature" class="result-image">
|
||||
<p class="card-text text-danger">The signature is <strong>invalid</strong>.</p>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('verify') }}" class="btn btn-custom">Go Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto text-danger">Result Error</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage">
|
||||
<!-- The error message will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Display the toast if there's an error message in the query string
|
||||
$(document).ready(function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const error = urlParams.get('error');
|
||||
if (error) {
|
||||
$('#toastMessage').text(error);
|
||||
$('#loginToast').toast('show');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user