Miroslav Pejic
298 lines
18 KiB
HTML
298 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<!-- Title and Icon -->
|
|
|
|
<title id="loginTitle">MiroTalk - Host Protected login required.</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 Simple Secure Fast 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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
|
|
<link rel="stylesheet" href="../css/landing.css" />
|
|
<link rel="stylesheet" href="../css/login.css" />
|
|
<link rel="stylesheet" href="../css/translate.css" />
|
|
|
|
<!-- Js scripts -->
|
|
|
|
<script async src="../js/stats.js"></script>
|
|
<script async src="../js/translate.js"></script>
|
|
|
|
<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
|
|
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
|
|
|
<!-- xss -->
|
|
<script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
|
|
|
|
<!-- axios -->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
|
<!-- sweetalert -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
|
|
</head>
|
|
<body class="has-animations">
|
|
<div id="google_translate_element"></div>
|
|
|
|
<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"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="site-content mt-32">
|
|
<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">
|
|
<div
|
|
id="loginForm"
|
|
class="login-card reveal-from-bottom"
|
|
data-reveal-delay="150"
|
|
role="form"
|
|
aria-label="Login"
|
|
>
|
|
<div class="login-icon">
|
|
<i class="fa-solid fa-lock"></i>
|
|
</div>
|
|
<h2 id="loginHeading" class="login-title">Welcome back</h2>
|
|
<p id="loginDescription" class="login-description">
|
|
Enter your credentials to continue.
|
|
</p>
|
|
<div class="login-input-group">
|
|
<i class="fa-solid fa-user"></i>
|
|
<input
|
|
id="username"
|
|
class="form-input"
|
|
type="name"
|
|
placeholder="Username"
|
|
maxlength="254"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="login-input-group">
|
|
<i class="fa-solid fa-key"></i>
|
|
<input
|
|
id="password"
|
|
class="form-input"
|
|
type="password"
|
|
maxlength="32"
|
|
placeholder="Password"
|
|
required
|
|
/>
|
|
<i id="togglePassword" class="fa-solid fa-eye toggle-password"></i>
|
|
</div>
|
|
<button id="loginButton" class="login-btn pulse">
|
|
<i class="fa-solid fa-right-to-bracket"></i>
|
|
<span id="loginButtonLabel">Login</span>
|
|
</button>
|
|
</div>
|
|
<!-- Join Room Section hidden -->
|
|
<div id="joinRoomForm" class="login-card">
|
|
<div class="login-icon">
|
|
<i class="fa-solid fa-video"></i>
|
|
</div>
|
|
<h2 id="joinRoomTitle" class="join-room-title">
|
|
Pick name.<br />
|
|
Share URL.<br />
|
|
Start conference.
|
|
</h2>
|
|
<div class="room-input-row">
|
|
<div class="login-input-group">
|
|
<i class="fa-solid fa-door-open"></i>
|
|
<input
|
|
id="roomName"
|
|
class="form-input"
|
|
type="text"
|
|
placeholder="Enter room name"
|
|
maxlength="32"
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
id="randomRoomButton"
|
|
class="random-room-btn"
|
|
title="Generate random room name"
|
|
>
|
|
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
|
|
</button>
|
|
<button
|
|
id="shareRoomButton"
|
|
class="share-room-btn"
|
|
title="Share room link"
|
|
>
|
|
<i class="fa-solid fa-share-nodes" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<button id="joinSelectRoomButton" class="join-room-btn">
|
|
<i class="fa-solid fa-right-to-bracket"></i>
|
|
<span id="joinRoomButtonLabel">JOIN ROOM</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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"></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">© 2026 MiroTalk, all rights reserved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script defer src="../js/utils.js"></script>
|
|
<script defer src="../js/login.js"></script>
|
|
<script defer src="../js/brand.js"></script>
|
|
<script defer src="../js/landing.js"></script>
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
</body>
|
|
</html>
|