PDF_reader / header.html
Echo9k's picture
new background
5c4aab2
raw
history blame
1.61 kB
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #007bff 0%, #0056b3 100%);
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
}
.button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
border-radius: 24px;
background-color: rgba(54, 54, 54, 1);
color: white;
text-decoration: none;
font-size: 16px;
}
.button:hover {
background-color: rgba(54, 54, 54, 0.75);
}
input {
margin-top: 10px;
padding: 8px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>PDF Voice Reader</h1>
<p>Extract and listen to text from your PDF files effortlessly.</p>
<!-- File Upload -->
<input type="file" id="pdfUpload" accept="application/pdf">
<br><br>
<!-- Buttons -->
<a href="#" class="button" onclick="extractText()">Extract Text</a>
<a href="#" class="button" onclick="readText()">Read Aloud</a>
</div>
<script>
function extractText() {
alert("Text extraction coming soon...");
}
function readText() {
alert("Voice synthesis coming soon...");
}
</script>
</body>
</html>