-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (150 loc) · 8.95 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Watch Pal | Watch Together | Elvis Tony</title>
<meta name="description" content="Watch videos and streams online with friends and family built with socket io!">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Birthstone&display=swap" rel="stylesheet">
<link href="landing/css/styles.css" rel="stylesheet" />
<link rel="shortcut icon" href="watchpal.ico" type="image/x-icon">
<link rel="manifest" href="manifest.json" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand text-warning birthstone-regular" href="#page-top">Watch Pal</a>
<small>elvistony.dev</small>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="https://github.com/elvistony">Github</a></li>
<li class="nav-item"><a class="nav-link" href="https://elvistony.dev">Elvis Tony</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h1 class="mx-auto my-0 text-warning birthstone-regular">Watch Pal</h1>
<small class="text-warning">v0.6.5</small>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free and open source Watch Together Solution!</h2>
<h6 class="text-white-50 mx-auto mt-2 mb-5">Built with Socket IO Networking</h6>
<a class="btn btn-warning" href="#host">Host Your Theatre!</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="about-section text-center" id="host">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8">
<h2 class="text-white mb-4">Host your Theatre</h2>
<p class="text-white-50">
Click the button to Host your private Theatre!
</p>
<button class="btn btn-warning" id="create-room"><i class="fa fa-tv"></i> Create a Screen</button>
<div class="mt-4" id="linkSection" style="display: none;">
<!-- <div class="form-group mb-2">
<input class="form-control mt-2" type="text" name="" readonly placeholder="Click the button to create a new Room" >
</div> -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Click 'Create a Screen' to generate a link" id="link-url" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="input-group-text btn btn-info" id="copy-clipboard">Copy</button>
</div>
</div>
<a target="_blank" class="btn button btn-warning mb-2" id="link-admin" href="#"><i class="fa fa-user"></i> Open Admin Panel</a>
<a target="_blank" class="btn button btn-success" id="link-theatre" href="#"><i class="fa fa-tv"></i> Open Theatre</a>
<!-- <button class="btn btn-info button" is="google-cast-button">Cast</button> -->
</div>
</div>
</div>
<img class="img-fluid" src="landing/assets/img/ipad.png" alt="..." />
</div>
</section>
<!-- Contact-->
<section class="contact-section bg-black">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fab fa-github text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Github</h4>
<hr class="my-4 mx-auto" />
<div class="small text-black-50">github.elvistony.dev</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4>
<hr class="my-4 mx-auto" />
<div class="small text-black-50">watchpal[at]elvistony.dev</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-mobile-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Other Projects</h4>
<hr class="my-4 mx-auto" />
<div class="small text-black-50">projects.elvistony.dev</div>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">elvistony.dev 2024 - Landing by Startbootstrap</div></footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var createBtn = document.getElementById('create-room');
const baseURL = 'https://elvistony.dev/watchpal/'
createBtn.addEventListener('click',()=>{
var roomId = Math.random().toString(36).slice(2);
document.getElementById('linkSection').style.display='block';
document.getElementById('link-url').value = baseURL+"play/#/"+ roomId;
document.getElementById('link-theatre').setAttribute('href',baseURL+"play/#/"+roomId);
document.getElementById('link-admin').setAttribute('href',baseURL+"remote/#/"+roomId);
});
document.getElementById('copy-clipboard').addEventListener('click',()=>{
var copyText = document.getElementById("link-url");
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
alert("Copied the text: " + copyText.value);
})
</script>
</body>
</html>