File size: 5,348 Bytes
748e637 1cd29a5 d0e3b53 13329f0 1cd29a5 748e637 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* CSS Styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
color: #333;
line-height: 1.6;
text-align: center;
padding-top: 50px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.container {
width: 90%;
max-width: 1000px; /* Increased max width */
margin: auto;
padding: 40px; /* Increased padding for more space */
background: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadowing */
transform: translateY(-35%);
}
h1 {
color: #333;
margin-bottom: 20px;
}
p {
font-size: 18px;
color: #666;
margin-bottom: 30px;
}
.button {
display: inline-block;
padding: 15px 30px; /* Increased padding for larger buttons */
margin: 10px;
border-radius: 4px; /* Slightly more rounded corners */
color: white;
background-color: #4CAF50;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.button:hover {
background-color: #45a049;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle hover effect */
}
.button.docs {
background-color: #008CBA;
}
.button.docs:hover {
background-color: #007BAA;
}
.footer {
width: 100%;
background-color: #f0f0f0;
padding: 20px 0;
position: absolute;
bottom: 5rem;
text-align: center;
}
.footer a {
padding: 0.5rem;
text-decoration: none;
}
.fa-github:hover {
transform: scale(1.2)
}
.fa-github:hover {
transform: scale(1.2)
}
.fa-github{
color: #000000
}
.fa-linkedin:hover {
transform: scale(1.2)
}
.fa-linkedin {
color: #0077B5
}
/* Responsiveness */
@media (max-width: 768px) {
.container {
width: 95%;
padding: 20px;
display: flex; /* Added to create a flex container */
flex-direction: column; /* Stack elements vertically */
align-items: center; /* Center-align items for a neat look */
}
h1 {
font-size: 24px;
}
p {
font-size: 16px;
text-align: center; /* Center text for a balanced appearance */
}
.button {
width: 80%; /* Set a specific width for both buttons */
padding: 10px 20px;
font-size: 16px;
margin-bottom: 10px; /* Add some space between the buttons */
}
/* Ensure buttons are the same size */
.button.submit, .button.docs {
width: calc(80% - 20px); /* Adjusting width to account for padding */
}
}
@media (max-height: 500px) {
body {
padding-top: 20px;
height: auto;
}
.container {
align-items: center; /* Ensure center alignment in constrained height */
}
}
</style>
</head>
<body>
<div class="container">
<h1>Multilang ASR Subtitler</h1>
<p>A multilingual automatic speech recognition and video captioning tool using faster whisper.<br>
Supports real-time translation to english. Runs on consumer grade cpu.</p>
<a href="/submit_video/" class="button submit">Submit Video</a>
<a href="/docs/" class="button docs">Documentation</a>
</div>
<!-- Footer -->
<div class="footer">
<p>Created by:</p>
<a href="https://github.com/marquesafonso" class="github"><i class="fab fa-github fa-4x"></i></a>
<a href="https://www.linkedin.com/in/marquesafonso" class="linkedin"><i class="fab fa-linkedin fa-4x"></i></a>
</div>
</body>
</html>
|