ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - typo + UI

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2022-06-21 09:45:23 +02:00
الأصل 2b7b816f58
التزام ab7a2b405a
12 ملفات معدلة مع 26 إضافات و22 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

266
public/views/login.html Normal file
عرض الملف

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- https://github.com/mikecao/umami -->
<script
async
defer
data-website-id="28098c62-a100-44a1-8f03-234b3f0a8194"
src="https://stats.mirotalk.org/umami.js"
></script>
<!-- Title and Icon -->
<title>MiroTalk SFU - Host Protected login required.</title>
<link rel="shortcut icon" href="../images/logo.svg" />
<link 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 SFU powered by WebRTC and mediasoup, Real-time secure video calls, messaging and screen sharing capabilities in the browser."
/>
<meta
name="keywords"
content="webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
/>
<!-- https://ogp.me -->
<meta property="og:type" content="app-webrtc" />
<meta property="og:site_name" content="MiroTalk SFU" />
<meta property="og:title" content="Click the link to make a call." />
<meta
property="og:description"
content="MiroTalk SFU calling provides real-time video calls, messaging and screen sharing."
/>
<meta property="og:image" content="https://sfu.mirotalk.com/images/mirotalksfu.png" />
<!-- StyleSheet -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
<link rel="stylesheet" href="../css/landing.css" />
<!-- Js scripts -->
<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>
</head>
<body class="is-boxed has-animations">
<div class="body-wrap">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand header-brand">
<h1 class="m-0">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
</a>
</h1>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<div id="loginForm">
<br />
<div class="mb-12">
<input
id="username"
class="form-input"
type="name"
placeholder="Username"
required
/>
</div>
<br />
<div class="mb-12">
<input
id="password"
class="form-input"
type="password"
placeholder="Password"
required
/>
</div>
<div class="mt-24 mb-32">
<button id="loginButton" class="button button-primary button-block">
Login
</button>
</div>
</div>
<script>
let usernameInput = document.getElementById('username');
let passwordInput = document.getElementById('password');
let loginBtn = document.getElementById('loginButton');
usernameInput.onkeyup = (e) => {
if (e.keyCode === 13) {
e.preventDefault();
login();
}
};
passwordInput.onkeyup = (e) => {
if (e.keyCode === 13) {
e.preventDefault();
login();
}
};
loginBtn.onclick = (e) => {
login();
};
function login() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if (username && password) {
window.location.href = `/login?username=${username}&password=${password}`;
return;
}
if (!username && !password) {
alert('Username and Password required');
return;
}
if (!username) {
alert('Username required');
return;
}
if (!password) {
alert('Password required');
return;
}
}
</script>
</div>
<div class="hero-figure anime-element">
<svg class="placeholder" width="528" height="396" viewBox="0 0 528 396">
<rect width="528" height="396" style="fill: transparent" />
</svg>
<div class="hero-figure-box hero-figure-box-01" data-rotation="45deg"></div>
<div class="hero-figure-box hero-figure-box-02" data-rotation="-45deg"></div>
<div class="hero-figure-box hero-figure-box-03" data-rotation="0deg"></div>
<div class="hero-figure-box hero-figure-box-04" data-rotation="-135deg"></div>
<div class="hero-figure-box hero-figure-box-05"></div>
<div class="hero-figure-box hero-figure-box-06"></div>
<div class="hero-figure-box hero-figure-box-07"></div>
<div class="hero-figure-box hero-figure-box-08" data-rotation="-22deg"></div>
<div class="hero-figure-box hero-figure-box-09" data-rotation="-52deg"></div>
<div class="hero-figure-box hero-figure-box-10" data-rotation="-50deg"></div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="site-footer-inner">
<div class="brand footer-brand">
<a href="/">
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
</a>
</div>
<ul class="footer-links list-reset">
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/privacy">Privacy Policy</a>
</li>
<li>
Contact:
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
>Miroslav Pejic</a
>
</li>
</ul>
<ul class="footer-social-links list-reset">
<li>
<a target="_blank" href="https://github.com/miroslavpejic85/mirotalksfu">
<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"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<a target="_blank" href="https://www.facebook.com/mirotalk">
<span class="screen-reader-text">Facebook</span>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<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"
fill="#0270D7"
/>
</svg>
</a>
</li>
<li>
<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">
<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>
<a target="_blank" href="mailto:miroslav.pejic.85@gmail.com">
<span class="screen-reader-text">Google</span>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<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/mirotalksfu"
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 class="footer-copyright">&copy; 2022 MiroTalk SFU, all rights reserved</div>
</div>
</div>
</footer>
</div>
<script defer src="../js/landing.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>