Added feedback form

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tlk",
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"description": "Free video call app for the web.",
 	"main": "index.js",
 	"scripts": {

www/app.js

@@ -28,6 +28,7 @@ const App = Vue.createApp({
 			name: window.localStorage.name,
 			typing: "",
 			chats: [],
+			callEnded: false,
 		};
 	},
 	methods: {
@@ -268,9 +269,7 @@ const App = Vue.createApp({
 			for (let peer_id in peers) {
 				peers[peer_id].close();
 			}
-			setTimeout(() => {
-				alert("You have been disconnected. You can now close this window.");
-			}, 100);
+			this.callEnded = true;
 		},
 	},
 }).mount("#app");

www/index.html

@@ -66,6 +66,23 @@
 					</div>
 				</div>
 
+				<div id="callFeedbackWrap" v-if="callEnded">
+					<div id="callFeedback">
+						<div class="bold">Your call has been disconnected. You can now close this window.</div>
+						<br />
+
+						<div id="feedbackWrap">
+							<div class="question italic">How was the quality of call?</div>
+							<div class="thankYou bold">Thank you for your feedback</div>
+							<div id="feedbackButtons">
+								<button data-cabin-event="call-quality-nah">😟<br />Nah!</button>
+								<button data-cabin-event="call-quality-meh">😐<br />Meh!</button>
+								<button data-cabin-event="call-quality-yay">😀<br />Yay!</button>
+							</div>
+						</div>
+					</div>
+				</div>
+
 				<div id="chatWrap" v-if="showChat">
 					<div id="chats">
 						<div class="chat" v-for="(chat, i) in chats" v-bind:key="i">

www/style.css

@@ -2,6 +2,7 @@
 
 :root {
 	--body-bg: #1e1f23;
+	--blanket-color: rgb(30, 31, 35, 0.9);
 	--intro-bg: #ffffff;
 	--intro-cl: #000000;
 	--chat-wrap-bg: #ffffff;
@@ -53,6 +54,12 @@ input {
 .light {
 	color: #878787;
 }
+.bold {
+	font-weight: bold;
+}
+.italic {
+	font-style: italic;
+}
 #blanket {
 	position: absolute;
 	z-index: -1;
@@ -368,6 +375,67 @@ input {
 	color: #e74c3c !important;
 }
 
+#callFeedbackWrap {
+	position: fixed;
+	top: 0px;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	background: var(--blanket-color);
+	z-index: 110;
+}
+#callFeedback {
+	position: absolute;
+	padding: 1rem;
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 400px;
+	height: 320px;
+	top: 0px;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	margin: auto;
+	background: var(--settings-bg);
+	border-radius: 1rem;
+}
+#feedbackWrap .thankYou {
+	display: none;
+}
+#feedbackWrap:focus-within .question {
+	display: none;
+}
+#feedbackWrap:focus-within .thankYou {
+	display: block;
+}
+#feedbackButtons {
+	display: flex;
+	justify-content: space-between;
+	margin: 1rem auto;
+}
+#feedbackButtons button {
+	cursor: pointer;
+	border: none;
+	background: #7f8c8d;
+	border: 5px solid #7f8c8d;
+	width: 30%;
+	font-size: 2rem;
+	padding: 0.5rem 0px;
+	border-radius: 1rem;
+}
+#feedbackButtons button[data-cabin-event="call-quality-nah"] {
+	background: #c0392b;
+	border-color: #c0392b;
+}
+#feedbackButtons button[data-cabin-event="call-quality-yay"] {
+	background: #27ae60;
+	border-color: #27ae60;
+}
+#feedbackButtons button:active,
+#feedbackButtons button:focus {
+	border-color: #000;
+}
+
 @media only screen and (max-width: 960px) {
 	.video {
 		float: left;