web-library/index.html at master · parley-messaging/web-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<!-- Strict CSP (for testing CSP support) -->
	<meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://*.parley.nu; style-src 'self' 'unsafe-inline'; img-src 'self' data:;font-src 'self'; script-src 'self'; default-src 'self'">
	<!---->

	<title>Parley messenger</title>
	<style>
		:root {
			--parley-mobile-height: 1vh;
			--parley-mobile-width: 1vw;
			--parley-base-z-index: 100;
			--parley-font: 'OpenSans', sans-serif;
			--parley-background-color: #FFF;
			--parley-nav-background-color: #00006B;
			--parley-nav-title-color: #FFF;
			--parley-nav-title-font: var(--parley-font);
			--parley-nav-title-font-size: 14px;
			--parley-nav-title-font-weight: 400;
			--parley-error-background-color: var(--parley-nav-background-color);
			--parley-error-text-color: var(--parley-nav-title-color);
			--parley-date-color-border: var(--parley-date-color);
			--parley-date-color: #404040;
			--parley-date-font: var(--parley-font);
			--parley-date-font-size: 11px;
			--parley-date-font-weight: 400;
			--parley-user-background-color: #4BF0B9;
			--parley-user-text-color: #00006B;
			--parley-user-time-color: #00006B;
			--parley-account-background-color: #E7E3E0;
			--parley-account-text-color: #535353;
			--parley-account-time-color: #00006B;
			--parley-info-color: #535353;
			--parley-info-font: var(--parley-font);
			--parley-info-font-size: 14px;
			--parley-info-font-weight: 200;
			--parley-agent-name-color: rgba(0, 0, 0, 0.68);
			--parley-agent-name-font: var(--parley-font);
			--parley-agent-name-font-size: 13px;
			--parley-agent-name-font-weight: 400;
			--parley-reply-color: #535353;
			--parley-reply-font: var(--parley-font);
			--parley-reply-font-size: 15px;
			--parley-reply-font-weight: 400;
			--parley-button-label: false;
			--parley-button-label-background-color: #6D83AD;
			--parley-button-label-color: #FFF;
			--parley-button-label-font-size: 24px;
			--parley-button-label-font-weight: 400;
			--parley-messenger-icon-background-color: #00006B;
			--parley-link-color: #2E2EFF;
			--parley-link-font: var(--parley-font);
			--parley-link-font-size: 14px;
			--parley-link-font-weight: 400;
			--parley-popup-text-color: #070721;
			--parley-popup-close-button-background-color: var(--parley-nav-background-color);
			--parley-popup-text-line-height: 15px;
			--parley-popup-textarea-color: #6A6A7A;
			--parley-close-alert-left-button-background-color: var(--parley-nav-background-color);
			--parley-close-alert-left-button-color: #FFF;
			--parley-close-alert-right-button-background-color: #E6E6E8;
			--parley-close-alert-right-button-color: #070721;
			--parley-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			--parley-image-loading-color: var(--parley-nav-background-color);
			--parley-messenger-unread-messages-badge-background-color: red;
			--parley-messenger-unread-messages-badge-color: white;
		}
	</style>
</head>
<body>
<div id="app"></div>
<script src="src/UI/index.jsx" type="module"></script>

<!-- We need a separate startup script (to initialize the chat once the code is loaded)
     because the CSP blocks any inline scripts -->
<script src="index.js"></script>
</body>
</html>