[mirotalk] - prettier code styling
This commit is contained in:
Miroslav Pejic
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
semi: true,
|
||||
trailingComma: "all",
|
||||
singleQuote: true,
|
||||
printWidth: 120,
|
||||
tabWidth: 4
|
||||
};
|
||||
@@ -145,6 +145,7 @@ curl -X POST "http://localhost:3000/api/v1/meeting" -H "authorization: mirotalk_
|
||||
curl -X POST "https://mirotalk.up.railway.app/api/v1/meeting" -H "authorization: mirotalk_default_secret" -H "Content-Type: application/json"
|
||||
curl -X POST "https://mirotalk.herokuapp.com/api/v1/meeting" -H "authorization: mirotalk_default_secret" -H "Content-Type: application/json"
|
||||
```
|
||||
|
||||
## API Documentation
|
||||
|
||||
The API documentation uses [swagger](https://swagger.io/) at http://localhost:3000/api/v1/docs. Or check it out on [railway](https://mirotalk.up.railway.app/api/v1/docs) & [heroku](https://mirotalk.herokuapp.com/api/v1/docs).
|
||||
|
||||
+7
-6
@@ -1,4 +1,5 @@
|
||||
[](https://mirotalk.up.railway.app/api/v1/docs)
|
||||
|
||||
## Create a meeting
|
||||
|
||||
Create a meeting with a `HTTP request` containing the `API_KEY` sent to MiroTalk’s server. The response contains a `meeting` URL that can be `embedded` in your client within an `iframe`.
|
||||
@@ -20,9 +21,9 @@ Embedding a meeting into a `service` or `app` requires using an `iframe` with th
|
||||
|
||||
```html
|
||||
<iframe
|
||||
allow="camera; microphone; fullscreen; display-capture; autoplay"
|
||||
src="https://mirotalk.up.railway.app/join/room_name"
|
||||
style="height: 100%; width: 100%; border: 0px;"
|
||||
allow="camera; microphone; fullscreen; display-capture; autoplay"
|
||||
src="https://mirotalk.up.railway.app/join/room_name"
|
||||
style="height: 100%; width: 100%; border: 0px;"
|
||||
></iframe>
|
||||
```
|
||||
|
||||
@@ -32,8 +33,8 @@ Develop your `website` or `application`, and bring `video meetings` in with a si
|
||||
|
||||
```html
|
||||
<iframe
|
||||
allow="camera; microphone; fullscreen; display-capture; autoplay"
|
||||
src="https://mirotalk.up.railway.app/newcall"
|
||||
style="height: 100%; width: 100%; border: 0px;"
|
||||
allow="camera; microphone; fullscreen; display-capture; autoplay"
|
||||
src="https://mirotalk.up.railway.app/newcall"
|
||||
style="height: 100%; width: 100%; border: 0px;"
|
||||
></iframe>
|
||||
```
|
||||
|
||||
+13
-13
@@ -1,22 +1,22 @@
|
||||
const fetch = require("node-fetch");
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const API_KEY = "mirotalk_default_secret";
|
||||
const API_KEY = 'mirotalk_default_secret';
|
||||
// const MIROTALK_URL = "http://localhost:3000/api/v1/meeting";
|
||||
// const MIROTALK_URL = "https://mirotalk.herokuapp.com/api/v1/meeting";
|
||||
const MIROTALK_URL = "https://mirotalk.up.railway.app/api/v1/meeting";
|
||||
const MIROTALK_URL = 'https://mirotalk.up.railway.app/api/v1/meeting';
|
||||
|
||||
function getResponse() {
|
||||
return fetch(MIROTALK_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
authorization: API_KEY,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
return fetch(MIROTALK_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
authorization: API_KEY,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
getResponse().then(async (res) => {
|
||||
console.log("Status code:", res.status);
|
||||
const data = await res.json();
|
||||
console.log("meeting:", data.meeting);
|
||||
console.log('Status code:', res.status);
|
||||
const data = await res.json();
|
||||
console.log('meeting:', data.meeting);
|
||||
});
|
||||
|
||||
+35
-35
@@ -1,47 +1,47 @@
|
||||
swagger: "2.0"
|
||||
swagger: '2.0'
|
||||
|
||||
info:
|
||||
title: MiroTalk API
|
||||
description: API description for external applications that integrates with MiroTalk.
|
||||
version: 1.0.0
|
||||
title: MiroTalk API
|
||||
description: API description for external applications that integrates with MiroTalk.
|
||||
version: 1.0.0
|
||||
|
||||
basePath: /api/v1
|
||||
|
||||
schemes:
|
||||
- https
|
||||
- http
|
||||
- https
|
||||
- http
|
||||
|
||||
paths:
|
||||
/meeting:
|
||||
post:
|
||||
tags:
|
||||
- "meeting"
|
||||
summary: "Create meeting"
|
||||
description: "Create meeting"
|
||||
consumes:
|
||||
- "application/json"
|
||||
produces:
|
||||
- "application/json"
|
||||
security:
|
||||
- secretApiKey: []
|
||||
responses:
|
||||
"200":
|
||||
description: "Meeting created"
|
||||
schema:
|
||||
$ref: "#/definitions/MeetingResponse"
|
||||
"403":
|
||||
description: "Unauthorized!"
|
||||
/meeting:
|
||||
post:
|
||||
tags:
|
||||
- 'meeting'
|
||||
summary: 'Create meeting'
|
||||
description: 'Create meeting'
|
||||
consumes:
|
||||
- 'application/json'
|
||||
produces:
|
||||
- 'application/json'
|
||||
security:
|
||||
- secretApiKey: []
|
||||
responses:
|
||||
'200':
|
||||
description: 'Meeting created'
|
||||
schema:
|
||||
$ref: '#/definitions/MeetingResponse'
|
||||
'403':
|
||||
description: 'Unauthorized!'
|
||||
|
||||
securityDefinitions:
|
||||
secretApiKey:
|
||||
type: "apiKey"
|
||||
name: "authorization"
|
||||
in: "header"
|
||||
description: "Format like this: authorization: {API_KEY_SECRET}"
|
||||
secretApiKey:
|
||||
type: 'apiKey'
|
||||
name: 'authorization'
|
||||
in: 'header'
|
||||
description: 'Format like this: authorization: {API_KEY_SECRET}'
|
||||
|
||||
definitions:
|
||||
MeetingResponse:
|
||||
type: "object"
|
||||
properties:
|
||||
meeting:
|
||||
type: "string"
|
||||
MeetingResponse:
|
||||
type: 'object'
|
||||
properties:
|
||||
meeting:
|
||||
type: 'string'
|
||||
|
||||
+13
-13
@@ -1,18 +1,18 @@
|
||||
version: '3'
|
||||
|
||||
services:
|
||||
mirotalk:
|
||||
image: mirotalk:latest
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: mirotalk
|
||||
hostname: mirotalk
|
||||
volumes:
|
||||
- .env:/usr/src/app/.env:ro
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3000:3000"
|
||||
mirotalk:
|
||||
image: mirotalk:latest
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: mirotalk
|
||||
hostname: mirotalk
|
||||
volumes:
|
||||
- .env:/usr/src/app/.env:ro
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- '3000:3000'
|
||||
# Uncomment below, remove "ports:" section above and configure labels as
|
||||
# needed for LetsEncrypt TLS certificates with Traefik.
|
||||
# See https://doc.traefik.io/traefik/user-guides/docker-compose/basic-example/
|
||||
@@ -23,4 +23,4 @@ services:
|
||||
# - "traefik.http.routers.mirotalk.rule=Host(`mirotalk.example.com`)"
|
||||
# - "traefik.http.routers.mirotalk.entrypoints=websecure"
|
||||
# - "traefik.http.routers.mirotalk.tls.certresolver=myresolver"
|
||||
# - "traefik.http.services.mirotalk.loadbalancer.server.port=3000"
|
||||
# - "traefik.http.services.mirotalk.loadbalancer.server.port=3000"
|
||||
|
||||
+28
-27
@@ -1,29 +1,30 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.0.0",
|
||||
"description": "A free WebRTC browser-based video call",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/miroslavpejic85/mirotalk"
|
||||
},
|
||||
"author": "Miroslav Pejic",
|
||||
"license": "AGPL-3.0",
|
||||
"homepage": "https://github.com/miroslavpejic85/mirotalk",
|
||||
"dependencies": {
|
||||
"compression": "^1.7.4",
|
||||
"dotenv": "^10.0.0",
|
||||
"express": "^4.17.1",
|
||||
"ngrok": "^4.0.1",
|
||||
"socket.io": "^4.1.2",
|
||||
"swagger-ui-express": "^4.1.6",
|
||||
"yamljs": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"node-fetch": "^2.6.1"
|
||||
}
|
||||
"name": "mirotalk",
|
||||
"version": "1.0.0",
|
||||
"description": "A free WebRTC browser-based video call",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/miroslavpejic85/mirotalk"
|
||||
},
|
||||
"author": "Miroslav Pejic",
|
||||
"license": "AGPL-3.0",
|
||||
"homepage": "https://github.com/miroslavpejic85/mirotalk",
|
||||
"dependencies": {
|
||||
"compression": "^1.7.4",
|
||||
"dotenv": "^10.0.0",
|
||||
"express": "^4.17.1",
|
||||
"ngrok": "^4.0.1",
|
||||
"socket.io": "^4.1.2",
|
||||
"swagger-ui-express": "^4.1.6",
|
||||
"yamljs": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"node-fetch": "^2.6.1",
|
||||
"prettier": "2.3.2"
|
||||
}
|
||||
}
|
||||
|
||||
+335
-377
@@ -1,418 +1,376 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>MiroTalk WebRTC Video call, Chat Room & Screen Sharing.</title>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag("config", "G-3XM60XK9RQ");
|
||||
</script>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="MiroTalk powered by WebRTC, Real-time Simple Secure Fast video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, webrtc stun, webrtc turn, video meeting, video chat, multi video chat, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to join this call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Free WebRTC browser-based video call."
|
||||
/>
|
||||
<meta property="og:image" content="/images/mirotalk.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/images/favicon.png"
|
||||
/>
|
||||
<!-- mirotalk css -->
|
||||
<link rel="stylesheet" href="/css/client.css" />
|
||||
<!-- whiteboard css -->
|
||||
<link rel="stylesheet" href="/css/whiteboard.css" />
|
||||
<!-- https://animate.style 4 swal fadeIn-Out -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||
/>
|
||||
</head>
|
||||
gtag('config', 'G-3XM60XK9RQ');
|
||||
</script>
|
||||
<title>MiroTalk WebRTC Video call, Chat Room & Screen Sharing.</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="MiroTalk powered by WebRTC, Real-time Simple Secure Fast video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, webrtc stun, webrtc turn, video meeting, video chat, multi video chat, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to join this call." />
|
||||
<meta property="og:description" content="Free WebRTC browser-based video call." />
|
||||
<meta property="og:image" content="/images/mirotalk.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.png" />
|
||||
<!-- mirotalk css -->
|
||||
<link rel="stylesheet" href="/css/client.css" />
|
||||
<!-- whiteboard css -->
|
||||
<link rel="stylesheet" href="/css/whiteboard.css" />
|
||||
<!-- https://animate.style 4 swal fadeIn-Out -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
||||
</head>
|
||||
|
||||
<body onload="initPeer()">
|
||||
<!-- just 4SEO Optimization -->
|
||||
<div id="webRTCSeo"><h1>WebRTC</h1></div>
|
||||
<body onload="initPeer()">
|
||||
<!-- just 4SEO Optimization -->
|
||||
<div id="webRTCSeo"><h1>WebRTC</h1></div>
|
||||
|
||||
<!-- show this before to join -->
|
||||
<div id="loadingDiv">
|
||||
<h1 class="pulsate">Loading...</h1>
|
||||
<pre>
|
||||
<!-- show this before to join -->
|
||||
<div id="loadingDiv">
|
||||
<h1 class="pulsate">Loading...</h1>
|
||||
<pre>
|
||||
Please allow camera & microphone
|
||||
access to use this app.
|
||||
</pre>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<!-- Start left buttons
|
||||
<!-- Start left buttons
|
||||
https://fontawesome.com/icons?d=gallery
|
||||
-->
|
||||
<div id="leftButtons">
|
||||
<button id="shareRoomBtn" class="fas fa-users"></button>
|
||||
<button id="audioBtn" class="fas fa-microphone"></button>
|
||||
<button id="videoBtn" class="fas fa-video"></button>
|
||||
<button id="swapCameraBtn" class="fas fa-sync-alt"></button>
|
||||
<button id="screenShareBtn" class="fas fa-desktop"></button>
|
||||
<button id="recordStreamBtn" class="fas fa-record-vinyl"></button>
|
||||
<button id="fullScreenBtn" class="fas fa-expand-alt"></button>
|
||||
<button id="chatRoomBtn" class="fas fa-comment"></button>
|
||||
<button id="myHandBtn" class="fas fa-hand-paper"></button>
|
||||
<button id="whiteboardBtn" class="fas fa-chalkboard-teacher"></button>
|
||||
<button id="fileShareBtn" class="fas fa-folder-open"></button>
|
||||
<button id="mySettingsBtn" class="fas fa-cogs"></button>
|
||||
<button id="aboutBtn" class="fas fa-question"></button>
|
||||
<button id="leaveRoomBtn" class="fas fa-phone-slash"></button>
|
||||
</div>
|
||||
<!-- End left buttons -->
|
||||
<div id="leftButtons">
|
||||
<button id="shareRoomBtn" class="fas fa-users"></button>
|
||||
<button id="audioBtn" class="fas fa-microphone"></button>
|
||||
<button id="videoBtn" class="fas fa-video"></button>
|
||||
<button id="swapCameraBtn" class="fas fa-sync-alt"></button>
|
||||
<button id="screenShareBtn" class="fas fa-desktop"></button>
|
||||
<button id="recordStreamBtn" class="fas fa-record-vinyl"></button>
|
||||
<button id="fullScreenBtn" class="fas fa-expand-alt"></button>
|
||||
<button id="chatRoomBtn" class="fas fa-comment"></button>
|
||||
<button id="myHandBtn" class="fas fa-hand-paper"></button>
|
||||
<button id="whiteboardBtn" class="fas fa-chalkboard-teacher"></button>
|
||||
<button id="fileShareBtn" class="fas fa-folder-open"></button>
|
||||
<button id="mySettingsBtn" class="fas fa-cogs"></button>
|
||||
<button id="aboutBtn" class="fas fa-question"></button>
|
||||
<button id="leaveRoomBtn" class="fas fa-phone-slash"></button>
|
||||
</div>
|
||||
<!-- End left buttons -->
|
||||
|
||||
<!-- Start chat room
|
||||
<!-- Start chat room
|
||||
https://codepen.io/sajadhsm/pen/odaBdd
|
||||
https://getemoji.com
|
||||
-->
|
||||
<section id="msgerDraggable" class="msger-draggable">
|
||||
<section id="msger" class="msger">
|
||||
<header id="msgerHeader" class="msger-header">
|
||||
<div class="msger-header-title">
|
||||
<i class="fas fa-comment-alt"></i> Chat
|
||||
</div>
|
||||
<div class="msger-header-options">
|
||||
<button id="msgerTheme" class="fas fa-ghost"></button>
|
||||
<button id="msgerCPBtn" class="fas fa-users"></button>
|
||||
<button id="msgerClean" class="fas fa-trash"></button>
|
||||
<button id="msgerSaveBtn" class="fas fa-save"></button>
|
||||
<button id="msgerClose" class="fas fa-times"></button>
|
||||
</div>
|
||||
</header>
|
||||
<section id="msgerDraggable" class="msger-draggable">
|
||||
<section id="msger" class="msger">
|
||||
<header id="msgerHeader" class="msger-header">
|
||||
<div class="msger-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
|
||||
<div class="msger-header-options">
|
||||
<button id="msgerTheme" class="fas fa-ghost"></button>
|
||||
<button id="msgerCPBtn" class="fas fa-users"></button>
|
||||
<button id="msgerClean" class="fas fa-trash"></button>
|
||||
<button id="msgerSaveBtn" class="fas fa-save"></button>
|
||||
<button id="msgerClose" class="fas fa-times"></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- public messages example -->
|
||||
<main id="msgerChat" class="msger-chat">
|
||||
<div class="msg left-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Friends Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
<!-- public messages example -->
|
||||
<main id="msgerChat" class="msger-chat">
|
||||
<div class="msg left-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Friends Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Friends Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
<div class="msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Friends Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-text">Public message example</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-text">Public message example</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg right-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Your Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
<div class="msg right-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Your Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Your Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
<div class="msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Your Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-text">Public message example</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-text">Public message example</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- private message example -->
|
||||
<div class="msg left-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Friends Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
<!-- private message example -->
|
||||
<div class="msg left-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Friends Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="private-msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Friends Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
<div class="private-msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Friends Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-text">Private message example</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-text">Private message example</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg right-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Your Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
<div class="msg right-msg">
|
||||
<div
|
||||
class="msg-img"
|
||||
style="
|
||||
background-image: url('https://eu.ui-avatars.com/api?name=Your Name&size=24&background=random&rounded=true');
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="private-msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Your Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
<div class="private-msg-bubble">
|
||||
<div class="msg-info">
|
||||
<div class="msg-info-name">Your Name</div>
|
||||
<div class="msg-info-time">00:00:00</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-text">Private message example</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="msg-text">Private message example</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="msger-inputarea">
|
||||
<input
|
||||
id="msgerInput"
|
||||
class="msger-input"
|
||||
type="text"
|
||||
placeholder="Enter your message..."
|
||||
/>
|
||||
<button id="msgerEmojiBtn" class="fas fa-smile"></button>
|
||||
<button id="msgerSendBtn" class="fas fa-paper-plane"></button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="msger-inputarea">
|
||||
<input id="msgerInput" class="msger-input" type="text" placeholder="Enter your message..." />
|
||||
<button id="msgerEmojiBtn" class="fas fa-smile"></button>
|
||||
<button id="msgerSendBtn" class="fas fa-paper-plane"></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Start private msg -->
|
||||
<section id="msgerCP">
|
||||
<section id="msgerCPSec" class="msger">
|
||||
<header id="msgerCPHeader" class="msger-private-header">
|
||||
<div class="msger-header-title">
|
||||
<i class="fas fa-comment-alt"></i> Send Private messages
|
||||
</div>
|
||||
<div class="msger-header-options">
|
||||
<button id="msgerCPCloseBtn" class="fas fa-times"></button>
|
||||
</div>
|
||||
</header>
|
||||
<main id="msgerCPChat" class="msger-chat">
|
||||
<div class="search-container">
|
||||
<input
|
||||
id="searchPeerBarName"
|
||||
type="text"
|
||||
placeholder="Search peer by name..."
|
||||
name="search"
|
||||
onkeyup="searchPeer()"
|
||||
/>
|
||||
</div>
|
||||
<div id="msgerCPList"></div>
|
||||
</main>
|
||||
<!-- Start private msg -->
|
||||
<section id="msgerCP">
|
||||
<section id="msgerCPSec" class="msger">
|
||||
<header id="msgerCPHeader" class="msger-private-header">
|
||||
<div class="msger-header-title"><i class="fas fa-comment-alt"></i> Send Private messages</div>
|
||||
<div class="msger-header-options">
|
||||
<button id="msgerCPCloseBtn" class="fas fa-times"></button>
|
||||
</div>
|
||||
</header>
|
||||
<main id="msgerCPChat" class="msger-chat">
|
||||
<div class="search-container">
|
||||
<input
|
||||
id="searchPeerBarName"
|
||||
type="text"
|
||||
placeholder="Search peer by name..."
|
||||
name="search"
|
||||
onkeyup="searchPeer()"
|
||||
/>
|
||||
</div>
|
||||
<div id="msgerCPList"></div>
|
||||
</main>
|
||||
</section>
|
||||
</section>
|
||||
<!-- End private msg -->
|
||||
</section>
|
||||
</section>
|
||||
<!-- End private msg -->
|
||||
</section>
|
||||
<!-- End chat room -->
|
||||
<!-- End chat room -->
|
||||
|
||||
<!-- Start emoji picker
|
||||
<!-- Start emoji picker
|
||||
https://github.com/nolanlawson/emoji-picker-element ]
|
||||
-->
|
||||
<section id="msgerEmojiPicker">
|
||||
<header id="msgerEmojiHeader">
|
||||
<button id="msgerCloseEmojiBtn" class="fas fa-times"></button>
|
||||
</header>
|
||||
<emoji-picker class="dark"></emoji-picker>
|
||||
<!-- <emoji-picker class="light"></emoji-picker> -->
|
||||
</section>
|
||||
<!-- End emoji picker -->
|
||||
<section id="msgerEmojiPicker">
|
||||
<header id="msgerEmojiHeader">
|
||||
<button id="msgerCloseEmojiBtn" class="fas fa-times"></button>
|
||||
</header>
|
||||
<emoji-picker class="dark"></emoji-picker>
|
||||
<!-- <emoji-picker class="light"></emoji-picker> -->
|
||||
</section>
|
||||
<!-- End emoji picker -->
|
||||
|
||||
<!-- Start my settings -->
|
||||
<section id="mySettings">
|
||||
<header id="mySettingsHeader">
|
||||
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
|
||||
</header>
|
||||
<main>
|
||||
<br />
|
||||
<div class="tab">
|
||||
<button id="tabDevicesBtn" class="tablinks">Devices</button>
|
||||
<button id="tabBandwidthBtn" class="tablinks">Bandwidth</button>
|
||||
<button id="tabRoomBtn" class="tablinks">Room</button>
|
||||
<button id="tabThemeBtn" class="tablinks">Theme</button>
|
||||
<!-- Start my settings -->
|
||||
<section id="mySettings">
|
||||
<header id="mySettingsHeader">
|
||||
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
|
||||
</header>
|
||||
<main>
|
||||
<br />
|
||||
<div class="tab">
|
||||
<button id="tabDevicesBtn" class="tablinks">Devices</button>
|
||||
<button id="tabBandwidthBtn" class="tablinks">Bandwidth</button>
|
||||
<button id="tabRoomBtn" class="tablinks">Room</button>
|
||||
<button id="tabThemeBtn" class="tablinks">Theme</button>
|
||||
</div>
|
||||
|
||||
<div id="tabDevices" class="tabcontent">
|
||||
<br />
|
||||
<div>
|
||||
<label for="videoSource">Camera</label><br />
|
||||
<select id="videoSource"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="audioSource">Microphone</label><br />
|
||||
<select id="audioSource"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="audioOutput">Speaker</label><br />
|
||||
<select id="audioOutput"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabBandwidth" class="tabcontent">
|
||||
<br />
|
||||
<label for="videoQuality">Video quality</label>
|
||||
<br />
|
||||
<select id="videoQuality">
|
||||
<option value="default">Default</option>
|
||||
<option value="qvgaVideo">QVGA</option>
|
||||
<option value="vgaVideo">VGA</option>
|
||||
<option value="hdVideo">HD</option>
|
||||
<option value="fhdVideo">FULL HD</option>
|
||||
<option value="4kVideo">4K</option>
|
||||
</select>
|
||||
<br /><br />
|
||||
<label for="videoFps">Camera fps</label>
|
||||
<br />
|
||||
<select id="videoFps">
|
||||
<option value="30">30 fps</option>
|
||||
<option value="25">25 fps</option>
|
||||
<option value="20">20 fps</option>
|
||||
<option value="15">15 fps</option>
|
||||
<option value="10">10 fps</option>
|
||||
<option value="5">5 fps</option>
|
||||
</select>
|
||||
<br /><br />
|
||||
<label for="screenFps">Screen fps</label>
|
||||
<br />
|
||||
<select id="screenFps">
|
||||
<option value="30">30 fps</option>
|
||||
<option value="25">25 fps</option>
|
||||
<option value="20">20 fps</option>
|
||||
<option value="15">15 fps</option>
|
||||
<option value="10">10 fps</option>
|
||||
<option value="5">5 fps</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="tabRoom" class="tabcontent">
|
||||
<br />
|
||||
<div>
|
||||
<label>My name</label><br />
|
||||
<input id="myPeerNameSet" type="text" placeholder="Change name..." />
|
||||
<button id="myPeerNameSetBtn" class="fas fa-user-edit">Change</button>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label>Participants</label><br />
|
||||
<button id="muteEveryoneBtn" class="fas fa-microphone">Mute everyone</button>
|
||||
<button id="hideEveryoneBtn" class="fas fa-video">Hide everyone</button>
|
||||
<br /><br />
|
||||
<label>Security</label><br />
|
||||
<button id="lockUnlockRoomBtn" class="fas fa-lock-open"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabTheme" class="tabcontent">
|
||||
<br />
|
||||
<label for="mirotalkTheme">Select</label>
|
||||
<br />
|
||||
<select id="mirotalkTheme">
|
||||
<option value="neon">🟣 MiroTalk - neon</option>
|
||||
<option value="dark">⚫️ MiroTalk - dark</option>
|
||||
<option value="forest">🟢 MiroTalk - forest</option>
|
||||
<option value="sky">🔵 MiroTalk - sky</option>
|
||||
<option value="ghost">⚪️ MiroTalk - ghost</option>
|
||||
</select>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
<!-- End my settings -->
|
||||
|
||||
<!-- Start whiteboard -->
|
||||
<div class="whiteboard-cont">
|
||||
<div class="colors-cont">
|
||||
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
|
||||
<button id="whiteboardFsBtn" class="fas fa-expand-alt"></button>
|
||||
<div>
|
||||
<input type="color" id="whiteboardColorPicker" onchange="setColor(value)" />
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="white" onclick="setColor('#ffffff')"></div>
|
||||
<div class="red" onclick="setColor('#e74c3c')"></div>
|
||||
<div class="yellow" onclick="setColor('#f1c40f')"></div>
|
||||
<div class="green" onclick="setColor('#badc58')"></div>
|
||||
<div class="blue" onclick="setColor('#3498db')"></div>
|
||||
<div class="orange" onclick="setColor('#e67e22')"></div>
|
||||
<div class="purple" onclick="setColor('#9b59b6')"></div>
|
||||
<div class="pink" onclick="setColor('#fd79a8')"></div>
|
||||
<div class="brown" onclick="setColor('#834c32')"></div>
|
||||
<div class="grey" onclick="setColor('#afadad')"></div>
|
||||
|
||||
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
|
||||
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
|
||||
<button id="whiteboardCleanBtn" class="fas fa-trash"></button>
|
||||
</div>
|
||||
<canvas id="whiteboard"></canvas>
|
||||
</div>
|
||||
<!-- End whiteboard -->
|
||||
|
||||
<div id="tabDevices" class="tabcontent">
|
||||
<br />
|
||||
<div>
|
||||
<label for="videoSource">Camera</label><br />
|
||||
<select id="videoSource"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="audioSource">Microphone</label><br />
|
||||
<select id="audioSource"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="audioOutput">Speaker</label><br />
|
||||
<select id="audioOutput"></select>
|
||||
</div>
|
||||
<!-- Start File Send -->
|
||||
<div id="sendFileDiv">
|
||||
<div id="sendFileInfo"></div>
|
||||
<div id="sendFilePercentage"></div>
|
||||
<progress id="sendProgress" max="0" value="0"></progress>
|
||||
<button id="sendAbortBtn" class="fas fa-stop-circle"> Abort</button>
|
||||
</div>
|
||||
<!-- End File Send -->
|
||||
|
||||
<div id="tabBandwidth" class="tabcontent">
|
||||
<br />
|
||||
<label for="videoQuality">Video quality</label>
|
||||
<br />
|
||||
<select id="videoQuality">
|
||||
<option value="default">Default</option>
|
||||
<option value="qvgaVideo">QVGA</option>
|
||||
<option value="vgaVideo">VGA</option>
|
||||
<option value="hdVideo">HD</option>
|
||||
<option value="fhdVideo">FULL HD</option>
|
||||
<option value="4kVideo">4K</option>
|
||||
</select>
|
||||
<br /><br />
|
||||
<label for="videoFps">Camera fps</label>
|
||||
<br />
|
||||
<select id="videoFps">
|
||||
<option value="30">30 fps</option>
|
||||
<option value="25">25 fps</option>
|
||||
<option value="20">20 fps</option>
|
||||
<option value="15">15 fps</option>
|
||||
<option value="10">10 fps</option>
|
||||
<option value="5">5 fps</option>
|
||||
</select>
|
||||
<br /><br />
|
||||
<label for="screenFps">Screen fps</label>
|
||||
<br />
|
||||
<select id="screenFps">
|
||||
<option value="30">30 fps</option>
|
||||
<option value="25">25 fps</option>
|
||||
<option value="20">20 fps</option>
|
||||
<option value="15">15 fps</option>
|
||||
<option value="10">10 fps</option>
|
||||
<option value="5">5 fps</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Js scripts -->
|
||||
<script src="https://kit.fontawesome.com/d2f1016e6f.js" crossorigin="anonymous"></script>
|
||||
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
||||
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16"></script>
|
||||
<script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/js/client.js"></script>
|
||||
<!-- end of Js scripts -->
|
||||
|
||||
<div id="tabRoom" class="tabcontent">
|
||||
<br />
|
||||
<div>
|
||||
<label>My name</label><br />
|
||||
<input
|
||||
id="myPeerNameSet"
|
||||
type="text"
|
||||
placeholder="Change name..."
|
||||
/>
|
||||
<button id="myPeerNameSetBtn" class="fas fa-user-edit">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label>Participants</label><br />
|
||||
<button id="muteEveryoneBtn" class="fas fa-microphone">
|
||||
Mute everyone</button
|
||||
>
|
||||
<button id="hideEveryoneBtn" class="fas fa-video">
|
||||
Hide everyone
|
||||
</button>
|
||||
<br /><br />
|
||||
<label>Security</label><br />
|
||||
<button id="lockUnlockRoomBtn" class="fas fa-lock-open"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabTheme" class="tabcontent">
|
||||
<br />
|
||||
<label for="mirotalkTheme">Select</label>
|
||||
<br />
|
||||
<select id="mirotalkTheme">
|
||||
<option value="neon">🟣 MiroTalk - neon</option>
|
||||
<option value="dark">⚫️ MiroTalk - dark</option>
|
||||
<option value="forest">🟢 MiroTalk - forest</option>
|
||||
<option value="sky">🔵 MiroTalk - sky</option>
|
||||
<option value="ghost">⚪️ MiroTalk - ghost</option>
|
||||
</select>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
<!-- End my settings -->
|
||||
|
||||
<!-- Start whiteboard -->
|
||||
<div class="whiteboard-cont">
|
||||
<div class="colors-cont">
|
||||
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
|
||||
<button id="whiteboardFsBtn" class="fas fa-expand-alt"></button>
|
||||
<div>
|
||||
<input
|
||||
type="color"
|
||||
id="whiteboardColorPicker"
|
||||
onchange="setColor(value)"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="white" onclick="setColor('#ffffff')"></div>
|
||||
<div class="red" onclick="setColor('#e74c3c')"></div>
|
||||
<div class="yellow" onclick="setColor('#f1c40f')"></div>
|
||||
<div class="green" onclick="setColor('#badc58')"></div>
|
||||
<div class="blue" onclick="setColor('#3498db')"></div>
|
||||
<div class="orange" onclick="setColor('#e67e22')"></div>
|
||||
<div class="purple" onclick="setColor('#9b59b6')"></div>
|
||||
<div class="pink" onclick="setColor('#fd79a8')"></div>
|
||||
<div class="brown" onclick="setColor('#834c32')"></div>
|
||||
<div class="grey" onclick="setColor('#afadad')"></div>
|
||||
|
||||
<button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
|
||||
<button id="whiteboardSaveBtn" class="fas fa-save"></button>
|
||||
<button id="whiteboardCleanBtn" class="fas fa-trash"></button>
|
||||
</div>
|
||||
<canvas id="whiteboard"></canvas>
|
||||
</div>
|
||||
<!-- End whiteboard -->
|
||||
|
||||
<!-- Start File Send -->
|
||||
<div id="sendFileDiv">
|
||||
<div id="sendFileInfo"></div>
|
||||
<div id="sendFilePercentage"></div>
|
||||
<progress id="sendProgress" max="0" value="0"></progress>
|
||||
<button id="sendAbortBtn" class="fas fa-stop-circle"> Abort</button>
|
||||
</div>
|
||||
<!-- End File Send -->
|
||||
|
||||
<!-- Js scripts -->
|
||||
<script
|
||||
src="https://kit.fontawesome.com/d2f1016e6f.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
||||
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16"></script>
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/emoji-picker-element@1"
|
||||
></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/js/client.js"></script>
|
||||
<!-- end of Js scripts -->
|
||||
|
||||
<!--
|
||||
<!--
|
||||
the <video> and <audio> tags are all added and removed dynamically
|
||||
in 'onAddStream', 'setupLocalMedia', and 'removePeer'/'disconnect'
|
||||
--></body>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+645
-645
File diff suppressed because it is too large
Load Diff
+1610
-1633
File diff suppressed because it is too large
Load Diff
+20
-20
@@ -1,27 +1,27 @@
|
||||
@media (max-width: 640px) {
|
||||
.section:first-of-type {
|
||||
min-height: 0;
|
||||
}
|
||||
.section:first-of-type {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
section:first-of-type .hero-inner {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
section:first-of-type .hero-inner {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
section:first-of-type .hero-inner .split-item {
|
||||
padding: 0;
|
||||
}
|
||||
section:first-of-type .hero-inner .split-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section:nth-of-type(2) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
section:nth-of-type(2) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
section:nth-of-type(2) .section-inner {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
section:nth-of-type(2) .section-inner {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
section:nth-of-type(2) .section-inner .cta-slogan {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
section:nth-of-type(2) .section-inner .cta-slogan {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
+166
-167
@@ -1,234 +1,233 @@
|
||||
.whiteboard-cont {
|
||||
z-index: 14;
|
||||
display: none;
|
||||
width: var(--wb-width);
|
||||
height: var(--wb-height);
|
||||
position: absolute;
|
||||
/* center */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/* fade in */
|
||||
-webkit-animation: fadeIn ease-in 1;
|
||||
-moz-animation: fadeIn ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
overflow: none;
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: 5px;
|
||||
z-index: 14;
|
||||
display: none;
|
||||
width: var(--wb-width);
|
||||
height: var(--wb-height);
|
||||
position: absolute;
|
||||
/* center */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/* fade in */
|
||||
-webkit-animation: fadeIn ease-in 1;
|
||||
-moz-animation: fadeIn ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
overflow: none;
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.whiteboard-cont #whiteboard {
|
||||
z-index: 99;
|
||||
background-color: var(--wb-bg);
|
||||
border-radius: 5px;
|
||||
z-index: 99;
|
||||
background-color: var(--wb-bg);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
background: var(--wb-hbg);
|
||||
cursor: move;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
background: var(--wb-hbg);
|
||||
cursor: move;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .white {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .white:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .red {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #e74c3c;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #e74c3c;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .red:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .yellow {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #f1c40f;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #f1c40f;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .yellow:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .green {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #badc58;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #badc58;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .green:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .orange {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #e67e22;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #e67e22;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .orange:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .purple {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #9b59b6;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #9b59b6;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .purple:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .blue {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #3498db;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #3498db;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .blue:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .pink {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #fd79a8;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #fd79a8;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .pink:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .brown {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #834c32;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #834c32;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .brown:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .grey {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #afadad;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50px;
|
||||
background-color: #afadad;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.whiteboard-cont .colors-cont .grey:hover {
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.whiteboard-cont button {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
background: transparent;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
background: transparent;
|
||||
}
|
||||
.whiteboard-cont button:hover {
|
||||
color: rgb(0, 180, 50);
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: rgb(0, 180, 50);
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#whiteboardColorPicker {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 15px;
|
||||
border-radius: 50px;
|
||||
border: solid 0.5px #afadad38;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 15px;
|
||||
border-radius: 50px;
|
||||
border: solid 0.5px #afadad38;
|
||||
}
|
||||
#whiteboardColorPicker:hover {
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: var(--btns-hover-scale);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
#whiteboardColorPicker::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
#whiteboardColorPicker::-webkit-color-swatch-wrapper {
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
#whiteboardColorPicker::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
#whiteboardColorPicker::-moz-color-swatch-wrapper {
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
#whiteboardColorPicker::color-swatch {
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
#whiteboardColorPicker::color-swatch-wrapper {
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
+3007
-3170
File diff suppressed because it is too large
Load Diff
+299
-331
@@ -1,340 +1,308 @@
|
||||
!(function () {
|
||||
"use strict";
|
||||
const e = document.getElementsByClassName("accordion-header");
|
||||
'use strict';
|
||||
const e = document.getElementsByClassName('accordion-header');
|
||||
|
||||
function t(e, t) {
|
||||
e.classList.add("is-active"), (t.style.maxHeight = t.scrollHeight + "px");
|
||||
}
|
||||
|
||||
function n(e, t) {
|
||||
e.classList.remove("is-active"), (t.style.maxHeight = null);
|
||||
}
|
||||
|
||||
if (e.length > 0)
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
const s = e[i],
|
||||
a = s.parentNode,
|
||||
l = s.nextElementSibling;
|
||||
a.classList.contains("is-active") && t(a, l),
|
||||
s.addEventListener("click", function () {
|
||||
a.classList.contains("is-active") ? n(a, l) : t(a, l);
|
||||
});
|
||||
function t(e, t) {
|
||||
e.classList.add('is-active'), (t.style.maxHeight = t.scrollHeight + 'px');
|
||||
}
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
let e = {
|
||||
touchStartX: 0,
|
||||
touchEndX: 0,
|
||||
minSwipePixels: 30,
|
||||
detectionZone: void 0,
|
||||
swipeCallback: function () {},
|
||||
init: function (t, n) {
|
||||
(e.swipeCallback = n),
|
||||
t.addEventListener(
|
||||
"touchstart",
|
||||
function (t) {
|
||||
e.touchStartX = t.changedTouches[0].screenX;
|
||||
},
|
||||
!1
|
||||
),
|
||||
t.addEventListener(
|
||||
"touchend",
|
||||
function (t) {
|
||||
(e.touchEndX = t.changedTouches[0].screenX),
|
||||
e.handleSwipeGesture();
|
||||
},
|
||||
!1
|
||||
);
|
||||
},
|
||||
handleSwipeGesture: function () {
|
||||
let t, n;
|
||||
e.touchEndX <= e.touchStartX &&
|
||||
((n = e.touchStartX - e.touchEndX), (t = "left")),
|
||||
e.touchEndX >= e.touchStartX &&
|
||||
((n = e.touchEndX - e.touchStartX), (t = "right")),
|
||||
n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n);
|
||||
},
|
||||
swipe: function (t, n) {
|
||||
let i = {};
|
||||
(i.direction = t), (i.movedPixels = n), e.swipeCallback(i);
|
||||
},
|
||||
};
|
||||
const t = document.getElementsByClassName("carousel-items");
|
||||
|
||||
function n(e, t) {
|
||||
void 0 === t && (t = "next");
|
||||
let n = e.getElementsByClassName("carousel-item is-active")[0],
|
||||
i = "next" === t ? n.nextElementSibling : n.previousElementSibling,
|
||||
s = n.getAttribute("data-carousel"),
|
||||
a = e.parentNode.getElementsByClassName("carousel-bullet")[s],
|
||||
l = "next" === t ? a.nextElementSibling : a.previousElementSibling;
|
||||
n.classList.remove("is-active"),
|
||||
a.classList.remove("is-active"),
|
||||
i
|
||||
? (i.classList.add("is-active"), l.classList.add("is-active"))
|
||||
: "next" === t
|
||||
? (e.firstElementChild.classList.add("is-active"),
|
||||
e.parentNode
|
||||
.getElementsByClassName("carousel-bullets")[0]
|
||||
.firstElementChild.classList.add("is-active"))
|
||||
: (e.lastElementChild.classList.add("is-active"),
|
||||
e.parentNode
|
||||
.getElementsByClassName("carousel-bullets")[0]
|
||||
.lastElementChild.classList.add("is-active"));
|
||||
e.classList.remove('is-active'), (t.style.maxHeight = null);
|
||||
}
|
||||
|
||||
function i(e, t) {
|
||||
let n,
|
||||
i = 0;
|
||||
for (let e = 0; e < t.length; e++)
|
||||
(t[0].parentNode.style.minHeight = i + "px"),
|
||||
t[e].classList.add("is-loading"),
|
||||
(n = t[e].offsetHeight),
|
||||
t[e].classList.remove("is-loading"),
|
||||
n > i && (i = n);
|
||||
t[0].parentNode.style.minHeight = i + "px";
|
||||
}
|
||||
|
||||
function s(e) {
|
||||
e && clearInterval(e);
|
||||
}
|
||||
|
||||
if (t.length > 0)
|
||||
for (let a = 0; a < t.length; a++) {
|
||||
let l = t[a],
|
||||
c = l.getElementsByClassName("carousel-item"),
|
||||
o = 0,
|
||||
r = l.getAttribute("data-autorotate");
|
||||
const d = document.createElement("div");
|
||||
(d.className = "carousel-bullets"),
|
||||
l.parentNode.insertBefore(d, l.nextSibling);
|
||||
for (let e = 0; e < c.length; e++) {
|
||||
c[e].setAttribute("data-carousel", e),
|
||||
c[e].classList.contains("is-active") && (o = e);
|
||||
let t = document.createElement("button");
|
||||
(t.className = "carousel-bullet"),
|
||||
t.setAttribute("data-bullet", e),
|
||||
l.parentNode
|
||||
.getElementsByClassName("carousel-bullets")[0]
|
||||
.appendChild(t);
|
||||
}
|
||||
c[o].classList.add("is-active");
|
||||
let u = l.parentNode.getElementsByClassName("carousel-bullet");
|
||||
u[o].classList.add("is-active"),
|
||||
i(0, c),
|
||||
window.addEventListener("resize", function () {
|
||||
i(0, c);
|
||||
});
|
||||
let m = !1;
|
||||
r &&
|
||||
(m = setInterval(function () {
|
||||
n(l, "next");
|
||||
}, r));
|
||||
for (let e = 0; e < u.length; e++) {
|
||||
let t = u[e];
|
||||
t.addEventListener("click", function (e) {
|
||||
if ((e.preventDefault(), t.classList.contains("is-active"))) return;
|
||||
for (let e = 0; e < u.length; e++)
|
||||
u[e].classList.remove("is-active");
|
||||
for (let e = 0; e < c.length; e++)
|
||||
c[e].classList.remove("is-active");
|
||||
let n = this.getAttribute("data-bullet");
|
||||
c[n].classList.add("is-active"),
|
||||
this.classList.add("is-active"),
|
||||
s(m);
|
||||
});
|
||||
}
|
||||
e.init(l, function (e) {
|
||||
"left" === e.direction
|
||||
? n(l, "next")
|
||||
: "right" === e.direction && n(l, "prev"),
|
||||
s(m);
|
||||
});
|
||||
}
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
document.documentElement.classList.remove("no-js"),
|
||||
document.documentElement.classList.add("js"),
|
||||
window.addEventListener("load", function () {
|
||||
document.body.classList.add("is-loaded");
|
||||
});
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
const e = document.getElementById("header-nav-toggle"),
|
||||
t = document.getElementById("header-nav");
|
||||
e &&
|
||||
(e.addEventListener("click", function () {
|
||||
document.body.classList.toggle("off-nav-is-active"),
|
||||
t.classList.toggle("is-active"),
|
||||
t.style.maxHeight
|
||||
? (t.style.maxHeight = null)
|
||||
: (t.style.maxHeight = t.scrollHeight + "px"),
|
||||
"true" === this.getAttribute("aria-expanded")
|
||||
? this.setAttribute("aria-expanded", "false")
|
||||
: this.setAttribute("aria-expanded", "true");
|
||||
}),
|
||||
document.addEventListener("click", function (n) {
|
||||
n.target === t ||
|
||||
n.target === e ||
|
||||
t.contains(n.target) ||
|
||||
(document.body.classList.remove("off-nav-is-active"),
|
||||
t.classList.remove("is-active"),
|
||||
(t.style.maxHeight = null),
|
||||
e.setAttribute("aria-expanded", "false"));
|
||||
}));
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
const e = document.getElementsByClassName("modal"),
|
||||
t = document.getElementsByClassName("modal-trigger");
|
||||
|
||||
function n() {
|
||||
document.body.classList.remove("modal-is-active");
|
||||
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active");
|
||||
}
|
||||
|
||||
if (e.length > 0 && t.length > 0)
|
||||
for (let e = 0; e < t.length; e++) {
|
||||
let n = t[e],
|
||||
i = document.getElementById(n.getAttribute("aria-controls"));
|
||||
i &&
|
||||
(n.hasAttribute("data-video") &&
|
||||
(null !== i.querySelector("iframe")
|
||||
? i
|
||||
.querySelector("iframe")
|
||||
.setAttribute("src", n.getAttribute("data-video"))
|
||||
: null !== i.querySelector("video") &&
|
||||
i
|
||||
.querySelector("video")
|
||||
.setAttribute("src", n.getAttribute("data-video"))),
|
||||
n.addEventListener("click", function (e) {
|
||||
let t;
|
||||
e.preventDefault(),
|
||||
n.hasAttribute("aria-controls") &&
|
||||
(t = i) &&
|
||||
(document.body.classList.add("modal-is-active"),
|
||||
t.classList.add("is-active"));
|
||||
}));
|
||||
}
|
||||
document.addEventListener("click", function (e) {
|
||||
(e.target.classList.contains("modal") ||
|
||||
e.target.classList.contains("modal-close-trigger")) &&
|
||||
(e.preventDefault(), n());
|
||||
}),
|
||||
document.addEventListener("keydown", function (e) {
|
||||
27 === (e || window.event).keyCode && n();
|
||||
});
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
const e = document.getElementById("pricing-toggle");
|
||||
|
||||
function t() {
|
||||
const t = document.getElementsByClassName("pricing-switchable");
|
||||
if (e.checked)
|
||||
for (let e = 0; e < t.length; e++)
|
||||
t[e].innerHTML = t[e].getAttribute("data-pricing-yearly");
|
||||
else
|
||||
for (let e = 0; e < t.length; e++)
|
||||
t[e].innerHTML = t[e].getAttribute("data-pricing-monthly");
|
||||
}
|
||||
|
||||
e && (window.addEventListener("load", t), e.addEventListener("change", t));
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
const e = document.querySelectorAll("[class*=reveal-]");
|
||||
let t = window.innerHeight;
|
||||
|
||||
function n(e, t) {
|
||||
let n = 0;
|
||||
return function () {
|
||||
let i = new Date().getTime();
|
||||
if (!(i - n < e)) return (n = i), t.apply(void 0, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
function i() {
|
||||
let n;
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
let s = e[i],
|
||||
a = s.getAttribute("data-reveal-delay"),
|
||||
l = s.getAttribute("data-reveal-offset")
|
||||
? s.getAttribute("data-reveal-offset")
|
||||
: "200",
|
||||
c = s.getAttribute("data-reveal-container")
|
||||
? s.closest(s.getAttribute("data-reveal-container"))
|
||||
: s;
|
||||
(n = l),
|
||||
c.getBoundingClientRect().top <= t - n &&
|
||||
!s.classList.contains("is-revealed") &&
|
||||
(a && 0 !== a
|
||||
? setTimeout(function () {
|
||||
s.classList.add("is-revealed");
|
||||
}, a)
|
||||
: s.classList.add("is-revealed"));
|
||||
}
|
||||
!(function () {
|
||||
if (
|
||||
e.length >
|
||||
document.querySelectorAll("[class*=reveal-].is-revealed").length
|
||||
)
|
||||
return;
|
||||
window.removeEventListener("load", i),
|
||||
window.removeEventListener("scroll", s),
|
||||
window.removeEventListener("resize", a);
|
||||
})();
|
||||
}
|
||||
|
||||
function s() {
|
||||
n(30, i());
|
||||
}
|
||||
|
||||
function a() {
|
||||
(t = window.innerHeight), n(30, i());
|
||||
}
|
||||
|
||||
e.length > 0 &&
|
||||
document.body.classList.contains("has-animations") &&
|
||||
(window.addEventListener("load", i),
|
||||
window.addEventListener("scroll", s),
|
||||
window.addEventListener("resize", a));
|
||||
})(),
|
||||
(function () {
|
||||
"use strict";
|
||||
const e = document.getElementsByClassName("smooth-scroll"),
|
||||
t = (e, n, i, s, a) => {
|
||||
const l = n - e;
|
||||
let c = l / i;
|
||||
const o = (function (e) {
|
||||
return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
|
||||
})((c = Math.min(c, 1)));
|
||||
window.scroll(0, a + s * o),
|
||||
l < i &&
|
||||
window.requestAnimationFrame((n) => {
|
||||
const l = n || new Date().getTime();
|
||||
t(e, l, i, s, a);
|
||||
});
|
||||
};
|
||||
if (e.length > 0)
|
||||
for (let n = 0; n < e.length; n++) {
|
||||
e[n].addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const n = e.target.closest(".smooth-scroll"),
|
||||
i = n.href.split("#")[1],
|
||||
s = document.getElementById(i),
|
||||
a = n.getAttribute("data-duration") || 1e3;
|
||||
s &&
|
||||
window.requestAnimationFrame((e) => {
|
||||
const n = e || new Date().getTime(),
|
||||
i = n,
|
||||
l = window.pageYOffset,
|
||||
c = s.getBoundingClientRect().top;
|
||||
t(i, n, a, c, l);
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
const s = e[i],
|
||||
a = s.parentNode,
|
||||
l = s.nextElementSibling;
|
||||
a.classList.contains('is-active') && t(a, l),
|
||||
s.addEventListener('click', function () {
|
||||
a.classList.contains('is-active') ? n(a, l) : t(a, l);
|
||||
});
|
||||
}
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
let e = {
|
||||
touchStartX: 0,
|
||||
touchEndX: 0,
|
||||
minSwipePixels: 30,
|
||||
detectionZone: void 0,
|
||||
swipeCallback: function () {},
|
||||
init: function (t, n) {
|
||||
(e.swipeCallback = n),
|
||||
t.addEventListener(
|
||||
'touchstart',
|
||||
function (t) {
|
||||
e.touchStartX = t.changedTouches[0].screenX;
|
||||
},
|
||||
!1,
|
||||
),
|
||||
t.addEventListener(
|
||||
'touchend',
|
||||
function (t) {
|
||||
(e.touchEndX = t.changedTouches[0].screenX), e.handleSwipeGesture();
|
||||
},
|
||||
!1,
|
||||
);
|
||||
},
|
||||
handleSwipeGesture: function () {
|
||||
let t, n;
|
||||
e.touchEndX <= e.touchStartX && ((n = e.touchStartX - e.touchEndX), (t = 'left')),
|
||||
e.touchEndX >= e.touchStartX && ((n = e.touchEndX - e.touchStartX), (t = 'right')),
|
||||
n > e.minSwipePixels && 'undefined' !== t && e.swipe(t, n);
|
||||
},
|
||||
swipe: function (t, n) {
|
||||
let i = {};
|
||||
(i.direction = t), (i.movedPixels = n), e.swipeCallback(i);
|
||||
},
|
||||
};
|
||||
const t = document.getElementsByClassName('carousel-items');
|
||||
|
||||
function n(e, t) {
|
||||
void 0 === t && (t = 'next');
|
||||
let n = e.getElementsByClassName('carousel-item is-active')[0],
|
||||
i = 'next' === t ? n.nextElementSibling : n.previousElementSibling,
|
||||
s = n.getAttribute('data-carousel'),
|
||||
a = e.parentNode.getElementsByClassName('carousel-bullet')[s],
|
||||
l = 'next' === t ? a.nextElementSibling : a.previousElementSibling;
|
||||
n.classList.remove('is-active'),
|
||||
a.classList.remove('is-active'),
|
||||
i
|
||||
? (i.classList.add('is-active'), l.classList.add('is-active'))
|
||||
: 'next' === t
|
||||
? (e.firstElementChild.classList.add('is-active'),
|
||||
e.parentNode
|
||||
.getElementsByClassName('carousel-bullets')[0]
|
||||
.firstElementChild.classList.add('is-active'))
|
||||
: (e.lastElementChild.classList.add('is-active'),
|
||||
e.parentNode
|
||||
.getElementsByClassName('carousel-bullets')[0]
|
||||
.lastElementChild.classList.add('is-active'));
|
||||
}
|
||||
|
||||
function i(e, t) {
|
||||
let n,
|
||||
i = 0;
|
||||
for (let e = 0; e < t.length; e++)
|
||||
(t[0].parentNode.style.minHeight = i + 'px'),
|
||||
t[e].classList.add('is-loading'),
|
||||
(n = t[e].offsetHeight),
|
||||
t[e].classList.remove('is-loading'),
|
||||
n > i && (i = n);
|
||||
t[0].parentNode.style.minHeight = i + 'px';
|
||||
}
|
||||
|
||||
function s(e) {
|
||||
e && clearInterval(e);
|
||||
}
|
||||
|
||||
if (t.length > 0)
|
||||
for (let a = 0; a < t.length; a++) {
|
||||
let l = t[a],
|
||||
c = l.getElementsByClassName('carousel-item'),
|
||||
o = 0,
|
||||
r = l.getAttribute('data-autorotate');
|
||||
const d = document.createElement('div');
|
||||
(d.className = 'carousel-bullets'), l.parentNode.insertBefore(d, l.nextSibling);
|
||||
for (let e = 0; e < c.length; e++) {
|
||||
c[e].setAttribute('data-carousel', e), c[e].classList.contains('is-active') && (o = e);
|
||||
let t = document.createElement('button');
|
||||
(t.className = 'carousel-bullet'),
|
||||
t.setAttribute('data-bullet', e),
|
||||
l.parentNode.getElementsByClassName('carousel-bullets')[0].appendChild(t);
|
||||
}
|
||||
c[o].classList.add('is-active');
|
||||
let u = l.parentNode.getElementsByClassName('carousel-bullet');
|
||||
u[o].classList.add('is-active'),
|
||||
i(0, c),
|
||||
window.addEventListener('resize', function () {
|
||||
i(0, c);
|
||||
});
|
||||
let m = !1;
|
||||
r &&
|
||||
(m = setInterval(function () {
|
||||
n(l, 'next');
|
||||
}, r));
|
||||
for (let e = 0; e < u.length; e++) {
|
||||
let t = u[e];
|
||||
t.addEventListener('click', function (e) {
|
||||
if ((e.preventDefault(), t.classList.contains('is-active'))) return;
|
||||
for (let e = 0; e < u.length; e++) u[e].classList.remove('is-active');
|
||||
for (let e = 0; e < c.length; e++) c[e].classList.remove('is-active');
|
||||
let n = this.getAttribute('data-bullet');
|
||||
c[n].classList.add('is-active'), this.classList.add('is-active'), s(m);
|
||||
});
|
||||
}
|
||||
e.init(l, function (e) {
|
||||
'left' === e.direction ? n(l, 'next') : 'right' === e.direction && n(l, 'prev'), s(m);
|
||||
});
|
||||
}
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
document.documentElement.classList.remove('no-js'),
|
||||
document.documentElement.classList.add('js'),
|
||||
window.addEventListener('load', function () {
|
||||
document.body.classList.add('is-loaded');
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
const e = document.getElementById('header-nav-toggle'),
|
||||
t = document.getElementById('header-nav');
|
||||
e &&
|
||||
(e.addEventListener('click', function () {
|
||||
document.body.classList.toggle('off-nav-is-active'),
|
||||
t.classList.toggle('is-active'),
|
||||
t.style.maxHeight ? (t.style.maxHeight = null) : (t.style.maxHeight = t.scrollHeight + 'px'),
|
||||
'true' === this.getAttribute('aria-expanded')
|
||||
? this.setAttribute('aria-expanded', 'false')
|
||||
: this.setAttribute('aria-expanded', 'true');
|
||||
}),
|
||||
document.addEventListener('click', function (n) {
|
||||
n.target === t ||
|
||||
n.target === e ||
|
||||
t.contains(n.target) ||
|
||||
(document.body.classList.remove('off-nav-is-active'),
|
||||
t.classList.remove('is-active'),
|
||||
(t.style.maxHeight = null),
|
||||
e.setAttribute('aria-expanded', 'false'));
|
||||
}));
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
const e = document.getElementsByClassName('modal'),
|
||||
t = document.getElementsByClassName('modal-trigger');
|
||||
|
||||
function n() {
|
||||
document.body.classList.remove('modal-is-active');
|
||||
for (let t = 0; t < e.length; t++) e[t].classList.remove('is-active');
|
||||
}
|
||||
|
||||
if (e.length > 0 && t.length > 0)
|
||||
for (let e = 0; e < t.length; e++) {
|
||||
let n = t[e],
|
||||
i = document.getElementById(n.getAttribute('aria-controls'));
|
||||
i &&
|
||||
(n.hasAttribute('data-video') &&
|
||||
(null !== i.querySelector('iframe')
|
||||
? i.querySelector('iframe').setAttribute('src', n.getAttribute('data-video'))
|
||||
: null !== i.querySelector('video') &&
|
||||
i.querySelector('video').setAttribute('src', n.getAttribute('data-video'))),
|
||||
n.addEventListener('click', function (e) {
|
||||
let t;
|
||||
e.preventDefault(),
|
||||
n.hasAttribute('aria-controls') &&
|
||||
(t = i) &&
|
||||
(document.body.classList.add('modal-is-active'), t.classList.add('is-active'));
|
||||
}));
|
||||
}
|
||||
document.addEventListener('click', function (e) {
|
||||
(e.target.classList.contains('modal') || e.target.classList.contains('modal-close-trigger')) &&
|
||||
(e.preventDefault(), n());
|
||||
}),
|
||||
document.addEventListener('keydown', function (e) {
|
||||
27 === (e || window.event).keyCode && n();
|
||||
});
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
const e = document.getElementById('pricing-toggle');
|
||||
|
||||
function t() {
|
||||
const t = document.getElementsByClassName('pricing-switchable');
|
||||
if (e.checked) for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute('data-pricing-yearly');
|
||||
else for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute('data-pricing-monthly');
|
||||
}
|
||||
|
||||
e && (window.addEventListener('load', t), e.addEventListener('change', t));
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
const e = document.querySelectorAll('[class*=reveal-]');
|
||||
let t = window.innerHeight;
|
||||
|
||||
function n(e, t) {
|
||||
let n = 0;
|
||||
return function () {
|
||||
let i = new Date().getTime();
|
||||
if (!(i - n < e)) return (n = i), t.apply(void 0, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
function i() {
|
||||
let n;
|
||||
for (let i = 0; i < e.length; i++) {
|
||||
let s = e[i],
|
||||
a = s.getAttribute('data-reveal-delay'),
|
||||
l = s.getAttribute('data-reveal-offset') ? s.getAttribute('data-reveal-offset') : '200',
|
||||
c = s.getAttribute('data-reveal-container')
|
||||
? s.closest(s.getAttribute('data-reveal-container'))
|
||||
: s;
|
||||
(n = l),
|
||||
c.getBoundingClientRect().top <= t - n &&
|
||||
!s.classList.contains('is-revealed') &&
|
||||
(a && 0 !== a
|
||||
? setTimeout(function () {
|
||||
s.classList.add('is-revealed');
|
||||
}, a)
|
||||
: s.classList.add('is-revealed'));
|
||||
}
|
||||
!(function () {
|
||||
if (e.length > document.querySelectorAll('[class*=reveal-].is-revealed').length) return;
|
||||
window.removeEventListener('load', i),
|
||||
window.removeEventListener('scroll', s),
|
||||
window.removeEventListener('resize', a);
|
||||
})();
|
||||
}
|
||||
|
||||
function s() {
|
||||
n(30, i());
|
||||
}
|
||||
|
||||
function a() {
|
||||
(t = window.innerHeight), n(30, i());
|
||||
}
|
||||
|
||||
e.length > 0 &&
|
||||
document.body.classList.contains('has-animations') &&
|
||||
(window.addEventListener('load', i),
|
||||
window.addEventListener('scroll', s),
|
||||
window.addEventListener('resize', a));
|
||||
})(),
|
||||
(function () {
|
||||
'use strict';
|
||||
const e = document.getElementsByClassName('smooth-scroll'),
|
||||
t = (e, n, i, s, a) => {
|
||||
const l = n - e;
|
||||
let c = l / i;
|
||||
const o = (function (e) {
|
||||
return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
|
||||
})((c = Math.min(c, 1)));
|
||||
window.scroll(0, a + s * o),
|
||||
l < i &&
|
||||
window.requestAnimationFrame((n) => {
|
||||
const l = n || new Date().getTime();
|
||||
t(e, l, i, s, a);
|
||||
});
|
||||
};
|
||||
if (e.length > 0)
|
||||
for (let n = 0; n < e.length; n++) {
|
||||
e[n].addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const n = e.target.closest('.smooth-scroll'),
|
||||
i = n.href.split('#')[1],
|
||||
s = document.getElementById(i),
|
||||
a = n.getAttribute('data-duration') || 1e3;
|
||||
s &&
|
||||
window.requestAnimationFrame((e) => {
|
||||
const n = e || new Date().getTime(),
|
||||
i = n,
|
||||
l = window.pageYOffset,
|
||||
c = s.getBoundingClientRect().top;
|
||||
t(i, n, a, c, l);
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
+126
-126
@@ -1,130 +1,130 @@
|
||||
let adjectives = [
|
||||
"small",
|
||||
"big",
|
||||
"large",
|
||||
"smelly",
|
||||
"new",
|
||||
"happy",
|
||||
"shiny",
|
||||
"old",
|
||||
"clean",
|
||||
"nice",
|
||||
"bad",
|
||||
"cool",
|
||||
"hot",
|
||||
"cold",
|
||||
"warm",
|
||||
"hungry",
|
||||
"slow",
|
||||
"fast",
|
||||
"red",
|
||||
"white",
|
||||
"black",
|
||||
"blue",
|
||||
"green",
|
||||
"basic",
|
||||
"strong",
|
||||
"cute",
|
||||
"poor",
|
||||
"nice",
|
||||
"huge",
|
||||
"rare",
|
||||
"lucky",
|
||||
"weak",
|
||||
"tall",
|
||||
"short",
|
||||
"tiny",
|
||||
"great",
|
||||
"long",
|
||||
"single",
|
||||
"rich",
|
||||
"young",
|
||||
"dirty",
|
||||
"fresh",
|
||||
"brown",
|
||||
"dark",
|
||||
"crazy",
|
||||
"sad",
|
||||
"loud",
|
||||
"brave",
|
||||
"calm",
|
||||
"silly",
|
||||
"smart",
|
||||
'small',
|
||||
'big',
|
||||
'large',
|
||||
'smelly',
|
||||
'new',
|
||||
'happy',
|
||||
'shiny',
|
||||
'old',
|
||||
'clean',
|
||||
'nice',
|
||||
'bad',
|
||||
'cool',
|
||||
'hot',
|
||||
'cold',
|
||||
'warm',
|
||||
'hungry',
|
||||
'slow',
|
||||
'fast',
|
||||
'red',
|
||||
'white',
|
||||
'black',
|
||||
'blue',
|
||||
'green',
|
||||
'basic',
|
||||
'strong',
|
||||
'cute',
|
||||
'poor',
|
||||
'nice',
|
||||
'huge',
|
||||
'rare',
|
||||
'lucky',
|
||||
'weak',
|
||||
'tall',
|
||||
'short',
|
||||
'tiny',
|
||||
'great',
|
||||
'long',
|
||||
'single',
|
||||
'rich',
|
||||
'young',
|
||||
'dirty',
|
||||
'fresh',
|
||||
'brown',
|
||||
'dark',
|
||||
'crazy',
|
||||
'sad',
|
||||
'loud',
|
||||
'brave',
|
||||
'calm',
|
||||
'silly',
|
||||
'smart',
|
||||
];
|
||||
|
||||
let nouns = [
|
||||
"dog",
|
||||
"bat",
|
||||
"wrench",
|
||||
"apple",
|
||||
"pear",
|
||||
"ghost",
|
||||
"cat",
|
||||
"wolf",
|
||||
"squid",
|
||||
"goat",
|
||||
"snail",
|
||||
"hat",
|
||||
"sock",
|
||||
"plum",
|
||||
"bear",
|
||||
"snake",
|
||||
"turtle",
|
||||
"horse",
|
||||
"spoon",
|
||||
"fork",
|
||||
"spider",
|
||||
"tree",
|
||||
"chair",
|
||||
"table",
|
||||
"couch",
|
||||
"towel",
|
||||
"panda",
|
||||
"bread",
|
||||
"grape",
|
||||
"cake",
|
||||
"brick",
|
||||
"rat",
|
||||
"mouse",
|
||||
"bird",
|
||||
"oven",
|
||||
"phone",
|
||||
"photo",
|
||||
"frog",
|
||||
"bear",
|
||||
"camel",
|
||||
"sheep",
|
||||
"shark",
|
||||
"tiger",
|
||||
"zebra",
|
||||
"duck",
|
||||
"eagle",
|
||||
"fish",
|
||||
"kitten",
|
||||
"lobster",
|
||||
"monkey",
|
||||
"owl",
|
||||
"puppy",
|
||||
"pig",
|
||||
"rabbit",
|
||||
"fox",
|
||||
"whale",
|
||||
"beaver",
|
||||
"gorilla",
|
||||
"lizard",
|
||||
"parrot",
|
||||
"sloth",
|
||||
"swan",
|
||||
'dog',
|
||||
'bat',
|
||||
'wrench',
|
||||
'apple',
|
||||
'pear',
|
||||
'ghost',
|
||||
'cat',
|
||||
'wolf',
|
||||
'squid',
|
||||
'goat',
|
||||
'snail',
|
||||
'hat',
|
||||
'sock',
|
||||
'plum',
|
||||
'bear',
|
||||
'snake',
|
||||
'turtle',
|
||||
'horse',
|
||||
'spoon',
|
||||
'fork',
|
||||
'spider',
|
||||
'tree',
|
||||
'chair',
|
||||
'table',
|
||||
'couch',
|
||||
'towel',
|
||||
'panda',
|
||||
'bread',
|
||||
'grape',
|
||||
'cake',
|
||||
'brick',
|
||||
'rat',
|
||||
'mouse',
|
||||
'bird',
|
||||
'oven',
|
||||
'phone',
|
||||
'photo',
|
||||
'frog',
|
||||
'bear',
|
||||
'camel',
|
||||
'sheep',
|
||||
'shark',
|
||||
'tiger',
|
||||
'zebra',
|
||||
'duck',
|
||||
'eagle',
|
||||
'fish',
|
||||
'kitten',
|
||||
'lobster',
|
||||
'monkey',
|
||||
'owl',
|
||||
'puppy',
|
||||
'pig',
|
||||
'rabbit',
|
||||
'fox',
|
||||
'whale',
|
||||
'beaver',
|
||||
'gorilla',
|
||||
'lizard',
|
||||
'parrot',
|
||||
'sloth',
|
||||
'swan',
|
||||
];
|
||||
|
||||
function getRandomNumber(length) {
|
||||
let result = "";
|
||||
let characters = "0123456789";
|
||||
let charactersLength = characters.length;
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
let result = '';
|
||||
let characters = '0123456789';
|
||||
let charactersLength = characters.length;
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
let adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
|
||||
@@ -132,7 +132,7 @@ let noun = nouns[Math.floor(Math.random() * nouns.length)];
|
||||
let num = getRandomNumber(5);
|
||||
noun = noun.charAt(0).toUpperCase() + noun.substring(1);
|
||||
adjective = adjective.charAt(0).toUpperCase() + adjective.substring(1);
|
||||
document.getElementById("roomName").value = "";
|
||||
document.getElementById('roomName').value = '';
|
||||
|
||||
// Typing Effect
|
||||
|
||||
@@ -143,9 +143,9 @@ let speed = 100;
|
||||
typeWriter();
|
||||
|
||||
function typeWriter() {
|
||||
if (i < txt.length) {
|
||||
document.getElementById("roomName").value += txt.charAt(i);
|
||||
i++;
|
||||
setTimeout(typeWriter, speed);
|
||||
}
|
||||
if (i < txt.length) {
|
||||
document.getElementById('roomName').value += txt.charAt(i);
|
||||
i++;
|
||||
setTimeout(typeWriter, speed);
|
||||
}
|
||||
}
|
||||
|
||||
+435
-477
@@ -1,482 +1,440 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag("config", "G-3XM60XK9RQ");
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk a Free Secure Video Calls, Chat & Screen Sharing.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<meta
|
||||
name="description"
|
||||
content="MiroTalk powered by WebRTC, Real-time Simple Secure Fast video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, real-time communications, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
gtag('config', 'G-3XM60XK9RQ');
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk a Free Secure Video Calls, Chat & Screen Sharing.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<meta
|
||||
name="description"
|
||||
content="MiroTalk powered by WebRTC, Real-time Simple Secure Fast video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, real-time communications, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div class="hero-content split-item-content center-content-mobile">
|
||||
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
|
||||
MiroTalk<br />Free browser based real-time video calls.<br />
|
||||
Simple, Secure, Fast.
|
||||
</h1>
|
||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
|
||||
Start your next video call with a single click. No download, plug-in or
|
||||
login required. Just get straight to talking, messaging and sharing your
|
||||
screen.
|
||||
</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
href="/newcall"
|
||||
>Try now</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-tiles section center-content">
|
||||
<div class="container">
|
||||
<div class="features-tiles-inner section-inner has-top-divider">
|
||||
<div class="section-header">
|
||||
<div class="container-xs reveal-from-bottom" data-reveal-delay="650">
|
||||
<h2 class="mt-0 mb-16">
|
||||
Unlimited number of conference rooms without call time limitation
|
||||
</h2>
|
||||
<p class="m-0">
|
||||
MiroTalk is built radically different. We left behind slow bulky servers, opting
|
||||
for peer to peer calling. We engineered a platform with maximum video quality
|
||||
lowest latency that makes your calls crystal clear.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-wrap">
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-02.svg"
|
||||
alt="Screen Sharing"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Screen Sharing</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Share your screen, application window, present your documents, slides
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-04.svg"
|
||||
alt="WebCam Streaming"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">WebCam Streaming</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Having the webcam on, allows participants to make a deeper connection
|
||||
with you. Up to 4k resolution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-01.svg"
|
||||
alt="Chat Room"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Chat Room</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Chat with others in meeting, either public chat or private, save the
|
||||
meeting messages. Integrated emoji picker to show your feeling.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-03.svg"
|
||||
alt="Meeting Recording"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Meeting Recording</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Record your Screen, WebCam and Audio. Save it for use it in future or to
|
||||
share with others.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-06.svg"
|
||||
alt="Interactive Whiteboard"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Interactive Whiteboard</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Simple collaborative whiteboard to draw and explain your concepts to the
|
||||
other participants in the meeting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-02.svg"
|
||||
alt="File Sharing"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">File Sharing</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Share any types of files to all participants in the meeting, in total
|
||||
security, thanks to Datagram Transport Layer Security (DTLS).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-05.svg"
|
||||
alt="Total Privacy"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Total Privacy</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Data stays between you and your participants. MiroTalk don't collect or
|
||||
share personal information. It's built for privacy first.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-05.svg"
|
||||
alt="Maximum Security"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Maximum Security</h4>
|
||||
<p class="m-0 text-sm">
|
||||
End to end state of the art encryption means your participants are
|
||||
exactly that. Your calls.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team section center-content">
|
||||
<div class="container">
|
||||
<div class="team-inner section-inner has-top-divider">
|
||||
<div class="section-header center-content reveal-from-bottom">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">Supported Browsers</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiles-wrap">
|
||||
<div class="tiles-item reveal-from-bottom">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="team-item-header">
|
||||
<div class="team-item-image mb-24">
|
||||
<img
|
||||
src="images/browsers.png"
|
||||
alt="Supported Browsers"
|
||||
width="auto"
|
||||
height="auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<h5 class="team-item-name mt-0 mb-4">
|
||||
Chrome, Edge, Firefox, Opera, Safari, Brave & more...
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team section center-content">
|
||||
<div class="container">
|
||||
<div class="team-inner section-inner has-top-divider">
|
||||
<div class="section-header center-content reveal-from-bottom">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">Meet the team</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-wrap">
|
||||
<!-- Author -->
|
||||
<div class="tiles-item reveal-from-bottom">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="team-item-header">
|
||||
<div class="team-item-image mb-24">
|
||||
<img
|
||||
src="images/miroslav-pejic.png"
|
||||
alt="Team member author"
|
||||
width="180"
|
||||
height="180"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>
|
||||
<h5 class="team-item-name mt-0 mb-4">Miroslav Pejic</h5>
|
||||
</a>
|
||||
<div class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8">
|
||||
Full Stack Developer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-inner has-top-divider">
|
||||
<div class="container-xs">
|
||||
<div class="section-header center-content">
|
||||
<h2 class="m-0">Try an easier, more secure way of calling.</h2>
|
||||
</div>
|
||||
<div class="center-content">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);
|
||||
"
|
||||
href="/newcall"
|
||||
>Try now</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalk">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2021 MiroTalk, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div
|
||||
class="hero-content split-item-content center-content-mobile"
|
||||
>
|
||||
<h1
|
||||
class="mt-0 mb-16 reveal-from-bottom"
|
||||
data-reveal-delay="150"
|
||||
>
|
||||
MiroTalk<br />Free browser based real-time video calls.<br />
|
||||
Simple, Secure, Fast.
|
||||
</h1>
|
||||
<p
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
>
|
||||
Start your next video call with a single click. No
|
||||
download, plug-in or login required. Just get straight to
|
||||
talking, messaging and sharing your screen.
|
||||
</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
href="/newcall"
|
||||
>Try now</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-tiles section center-content">
|
||||
<div class="container">
|
||||
<div class="features-tiles-inner section-inner has-top-divider">
|
||||
<div class="section-header">
|
||||
<div
|
||||
class="container-xs reveal-from-bottom"
|
||||
data-reveal-delay="650"
|
||||
>
|
||||
<h2 class="mt-0 mb-16">
|
||||
Unlimited number of conference rooms without call time
|
||||
limitation
|
||||
</h2>
|
||||
<p class="m-0">
|
||||
MiroTalk is built radically different. We left behind slow
|
||||
bulky servers, opting for peer to peer calling. We
|
||||
engineered a platform with maximum video quality lowest
|
||||
latency that makes your calls crystal clear.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-wrap">
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-02.svg"
|
||||
alt="Screen Sharing"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Screen Sharing</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Share your screen, application window, present your
|
||||
documents, slides and more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-04.svg"
|
||||
alt="WebCam Streaming"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">WebCam Streaming</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Having the webcam on, allows participants to make a
|
||||
deeper connection with you. Up to 4k resolution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-01.svg"
|
||||
alt="Chat Room"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Chat Room</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Chat with others in meeting, either public chat or
|
||||
private, save the meeting messages. Integrated emoji
|
||||
picker to show your feeling.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-03.svg"
|
||||
alt="Meeting Recording"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Meeting Recording</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Record your Screen, WebCam and Audio. Save it for use it
|
||||
in future or to share with others.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-06.svg"
|
||||
alt="Interactive Whiteboard"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Interactive Whiteboard</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Simple collaborative whiteboard to draw and explain your
|
||||
concepts to the other participants in the meeting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-02.svg"
|
||||
alt="File Sharing"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">File Sharing</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Share any types of files to all participants in the
|
||||
meeting, in total security, thanks to Datagram Transport
|
||||
Layer Security (DTLS).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-right">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-05.svg"
|
||||
alt="Total Privacy"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Total Privacy</h4>
|
||||
<p class="m-0 text-sm">
|
||||
Data stays between you and your participants. MiroTalk
|
||||
don't collect or share personal information. It's built
|
||||
for privacy first.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-item reveal-from-left">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="features-tiles-item-header">
|
||||
<div class="features-tiles-item-image mb-16">
|
||||
<img
|
||||
src="images/feature-tile-icon-05.svg"
|
||||
alt="Maximum Security"
|
||||
width="72"
|
||||
height="72"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-tiles-item-content">
|
||||
<h4 class="mt-0 mb-8">Maximum Security</h4>
|
||||
<p class="m-0 text-sm">
|
||||
End to end state of the art encryption means your
|
||||
participants are exactly that. Your calls.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team section center-content">
|
||||
<div class="container">
|
||||
<div class="team-inner section-inner has-top-divider">
|
||||
<div class="section-header center-content reveal-from-bottom">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">Supported Browsers</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiles-wrap">
|
||||
<div class="tiles-item reveal-from-bottom">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="team-item-header">
|
||||
<div class="team-item-image mb-24">
|
||||
<img
|
||||
src="images/browsers.png"
|
||||
alt="Supported Browsers"
|
||||
width="auto"
|
||||
height="auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<h5 class="team-item-name mt-0 mb-4">
|
||||
Chrome, Edge, Firefox, Opera, Safari, Brave & more...
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team section center-content">
|
||||
<div class="container">
|
||||
<div class="team-inner section-inner has-top-divider">
|
||||
<div class="section-header center-content reveal-from-bottom">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">Meet the team</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-wrap">
|
||||
<!-- Author -->
|
||||
<div class="tiles-item reveal-from-bottom">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="team-item-header">
|
||||
<div class="team-item-image mb-24">
|
||||
<img
|
||||
src="images/miroslav-pejic.png"
|
||||
alt="Team member author"
|
||||
width="180"
|
||||
height="180"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>
|
||||
<h5 class="team-item-name mt-0 mb-4">Miroslav Pejic</h5>
|
||||
</a>
|
||||
<div
|
||||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||||
>
|
||||
Full Stack Developer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-inner has-top-divider">
|
||||
<div class="container-xs">
|
||||
<div class="section-header center-content">
|
||||
<h2 class="m-0">
|
||||
Try an easier, more secure way of calling.
|
||||
</h2>
|
||||
</div>
|
||||
<div class="center-content">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
href="/newcall"
|
||||
>Try now</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/miroslavpejic85/mirotalk"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||
>
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">
|
||||
© 2021 MiroTalk, all rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+146
-178
@@ -1,183 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag("config", "G-3XM60XK9RQ");
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk ~ Create your Room name and start the new call.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="stylesheet" href="css/newcall.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
gtag('config', 'G-3XM60XK9RQ');
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk ~ Create your Room name and start the new call.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="stylesheet" href="css/newcall.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div class="hero-content split-item-content center-content-mobile">
|
||||
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
|
||||
Pick name. <br />
|
||||
Share URL. <br />
|
||||
Start conference.
|
||||
</h1>
|
||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
|
||||
Each room has its own disposable URL. Just pick a room name and share your
|
||||
custom URL. It's really that easy.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta section center-content-mobile reveal-from-bottom">
|
||||
<div class="container">
|
||||
<div class="cta-inner section-inner cta-split">
|
||||
<div class="cta-slogan">
|
||||
<h3 class="m-0">
|
||||
Pick a room name.<br />
|
||||
How about this one?
|
||||
</h3>
|
||||
</div>
|
||||
<div class="cta-action">
|
||||
<div class="mb-24">
|
||||
<label class="form-label screen-reader" for="roomName">mirotalk</label>
|
||||
<div class="form-group-desktop">
|
||||
<input class="form-input" type="text" id="roomName" value="mirotalk" />
|
||||
<button
|
||||
class="button button-primary pulse"
|
||||
onclick="{window.location.href = '/join/' + document.getElementById('roomName').value}"
|
||||
>
|
||||
Join to room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalk">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2021 MiroTalk, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div
|
||||
class="hero-content split-item-content center-content-mobile"
|
||||
>
|
||||
<h1
|
||||
class="mt-0 mb-16 reveal-from-bottom"
|
||||
data-reveal-delay="150"
|
||||
>
|
||||
Pick name. <br />
|
||||
Share URL. <br />
|
||||
Start conference.
|
||||
</h1>
|
||||
<p
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
>
|
||||
Each room has its own disposable URL. Just pick a room
|
||||
name and share your custom URL. It's really that easy.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta section center-content-mobile reveal-from-bottom">
|
||||
<div class="container">
|
||||
<div class="cta-inner section-inner cta-split">
|
||||
<div class="cta-slogan">
|
||||
<h3 class="m-0">
|
||||
Pick a room name.<br />
|
||||
How about this one?
|
||||
</h3>
|
||||
</div>
|
||||
<div class="cta-action">
|
||||
<div class="mb-24">
|
||||
<label class="form-label screen-reader" for="roomName"
|
||||
>mirotalk</label
|
||||
>
|
||||
<div class="form-group-desktop">
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
id="roomName"
|
||||
value="mirotalk"
|
||||
/>
|
||||
<button
|
||||
class="button button-primary pulse"
|
||||
onclick="{window.location.href = '/join/' + document.getElementById('roomName').value}"
|
||||
>
|
||||
Join to room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/miroslavpejic85/mirotalk"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||
>
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">
|
||||
© 2021 MiroTalk, all rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
<script src="js/newroom.js"></script>
|
||||
</body>
|
||||
<script src="js/landing.js"></script>
|
||||
<script src="js/newroom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+141
-168
@@ -1,177 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag("config", "G-3XM60XK9RQ");
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk ~ Allow Video and Audio access to join in the Room.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div
|
||||
class="hero-content split-item-content center-content-mobile"
|
||||
>
|
||||
<h1
|
||||
class="mt-0 mb-16 reveal-from-bottom"
|
||||
data-reveal-delay="150"
|
||||
>
|
||||
Access denied.
|
||||
</h1>
|
||||
<p
|
||||
id="getUserMediaError"
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
></p>
|
||||
<p
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
>
|
||||
This app will not work without camera/microphone access.
|
||||
Please Try again and allow it.
|
||||
</p>
|
||||
<script>
|
||||
let qs = new URLSearchParams(window.location.search);
|
||||
let roomId = qs.get("roomId");
|
||||
let getUserMediaError = qs.get("getUserMediaError");
|
||||
console.log("Allow Camera && Audio", {
|
||||
roomId: roomId,
|
||||
getUserMediaError: getUserMediaError,
|
||||
});
|
||||
// print getUserMedia error
|
||||
document.getElementById(
|
||||
"getUserMediaError"
|
||||
).innerHTML = getUserMediaError;
|
||||
</script>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<button
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
onclick="roomId ? window.location.href = '/join/' + roomId : window.location.href = '/newcall';"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
gtag('config', 'G-3XM60XK9RQ');
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk ~ Allow Video and Audio access to join in the Room.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div class="hero-content split-item-content center-content-mobile">
|
||||
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
|
||||
Access denied.
|
||||
</h1>
|
||||
<p
|
||||
id="getUserMediaError"
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
></p>
|
||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
|
||||
This app will not work without camera/microphone access. Please Try again
|
||||
and allow it.
|
||||
</p>
|
||||
<script>
|
||||
let qs = new URLSearchParams(window.location.search);
|
||||
let roomId = qs.get('roomId');
|
||||
let getUserMediaError = qs.get('getUserMediaError');
|
||||
console.log('Allow Camera && Audio', {
|
||||
roomId: roomId,
|
||||
getUserMediaError: getUserMediaError,
|
||||
});
|
||||
// print getUserMedia error
|
||||
document.getElementById('getUserMediaError').innerHTML = getUserMediaError;
|
||||
</script>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<button
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
onclick="roomId ? window.location.href = '/join/' + roomId : window.location.href = '/newcall';"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/miroslavpejic85/mirotalk"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalk">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2021 MiroTalk, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||
>
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">
|
||||
© 2021 MiroTalk, all rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+180
-209
@@ -1,218 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3XM60XK9RQ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag("config", "G-3XM60XK9RQ");
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk ~ privacy policy.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<meta
|
||||
name="description"
|
||||
content="MiroTalk powered by WebRTC, Real-time secure video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, RTCICECandidates, RTCSessionDescription, real-time communications, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply
|
||||
not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div
|
||||
class="hero-content split-item-content center-content-mobile"
|
||||
>
|
||||
<h1
|
||||
class="mt-0 mb-16 reveal-from-bottom"
|
||||
data-reveal-delay="150"
|
||||
>
|
||||
Privacy Policy
|
||||
</h1>
|
||||
<p
|
||||
class="mt-0 mb-32 reveal-from-bottom"
|
||||
data-reveal-delay="300"
|
||||
>
|
||||
We limit ourselves to collect the smallest amount of user
|
||||
data that we need in order to create a seamless experience
|
||||
when using <strong>MiroTalk</strong>. <br /><br />
|
||||
This data includes mainly:
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate"
|
||||
target="_blank"
|
||||
>RTCICECandidates</a
|
||||
>
|
||||
&
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription"
|
||||
target="_blank"
|
||||
>RTCSessionDescription</a
|
||||
>
|
||||
which is needed to establish the video call using WebRTC.
|
||||
RTCICECandidates, RTCSessionDescription is not stored in
|
||||
any persistent database, it's removed from the server as
|
||||
soon as the user leave the call by closing the browser
|
||||
window. The media streams are encrypted using Secure
|
||||
Real-time Transport Protocol (SRTP).
|
||||
<br /><br />
|
||||
For Chat messaging and File Sharing, we using WebRTC's
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel"
|
||||
target="_blank"
|
||||
>RTCDataChannel</a
|
||||
>
|
||||
to transfer data directly from one peer to another. With
|
||||
RTCDataChannel, all data is secured with
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Datagram_Transport_Layer_Security"
|
||||
target="_blank"
|
||||
>Datagram Transport Layer Security</a
|
||||
>
|
||||
(DTLS). DTLS is a derivative of SSL, meaning your data
|
||||
will be as secure as using any standard SSL-based
|
||||
connection.
|
||||
<br /><br />
|
||||
If you record a meeting, the recording of the meeting is
|
||||
temporarily stored on <strong>Your browser</strong>
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/Blob"
|
||||
target="_blank"
|
||||
>Blob</a
|
||||
>, then will be downloaded on Your PC/Mobile Device.
|
||||
<br /><br />
|
||||
<strong>MiroTalk</strong> is purely peer-to-peer, which
|
||||
means the user's video, audio, chat and file is not sent
|
||||
to our server at all. <br /><br />
|
||||
We use Google Analytics to track aggregated usage
|
||||
statistics in order to improve our service. The maker of
|
||||
<strong>MiroTalk</strong> has no intention of using
|
||||
personally or selling any of the above-mentioned data.
|
||||
</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
href="/newcall"
|
||||
>AGREE</a
|
||||
>
|
||||
gtag('config', 'G-3XM60XK9RQ');
|
||||
</script>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>MiroTalk ~ privacy policy.</title>
|
||||
<link rel="stylesheet" href="css/landing.css" />
|
||||
<link rel="shortcut icon" href="images/logo.svg" />
|
||||
<meta
|
||||
name="description"
|
||||
content="MiroTalk powered by WebRTC, Real-time secure video calls, chat and screen sharing capabilities in the browser, from your mobile or desktop"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, RTCICECandidates, RTCSessionDescription, real-time communications, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="MiroTalk" />
|
||||
<meta property="og:title" content="Click the link to make a call." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
|
||||
/>
|
||||
<meta property="og:image" content="/images/preview.png" />
|
||||
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
|
||||
</head>
|
||||
<body class="has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header reveal-from-top">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</header>
|
||||
<main class="site-content">
|
||||
<section class="hero section illustration-section-01">
|
||||
<div class="container">
|
||||
<div class="hero-inner section-inner">
|
||||
<div class="split-wrap invert-mobile">
|
||||
<div class="split-item">
|
||||
<div class="hero-content split-item-content center-content-mobile">
|
||||
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
|
||||
Privacy Policy
|
||||
</h1>
|
||||
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
|
||||
We limit ourselves to collect the smallest amount of user data that we need
|
||||
in order to create a seamless experience when using
|
||||
<strong>MiroTalk</strong>. <br /><br />
|
||||
This data includes mainly:
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate"
|
||||
target="_blank"
|
||||
>RTCICECandidates</a
|
||||
>
|
||||
&
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription"
|
||||
target="_blank"
|
||||
>RTCSessionDescription</a
|
||||
>
|
||||
which is needed to establish the video call using WebRTC. RTCICECandidates,
|
||||
RTCSessionDescription is not stored in any persistent database, it's removed
|
||||
from the server as soon as the user leave the call by closing the browser
|
||||
window. The media streams are encrypted using Secure Real-time Transport
|
||||
Protocol (SRTP).
|
||||
<br /><br />
|
||||
For Chat messaging and File Sharing, we using WebRTC's
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel"
|
||||
target="_blank"
|
||||
>RTCDataChannel</a
|
||||
>
|
||||
to transfer data directly from one peer to another. With RTCDataChannel, all
|
||||
data is secured with
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Datagram_Transport_Layer_Security"
|
||||
target="_blank"
|
||||
>Datagram Transport Layer Security</a
|
||||
>
|
||||
(DTLS). DTLS is a derivative of SSL, meaning your data will be as secure as
|
||||
using any standard SSL-based connection.
|
||||
<br /><br />
|
||||
If you record a meeting, the recording of the meeting is temporarily stored
|
||||
on <strong>Your browser</strong>
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/Blob"
|
||||
target="_blank"
|
||||
>Blob</a
|
||||
>, then will be downloaded on Your PC/Mobile Device. <br /><br />
|
||||
<strong>MiroTalk</strong> is purely peer-to-peer, which means the user's
|
||||
video, audio, chat and file is not sent to our server at all. <br /><br />
|
||||
We use Google Analytics to track aggregated usage statistics in order to
|
||||
improve our service. The maker of
|
||||
<strong>MiroTalk</strong> has no intention of using personally or selling
|
||||
any of the above-mentioned data.
|
||||
</p>
|
||||
<div class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile pulse"
|
||||
style="
|
||||
border: 0;
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#376df9 0,
|
||||
#ff5fa0 75%,
|
||||
#ffc55a 100%
|
||||
);
|
||||
"
|
||||
href="/newcall"
|
||||
>AGREE</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@media (min-width: 641px) {
|
||||
.hero .split-wrap .split-item {
|
||||
min-height: 492px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"
|
||||
><img src="images/logo.svg" alt="Neon" width="32" height="32"
|
||||
/></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/miroslavpejic85/mirotalk"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="footer-top space-between text-xxs">
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalk">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2021 MiroTalk, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="footer-bottom space-between text-xxs invert-order-desktop"
|
||||
>
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Made with ❤️ by Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">
|
||||
© 2021 MiroTalk, all rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
<script src="js/landing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user