Miroslav Pejic
310 lines
19 KiB
HTML
310 lines
19 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."
|
|
/>
|
|
|
|
<!-- 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.linkedin.com/company/mirotalk">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>LinkedIn</title>
|
|
<path
|
|
d="M1.146 0C.513 0 0 .526 0 1.175v13.65C0 15.487.513 16 1.146 16h13.708c.633 0 1.146-.513 1.146-1.175V1.175C16 .526 15.487 0 14.854 0H1.146ZM4.75 13.5H2.5V6.25h2.25V13.5ZM3.625 5.25a1.313 1.313 0 1 1 0-2.625 1.313 1.313 0 0 1 0 2.625Zm9.875 8.25h-2.25V9.969c0-.922-.016-2.11-1.286-2.11-1.288 0-1.485 1.005-1.485 2.044V13.5h-2.25V6.25h2.16v.991h.03c.3-.57 1.036-1.171 2.133-1.171 2.281 0 2.703 1.502 2.703 3.455V13.5Z"
|
|
/>
|
|
</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>
|