Files
mirotalk/public/views/newcall.html
T
2025-06-02 12:31:24 +02:00

287 lines
17 KiB
HTML
Executable File

<!doctype html>
<html lang="en" class="no-js">
<head>
<!-- Title and Icon -->
<title id="newCallTitle">MiroTalk a Free Secure Video Calls, Chat & Screen Sharing.</title>
<link id="shortcutIcon" rel="shortcut icon" href="../images/logo.svg" />
<link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
/>
<!-- https://ogp.me -->
<meta property="og:type" content="{{OG_TYPE}}" />
<meta property="og:site_name" content="{{OG_SITE_NAME}}" />
<meta property="og:title" content="{{OG_TITLE}}" />
<meta property="og:description" content="{{OG_DESCRIPTION}}" />
<meta property="og:image" content="{{OG_IMAGE}}" />
<meta property="og:url" content="{{OG_URL}}" />
<!-- StyleSheet -->
<link rel="stylesheet" href="../css/landing.css" />
<link rel="stylesheet" href="../css/newcall.css" />
<!-- https://animate.style 4 using for swal fadeIn-Out -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- https://cdnjs.com/libraries/font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<!-- JavaScripts -->
<script async src="../js/umami.js"></script>
<!-- xss -->
<script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
<!-- sweetalert -->
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
</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">
<div class="m-0">
<a href="/">
<img src="../images/logo.svg" alt="MiroTalk P2P" width="32" height="32" />
<!-- <img
src="../images/mirotalk-mc.png"
alt="MiroTalk P2P"
width="96"
height="auto"
style="margin-top: 80px"
/> -->
</a>
</div>
</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
id="newCallRoomTitle"
class="mt-32 mb-16 reveal-from-bottom"
data-reveal-delay="150"
>
Pick name. <br />
Share URL. <br />
Start conference.
</h1>
<p
id="newCallRoomDescription"
class="mt-0 mb-32 reveal-from-bottom"
data-reveal-delay="300"
>
Each room has its disposable URL. Just pick a room name and share your
custom URL. It's 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 mb-32">
<div class="container">
<div class="cta-inner section-inner cta-split br-12">
<div class="cta-slogan">
<h3 id="appJoinDescription" class="m-0">
Pick a room name.<br />
How about this one?
</h3>
</div>
<div class="cta-action">
<div class="mb-0">
<label class="form-label screen-reader" for="roomName">MiroTalk-P2P</label>
<div class="form-group-desktop">
<input
id="roomName"
class="form-input"
type="text"
value="mirotalk"
maxlength="32"
/>
<button
id="genRoomButton"
class="button button-primary br-6 mr-8 mb-8 fas fa-arrows-rotate"
></button>
<button id="joinRoomButton" class="button button-primary br-6">
Join Room
</button>
</div>
</div>
<div id="lastRoomContainer" class="last-room">
<span id="appJoinLastRoom">Your recent room:</span>
<a id="lastRoom"></a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer id="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">
<ul class="list-reset">
<li class="footer-social-icon">
<a target="_blank" href="https://discord.gg/rgGYfeYW3N">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<title>Forum</title>
<path
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
/>
</svg>
</a>
</li>
<li class="footer-social-icon">
<a target="_blank" href="https://www.facebook.com/mirotalk">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<title>Facebook</title>
<path
d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"
/>
</svg>
</a>
</li>
<li class="footer-social-icon">
<a target="_blank" href="https://www.youtube.com/watch?v=_IVn2aINYww">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<title>YouTube</title>
<path
d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li class="footer-social-icon">
<a target="_blank" href="mailto:miroslav.pejic.85@gmail.com">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<title>Email</title>
<path
d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<a
class="github-button"
href="https://github.com/sponsors/miroslavpejic85"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-heart"
data-size="large"
aria-label="Sponsor @miroslavpejic85 on GitHub"
>Sponsor</a
>
</li>
<li>
<a
class="github-button"
href="https://github.com/miroslavpejic85/mirotalk"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-size="large"
data-show-count="true"
aria-label="Star miroslavpejic85/mirotalk on GitHub"
>Star</a
>
</li>
</ul>
</div>
</div>
<div class="footer-bottom space-between text-xxs invert-order-desktop">
<nav class="footer-nav">
<ul class="list-reset">
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/privacy">Privacy Policy</a>
</li>
<li>
<a href="https://p2p.mirotalk.com/api/v1/docs/">Rest API</a>
</li>
<li>
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
>Contact: Miroslav Pejic</a
>
</li>
</ul>
</nav>
<div class="footer-copyright">&copy; 2025 MiroTalk, all rights reserved</div>
</div>
</div>
</div>
</footer>
</div>
<script defer src="../js/utils.js"></script>
<script defer src="../js/brand.js"></script>
<script defer src="../js/landing.js"></script>
<script defer src="../js/common.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>