├── public
    ├── robots.txt
    ├── img
    │   ├── background.png
    │   ├── logo.svg
    │   └── logo-inversed.svg
    ├── fonts
    │   └── Fredoka_One
    │   │   ├── FredokaOne-Regular.ttf
    │   │   └── OFL.txt
    └── index.html
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── assets
    └── demo.png
├── src
    ├── shims-vue.d.ts
    ├── main.ts
    ├── webRTC
    │   ├── EventDispatcher.ts
    │   ├── Message.ts
    │   ├── SignalingMessage.ts
    │   ├── PeerConnection.ts
    │   ├── Sender.ts
    │   ├── Reciever.ts
    │   └── SignalingClient.ts
    ├── components
    │   ├── QrCode.vue
    │   ├── QrScanner.vue
    │   ├── Loader.vue
    │   └── MessageCard.vue
    └── App.vue
├── .gitignore
├── .eslintrc.js
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "none",
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     https: false
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/assets/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/schlangguru/clip-beam-client/HEAD/assets/demo.png


--------------------------------------------------------------------------------
/public/img/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/schlangguru/clip-beam-client/HEAD/public/img/background.png


--------------------------------------------------------------------------------
/public/fonts/Fredoka_One/FredokaOne-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/schlangguru/clip-beam-client/HEAD/public/fonts/Fredoka_One/FredokaOne-Regular.ttf


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import PrimeVue from "primevue/config";
 3 | import ToastService from "primevue/toastservice";
 4 | import App from "./App.vue";
 5 | 
 6 | createApp(App)
 7 |   .use(PrimeVue)
 8 |   .use(ToastService)
 9 |   .mount("#app");
10 | 


--------------------------------------------------------------------------------
/src/webRTC/EventDispatcher.ts:
--------------------------------------------------------------------------------
 1 | export class EventDispatcher<T> {
 2 |   private listeners: ((data: T) => void)[] = [];
 3 | 
 4 |   addListener(listener: (data: T) => void) {
 5 |     this.listeners.push(listener);
 6 |   }
 7 | 
 8 |   dispatch(data: T) {
 9 |     this.listeners.forEach(l => l(data));
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/webRTC/Message.ts:
--------------------------------------------------------------------------------
 1 | export enum MessageType {
 2 |   TEXT = "TEXT",
 3 |   FILE = "FILE"
 4 | }
 5 | 
 6 | export interface MessageHeader {
 7 |   type: MessageType;
 8 |   name?: string;
 9 |   size: number;
10 | }
11 | 
12 | export interface Message {
13 |   header: MessageHeader;
14 |   timestamp?: Date;
15 |   transferCompleted: boolean;
16 |   transferProgress: number;
17 |   payload?: string | File;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/QrCode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="qr-code"></div>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { defineComponent } from "vue";
 7 | import { BrowserQRCodeSvgWriter } from "@zxing/library";
 8 | 
 9 | const codeWriter = new BrowserQRCodeSvgWriter();
10 | 
11 | export default defineComponent({
12 |   name: "QrCode",
13 |   props: {
14 |     value: String
15 |   },
16 |   data() {
17 |     return {};
18 |   },
19 |   mounted() {
20 |     codeWriter.writeToDom("#qr-code", this.value || "", 300, 300);
21 |   }
22 | });
23 | </script>
24 | 
25 | <style scoped></style>
26 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/typescript/recommended",
10 |     "@vue/prettier",
11 |     "@vue/prettier/@typescript-eslint"
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020
15 |   },
16 |   rules: {
17 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
18 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
19 |     '@typescript-eslint/interface-name-prefix': 0
20 |   }
21 | };
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/webRTC/SignalingMessage.ts:
--------------------------------------------------------------------------------
 1 | export enum SignalingType {
 2 |   REGISTER = "REGISTER",
 3 |   OFFER = "OFFER",
 4 |   ERROR = "ERROR",
 5 |   ANSWER = "ANSWER",
 6 |   ICE_CANDIDATE = "ICE_CANDIDATE"
 7 | }
 8 | 
 9 | export interface OfferPayload {
10 |   offer: RTCSessionDescriptionInit;
11 |   peerUuid: string;
12 | }
13 | 
14 | export interface AnswerPayload {
15 |   answer: RTCSessionDescriptionInit;
16 |   peerUuid: string;
17 | }
18 | 
19 | export interface ICECandidatePayload {
20 |   candidate: RTCIceCandidateInit;
21 |   peerUuid: string;
22 | }
23 | 
24 | export interface SignalingMsg {
25 |   type: SignalingType;
26 |   payload: string | OfferPayload | AnswerPayload | ICECandidatePayload;
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "noImplicitAny": false,
 7 |     "jsx": "preserve",
 8 |     "importHelpers": true,
 9 |     "moduleResolution": "node",
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "sourceMap": true,
14 |     "baseUrl": ".",
15 |     "types": [
16 |       "webpack-env"
17 |     ],
18 |     "paths": {
19 |       "@/*": [
20 |         "src/*"
21 |       ]
22 |     },
23 |     "lib": [
24 |       "esnext",
25 |       "dom",
26 |       "dom.iterable",
27 |       "scripthost"
28 |     ],
29 |   },
30 |   "include": [
31 |     "src/**/*.ts",
32 |     "src/**/*.tsx",
33 |     "src/**/*.vue",
34 |     "tests/**/*.ts",
35 |     "tests/**/*.tsx"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Sebastian Seidl
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@zxing/library": "^0.18.3",
12 |     "core-js": "^3.6.5",
13 |     "mitt": "^2.1.0",
14 |     "primeicons": "^4.1.0",
15 |     "primevue": "^3.1.1",
16 |     "uuid": "^8.3.2",
17 |     "vue": "^3.0.0",
18 |     "vue-router": "^4.0.0-0"
19 |   },
20 |   "devDependencies": {
21 |     "@types/uuid": "^8.3.0",
22 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
23 |     "@typescript-eslint/parser": "^2.33.0",
24 |     "@vue/cli-plugin-babel": "~4.5.0",
25 |     "@vue/cli-plugin-eslint": "~4.5.0",
26 |     "@vue/cli-plugin-router": "~4.5.0",
27 |     "@vue/cli-plugin-typescript": "~4.5.0",
28 |     "@vue/cli-service": "~4.5.0",
29 |     "@vue/compiler-sfc": "^3.0.0",
30 |     "@vue/eslint-config-prettier": "^6.0.0",
31 |     "@vue/eslint-config-typescript": "^5.0.2",
32 |     "eslint": "^6.7.2",
33 |     "eslint-plugin-prettier": "^3.1.3",
34 |     "eslint-plugin-vue": "^7.0.0-0",
35 |     "prettier": "^1.19.1",
36 |     "typescript": "~3.9.3"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/webRTC/PeerConnection.ts:
--------------------------------------------------------------------------------
 1 | import { v4 as uuidv4 } from "uuid";
 2 | import { EventDispatcher } from "./EventDispatcher";
 3 | import { MessageType, Message } from "./Message";
 4 | import { TextSender, FileSender } from "./Sender";
 5 | import { Reciever, TextReciever, FileReciever } from "./Reciever";
 6 | 
 7 | type ProgressCallback = (progress: number) => void;
 8 | export class PeerConnection {
 9 |   private readonly rtcConnection: RTCPeerConnection;
10 |   private readonly heartBeatChannel: RTCDataChannel;
11 | 
12 |   public readonly onRecievingMessage = new EventDispatcher<{
13 |     id: string;
14 |     msg: Message;
15 |   }>();
16 |   public readonly onClose = new EventDispatcher<void>();
17 | 
18 |   constructor(
19 |     rtcConnection: RTCPeerConnection,
20 |     heartBeatChannel: RTCDataChannel
21 |   ) {
22 |     this.heartBeatChannel = heartBeatChannel;
23 |     this.heartBeatChannel.onclose = () => {
24 |       this.onClose.dispatch();
25 |     };
26 | 
27 |     this.rtcConnection = rtcConnection;
28 |     this.rtcConnection.ondatachannel = event => {
29 |       this.onDataChannel(event);
30 |     };
31 |   }
32 | 
33 |   public async sendFile(file: File, onProgress?: ProgressCallback) {
34 |     const sender = new FileSender(this.rtcConnection, file);
35 |     if (onProgress) {
36 |       sender.onProgress.addListener(onProgress);
37 |     }
38 |     sender.send();
39 |   }
40 | 
41 |   public async sendText(text: string, onProgress?: ProgressCallback) {
42 |     const sender = new TextSender(this.rtcConnection, text);
43 |     if (onProgress) {
44 |       sender.onProgress.addListener(onProgress);
45 |     }
46 |     sender.send();
47 |   }
48 | 
49 |   private onDataChannel(event: RTCDataChannelEvent) {
50 |     const dataChannel = event.channel || event.target;
51 |     const label = dataChannel.label;
52 |     let reciever: Reciever;
53 |     if (label.startsWith(MessageType.FILE)) {
54 |       reciever = new FileReciever(dataChannel);
55 |     } else if (label.startsWith(MessageType.TEXT)) {
56 |       reciever = new TextReciever(dataChannel);
57 |     } else {
58 |       throw `Unknown channel type ${label}`;
59 |     }
60 | 
61 |     const id = uuidv4();
62 |     reciever.onRecieveMessage.addListener(msg => {
63 |       this.onRecievingMessage.dispatch({ id, msg });
64 |     });
65 |     reciever.recieve();
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/QrScanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Dropdown
 4 |       v-model="selectedCamera"
 5 |       :options="cameras"
 6 |       optionLabel="label"
 7 |       placeholder="Select a camera"
 8 |       @change="cameraChanged"
 9 |     />
10 | 
11 |     <video ref="video"></video>
12 | 
13 |     <Button @click="initCameras" label="Scan"></Button>
14 |   </div>
15 | </template>
16 | 
17 | <script lang="ts">
18 | import { defineComponent } from "vue";
19 | 
20 | // Components
21 | import Button from "primevue/button";
22 | import Dropdown from "primevue/dropdown";
23 | 
24 | // Services
25 | import { BrowserQRCodeReader, VideoInputDevice } from "@zxing/library";
26 | 
27 | const codeReader = new BrowserQRCodeReader();
28 | 
29 | export default defineComponent({
30 |   name: "QrScanner",
31 |   components: {
32 |     Button,
33 |     Dropdown
34 |   },
35 |   emits: ["scan", "error"],
36 |   data() {
37 |     return {
38 |       cameras: [] as VideoInputDevice[],
39 |       selectedCamera: null as VideoInputDevice | null
40 |     };
41 |   },
42 |   methods: {
43 |     async initCameras() {
44 |       const videoInputDevices = await codeReader.getVideoInputDevices();
45 |       if (videoInputDevices.length == 0) {
46 |         this.$emit("error", "No camera found.");
47 |       } else {
48 |         this.cameras = videoInputDevices;
49 |         this.selectedCamera = this.cameras[0];
50 |       }
51 |       this.scan();
52 |     },
53 | 
54 |     async scan() {
55 |       if (!this.selectedCamera) {
56 |         this.$emit("error", "No camera selected.");
57 |         return;
58 |       }
59 | 
60 |       const videoElement = this.$refs.video as HTMLVideoElement;
61 |       try {
62 |         const result = await codeReader.decodeFromInputVideoDevice(
63 |           this.selectedCamera.deviceId,
64 |           videoElement
65 |         );
66 |         this.$emit("scan", result.getText());
67 |         this.stopScan();
68 |       } catch (err) {
69 |         // ignore
70 |       }
71 |     },
72 | 
73 |     cameraChanged() {
74 |       codeReader.reset();
75 |       this.scan();
76 |     },
77 | 
78 |     stopScan() {
79 |       codeReader.reset();
80 |     }
81 |   }
82 | });
83 | </script>
84 | 
85 | <style scoped>
86 | .container {
87 |   display: flex;
88 |   flex-direction: column;
89 | }
90 | 
91 | video {
92 |   border: 1px solid gray;
93 |   object-fit: cover;
94 |   width: 100%;
95 |   height: 100%;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/Loader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="show" class="overlay">
  3 |     <div class="content">
  4 |       <div class="wrapper">
  5 |         <div class="loader">
  6 |           <div></div>
  7 |           <div></div>
  8 |           <div></div>
  9 |           <div></div>
 10 |         </div>
 11 |       </div>
 12 |       <span v-if="label" class="label">{{ label }}</span>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script lang="ts">
 18 | import { defineComponent } from "vue";
 19 | 
 20 | export default defineComponent({
 21 |   name: "Loader",
 22 |   props: {
 23 |     label: String,
 24 |     show: Boolean
 25 |   }
 26 | });
 27 | </script>
 28 | 
 29 | <style scoped>
 30 | .overlay {
 31 |   position: fixed;
 32 |   width: 100%;
 33 |   height: 100%;
 34 |   top: 0;
 35 |   left: 0;
 36 |   right: 0;
 37 |   bottom: 0;
 38 |   background-color: rgba(67, 58, 63, 0.4);
 39 |   z-index: 999;
 40 | }
 41 | 
 42 | .overlay .content {
 43 |   position: absolute;
 44 |   display: flex;
 45 |   flex-direction: column;
 46 |   top: 50%;
 47 |   left: 50%;
 48 |   transform: translate(-50%, -50%);
 49 |   -ms-transform: translate(-50%, -50%);
 50 | }
 51 | 
 52 | .overlay .content .label {
 53 |   text-align: center;
 54 |   font-size: 2rem;
 55 |   color: #fff;
 56 | }
 57 | 
 58 | @keyframes loader {
 59 |   0% {
 60 |     transform: scale(1.1500000000000001);
 61 |   }
 62 |   100% {
 63 |     transform: scale(1);
 64 |   }
 65 | }
 66 | 
 67 | .loader div {
 68 |   position: absolute;
 69 |   width: 80px;
 70 |   height: 80px;
 71 |   top: 13.333333333333336px;
 72 |   left: 13.333333333333336px;
 73 |   background: #433a3f;
 74 |   animation: loader 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 75 |   animation-delay: -0.3s;
 76 | }
 77 | 
 78 | .loader div:nth-child(2) {
 79 |   top: 13.333333333333336px;
 80 |   left: 106.66666666666666px;
 81 |   background: #3d5a6c;
 82 |   animation-delay: -0.2s;
 83 | }
 84 | 
 85 | .loader div:nth-child(3) {
 86 |   top: 106.66666666666666px;
 87 |   left: 13.333333333333336px;
 88 |   background: #fcd0a1;
 89 |   animation-delay: 0s;
 90 | }
 91 | 
 92 | .loader div:nth-child(4) {
 93 |   top: 106.66666666666666px;
 94 |   left: 106.66666666666666px;
 95 |   background: #72a98f;
 96 |   animation-delay: -0.1s;
 97 | }
 98 | 
 99 | .wrapper {
100 |   width: 200px;
101 |   height: 200px;
102 |   display: inline-block;
103 |   overflow: hidden;
104 |   background: none;
105 | }
106 | 
107 | .loader {
108 |   width: 100%;
109 |   height: 100%;
110 |   position: relative;
111 |   transform: translateZ(0) scale(1);
112 |   backface-visibility: hidden;
113 |   transform-origin: 0 0; /* see note above */
114 | }
115 | 
116 | .loader div {
117 |   box-sizing: content-box;
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/webRTC/Sender.ts:
--------------------------------------------------------------------------------
 1 | import { v4 as uuidv4 } from "uuid";
 2 | import { EventDispatcher } from "./EventDispatcher";
 3 | import { MessageType, MessageHeader } from "./Message";
 4 | 
 5 | abstract class Sender {
 6 |   protected readonly dataChannel: RTCDataChannel;
 7 |   public readonly onProgress = new EventDispatcher<number>();
 8 | 
 9 |   constructor(rtcConnection: RTCPeerConnection) {
10 |     const label = `${this.type()}:${uuidv4()}`;
11 |     this.dataChannel = rtcConnection.createDataChannel(label, {
12 |       ordered: true
13 |     });
14 |     this.dataChannel.binaryType = "arraybuffer";
15 |   }
16 | 
17 |   protected abstract sendData(): void;
18 | 
19 |   public abstract type(): string;
20 | 
21 |   public async send() {
22 |     this.dataChannel.onopen = () => {
23 |       this.sendData();
24 |     };
25 |   }
26 | }
27 | 
28 | export class FileSender extends Sender {
29 |   private static readonly CHUNK_SIZE = 16384;
30 |   private readonly file: File;
31 | 
32 |   constructor(rtcConnection: RTCPeerConnection, file: File) {
33 |     super(rtcConnection);
34 |     this.file = file;
35 |   }
36 | 
37 |   public type() {
38 |     return MessageType.FILE;
39 |   }
40 | 
41 |   protected async sendData() {
42 |     const payload = await this.file.arrayBuffer();
43 |     const header = {
44 |       type: MessageType.FILE,
45 |       name: this.file.name,
46 |       size: payload.byteLength
47 |     } as MessageHeader;
48 | 
49 |     this.dataChannel.send(JSON.stringify(header));
50 |     this.sendFileChunks();
51 |   }
52 | 
53 |   private async sendFileChunks() {
54 |     let bytesSent = 0;
55 |     const fileReader = new FileReader();
56 |     let offset = 0;
57 |     const readSlice = o => {
58 |       const slice = this.file.slice(offset, o + FileSender.CHUNK_SIZE);
59 |       fileReader.readAsArrayBuffer(slice);
60 |     };
61 |     fileReader.onload = e => {
62 |       const buffer = e.target?.result as ArrayBuffer;
63 |       this.dataChannel.send(buffer);
64 |       bytesSent += buffer.byteLength;
65 |       offset += buffer.byteLength;
66 |       this.onProgress.dispatch(100 * (bytesSent / this.file.size));
67 |       if (offset < this.file.size) {
68 |         readSlice(offset);
69 |       }
70 |     };
71 |     readSlice(0);
72 |   }
73 | }
74 | 
75 | export class TextSender extends Sender {
76 |   private readonly text: string;
77 | 
78 |   constructor(rtcConnection: RTCPeerConnection, text: string) {
79 |     super(rtcConnection);
80 |     this.text = text;
81 |   }
82 | 
83 |   public type() {
84 |     return MessageType.TEXT;
85 |   }
86 | 
87 |   protected async sendData() {
88 |     const header = {
89 |       type: MessageType.TEXT,
90 |       size: this.text.length
91 |     } as MessageHeader;
92 | 
93 |     this.dataChannel.send(JSON.stringify(header));
94 |     this.dataChannel.send(this.text);
95 |     this.onProgress.dispatch(100);
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="https://raw.githubusercontent.com/schlangguru/clip-beam-client/master/public/img/logo.svg" alt="clip-beam logo" title="Clip Beam" align="right" height="50" />
 2 | 
 3 | # Clip Beam Client
 4 | 
 5 | ![GitHub](https://img.shields.io/github/license/schlangguru/clip-beam-client)
 6 | 
 7 | Clip Beam lets you transfer your data easily between two devices on the same network. Just connect the devices by scanning a QR code and start sharing.
 8 | 
 9 | Clip Beam uses [WebRTC](https://webrtc.org/) to transfer your data, meaning all messages are transfered directly between devices without sending them to any server.
10 | 
11 | ![Clip Beam](./assets/demo.png)
12 | 
13 | ## Table of content
14 | 
15 | - [Quick Start](#quick-setup)
16 | - [Setup](#setup)
17 |   - [Client](#setup-the-client)
18 |   - [Signaling Server](#setup-the-signaling-server)
19 | - [Inspiration and Alternatives](#inspiration-and-alternatives)
20 | 
21 | ## Quick Start
22 | 
23 | 1. Clone the [signaling server](https://github.com/schlangguru/clip-beam-server)
24 | 
25 | - `cd clip-beam-server`
26 | - `npm install`
27 | - `npm run dev`
28 | 
29 | 2. Clone the [client](https://github.com/schlangguru/clip-beam-client)
30 | 
31 | - `cd clip-beam-client`
32 | - `npm install`
33 | - `npm run serve`
34 | - Go to [localhost:8080](localhost:8080)
35 | 
36 | ## Setup
37 | 
38 | To setup your own instance of Clip Beam you need to setup the [signaling server](https://github.com/schlangguru/clip-beam-server) and host the frontend as simple HTML website.
39 | 
40 | ### Setup the client
41 | 
42 | Clone this repository and use the following commands:
43 | 
44 | ```bash
45 | # install dependencies
46 | npm install
47 | # serve locally
48 | npm run serve
49 | # build for the distribution
50 | npm run build
51 | ```
52 | 
53 | ### Client Configuration
54 | 
55 | You can configure the url of the signaling server. Per default the client assumes to reach the signaling server on localhost. To change this you need to create a `.env.local` file with the following content.
56 | 
57 | ```
58 | VUE_APP_SERVER_URL=wss://my-url.com:9090
59 | ```
60 | 
61 | Rever to the Vue.js documentation [on environment variables](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables) for more details.
62 | 
63 | ### Setup the signaling server
64 | 
65 | See installation instructions for the [signaling server](https://github.com/schlangguru/clip-beam-server)
66 | 
67 | ## Inspiration and Alternatives
68 | 
69 | I used to use [Threema Web](https://github.com/threema-ch/threema-web) and its echo chat to quickly send web links from my smartphone to my computer. Clip Beam works exactly the same way, but unlike Threema it is not a messenger, but only designed for sharing data between two devices.
70 | 
71 | Alternatives i've found are
72 | 
73 | - [Sharedrop](https://github.com/cowbell/sharedrop)
74 | - [Snapdrop](https://github.com/RobinLinus/snapdrop)
75 | 
76 | but unlike these apps, Clip Beam does not allow connections between any devices on the same network. It rather connects two devices directly by scanning its QR code, so no one can send you unwanted data.
77 | 


--------------------------------------------------------------------------------
/src/webRTC/Reciever.ts:
--------------------------------------------------------------------------------
  1 | import { MessageHeader, Message } from "./Message";
  2 | import { EventDispatcher } from "./EventDispatcher";
  3 | 
  4 | export abstract class Reciever {
  5 |   protected readonly dataChannel: RTCDataChannel;
  6 |   private _header?: MessageHeader;
  7 |   public readonly onRecieveMessage = new EventDispatcher<Message>();
  8 | 
  9 |   constructor(dataChannel: RTCDataChannel) {
 10 |     this.dataChannel = dataChannel;
 11 |     this.dataChannel.binaryType = "arraybuffer";
 12 |   }
 13 | 
 14 |   public recieve() {
 15 |     this.dataChannel.onmessage = event => {
 16 |       this.onMessage(event);
 17 |     };
 18 |   }
 19 | 
 20 |   protected header(): MessageHeader {
 21 |     if (!this._header) {
 22 |       throw "Header not yet recieved.";
 23 |     }
 24 |     return this._header;
 25 |   }
 26 | 
 27 |   protected closeChannel() {
 28 |     this.dataChannel.close();
 29 |   }
 30 | 
 31 |   protected abstract onData(payload: MessageEvent);
 32 | 
 33 |   private onMessage(event: MessageEvent) {
 34 |     if (!this._header) {
 35 |       const header = JSON.parse(event.data as string) as MessageHeader;
 36 |       this._header = header;
 37 |       this.onRecieveMessage.dispatch({
 38 |         header: header,
 39 |         transferCompleted: false,
 40 |         transferProgress: 0
 41 |       });
 42 |     } else {
 43 |       this.onData(event);
 44 |     }
 45 |   }
 46 | }
 47 | 
 48 | export class TextReciever extends Reciever {
 49 |   protected onData(event: MessageEvent) {
 50 |     const text = event.data as string;
 51 |     this.closeChannel();
 52 |     this.onRecieveMessage.dispatch({
 53 |       header: this.header(),
 54 |       timestamp: new Date(),
 55 |       transferCompleted: true,
 56 |       transferProgress: 100,
 57 |       payload: text
 58 |     });
 59 |   }
 60 | }
 61 | 
 62 | export class FileReciever extends Reciever {
 63 |   private receivedChunks: ArrayBuffer[] = [];
 64 |   private bytesRecieved = 0;
 65 |   private lastProgress = 0;
 66 | 
 67 |   protected onData(event: MessageEvent) {
 68 |     const buffer = event.data as ArrayBuffer;
 69 |     this.receivedChunks.push(buffer);
 70 |     this.bytesRecieved += buffer.byteLength;
 71 | 
 72 |     const progress = 100 * (this.bytesRecieved / this.header().size);
 73 |     if (progress - this.lastProgress >= 1) {
 74 |       this.lastProgress = progress;
 75 |       this.onRecieveMessage.dispatch({
 76 |         header: this.header(),
 77 |         transferCompleted: false,
 78 |         transferProgress: progress
 79 |       });
 80 |     }
 81 | 
 82 |     if (this.header().size === this.recievedByteLength()) {
 83 |       const fileName = this.header().name || "Unknown File";
 84 |       const file = new File(this.receivedChunks, fileName);
 85 |       this.closeChannel();
 86 |       this.onRecieveMessage.dispatch({
 87 |         header: this.header(),
 88 |         timestamp: new Date(),
 89 |         transferCompleted: true,
 90 |         transferProgress: 100,
 91 |         payload: file
 92 |       });
 93 |     }
 94 |   }
 95 | 
 96 |   private recievedByteLength(): number {
 97 |     if (this.receivedChunks) {
 98 |       return this.receivedChunks
 99 |         .map(buffer => buffer.byteLength)
100 |         .reduce((a, b) => a + b, 0);
101 |     }
102 | 
103 |     return 0;
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/public/fonts/Fredoka_One/OFL.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, Milena Brandao (milenabbrandao@gmail.com), with Reserved Font Name Fredoka.
 2 | 
 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
 4 | This license is copied below, and is also available with a FAQ at:
 5 | http://scripts.sil.org/OFL
 6 | 
 7 | 
 8 | -----------------------------------------------------------
 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 | 
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 | 
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded, 
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 | 
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 | 
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 | 
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 | 
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 | 
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 | 
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 | 
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 | 
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 | 
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 | 
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 | 
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 | 
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 | 
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 | 


--------------------------------------------------------------------------------
/src/components/MessageCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card">
  3 |     <!-- Message Content -->
  4 |     <div v-if="msg.transferCompleted">
  5 |       <!-- FILE -->
  6 |       <div v-if="isFile" class="content content-file">
  7 |         <div class="content-left">
  8 |           <a :href="fileUrl" :download="msg.header.name">
  9 |             <i class="pi pi-file" style="fontSize: 2rem"></i>
 10 |           </a>
 11 |         </div>
 12 |         <div class="content-right">
 13 |           <a :href="fileUrl" :download="msg.header.name" class="download-link">
 14 |             {{ msg.header.name }}
 15 |           </a>
 16 |         </div>
 17 |         <Button
 18 |           @click="downloadFile"
 19 |           icon="pi pi-download"
 20 |           class="p-button-primary message-button"
 21 |           v-tooltip.bottom="'Download'"
 22 |         />
 23 |       </div>
 24 | 
 25 |       <!-- TEXT -->
 26 |       <div v-else class="content content-text">
 27 |         <span class="text">{{ msg.payload }}</span>
 28 |         <Button
 29 |           @click="copyToClipboard"
 30 |           icon="pi pi-copy"
 31 |           class="p-button-primary message-button"
 32 |           v-tooltip.bottom="'Copy into clipboard'"
 33 |         />
 34 |       </div>
 35 |     </div>
 36 | 
 37 |     <!-- Loader Skeleton -->
 38 |     <div v-else class="content-file">
 39 |       <div class="content-left">
 40 |         <Skeleton shape="circle" size="5rem"></Skeleton>
 41 |       </div>
 42 |       <div class="content-right">
 43 |         <Skeleton width="100%"></Skeleton>
 44 |         <Skeleton width="80%"></Skeleton>
 45 |       </div>
 46 |     </div>
 47 |     <div
 48 |       v-if="!msg.transferCompleted"
 49 |       class="progress"
 50 |       :style="{ width: `${msg.transferProgress}%` }"
 51 |     ></div>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script lang="ts">
 56 | import { defineComponent } from "vue";
 57 | import Button from "primevue/button";
 58 | import Skeleton from "primevue/skeleton";
 59 | import Tooltip from "primevue/tooltip";
 60 | import { MessageType, Message } from "../webRTC/Message";
 61 | 
 62 | export default defineComponent({
 63 |   name: "MessageCard",
 64 |   components: {
 65 |     Button,
 66 |     Skeleton
 67 |   },
 68 |   props: {
 69 |     msg: Object as () => Message
 70 |   },
 71 |   directives: {
 72 |     tooltip: Tooltip
 73 |   },
 74 |   data() {
 75 |     return {};
 76 |   },
 77 |   computed: {
 78 |     isFile(): boolean {
 79 |       return this.msg?.header.type === MessageType.FILE;
 80 |     },
 81 |     fileUrl(): string {
 82 |       if (this.msg?.payload) {
 83 |         const file = this.msg?.payload as File;
 84 |         return URL.createObjectURL(file);
 85 |       }
 86 | 
 87 |       return "";
 88 |     }
 89 |   },
 90 |   methods: {
 91 |     copyToClipboard() {
 92 |       if (this.msg?.header.type === MessageType.TEXT) {
 93 |         const textArea = document.createElement("textarea");
 94 |         textArea.value = this.msg.payload as string;
 95 |         // Avoid scrolling to bottom
 96 |         textArea.style.top = "0";
 97 |         textArea.style.left = "0";
 98 |         textArea.style.position = "fixed";
 99 |         document.body.appendChild(textArea);
100 |         textArea.focus();
101 |         textArea.select();
102 |         document.execCommand("copy");
103 |         document.body.removeChild(textArea);
104 |       }
105 |     },
106 | 
107 |     downloadFile() {
108 |       if (this.msg?.header.type === MessageType.FILE) {
109 |         this.$el.querySelector(".download-link").click();
110 |       }
111 |     }
112 |   }
113 | });
114 | </script>
115 | 
116 | <style scoped>
117 | a,
118 | a:visited,
119 | a:hover,
120 | a:active {
121 |   color: #3d5a6c;
122 | }
123 | 
124 | .card {
125 |   display: flex;
126 |   flex-direction: column;
127 |   flex-wrap: nowrap;
128 |   background: #f8f9fa;
129 |   border-radius: 3px;
130 |   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
131 |     0 1px 5px 0 rgba(0, 0, 0, 0.12);
132 | }
133 | 
134 | .card .content .message-button {
135 |   min-width: 2rem;
136 | }
137 | 
138 | .card .content {
139 |   display: flex;
140 |   flex-direction: row;
141 |   flex-wrap: nowrap;
142 | }
143 | 
144 | .card .content-text {
145 |   justify-content: space-between;
146 |   padding: 15px;
147 | }
148 | 
149 | .card .content-text .text {
150 |   white-space: pre-wrap;
151 | }
152 | 
153 | .card .content-file {
154 |   gap: 10px;
155 |   padding: 15px;
156 | }
157 | 
158 | .card .content-file .content-left {
159 |   width: 20%;
160 | }
161 | 
162 | .card .content-file .content-right {
163 |   width: 80%;
164 |   display: flex;
165 |   flex-direction: column;
166 |   flex-wrap: nowrap;
167 |   gap: 10px;
168 | }
169 | 
170 | .card .progress {
171 |   background: linear-gradient(90deg, #72a98f, #3d5a6c);
172 |   height: 5px;
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/src/webRTC/SignalingClient.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   SignalingType,
  3 |   SignalingMsg,
  4 |   OfferPayload,
  5 |   AnswerPayload,
  6 |   ICECandidatePayload
  7 | } from "./SignalingMessage";
  8 | import { PeerConnection } from "./PeerConnection";
  9 | import { EventDispatcher } from "./EventDispatcher";
 10 | 
 11 | const SIGNALING_SERVER =
 12 |   process.env.VUE_APP_SERVER_URL || "ws://localhost:9090";
 13 | const RTC_CONNECTION_CONFIG = {
 14 |   iceServers: [
 15 |     {
 16 |       urls: "stun:stun.l.google.com:19302"
 17 |     }
 18 |   ]
 19 | };
 20 | const DATA_CHANNEL_NAME = "heartbeat";
 21 | 
 22 | export class SignalingClient {
 23 |   private readonly signalingSocket: WebSocket;
 24 |   private readonly rtcPeerConnection: RTCPeerConnection;
 25 | 
 26 |   public readonly onInitConnection = new EventDispatcher<void>();
 27 |   public readonly onConnectionFailed = new EventDispatcher<void>();
 28 |   public readonly onConnectionEstablished = new EventDispatcher<
 29 |     PeerConnection
 30 |   >();
 31 | 
 32 |   constructor() {
 33 |     this.signalingSocket = new WebSocket(SIGNALING_SERVER);
 34 |     this.signalingSocket.addEventListener("message", event =>
 35 |       this.onSignalingMessage(JSON.parse(event.data) as SignalingMsg)
 36 |     );
 37 | 
 38 |     this.rtcPeerConnection = new RTCPeerConnection(RTC_CONNECTION_CONFIG);
 39 |     this.rtcPeerConnection.oniceconnectionstatechange = () => {
 40 |       if (this.rtcPeerConnection.iceConnectionState === "failed") {
 41 |         this.onConnectionFailed.dispatch();
 42 |       }
 43 |     };
 44 |   }
 45 | 
 46 |   public registerClient(uuid: string) {
 47 |     this.signalingSocket.addEventListener("open", () => {
 48 |       this.sendSignal({
 49 |         type: "REGISTER",
 50 |         payload: uuid
 51 |       });
 52 |     });
 53 |   }
 54 | 
 55 |   public async connectToDevice(peerUuid: string) {
 56 |     this.rtcPeerConnection.onicecandidate = event => {
 57 |       if (event.candidate) {
 58 |         this.sendSignal({
 59 |           type: "ICE_CANDIDATE",
 60 |           payload: {
 61 |             candidate: event.candidate,
 62 |             peerUuid: peerUuid
 63 |           }
 64 |         });
 65 |       }
 66 |     };
 67 | 
 68 |     this.initDataChannel();
 69 | 
 70 |     const offer = await this.rtcPeerConnection.createOffer();
 71 |     this.rtcPeerConnection.setLocalDescription(offer);
 72 |     this.sendSignal({
 73 |       type: "OFFER",
 74 |       payload: {
 75 |         offer: offer,
 76 |         peerUuid: peerUuid
 77 |       }
 78 |     });
 79 |   }
 80 | 
 81 |   private onSignalingMessage(message: SignalingMsg) {
 82 |     if (message.type == SignalingType.ERROR) {
 83 |       console.error(message.payload);
 84 |     } else if (message.type === SignalingType.OFFER) {
 85 |       const payload = message.payload as OfferPayload;
 86 |       this.onOffer(payload.peerUuid, payload.offer);
 87 |     } else if (message.type === SignalingType.ANSWER) {
 88 |       const payload = message.payload as AnswerPayload;
 89 |       this.onAnswer(payload.answer);
 90 |     } else if (message.type === SignalingType.ICE_CANDIDATE) {
 91 |       const payload = message.payload as ICECandidatePayload;
 92 |       this.onIceCandidate(payload.candidate);
 93 |     }
 94 |   }
 95 | 
 96 |   private async onOffer(peerUuid: string, offer: RTCSessionDescriptionInit) {
 97 |     this.onInitConnection.dispatch();
 98 |     this.rtcPeerConnection.setRemoteDescription(
 99 |       new RTCSessionDescription(offer)
100 |     );
101 |     this.rtcPeerConnection.ondatachannel = event =>
102 |       this.onDataChannelOpened(event);
103 |     const answer = await this.rtcPeerConnection.createAnswer();
104 |     this.rtcPeerConnection.setLocalDescription(answer);
105 |     this.sendSignal({
106 |       type: SignalingType.ANSWER,
107 |       payload: {
108 |         answer: answer,
109 |         peerUuid: peerUuid
110 |       }
111 |     });
112 |   }
113 | 
114 |   private async onAnswer(answer: RTCSessionDescriptionInit) {
115 |     this.rtcPeerConnection.setRemoteDescription(answer);
116 |   }
117 | 
118 |   private async onIceCandidate(candidate: RTCIceCandidateInit) {
119 |     this.rtcPeerConnection.addIceCandidate(new RTCIceCandidate(candidate));
120 |   }
121 | 
122 |   private sendSignal(signal: object) {
123 |     this.signalingSocket.send(JSON.stringify(signal));
124 |   }
125 | 
126 |   private initDataChannel() {
127 |     const options = { ordered: true };
128 |     const dataChannel = this.rtcPeerConnection.createDataChannel(
129 |       DATA_CHANNEL_NAME,
130 |       options
131 |     );
132 |     dataChannel.onopen = event =>
133 |       this.onDataChannelOpened(event as RTCDataChannelEvent);
134 |   }
135 | 
136 |   private onDataChannelOpened(event: RTCDataChannelEvent) {
137 |     const dataChannel = event.channel || event.target;
138 |     this.onConnectionEstablished.dispatch(
139 |       new PeerConnection(this.rtcPeerConnection, dataChannel)
140 |     );
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-container">
  3 |     <div v-if="!connecting" class="panel">
  4 |       <div class="panel-header">
  5 |         <img src="/img/logo-inversed.svg" />
  6 |       </div>
  7 |       <!-- Establish connection view -->
  8 |       <div v-if="!connectionEstablished" class="panel-content">
  9 |         <div class="description">
 10 |           <h1>How to use Clip Beam:</h1>
 11 |           <ol>
 12 |             <li>Open the web app on two devices</li>
 13 |             <li>
 14 |               On the first device show the
 15 |               <i class="pi pi-th-large"></i>
 16 |               QR code
 17 |             </li>
 18 |             <li>
 19 |               On the second device open the
 20 |               <i class="pi pi-camera"></i>
 21 |               QR scanner
 22 |             </li>
 23 |             <li>
 24 |               Scan the QR code to connect the 2 devices
 25 |             </li>
 26 |           </ol>
 27 |         </div>
 28 |         <div class="qr-code">
 29 |           <TabView>
 30 |             <TabPanel>
 31 |               <template #header>
 32 |                 <i class="pi pi-th-large"></i>
 33 |               </template>
 34 |               <qr-code :value="myUuid"></qr-code>
 35 |               <div class="p-inputgroup text-input">
 36 |                 <InputText
 37 |                   v-model="myUuid"
 38 |                   class="my-uuid-input-text"
 39 |                   readonly
 40 |                 />
 41 |                 <Button
 42 |                   @click="copyUuidToClipboard"
 43 |                   icon="pi pi-copy"
 44 |                   class="p-button-primary"
 45 |                 />
 46 |               </div>
 47 |             </TabPanel>
 48 |             <TabPanel>
 49 |               <template #header>
 50 |                 <i class="pi pi-camera"></i>
 51 |               </template>
 52 |               <qr-scanner @scan="onQrScan" @error="onQrScanError"></qr-scanner>
 53 |               <div style="height: 1rem;"></div>
 54 |               <div class="p-inputgroup text-input">
 55 |                 <InputText
 56 |                   @keyup.enter="connectToDevice"
 57 |                   v-model="peerUuid"
 58 |                   placeholder="enter device id manually"
 59 |                 />
 60 |                 <Button
 61 |                   icon="pi pi-caret-right"
 62 |                   class="p-button-primary"
 63 |                   @click="connectToDevice"
 64 |                 />
 65 |               </div>
 66 |             </TabPanel>
 67 |           </TabView>
 68 |         </div>
 69 |       </div>
 70 | 
 71 |       <!-- Data Channel view -->
 72 |       <div v-else class="panel-content">
 73 |         <div class="data-channel">
 74 |           <div class="messages-wrapper">
 75 |             <div class="messages">
 76 |               <MessageCard
 77 |                 v-for="(msg, id) in messages"
 78 |                 v-bind:key="id"
 79 |                 class="message"
 80 |                 :msg="msg"
 81 |               ></MessageCard>
 82 |             </div>
 83 |           </div>
 84 | 
 85 |           <div class="text-input">
 86 |             <Textarea
 87 |               class="text-area"
 88 |               placeholder="ctrl+enter to send"
 89 |               @keyup.enter="onTextEnter"
 90 |               v-model="currentMessage"
 91 |               :autoResize="true"
 92 |               rows="1"
 93 |             />
 94 |             <Button
 95 |               @click="selectFile"
 96 |               icon="pi pi-paperclip"
 97 |               class="p-button-secondary"
 98 |             />
 99 |             <Button
100 |               @click="sendText"
101 |               icon="pi pi-caret-right"
102 |               class="p-button-primary"
103 |             />
104 |             <input
105 |               @change="onFileSelected"
106 |               type="file"
107 |               id="file-input"
108 |               style="display: none"
109 |             />
110 |           </div>
111 |         </div>
112 |       </div>
113 |     </div>
114 | 
115 |     <!-- Error Dialog -->
116 |     <Dialog header="Error" closable modal v-model:visible="showErrorDialog">
117 |       {{ errorMessage }}
118 | 
119 |       <template #footer>
120 |         <Button label="Close" @click="showErrorDialog = false" />
121 |       </template>
122 |     </Dialog>
123 | 
124 |     <!-- Loader -->
125 |     <loader label="Connecting..." :show="connecting"></loader>
126 |   </div>
127 | </template>
128 | 
129 | <script lang="ts">
130 | import { defineComponent } from "vue";
131 | 
132 | // Compoenents
133 | import Button from "primevue/button";
134 | import Dialog from "primevue/dialog";
135 | import InputText from "primevue/inputtext";
136 | import TabView from "primevue/tabview";
137 | import TabPanel from "primevue/tabpanel";
138 | import Textarea from "primevue/textarea";
139 | 
140 | import Loader from "./components/Loader.vue";
141 | import MessageCard from "./components/MessageCard.vue";
142 | import QrCode from "./components/QrCode.vue";
143 | import QrScanner from "./components/QrScanner.vue";
144 | 
145 | // Services
146 | import { v4 as uuidv4 } from "uuid";
147 | import { SignalingClient } from "./webRTC/SignalingClient";
148 | import { PeerConnection } from "./webRTC/PeerConnection";
149 | import { MessageType, MessageHeader, Message } from "./webRTC/Message";
150 | 
151 | const signalingClient = new SignalingClient();
152 | let connection: PeerConnection;
153 | 
154 | export default defineComponent({
155 |   name: "App",
156 |   components: {
157 |     Button,
158 |     Dialog,
159 |     InputText,
160 |     TabView,
161 |     TabPanel,
162 |     Textarea,
163 |     Loader,
164 |     MessageCard,
165 |     QrCode,
166 |     QrScanner
167 |   },
168 |   data() {
169 |     return {
170 |       myUuid: uuidv4(),
171 |       peerUuid: null as string | null,
172 |       connectionEstablished: false,
173 |       connecting: false,
174 | 
175 |       currentMessage: "",
176 |       messages: {} as { id: string; msg: Message },
177 | 
178 |       showErrorDialog: false,
179 |       errorMessage: ""
180 |     };
181 |   },
182 |   mounted() {
183 |     signalingClient.registerClient(this.myUuid);
184 |     signalingClient.onInitConnection.addListener(() => {
185 |       this.connecting = true;
186 |     });
187 | 
188 |     signalingClient.onConnectionFailed.addListener(() => {
189 |       this.connecting = false;
190 |       this.errorMessage = `Could not establish a connection.
191 |         Ensure that both devices are in the same network and reachable.`;
192 |       this.showErrorDialog = true;
193 |     });
194 | 
195 |     signalingClient.onConnectionEstablished.addListener(con => {
196 |       connection = con;
197 |       this.connecting = false;
198 |       this.connectionEstablished = true;
199 | 
200 |       connection.onClose.addListener(() => {
201 |         this.errorMessage = "The connection was closed";
202 |         this.showErrorDialog = true;
203 |         this.connectionEstablished = false;
204 |       });
205 | 
206 |       connection.onRecievingMessage.addListener(event => {
207 |         const id = event.id;
208 |         const msg = event.msg;
209 |         this.messages[id] = msg;
210 |         this.$nextTick(() => {
211 |           const bottomMsg = this.$el.querySelector(".message:last-child");
212 |           bottomMsg.scrollIntoView();
213 |         });
214 |       });
215 |     });
216 |   },
217 |   methods: {
218 |     copyUuidToClipboard() {
219 |       const inputText = this.$el.querySelector(".my-uuid-input-text");
220 |       inputText.focus();
221 |       inputText.select();
222 |       inputText.setSelectionRange(0, 99999);
223 |       document.execCommand("copy");
224 |     },
225 | 
226 |     onQrScan(uuid: string) {
227 |       this.peerUuid = uuid;
228 |       this.connectToDevice();
229 |     },
230 | 
231 |     onQrScanError(error: string) {
232 |       this.errorMessage = error;
233 |       this.showErrorDialog = true;
234 |     },
235 | 
236 |     connectToDevice() {
237 |       if (this.peerUuid) {
238 |         this.connecting = true;
239 |         signalingClient.connectToDevice(this.peerUuid);
240 |       }
241 |     },
242 | 
243 |     sendText() {
244 |       if (connection) {
245 |         connection.sendText(this.currentMessage);
246 |         this.addMessage(this.currentMessage);
247 |         this.currentMessage = "";
248 |       } else {
249 |         this.connectionEstablished = false;
250 |       }
251 |     },
252 | 
253 |     addMessage(payload: string | File) {
254 |       let header: MessageHeader;
255 |       if (typeof payload === "string") {
256 |         header = {
257 |           type: MessageType.TEXT,
258 |           size: payload.length
259 |         };
260 |       } else {
261 |         header = {
262 |           type: MessageType.FILE,
263 |           name: payload.name,
264 |           size: payload.size
265 |         };
266 |       }
267 |       const msg = {
268 |         header: header,
269 |         timestamp: new Date(),
270 |         transferCompleted: true,
271 |         transferProgress: 100,
272 |         payload: payload
273 |       };
274 |       this.messages[uuidv4()] = msg;
275 |       this.$nextTick(() => {
276 |         const bottomMsg = this.$el.querySelector(".message:last-child");
277 |         bottomMsg.scrollIntoView();
278 |       });
279 |     },
280 | 
281 |     selectFile() {
282 |       this.$el.querySelector("#file-input").click();
283 |     },
284 | 
285 |     onFileSelected(event: InputEvent) {
286 |       const el = event.target as HTMLInputElement;
287 |       const files = el.files;
288 |       if (files && files.length >= 1) {
289 |         const file = files[0];
290 |         this.sendFile(file);
291 |       }
292 |     },
293 | 
294 |     onTextEnter(event: KeyboardEvent) {
295 |       if (event.ctrlKey) {
296 |         this.sendText();
297 |       }
298 |     },
299 | 
300 |     sendFile(file: File) {
301 |       if (connection) {
302 |         connection.sendFile(file);
303 |         this.addMessage(file);
304 |       } else {
305 |         this.connectionEstablished = false;
306 |       }
307 |     },
308 | 
309 |     fileUrl(file: File) {
310 |       return URL.createObjectURL(file);
311 |     }
312 |   }
313 | });
314 | </script>
315 | 
316 | <style>
317 | @import url("../node_modules/primevue/resources/themes/saga-blue/theme.css");
318 | @import url("../node_modules/primevue/resources/primevue.min.css");
319 | @import url("../node_modules/primeicons/primeicons.css");
320 | @font-face {
321 |   font-family: "Fredoka One";
322 |   src: url("/fonts/Fredoka_One/FredokaOne-Regular.ttf") format("truetype");
323 | }
324 | 
325 | html,
326 | body {
327 |   height: 100%;
328 |   margin: 0;
329 | }
330 | 
331 | /** Override some styles from prime. */
332 | .p-button,
333 | .p-button-primary {
334 |   border-color: #3d5a6c !important;
335 |   background-color: #3d5a6c !important;
336 | }
337 | 
338 | .p-button-secondary {
339 |   border-color: #72a98f !important;
340 |   background-color: #72a98f !important;
341 | }
342 | 
343 | .p-highlight .p-tabview-nav-link {
344 |   color: #72a98f !important;
345 |   border-color: #72a98f !important;
346 | }
347 | 
348 | /** App Style. */
349 | #app {
350 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
351 |   -webkit-font-smoothing: antialiased;
352 |   -moz-osx-font-smoothing: grayscale;
353 |   color: #2c3e50;
354 | }
355 | 
356 | .app-container {
357 |   width: 100vw;
358 |   height: 100vh;
359 |   background-image: url("/img/background.png");
360 |   background-size: cover;
361 |   background-position: center;
362 |   background-repeat: no-repeat;
363 | 
364 |   display: flex;
365 |   justify-content: center;
366 |   align-items: center;
367 | }
368 | 
369 | .panel {
370 |   background: #f8f9fa;
371 |   border-radius: 5px;
372 |   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
373 |     0 1px 14px 0 rgba(0, 0, 0, 0.12);
374 |   overflow: hidden;
375 | }
376 | 
377 | .panel-header {
378 |   background: #3d5a6c;
379 |   padding: 10px 15px;
380 |   text-align: center;
381 |   font-size: 2rem;
382 |   color: #f8f9fa;
383 | }
384 | 
385 | .panel-content {
386 |   display: flex;
387 |   flex-wrap: wrap-reverse;
388 |   justify-content: center;
389 | 
390 |   width: 90vw;
391 |   height: 75vh;
392 |   max-width: 1000px;
393 |   max-height: 600px;
394 |   padding: 10px;
395 | 
396 |   overflow: auto;
397 | }
398 | 
399 | .panel-content .description {
400 |   width: 600px;
401 |   flex-grow: 1;
402 | }
403 | 
404 | .panel-content .description ol {
405 |   line-height: 200%;
406 | }
407 | 
408 | .panel-content .qr-code {
409 |   width: 300px;
410 |   flex-grow: 1;
411 |   text-align: center;
412 | }
413 | 
414 | .panel-content .data-channel {
415 |   display: flex;
416 |   flex-direction: column;
417 | 
418 |   width: 100%;
419 | }
420 | 
421 | .panel-content .data-channel .messages-wrapper {
422 |   flex-grow: 1;
423 |   position: relative;
424 | }
425 | .panel-content .data-channel .messages-wrapper .messages {
426 |   position: absolute;
427 |   top: 0;
428 |   left: 0;
429 |   right: 0;
430 |   bottom: 0;
431 |   overflow: auto;
432 | }
433 | 
434 | .panel-content .data-channel .message {
435 |   margin-top: 1rem;
436 | }
437 | 
438 | .panel-content .data-channel .text-input {
439 |   flex-grow: 0;
440 | 
441 |   display: flex;
442 |   flex-direction: row;
443 |   align-items: flex-end;
444 | }
445 | 
446 | .panel-content .data-channel .text-input .text-area {
447 |   flex-grow: 1;
448 | }
449 | </style>
450 | 


--------------------------------------------------------------------------------
/public/img/logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    width="39.212551mm"
 11 |    height="8.7909021mm"
 12 |    viewBox="0 0 39.212551 8.7909021"
 13 |    version="1.1"
 14 |    id="svg8"
 15 |    inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
 16 |    sodipodi:docname="logo.svg">
 17 |   <defs
 18 |      id="defs2" />
 19 |   <sodipodi:namedview
 20 |      id="base"
 21 |      pagecolor="#ffffff"
 22 |      bordercolor="#666666"
 23 |      borderopacity="1.0"
 24 |      inkscape:pageopacity="0.0"
 25 |      inkscape:pageshadow="2"
 26 |      inkscape:zoom="7.9195959"
 27 |      inkscape:cx="64.852351"
 28 |      inkscape:cy="14.192968"
 29 |      inkscape:document-units="mm"
 30 |      inkscape:current-layer="text4855"
 31 |      showgrid="false"
 32 |      inkscape:window-width="1920"
 33 |      inkscape:window-height="1025"
 34 |      inkscape:window-x="0"
 35 |      inkscape:window-y="0"
 36 |      inkscape:window-maximized="1"
 37 |      showguides="true"
 38 |      inkscape:guide-bbox="true"
 39 |      inkscape:document-rotation="0">
 40 |     <sodipodi:guide
 41 |        position="2.4583511,4.5730505"
 42 |        orientation="0,1"
 43 |        id="guide849"
 44 |        inkscape:locked="false" />
 45 |   </sodipodi:namedview>
 46 |   <metadata
 47 |      id="metadata5">
 48 |     <rdf:RDF>
 49 |       <cc:Work
 50 |          rdf:about="">
 51 |         <dc:format>image/svg+xml</dc:format>
 52 |         <dc:type
 53 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 54 |         <dc:title />
 55 |       </cc:Work>
 56 |     </rdf:RDF>
 57 |   </metadata>
 58 |   <g
 59 |      inkscape:label="Layer 1"
 60 |      inkscape:groupmode="layer"
 61 |      id="layer1"
 62 |      transform="translate(-56.836663,-53.239729)">
 63 |     <g
 64 |        id="g875"
 65 |        transform="translate(1.1811756)">
 66 |       <g
 67 |          transform="matrix(0.26458333,0,0,0.26458333,56.260932,56.256347)"
 68 |          id="g3891"
 69 |          style="fill:none;stroke:#72a98f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1">
 70 |         <polyline
 71 |            style="stroke:#72a98f;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 72 |            transform="translate(-4.9107144,0.44642858)"
 73 |            points="9 10 4 15 9 20"
 74 |            id="polyline3877" />
 75 |         <path
 76 |            style="stroke:#72a98f;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 77 |            sodipodi:nodetypes="cssc"
 78 |            inkscape:connector-curvature="0"
 79 |            d="m 28.883929,4.4464286 v 7.0000004 c 0,2.209139 -1.790861,4 -4,4 H 1.0535717"
 80 |            id="path3879" />
 81 |       </g>
 82 |       <g
 83 |          transform="matrix(0.05472176,0.2042244,-0.2042244,0.05472176,61.875258,54.54679)"
 84 |          id="g4004"
 85 |          style="fill:none;stroke:#3d5a6c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1">
 86 |         <path
 87 |            style="stroke:#3d5a6c;stroke-opacity:1"
 88 |            inkscape:connector-curvature="0"
 89 |            d="m 21.44,11.05 -9.19,9.19 A 6.0033366,6.0033366 0 0 1 3.76,11.75 l 9.19,-9.19 a 4.0022244,4.0022244 0 0 1 5.66,5.66 l -9.2,9.19 A 2.0011122,2.0011122 0 0 1 6.58,14.58 L 15.07,6.1"
 90 |            id="path3993" />
 91 |       </g>
 92 |       <g
 93 |          transform="matrix(-0.26458333,0,0,-0.26458333,63.962856,59.014013)"
 94 |          id="g3891-5"
 95 |          style="fill:none;stroke:#72a98f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1">
 96 |         <polyline
 97 |            style="stroke:#72a98f;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 98 |            transform="translate(-4.9107144,0.44642858)"
 99 |            points="9 10 4 15 9 20"
100 |            id="polyline3877-3" />
101 |         <path
102 |            style="stroke:#72a98f;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
103 |            sodipodi:nodetypes="cssc"
104 |            inkscape:connector-curvature="0"
105 |            d="m 28.883929,4.4464286 v 7.0000004 c 0,2.209139 -1.790861,4 -4,4 H 1.0535717"
106 |            id="path3879-5" />
107 |       </g>
108 |     </g>
109 |     <g
110 |        aria-label="CLIP BEAM"
111 |        id="text4855"
112 |        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;line-height:1.25;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0">
113 |       <path
114 |          d="m 69.231359,58.362944 0.101566,-0.07335 q 0.191847,-0.112851 0.270843,-0.112851 0.174919,0 0.378051,0.315983 0.124137,0.19749 0.124137,0.315983 0,0.118494 -0.079,0.19749 -0.07335,0.079 -0.17492,0.141064 -0.101566,0.06207 -0.197489,0.118494 -0.09028,0.05642 -0.378052,0.146706 -0.28777,0.09028 -0.558613,0.09028 -0.265201,0 -0.541686,-0.06771 -0.270843,-0.07335 -0.564256,-0.236988 -0.287771,-0.169277 -0.519116,-0.406264 -0.231344,-0.24263 -0.383694,-0.615039 -0.146706,-0.378052 -0.146706,-0.818171 0,-0.44012 0.146706,-0.795601 0.146707,-0.361124 0.372409,-0.592469 0.231345,-0.236988 0.524758,-0.394979 0.552971,-0.304699 1.111585,-0.304699 0.2652,0 0.536043,0.08464 0.276485,0.079 0.417549,0.163634 l 0.135422,0.079 q 0.101566,0.06207 0.157992,0.101566 0.146706,0.118494 0.146706,0.270843 0,0.146706 -0.118494,0.310341 -0.22006,0.304698 -0.394979,0.304698 -0.101566,0 -0.28777,-0.124136 -0.236988,-0.191848 -0.631967,-0.191848 -0.366767,0 -0.722248,0.253916 -0.169277,0.124136 -0.282128,0.349838 -0.112851,0.225703 -0.112851,0.513473 0,0.282128 0.112851,0.507831 0.112851,0.225702 0.287771,0.355481 0.344196,0.248273 0.716605,0.248273 0.174919,0 0.327268,-0.04514 0.157992,-0.04514 0.225703,-0.09028 z"
115 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
116 |          id="path19" />
117 |       <path
118 |          d="m 71.477092,58.611217 h 1.534776 q 0.186205,0 0.270843,0.04514 0.08464,0.0395 0.112851,0.129779 0.02821,0.09028 0.02821,0.24263 0,0.146707 -0.02821,0.236988 -0.02821,0.09028 -0.09592,0.124136 -0.107209,0.05643 -0.293413,0.05643 h -2.031322 q -0.394979,0 -0.46269,-0.214418 -0.03386,-0.09028 -0.03386,-0.28777 v -3.137263 q 0,-0.129779 0.0056,-0.191847 0.01128,-0.06771 0.05643,-0.15235 0.079,-0.152349 0.440119,-0.152349 0.39498,0 0.468333,0.208775 0.02821,0.09592 0.02821,0.293413 z"
119 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
120 |          id="path21" />
121 |       <path
122 |          d="m 73.790541,55.806865 q 0,-0.129779 0.0056,-0.191847 0.01129,-0.06771 0.05643,-0.15235 0.079,-0.152349 0.44012,-0.152349 0.394979,0 0.468332,0.208775 0.02821,0.09592 0.02821,0.293413 v 3.137263 q 0,0.135422 -0.01129,0.19749 -0.0056,0.06207 -0.05078,0.146707 -0.079,0.152349 -0.44012,0.152349 -0.394979,0 -0.46269,-0.214418 -0.03385,-0.09028 -0.03385,-0.28777 z"
123 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
124 |          id="path23" />
125 |       <path
126 |          d="m 78.293304,56.145418 q 0.146706,0.299056 0.146706,0.665822 0,0.366767 -0.146706,0.665822 -0.146707,0.293413 -0.378052,0.468333 -0.468332,0.361124 -0.97052,0.361124 h -0.70532 v 0.637609 q 0,0.129779 -0.01129,0.19749 -0.0056,0.06207 -0.05078,0.146706 -0.079,0.152349 -0.44012,0.152349 -0.394979,0 -0.46269,-0.208775 -0.03386,-0.09592 -0.03386,-0.293413 v -3.13162 q 0,-0.129779 0.0056,-0.191847 0.01129,-0.06771 0.05643,-0.15235 0.079,-0.152349 0.44012,-0.152349 h 1.207508 q 0.496545,0 0.964877,0.361124 0.231345,0.174919 0.378052,0.473975 z m -1.342929,1.162368 q 0.169276,0 0.332911,-0.124137 0.163634,-0.124136 0.163634,-0.372409 0,-0.248272 -0.163634,-0.372409 -0.163635,-0.129779 -0.338554,-0.129779 h -0.70532 v 0.998734 z"
127 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
128 |          id="path25" />
129 |       <path
130 |          d="m 83.179751,57.22879 q 0.332911,0.394979 0.332911,0.885882 -0.01129,0.564256 -0.389336,0.94795 -0.372409,0.378051 -0.908452,0.378051 H 80.73088 q -0.394979,0 -0.46269,-0.214417 -0.03386,-0.09592 -0.03386,-0.293413 v -3.131621 q 0,-0.135421 0.0056,-0.19749 0.01129,-0.06207 0.05643,-0.146706 0.079,-0.152349 0.44012,-0.152349 h 1.421925 q 0.519116,0 0.868954,0.361124 0.366767,0.366766 0.366767,0.880239 0,0.372409 -0.214418,0.68275 z m -0.665822,0.829456 q 0,-0.135421 -0.03386,-0.214417 -0.02821,-0.079 -0.101566,-0.112851 -0.112851,-0.04514 -0.315983,-0.04514 -0.203133,0 -0.304699,-0.079 -0.101566,-0.079 -0.101566,-0.321626 0,-0.248272 0.101566,-0.327268 0.107209,-0.079 0.349839,-0.079 0.225702,0 0.270843,-0.118494 0.01693,-0.06207 0.01693,-0.203132 0,-0.141064 -0.09592,-0.19749 -0.09028,-0.05642 -0.276485,-0.05642 h -0.789959 v 2.13853 h 0.92538 q 0.355481,0 0.355481,-0.383694 z"
131 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
132 |          id="path27" />
133 |       <path
134 |          d="m 84.87816,58.447583 h 1.737909 q 0.129779,0 0.191847,0.01129 0.06771,0.0056 0.152349,0.05078 0.152349,0.079 0.152349,0.440119 0,0.39498 -0.208775,0.46269 -0.09592,0.03386 -0.293413,0.03386 h -2.234454 q -0.394979,0 -0.46269,-0.214418 -0.03385,-0.09028 -0.03385,-0.28777 v -3.137263 q 0,-0.287771 0.107209,-0.389337 0.107208,-0.107209 0.406264,-0.107209 h 2.223169 q 0.129779,0 0.191847,0.01129 0.06771,0.0056 0.152349,0.05078 0.152349,0.079 0.152349,0.44012 0,0.394979 -0.208775,0.46269 -0.09592,0.03386 -0.293413,0.03386 H 84.87816 v 0.569899 h 1.117227 q 0.129779,0 0.191847,0.01129 0.06771,0.0056 0.152349,0.05078 0.152349,0.079 0.152349,0.44012 0,0.394979 -0.214417,0.46269 -0.09592,0.03386 -0.293413,0.03386 H 84.87816 Z"
135 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
136 |          id="path29" />
137 |       <path
138 |          d="m 89.866177,55.603732 1.523491,3.148549 q 0.09592,0.191847 0.09592,0.28777 0,0.203133 -0.327269,0.366767 -0.191847,0.09592 -0.304698,0.09592 -0.107209,0 -0.180562,-0.05078 -0.06771,-0.05078 -0.101566,-0.107208 -0.02821,-0.05643 -0.08464,-0.169277 l -0.293414,-0.609397 h -1.562989 l -0.293413,0.609397 q -0.05642,0.112851 -0.09028,0.163634 -0.02821,0.05078 -0.101566,0.107209 -0.06771,0.05078 -0.180562,0.05078 -0.107208,0 -0.299055,-0.09592 -0.327269,-0.157991 -0.327269,-0.361124 0,-0.09592 0.09592,-0.28777 l 1.523491,-3.154191 q 0.06207,-0.129779 0.186204,-0.208775 0.129779,-0.079 0.270843,-0.079 0.304698,0 0.451405,0.293413 z m -0.457047,1.354215 -0.372409,0.773031 h 0.75046 z"
139 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
140 |          id="path31" />
141 |       <path
142 |          d="m 96.191483,55.468311 q 0.04514,0.08464 0.05078,0.152349 0.01129,0.06771 0.01129,0.19749 v 3.13162 q 0,0.389337 -0.214417,0.457048 -0.107208,0.03385 -0.270843,0.03385 -0.163634,0 -0.259557,-0.02821 -0.09592,-0.02821 -0.146707,-0.06771 -0.05078,-0.0395 -0.079,-0.112852 -0.02821,-0.09592 -0.02821,-0.293413 v -1.890257 q -0.141064,0.174919 -0.411907,0.558613 -0.270842,0.378052 -0.344196,0.473975 -0.07335,0.09592 -0.101566,0.135422 -0.02821,0.03386 -0.141064,0.101566 -0.107208,0.06207 -0.236987,0.06207 -0.124137,0 -0.231345,-0.05643 -0.101566,-0.06207 -0.146707,-0.118493 l -0.04514,-0.06207 Q 93.483055,58.00182 93.150143,57.544773 92.817232,57.082083 92.78902,57.048228 v 1.901542 q 0,0.129779 -0.01128,0.19749 -0.0056,0.06207 -0.05078,0.141064 -0.08464,0.152349 -0.440119,0.152349 -0.344196,0 -0.428835,-0.152349 -0.04514,-0.079 -0.05643,-0.146706 -0.0056,-0.06771 -0.0056,-0.203133 v -3.13162 q 0,-0.129779 0.0056,-0.191847 0.01129,-0.06771 0.05643,-0.15235 0.08464,-0.146706 0.44012,-0.146706 0.152349,0 0.259558,0.0395 0.112851,0.03386 0.146706,0.07335 l 0.03386,0.03386 1.280861,1.681483 q 0.959235,-1.269576 1.280861,-1.67584 0.09592,-0.152349 0.451405,-0.152349 0.361123,0 0.440119,0.152349 z"
143 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
144 |          id="path33" />
145 |     </g>
146 |   </g>
147 | </svg>
148 | 


--------------------------------------------------------------------------------
/public/img/logo-inversed.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    width="39.212551mm"
 11 |    height="8.7909021mm"
 12 |    viewBox="0 0 39.212551 8.7909021"
 13 |    version="1.1"
 14 |    id="svg8"
 15 |    inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
 16 |    sodipodi:docname="logo-inversed.svg">
 17 |   <defs
 18 |      id="defs2" />
 19 |   <sodipodi:namedview
 20 |      id="base"
 21 |      pagecolor="#ffffff"
 22 |      bordercolor="#666666"
 23 |      borderopacity="1.0"
 24 |      inkscape:pageopacity="0.0"
 25 |      inkscape:pageshadow="2"
 26 |      inkscape:zoom="7.9195959"
 27 |      inkscape:cx="72.343012"
 28 |      inkscape:cy="14.192968"
 29 |      inkscape:document-units="mm"
 30 |      inkscape:current-layer="g875"
 31 |      showgrid="false"
 32 |      inkscape:window-width="1920"
 33 |      inkscape:window-height="1025"
 34 |      inkscape:window-x="0"
 35 |      inkscape:window-y="0"
 36 |      inkscape:window-maximized="1"
 37 |      showguides="true"
 38 |      inkscape:guide-bbox="true"
 39 |      inkscape:document-rotation="0">
 40 |     <sodipodi:guide
 41 |        position="2.4583511,4.5730505"
 42 |        orientation="0,1"
 43 |        id="guide849"
 44 |        inkscape:locked="false" />
 45 |   </sodipodi:namedview>
 46 |   <metadata
 47 |      id="metadata5">
 48 |     <rdf:RDF>
 49 |       <cc:Work
 50 |          rdf:about="">
 51 |         <dc:format>image/svg+xml</dc:format>
 52 |         <dc:type
 53 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 54 |         <dc:title></dc:title>
 55 |       </cc:Work>
 56 |     </rdf:RDF>
 57 |   </metadata>
 58 |   <g
 59 |      inkscape:label="Layer 1"
 60 |      inkscape:groupmode="layer"
 61 |      id="layer1"
 62 |      transform="translate(-56.836663,-53.239729)">
 63 |     <g
 64 |        id="g875"
 65 |        transform="translate(1.1811756)">
 66 |       <g
 67 |          transform="matrix(0.26458333,0,0,0.26458333,56.260932,56.256347)"
 68 |          id="g3891"
 69 |          style="fill:none;stroke:#fcd0a1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1">
 70 |         <polyline
 71 |            style="stroke:#fcd0a1;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 72 |            transform="translate(-4.9107144,0.44642858)"
 73 |            points="9 10 4 15 9 20"
 74 |            id="polyline3877" />
 75 |         <path
 76 |            style="stroke:#fcd0a1;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 77 |            sodipodi:nodetypes="cssc"
 78 |            inkscape:connector-curvature="0"
 79 |            d="m 28.883929,4.4464286 v 7.0000004 c 0,2.209139 -1.790861,4 -4,4 H 1.0535717"
 80 |            id="path3879" />
 81 |       </g>
 82 |       <g
 83 |          transform="matrix(0.05472176,0.2042244,-0.2042244,0.05472176,61.875258,54.54679)"
 84 |          id="g4004"
 85 |          style="fill:none;stroke:#f8f9fa;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1">
 86 |         <path
 87 |            style="stroke:#f8f9fa;stroke-opacity:1"
 88 |            inkscape:connector-curvature="0"
 89 |            d="m 21.44,11.05 -9.19,9.19 A 6.0033366,6.0033366 0 0 1 3.76,11.75 l 9.19,-9.19 a 4.0022244,4.0022244 0 0 1 5.66,5.66 l -9.2,9.19 A 2.0011122,2.0011122 0 0 1 6.58,14.58 L 15.07,6.1"
 90 |            id="path3993" />
 91 |       </g>
 92 |       <g
 93 |          transform="matrix(-0.26458333,0,0,-0.26458333,63.962856,59.014013)"
 94 |          id="g3891-5"
 95 |          style="fill:none;stroke:#fcd0a1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1">
 96 |         <polyline
 97 |            style="stroke:#fcd0a1;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 98 |            transform="translate(-4.9107144,0.44642858)"
 99 |            points="9 10 4 15 9 20"
100 |            id="polyline3877-3" />
101 |         <path
102 |            style="stroke:#fcd0a1;stroke-width:2.75528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
103 |            sodipodi:nodetypes="cssc"
104 |            inkscape:connector-curvature="0"
105 |            d="m 28.883929,4.4464286 v 7.0000004 c 0,2.209139 -1.790861,4 -4,4 H 1.0535717"
106 |            id="path3879-5" />
107 |       </g>
108 |     </g>
109 |     <g
110 |        aria-label="CLIP BEAM"
111 |        id="text4855"
112 |        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;line-height:1.25;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#3d5a6c;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0">
113 |       <path
114 |          d="m 69.231359,58.362944 0.101566,-0.07335 q 0.191847,-0.112851 0.270843,-0.112851 0.174919,0 0.378051,0.315983 0.124137,0.19749 0.124137,0.315983 0,0.118494 -0.079,0.19749 -0.07335,0.079 -0.17492,0.141064 -0.101566,0.06207 -0.197489,0.118494 -0.09028,0.05642 -0.378052,0.146706 -0.28777,0.09028 -0.558613,0.09028 -0.265201,0 -0.541686,-0.06771 -0.270843,-0.07335 -0.564256,-0.236988 -0.287771,-0.169277 -0.519116,-0.406264 -0.231344,-0.24263 -0.383694,-0.615039 -0.146706,-0.378052 -0.146706,-0.818171 0,-0.44012 0.146706,-0.795601 0.146707,-0.361124 0.372409,-0.592469 0.231345,-0.236988 0.524758,-0.394979 0.552971,-0.304699 1.111585,-0.304699 0.2652,0 0.536043,0.08464 0.276485,0.079 0.417549,0.163634 l 0.135422,0.079 q 0.101566,0.06207 0.157992,0.101566 0.146706,0.118494 0.146706,0.270843 0,0.146706 -0.118494,0.310341 -0.22006,0.304698 -0.394979,0.304698 -0.101566,0 -0.28777,-0.124136 -0.236988,-0.191848 -0.631967,-0.191848 -0.366767,0 -0.722248,0.253916 -0.169277,0.124136 -0.282128,0.349838 -0.112851,0.225703 -0.112851,0.513473 0,0.282128 0.112851,0.507831 0.112851,0.225702 0.287771,0.355481 0.344196,0.248273 0.716605,0.248273 0.174919,0 0.327268,-0.04514 0.157992,-0.04514 0.225703,-0.09028 z"
115 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
116 |          id="path19" />
117 |       <path
118 |          d="m 71.477092,58.611217 h 1.534776 q 0.186205,0 0.270843,0.04514 0.08464,0.0395 0.112851,0.129779 0.02821,0.09028 0.02821,0.24263 0,0.146707 -0.02821,0.236988 -0.02821,0.09028 -0.09592,0.124136 -0.107209,0.05643 -0.293413,0.05643 h -2.031322 q -0.394979,0 -0.46269,-0.214418 -0.03386,-0.09028 -0.03386,-0.28777 v -3.137263 q 0,-0.129779 0.0056,-0.191847 0.01128,-0.06771 0.05643,-0.15235 0.079,-0.152349 0.440119,-0.152349 0.39498,0 0.468333,0.208775 0.02821,0.09592 0.02821,0.293413 z"
119 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
120 |          id="path21" />
121 |       <path
122 |          d="m 73.790541,55.806865 q 0,-0.129779 0.0056,-0.191847 0.01129,-0.06771 0.05643,-0.15235 0.079,-0.152349 0.44012,-0.152349 0.394979,0 0.468332,0.208775 0.02821,0.09592 0.02821,0.293413 v 3.137263 q 0,0.135422 -0.01129,0.19749 -0.0056,0.06207 -0.05078,0.146707 -0.079,0.152349 -0.44012,0.152349 -0.394979,0 -0.46269,-0.214418 -0.03385,-0.09028 -0.03385,-0.28777 z"
123 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
124 |          id="path23" />
125 |       <path
126 |          d="m 78.293304,56.145418 q 0.146706,0.299056 0.146706,0.665822 0,0.366767 -0.146706,0.665822 -0.146707,0.293413 -0.378052,0.468333 -0.468332,0.361124 -0.97052,0.361124 h -0.70532 v 0.637609 q 0,0.129779 -0.01129,0.19749 -0.0056,0.06207 -0.05078,0.146706 -0.079,0.152349 -0.44012,0.152349 -0.394979,0 -0.46269,-0.208775 -0.03386,-0.09592 -0.03386,-0.293413 v -3.13162 q 0,-0.129779 0.0056,-0.191847 0.01129,-0.06771 0.05643,-0.15235 0.079,-0.152349 0.44012,-0.152349 h 1.207508 q 0.496545,0 0.964877,0.361124 0.231345,0.174919 0.378052,0.473975 z m -1.342929,1.162368 q 0.169276,0 0.332911,-0.124137 0.163634,-0.124136 0.163634,-0.372409 0,-0.248272 -0.163634,-0.372409 -0.163635,-0.129779 -0.338554,-0.129779 h -0.70532 v 0.998734 z"
127 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
128 |          id="path25" />
129 |       <path
130 |          d="m 83.179751,57.22879 q 0.332911,0.394979 0.332911,0.885882 -0.01129,0.564256 -0.389336,0.94795 -0.372409,0.378051 -0.908452,0.378051 H 80.73088 q -0.394979,0 -0.46269,-0.214417 -0.03386,-0.09592 -0.03386,-0.293413 v -3.131621 q 0,-0.135421 0.0056,-0.19749 0.01129,-0.06207 0.05643,-0.146706 0.079,-0.152349 0.44012,-0.152349 h 1.421925 q 0.519116,0 0.868954,0.361124 0.366767,0.366766 0.366767,0.880239 0,0.372409 -0.214418,0.68275 z m -0.665822,0.829456 q 0,-0.135421 -0.03386,-0.214417 -0.02821,-0.079 -0.101566,-0.112851 -0.112851,-0.04514 -0.315983,-0.04514 -0.203133,0 -0.304699,-0.079 -0.101566,-0.079 -0.101566,-0.321626 0,-0.248272 0.101566,-0.327268 0.107209,-0.079 0.349839,-0.079 0.225702,0 0.270843,-0.118494 0.01693,-0.06207 0.01693,-0.203132 0,-0.141064 -0.09592,-0.19749 -0.09028,-0.05642 -0.276485,-0.05642 h -0.789959 v 2.13853 h 0.92538 q 0.355481,0 0.355481,-0.383694 z"
131 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
132 |          id="path27" />
133 |       <path
134 |          d="m 84.87816,58.447583 h 1.737909 q 0.129779,0 0.191847,0.01129 0.06771,0.0056 0.152349,0.05078 0.152349,0.079 0.152349,0.440119 0,0.39498 -0.208775,0.46269 -0.09592,0.03386 -0.293413,0.03386 h -2.234454 q -0.394979,0 -0.46269,-0.214418 -0.03385,-0.09028 -0.03385,-0.28777 v -3.137263 q 0,-0.287771 0.107209,-0.389337 0.107208,-0.107209 0.406264,-0.107209 h 2.223169 q 0.129779,0 0.191847,0.01129 0.06771,0.0056 0.152349,0.05078 0.152349,0.079 0.152349,0.44012 0,0.394979 -0.208775,0.46269 -0.09592,0.03386 -0.293413,0.03386 H 84.87816 v 0.569899 h 1.117227 q 0.129779,0 0.191847,0.01129 0.06771,0.0056 0.152349,0.05078 0.152349,0.079 0.152349,0.44012 0,0.394979 -0.214417,0.46269 -0.09592,0.03386 -0.293413,0.03386 H 84.87816 Z"
135 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
136 |          id="path29" />
137 |       <path
138 |          d="m 89.866177,55.603732 1.523491,3.148549 q 0.09592,0.191847 0.09592,0.28777 0,0.203133 -0.327269,0.366767 -0.191847,0.09592 -0.304698,0.09592 -0.107209,0 -0.180562,-0.05078 -0.06771,-0.05078 -0.101566,-0.107208 -0.02821,-0.05643 -0.08464,-0.169277 l -0.293414,-0.609397 h -1.562989 l -0.293413,0.609397 q -0.05642,0.112851 -0.09028,0.163634 -0.02821,0.05078 -0.101566,0.107209 -0.06771,0.05078 -0.180562,0.05078 -0.107208,0 -0.299055,-0.09592 -0.327269,-0.157991 -0.327269,-0.361124 0,-0.09592 0.09592,-0.28777 l 1.523491,-3.154191 q 0.06207,-0.129779 0.186204,-0.208775 0.129779,-0.079 0.270843,-0.079 0.304698,0 0.451405,0.293413 z m -0.457047,1.354215 -0.372409,0.773031 h 0.75046 z"
139 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
140 |          id="path31" />
141 |       <path
142 |          d="m 96.191483,55.468311 q 0.04514,0.08464 0.05078,0.152349 0.01129,0.06771 0.01129,0.19749 v 3.13162 q 0,0.389337 -0.214417,0.457048 -0.107208,0.03385 -0.270843,0.03385 -0.163634,0 -0.259557,-0.02821 -0.09592,-0.02821 -0.146707,-0.06771 -0.05078,-0.0395 -0.079,-0.112852 -0.02821,-0.09592 -0.02821,-0.293413 v -1.890257 q -0.141064,0.174919 -0.411907,0.558613 -0.270842,0.378052 -0.344196,0.473975 -0.07335,0.09592 -0.101566,0.135422 -0.02821,0.03386 -0.141064,0.101566 -0.107208,0.06207 -0.236987,0.06207 -0.124137,0 -0.231345,-0.05643 -0.101566,-0.06207 -0.146707,-0.118493 l -0.04514,-0.06207 Q 93.483055,58.00182 93.150143,57.544773 92.817232,57.082083 92.78902,57.048228 v 1.901542 q 0,0.129779 -0.01128,0.19749 -0.0056,0.06207 -0.05078,0.141064 -0.08464,0.152349 -0.440119,0.152349 -0.344196,0 -0.428835,-0.152349 -0.04514,-0.079 -0.05643,-0.146706 -0.0056,-0.06771 -0.0056,-0.203133 v -3.13162 q 0,-0.129779 0.0056,-0.191847 0.01129,-0.06771 0.05643,-0.15235 0.08464,-0.146706 0.44012,-0.146706 0.152349,0 0.259558,0.0395 0.112851,0.03386 0.146706,0.07335 l 0.03386,0.03386 1.280861,1.681483 q 0.959235,-1.269576 1.280861,-1.67584 0.09592,-0.152349 0.451405,-0.152349 0.361123,0 0.440119,0.152349 z"
143 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64256px;font-family:'Fredoka One';-inkscape-font-specification:'Fredoka One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f8f9fa;fill-opacity:1;stroke:#300000;stroke-width:0.141064;stroke-opacity:0"
144 |          id="path33" />
145 |     </g>
146 |   </g>
147 | </svg>
148 | 


--------------------------------------------------------------------------------