Initial commit
This commit is contained in:
1246 files changed
+289342
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user