-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
126 lines (126 loc) · 5.34 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Pico Meet</title>
<!-- g font -->
<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=Mukta&display=swap" rel="stylesheet">
<!-- local styles -->
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Mukta', sans-serif;
background-color: #313131;
color: #ffffff;
}
a:any-link{
color: aqua;
}
.intro, .howto, .feedback, .license{
padding: 10px;
}
.license{
background-color: #1b1b1b;
}
.license a:any-link{
color: #47ff56;
}
h1, h2{
color: #ffd726;
}
input, button, textarea{
width: 100%;
padding: 8px;
}
.h_btn{
display: block;
cursor: pointer;
position: fixed;
bottom: 150px;
right: 30px;
width: 70px;
height: 70px;
font-size: 2em;
border-radius: 50%;
border: 4px solid #ffd61d;
background-color: #313131;
box-shadow: 3px 5px 5px #1f1f1f;
}
</style>
</head>
<body>
<!-- intro -->
<div class="intro">
<h1>Pico Meet: About & How</h1>
<p>
Pico Meet is a one to one video chat application backed by
<a href="http://peerjs.com" target="_blank" rel="noopener noreferrer"> peerjs </a>.
</p>
</div>
<!-- how to use -->
<div class="howto">
<h2>How To Use: </h2>
<p>
At the first time you visit the app you need to fillup the 'Set Details' form.
Just fillup a readable string in the fields given, and press on the button underneath.
So, you have succesfully set your details.
Now the app will connect to peer server, and you can see your connection status under 'Your Peer Connection' on top of the homepage.
After a succesfull connection your entered datas will be available on the public database, for others to explore.
By the way, you can always change your details on the earlier 'Set Details' form.
To reach there, all you have to do is navigate the page using the 'FAB Button' on bottom right corner.
If you need to call someone else, send an invitation by taping on 'INVITE SOMEONE' in the 'FAB Button'.
Or else if you know the other ones Peer ID (The 'Connection ID: ' under 'Your Peer Connection'),
type that ID under 'Call Someone' and tap on 'TRY CALLING' (while their 'Connection Status: ' under 'Your Peer Connection' shows 'Connected ✔').
If it feels like a lot of work, navigate to 'EXPLORE PEERS' using the FAB Button, to see all the peers available to call.
Taping 'Try To Call This Peer' under each one's details will do the same things described above.
On every call there is a freeze time of 10 seconds (While you are unable to make another call).
If the other end answers your call you will be connected and Happy facetime.
While receiving a call from someone, you will need to manually reject it if needed.
Answering will happen automatically after 10 seconds.
</p>
</div>
<!-- feedback -->
<div class="feedback">
<h2>Write a Feedback: </h2>
<form onsubmit="sendFeedback(event, this)" style="margin: 0 0 10px 0;">
<label for="w_name">Your Name</label>
<input type="text" id="w_name" required placeholder="Your nice name goes here" autocomplete="off">
<label for="feedback">Feedback</label>
<textarea id="feedback" required autocomplete="off" cols="30" rows="10"></textarea>
<button type="submit">WhatsApp It</button>
</form>
</div>
<!-- license -->
<div class="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/80x15.png" />
</a>
<p>Pico Meet the web app is created by
<a href="http://ash-faque.github.io" target="_blank" rel="noopener noreferrer"> Ashfaque </a>and is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"> Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
<!-- to home btn -->
<button onclick="location.href = '/'" class="h_btn">🏡</button>
<!-- local scripts -->
<script>
// SEND FEEDBACK
const sendFeedback = (evt, form) => {
evt.preventDefault();
// toRoot();
let name = form[0].value,
feedback = form[1].value,
url = `https://wa.me/916282177960?text=Hi I'm ${name}. I've visited the Pico Meet site.${feedback}`;
window.open(url);
};
</script>
</body>
</html>