-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (178 loc) · 7.22 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Platform9</title>
<link rel="shortcut icon" href="favicon.png" type="image/png">
<script src="vendor/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="vendor/semantic.min.css" />
<script src="vendor/semantic.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-deep_purple.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
.join-button {
position: absolute;
top: 0.78575em;
right: 0.5em;
}
.mute-button {
position: absolute;
top: 0.4em;
right: 0.5em;
}
.blink {
animation: blinker 2.5s linear infinite;
}
@keyframes blinker {
70% { opacity: 0.15; }
}
.main.container {
margin: 55px;
}
.content {
margin: 55px;
}
div.volume {
display:flex;
width:100%;
}
.mute-checkbox {
display:none;
}
.checkbox label {
cursor:pointer;
}
div.volume input {
flex-grow:1;
margin-left:1em;
}
div.playback-controls {
display:flex;
width:100%;
}
div.playback-controls input {
flex-grow:1;
margin-left:1em;
}
div.join-container {
display:flex;
width:100%;
justify-content:center;
margin-top:3em;
}
div#top-bar {
position: absolute;
top:12px;
left:15px;
display:flex;
align-items:center;
}
button#settings, button#share {
width:45px;
}
div#top-bar > div.error.notice {
color:darkred;
font-weight:bold;
margin-left:1em;
}
div.person-name {
margin-bottom:10px;
}
div#beats-container input {
margin-top:1em;
width: 100%;
}
i.play {
cursor:pointer;
}
.grandientuimain{
background: #41295a; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2F0743, #41295a); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2F0743, #41295a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
@keyframes pulse_animation {
0%, 50%, 100% { transform: scale(1); }
25%, 75% { transform: scale(1.01); }
}
.pulse {
animation-name: pulse_animation;
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
}
.download-link {
position:absolute;
top:2px;
right:0;
}
div.local-track-title {
position:absolute;
top:2px;
left:8px;
}
span.local-track-title {
padding-left:5px;
padding-top:2px;
color: rgba(0,0,0,.4);
}
i.play-button {
cursor:pointer;
}
.text-center {
text-align: center;
}
</style>
</head>
<body class="body">
<div class="ui inverted vertical masthead center aligned segment">
<div class="ui text container">
<div class="ui header">
<h1 class="ui inverted header">Platform9 by wh0ami</h1>
</div>
<h2>Free calls for everyone in the world!</h2>
<h2><a href='/app' style="color: white;">Go to app</a></h2>
<h2><a href='https://github.com/misha-marinenko/platform9-client-binaries' style="color: white;">Download Free Client!</a><pre style="overflow: hidden;"> </pre><a href="https://github.com/misha-marinenko/platform9"><img src="/GitHub-Mark-Light-32px.png" /></a></h2><br />
</div>
</div>
<div class="content">
<div class="ui vertical stripe segment">
<div class="ui text container">
<h3 class="ui header"><i class="phone icon"></i> Free Audio Calls From Your Browser</h3>
<p>With modern web technologies we should be able to make free audio calls to everyone in the world. Platform9 allows you do this simply and quickly straight from your web browser.</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="comment icon"></i>Join The Party And Chat With The World</h3>
<p>To get started, click on the <strong>Join The Party</strong> 🎉 button and you’ll be connected to a global chat room. Chat with other people across the world.</p>
<p>To change your name, click on the <strong>Settings Button in Left Up Corner</strong> and change the Name.</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="lock icon"></i>Create Your Own Private Room</h3>
<p>Want some privacy to chat to family and friends? That’s easily done by clicking on the <strong>Create New Room 🚪</strong> button to create your own private chat room.</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="users icon"></i> Invite Your Friends</h3>
<p>Once you’re in a chat room you’ll want to chat with other people. Just click on the <strong>Share</strong> button and you’ll be given a unique URL for your chat room. Share it with your friends and they’ll instantly be taken to your room and you can chat. Invite multiple people for more fun!</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="unmute icon"></i> Volume and Mute</h3>
<p>Once you’ve created your room and found your friends, you can start chatting. Alter the volume by adjusting the slider underneath your audio window. You can click on the <strong>microphone</strong> icon to mute your audio if you don’t want others to hear you. Click on the <strong>unmute</strong> icon to resume chatting.</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="settings icon"></i> Settings</h3>
<p>Click on the <strong>settings</strong> icon to change your username or select your input device.</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="circle icon"></i> Record Your Chats</h3>
<p>Doing an interview for your podcast? You can just hit the record button and save the whole conversation to a file. Once you’re finished, hit the stop button and you can download a zip file containing your audio.</p>
<div class="ui divider"></div>
<h3 class="ui header"><i class="file audio outline icon"></i> Share Audio</h3>
<p>Need to share an audio file with your friends? Just drag the audio file into your chat room and it’ll appear. Click on the <strong>play</strong> button and it’ll start playing. It’s that simple!</p>
<div class="ui divider"></div>
</div>
</div>
</div>
</body>
</body>
</html>