Reggie's picture
Update templates/index.html
a40cbb8
raw
history blame
No virus
1.89 kB
<!DOCTYPE html>
<html>
<head>
<title>YouTube Livestream Audio Recorder</title>
<!-- Add necessary CSS and jQuery libraries -->
<style>
body {
font-family: Roboto, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 600px;
margin: 0 auto;
text-align: center;
}
#url {
width: 500px;
}
button {
margin: 10px;
}
.row, h2 {
display: flex;
align-items: center;
margin: 10px;
}
select, button {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
input {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 500px;
}
label, #message {
margin: 0px 5px 0px 10px;
}
button {
background-color: #2196f3;
color: white;
cursor: pointer;
margin: 0px 0px 0px 3px;
}
button:hover {
background-color: #1976d2;
}
</style>
</head>
<body>
<div class="container">
<h2>Search & Transcribing Utilities</h2>
<div class="mb-3 row">
<label for="urlInput" class="form-label">Enter YouTube Livestream URL:</label>
<input type="text" class="form-control" id="urlInput"
placeholder="e.g., https://www.youtube.com/watch?v=YOUR_STREAM_ID">
<button class="btn btn-primary" id="startBtn">Start</button>
<button class="btn btn-danger" id="stopBtn">Stop</button>
<div id="message"></div>
</div>
<!-- Add necessary jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Add custom script for handling button clicks -->
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>