File size: 1,888 Bytes
3c92095 |
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 |
<!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> |