New favicon
This commit is contained in:
parent
859cdf0a82
commit
622fdac364
7 changed files with 882 additions and 216 deletions
121
views/index.ejs
121
views/index.ejs
|
|
@ -1,64 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="scripts/goToRoom.js" type="module" defer></script>
|
||||
<script src="scripts/login.js" defer></script>
|
||||
<title>Video Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="options" class="card">
|
||||
<div id="change-name">
|
||||
<span id="name-display"></span>
|
||||
<button class="button-circle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-pencil"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="card jumbo">
|
||||
<h1 class="medium-header">Video Chat</h1>
|
||||
<hr />
|
||||
<p>Enter a room name to join or create a room.</p>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" sizes="any" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="scripts/goToRoom.js" type="module" defer></script>
|
||||
<script src="scripts/login.js" defer></script>
|
||||
<title>Video Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="options" class="card">
|
||||
<div id="change-name">
|
||||
<span id="name-display"></span>
|
||||
<button class="button-circle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-pencil"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="card jumbo">
|
||||
<h1 class="medium-header">Video Chat</h1>
|
||||
<hr />
|
||||
<p>Enter a room name to join or create a room.</p>
|
||||
|
||||
<div class="input-group full-border">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="My room name"
|
||||
id="go-input"
|
||||
class="input-field"
|
||||
/>
|
||||
<a class="input-item button" id="go">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-search"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<div class="input-group full-border">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="My room name"
|
||||
id="go-input"
|
||||
class="input-field"
|
||||
/>
|
||||
<a class="input-item button" id="go">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-search"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="scripts/login.js" defer></script>
|
||||
<title>Video Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="login">
|
||||
<h1 class="medium-header">Choose a name</h1>
|
||||
<div>
|
||||
<input id="name-input" type="text" placeholder="Username" />
|
||||
<button class="button-circle" id="name">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="25"
|
||||
fill="currentColor"
|
||||
class="bi bi-check-circle-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" sizes="any" />
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="scripts/login.js" defer></script>
|
||||
<title>Video Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="login">
|
||||
<h1 class="medium-header">Choose a name</h1>
|
||||
<div>
|
||||
<input id="name-input" type="text" placeholder="Username" />
|
||||
<button class="button-circle" id="name">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="25"
|
||||
height="25"
|
||||
fill="currentColor"
|
||||
class="bi bi-check-circle-fill"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
221
views/room.ejs
221
views/room.ejs
|
|
@ -1,118 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script>
|
||||
const ROOM_ID = "<%= roomId %>"
|
||||
</script>
|
||||
<script
|
||||
defer
|
||||
src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"
|
||||
></script>
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="scripts/login.js" defer></script>
|
||||
<script src="scripts/share.js" defer></script>
|
||||
<script src="scripts/video.js" type="module" defer></script>
|
||||
<title>Video Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="novideo">
|
||||
<h1 class="medium-header">No Video / Audio Device Found</h1>
|
||||
<div>
|
||||
<p>
|
||||
You either denied access to a video/audio device, or one was
|
||||
not found.
|
||||
</p>
|
||||
<p>
|
||||
Please make sure you have a microphone and webcam/camera.
|
||||
<br />
|
||||
Once you are done please
|
||||
<a href="javascript:window.location.reload()">reload</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="deniedautoplay">
|
||||
<h1 class="medium-header">Autoplay permission denied</h1>
|
||||
<div>
|
||||
<p>Please make sure this website has autoplay permission.</p>
|
||||
<p>
|
||||
Once you are done please
|
||||
<a href="javascript:window.location.reload()">reload</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<main><div id="videos"></div></main>
|
||||
<div id="options" class="card">
|
||||
<a href="/" id="stop-call" class="button">Leave Call</a>
|
||||
<div id="change-name">
|
||||
<span id="name-display"></span>
|
||||
<button class="button-circle icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-pencil"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button id="share" class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-share"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="fullscreen" class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-fullscreen"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" sizes="any" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script>
|
||||
const ROOM_ID = "<%= roomId %>"
|
||||
</script>
|
||||
<script
|
||||
defer
|
||||
src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"
|
||||
></script>
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="scripts/login.js" defer></script>
|
||||
<script src="scripts/share.js" defer></script>
|
||||
<script src="scripts/video.js" type="module" defer></script>
|
||||
<title>Video Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="novideo">
|
||||
<h1 class="medium-header">No Video / Audio Device Found</h1>
|
||||
<div>
|
||||
<p>
|
||||
You either denied access to a video/audio device, or one was
|
||||
not found.
|
||||
</p>
|
||||
<p>
|
||||
Please make sure you have a microphone and webcam/camera.
|
||||
<br />
|
||||
Once you are done please
|
||||
<a href="javascript:window.location.reload()">reload</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="deniedautoplay">
|
||||
<h1 class="medium-header">Autoplay permission denied</h1>
|
||||
<div>
|
||||
<p>Please make sure this website has autoplay permission.</p>
|
||||
<p>
|
||||
Once you are done please
|
||||
<a href="javascript:window.location.reload()">reload</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<main><div id="videos"></div></main>
|
||||
<div id="options" class="card">
|
||||
<a href="/" id="stop-call" class="button">Leave Call</a>
|
||||
<div id="change-name">
|
||||
<span id="name-display"></span>
|
||||
<button class="button-circle icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-pencil"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button id="share" class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-share"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="fullscreen" class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-fullscreen"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="popup" class="dismissed">
|
||||
<h1 class="medium-header">Share</h1>
|
||||
<hr />
|
||||
<div id="popup" class="dismissed">
|
||||
<h1 class="medium-header">Share</h1>
|
||||
<hr />
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" id="href" readonly class="input-field" />
|
||||
<button class="input-item" id="copy">Copy</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" id="href" readonly class="input-field" />
|
||||
<button class="input-item" id="copy">Copy</button>
|
||||
</div>
|
||||
|
||||
<span id="is-copied">Copied to clipboard</span>
|
||||
<span id="is-copied">Copied to clipboard</span>
|
||||
|
||||
<button id="close">✕</button>
|
||||
</div>
|
||||
<button id="close">✕</button>
|
||||
</div>
|
||||
|
||||
<template id="video-template">
|
||||
<div class="video">
|
||||
<span class="name card"></span>
|
||||
<video></video>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<template id="video-template">
|
||||
<div class="video">
|
||||
<span class="name card"></span>
|
||||
<video></video>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue