Simple end-to-end encrypted voice calls. https://pages.codeberg.org/tok/talk
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

132 lines
4.9 KiB

<!DOCTYPE html>
<!--
Copyright (c) 2020 Thomas Kramer.
This file is part of picoTalk
(see https://codeberg.org/tok/picotalk).
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<title>picoTalk</title>
<meta charset="utf-8" />
<meta name="description" content="Simple and truly end-to-end encrypted voice calls." />
<meta name="keywords" content="call, e2ee, end-to-end, encrypted, simple, light" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:type" content="website" />
<meta property="og:title" content="PicoTalk" />
<!--
<meta property="og:image" content="https://pages.codeberg.org/tok/talk/logo.svg" />
<meta property="og:image:secure_url" content="https://pages.codeberg.org/tok/talk/logo.svg" />
<meta property="og:url" content="https://pages.codeberg.org/tok/talk" />
-->
<meta property="og:description" content="Simple and truly end-to-end encrypted voice calls." />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="content" class="flexvertical">
<h1>picoTalk <img src="logo_no_bg.svg" height="40px" style="margin-bottom: -5px"/></h1>
<i>Simple and truly end-to-end encrypted voice calls.</i>
<noscript>
<b>JavaScript must be enabled for this site!</b>
</noscript>
<div class="box flexvertical" id="joinRoomForm" style="display: none;">
<label>Room name</label>
<span class="tooltip">
<input type="text" id="room_name" value=""> <br />
<span class="tooltiptext">Choose an arbitrary room name. Best something hard to guess.</span>
</span>
<label class="optional">Server</label>
<span class="tooltip">
<input type="text" class="optional" id="server_name" value=""> <br />
<span class="tooltiptext">Optionally define which server should be used for the call.</span>
</span>
<button id="btn_connect">Go</button>
</div>
<div class="box flexvertical" id="joinRoomConfirm" style="display: none;">
Join the room <b id="joinRoomConfirmName">...</b> <br />
on server <b id="joinRoomConfirmServer">...</b> <br />
<label>Name</label><input type="text" id="user_name" value="Anonymous"> <br />
<label>Password</label>
<span class="tooltip">
<input type="text" id="password" value=""> <br />
<span class="tooltiptext">This is used to further secure the end-to-end encryption against man-in-the middle attacks.</span>
</span>
<button id="btn_join">Join</button>
</div>
<div class="box" id="waitToConnect" style="display: none;">
<i>Try to connect...</i>
</div>
<div class="box flexhorizontal" id="controlButtons" style="display: none;">
<button id="btnToggleMute">Mute</button>
<button id="btnLeave">Leave</button>
</div>
<div class="flexhorizontal">
<div class="box flexvertical" id="divPeerList" style="display: none;">
<h3>Peers</h3>
<ul id="peerList">
<li>You</li>
</ul>
</div>
<div class="box flexvertical" id="divChat" style="display: none;">
<h3>Chat</h3>
<ul id="chatMessages">
<li>Hello,</li>
<li>Write a message to the other peers here!</li>
</ul>
<input type="text" id="inputChatMessage" />
</div>
</div>
<div id="divShowLog" class="tooltip">
<a id="btnShowLog">Show Log</a>
<span class="tooltiptext">Show/hide debug information.</span>
</div>
<div class="box" id="divLog" style="display: none;">
<h3>Log</h3>
<ol id="log"></ol>
</div>
</div>
<script type="text/javascript" src="nacl.js" charset="utf-8"></script>
<script type="text/javascript" src="nacl-util.js" charset="utf-8"></script>
<script type="text/javascript" src="queue.js" charset="utf-8"></script>
<script type="text/javascript" src="wave-resampler.js" charset="utf-8"></script>
<script type="text/javascript" src="main.js" charset="utf-8"></script>
<div id="footer">
<a href="https://codeberg.org/tok/picotalk">About</a>
</div>
</body>
</html>