-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (117 loc) · 7.07 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bluetooth Reverse Hearing</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1WZJPGQGH5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1WZJPGQGH5');
</script>
<body>
<br><br><br><br>
<div class="container text-center mt-5">
<h1 class="mb-4" style="font-family: 'Yatra One', cursive;"><b>Spy Mic</b></h1>
<iframe src="https://lottie.host/embed/8e96e1f0-fb8a-447c-a02a-104be8538cfe/wMi8OO8XqE.json" class="img-fluid mb-3" style="border: none; width: 500px; height: 200px;"></iframe><br><br><br>
<button id="start" class="btn btn-primary btn-lg mb-2 rounded-pill">Start Hearing</button>
<button id="stop" class="btn btn-danger btn-lg mb-2 rounded-pill" style="display: none;">Stop Hearing</button>
<button id="record" class="btn btn-warning btn-lg mb-2" disabled>Start Recording</button>
<button id="stopRecord" class="btn btn-secondary btn-lg mb-2" disabled>Stop Recording</button>
</div>
<!-- Instruction Modal -->
<div class="modal fade" id="instructionModal" tabindex="-1" aria-labelledby="instructionModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title animated-title" id="instructionModalLabel">Welcome to <b><a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com?font=Yatra+One&pause=1000&color=000000&background=C8C8C800&width=435&lines=spymic.netlify.app" alt="Typing SVG" /></a></b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="instructionCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex flex-column justify-content-center align-items-center" style="height: 200px;">
<iframe src="https://lottie.host/embed/8768feba-7838-4d35-84b0-e240689a1db0/QgSNazxjz8.json" class="img-fluid mb-3" style="border: none; width: 100%; height: 100%;"></iframe>
<p class="instruction-text">Step 1: Connect your Bluetooth earbuds to your phone.</p>
</div>
</div>
<div class="carousel-item">
<div class="d-flex flex-column justify-content-center align-items-center" style="height: 200px;">
<iframe src="https://lottie.host/embed/642c60a7-ce8b-496b-9cab-7bfdfc8ca826/xy1yZsw2GG.json" class="img-fluid mb-3" style="border: none; width: 100%; height: 100%;"></iframe>
<p class="instruction-text">Step 2: Allow microphone access when prompted.</p>
</div>
</div>
<div class="carousel-item">
<div class="d-flex flex-column justify-content-center align-items-center" style="height: 200px;">
<iframe src="https://lottie.host/embed/4a90b0cc-3273-4fac-8d0d-89fce4cae133/MgBlPQ6Wi9.json" class="img-fluid mb-3" style="border: none; width: 100%; height: 100%;"></iframe>
<p class="instruction-text">Step 3: Click "Start Hearing" to begin.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#instructionCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#instructionCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button id="getStarted" class="btn btn-success" data-dismiss="modal" style="display: none;">Get Started</button>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
$(document).ready(function() {
$('#instructionModal').modal('show');
$('#instructionCarousel').on('slid.bs.carousel', function () {
var $carousel = $(this);
var $activeItem = $carousel.find('.carousel-item.active');
var isLastSlide = $activeItem.is(':last-child');
$('#getStarted').toggle(isLastSlide);
});
$('#instructionModal').on('hidden.bs.modal', function () {
toastr.info('Reload the page before starting another recording.', 'Info', {
positionClass: 'toast-top-right',
timeOut: 5000
});
});
});
</script>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<span>© 2024 Created by Vehan Rajintha</span>
<a href="https://github.com/VehanRajintha/BT-Reverse-hearing-website-spy-mic-" target="_blank">
<i class="fab fa-github github-icon"></i>
</a>
</div>
</footer>
</body>
</html>