-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
157 lines (150 loc) · 13.6 KB
/
index.html
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PubNub Color Changing Pirate Duck Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<div class="wrapper">
<div class="marketing">
<header class="marketing-header">
<img src="images/pb_logo.png" width="325px" height="71 px" alt="PubNub logo">
</header>
<aside class="marketing-aside">
<p>PubNub powers realtime connected experiences.</p>
<p>Global, secure (HIPAA/SOC2) Pub/Sub infrastructure with use cases in realtime secure chat, IOT, gaming, and asset tracking.</p>
<p class="marketing-pubnub-link"><a href="https://www.pubnub.com">https://pubnub.com</a></p>
<div class="marketing-qrcode">
<p class="marketing-qrcode__top">Play Pirate Duck Chat at home:</p>
<img class="marketing-qrcode__image" src="images/pnducksqr.png" width="140" height="140">
<p class="marketing-qrcode__bottom"><a href="https://bit.ly/pnducks">https://bit.ly/pnducks</a></p>
</div>
</aside>
</div>
<article>
<h2 class="demo-header">
Demo: Pirate Duck Chat
</h2>
<div id="duck-area">
<div id="duck-area__top">
<div class="duck-speech">
<div class="duck-speech__meta">
<span class="duck-speech__who" id="js-duck-speech__who">A duck said:</span>
<span class="duck-speech__when" id="js-duck-speech__when"></span>
<span class="duck-speech__history-link"><a href="#" onclick="requestChatHistory(); event.preventDefault();" class="special_hidden_link">💬</a></span>
</div>
<div class="duck-speech__what" id="js-duck-speech__what">
Hello from PubNub!
</div>
</div>
<div id="duck-image">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="179" height="161" xml:space="preserve" id="js-pirate-duck">
<g id="pirate-duck__body">
<path class="pirate-duck__body-parts js-pirate-duck" fill-rule="evenodd" stroke="none" fill="rgb(0, 0, 0)" d="M 145.12,67.35 C 136.52,77.8 121.86,84.67 105.22,84.67 102.09,84.67 99.03,84.43 96.07,83.97 93.53,83.57 91.58,81.81 90.91,79.31 90.25,76.82 91.06,74.31 93.07,72.7 101.3,66.05 106.57,55.86 106.57,44.44 106.57,24.42 90.39,8.19 70.44,8.19 54.49,8.19 40.98,22.02 36.18,35.01 L 23.37,29.55 C 21.84,28.89 20.23,29.05 18.85,29.98 17.47,30.91 16.71,32.35 16.73,34.01 16.8,38.94 18.83,43.38 22.08,46.6 21.1,46.75 20.19,47.17 19.44,47.93 18.23,49.15 17.78,50.77 18.19,52.44 19.31,57.03 26.1,60.55 34.31,60.55 35.75,60.55 37.14,60.44 38.47,60.23 39.63,61.92 40.96,63.37 42.35,64.81 43.12,65.61 43.41,66.67 43.15,67.76 42.9,68.85 42.16,69.66 41.11,70.03 6.79,82.08 -5.95,147.81 78.72,147.81 111.34,147.81 155.21,133.02 155.21,93.54 155.21,83.46 151.39,74.27 145.12,67.35 Z M 52.39,32.5 C 49.73,36.2 46.17,38.19 44.44,36.94 42.7,35.68 43.45,31.66 46.1,27.96 48.76,24.25 52.32,22.26 54.06,23.52 55.79,24.77 55.05,28.79 52.39,32.5 Z M 52.39,32.5" />
<ellipse class="pirate-duck__body-parts js-pirate-duck" stroke="none" fill="rgb(0, 0, 0)" cx="-0" cy="0" rx="1.98" ry="4.29" transform="translate(47.68, 33.82) rotate(35.7)" />
</g>
<path class="pirate-duck__body-parts js-pirate-duck" id="js-pirate-duck__flag" fill-rule="evenodd" stroke="none" fill="rgb(0, 0, 0)" d="M 121.94,24.69 C 122.42,24.52 122.95,24.34 123.53,24.17 130.4,22.11 137.74,22.11 144.66,25.57 150.81,28.64 157.41,28.64 163.62,26.78 164.53,26.51 165.34,26.22 166.05,25.93 166.46,25.76 166.74,25.63 166.87,25.57 167.85,25.08 169,25.79 169,26.88 L 169,58.5 C 169,59.06 168.69,59.57 168.19,59.82 167.46,60.18 166.19,60.7 164.47,61.22 157.6,63.27 150.26,63.27 143.34,59.82 137.19,56.74 130.59,56.74 124.38,58.6 123.47,58.87 122.66,59.16 121.95,59.45 L 121.94,59.46 122,83 C 122,83.81 122.81,83 122,83 121.19,83 119,83.81 119,83 L 119,22.47 C 119,21.66 119.66,21 120.47,21 121.28,21 121.94,21.66 121.94,22.47 L 121.94,24.69 Z M 121.94,56.3 C 122.42,56.13 122.95,55.96 123.53,55.78 130.4,53.73 137.74,53.73 144.66,57.18 150.81,60.26 157.41,60.26 163.62,58.4 164.53,58.13 165.34,57.84 166.05,57.55 166.05,57.55 166.05,48.06 166.06,29.08 165.58,29.25 165.05,29.42 164.47,29.6 157.6,31.66 150.26,31.66 143.34,28.2 137.19,25.12 130.59,25.12 124.38,26.98 123.47,27.26 122.66,27.55 121.95,27.83 121.95,27.84 121.95,37.33 121.94,56.3 Z M 147.29,48.21 L 150.54,49.83 C 151.27,50.19 151.56,51.08 151.2,51.8 150.83,52.53 149.95,52.83 149.22,52.46 L 144,49.85 138.78,52.46 C 137.02,53.34 135.71,50.71 137.46,49.83 L 140.71,48.21 137.46,46.58 C 136.73,46.22 136.44,45.33 136.8,44.61 137.17,43.88 138.05,43.59 138.78,43.95 L 144,46.56 149.22,43.95 C 150.98,43.07 152.29,45.7 150.54,46.58 L 147.29,48.21 Z M 144,43.06 C 141.16,43.06 138.85,40.75 138.85,37.91 138.85,35.07 141.16,32.76 144,32.76 146.84,32.76 149.15,35.07 149.15,37.91 149.15,40.75 146.84,43.06 144,43.06 Z M 144,40.12 C 145.22,40.12 146.21,39.13 146.21,37.91 146.21,36.69 145.22,35.71 144,35.71 142.78,35.71 141.79,36.69 141.79,37.91 141.79,39.13 142.78,40.12 144,40.12 Z M 144,40.12" />
</svg>
</div>
</div>
</div>
<p class="ducks-status" id="js-duck-status">
Normally there would controls for changing colors. It appears either that javascript is not enabled or that there is a problem loading our connections.
</p>
<div class="buttons-area" id="js-buttons-area" hidden=true>
<div id="buttons-area__text-buttons">
<p class="buttons-area_text-buttons buttons-area_text-buttons_header">Send a <a class="buttons-area_text-buttons_header_link special_hidden_link" href="#" onclick="showTextInputOverlay()">message</a> to Pirate Duck Chat</p>
<button class="button button__publish-text js-publish-button" id="js-button__publish-text--1" data-type="text" data-text="If it quacks like a duck, is it a duck?" onclick="handleButtonClick(this)">"Quacks…"</button>
<button class="button button__publish-text js-publish-button" id="js-button__publish-text--2" data-type="text" data-text="A duck without Ahab is just a duck." onclick="handleButtonClick(this)">"A duck…"</button>
<button class="button button__publish-text js-publish-button" data-type="text" data-text="Woof!" onclick="handleButtonClick(this)">"Woof!"</button>
</div>
<div id="buttons-area__color-buttons">
<p class="buttons-area_text-buttons buttons-area_text-buttons_header">Suggest the Pirate Ducks <a class="buttons-area_color-buttons_header_link special_hidden_link" href="#" onclick="showColorInputOverlay()">change color</a></p>
<button class="button button__publish-color button__color--red js-publish-button" data-type="color" data-text="#D02129" onclick="handleButtonClick(this)">Red</button>
<button class="button button__publish-color button__color--blue js-publish-button" data-type="color" data-text="#4421D0" onclick="handleButtonClick(this)">Blue</button>
<button class="button button__publish-color button__color--yellow js-publish-button" data-type="color" data-text="#FECE53" onclick="handleButtonClick(this)">Yellow</button>
</div>
</div>
<div class="duck-area__meta" id="js-duck-area__meta">
<p class="duck-meta-part duck-meta-part__count" id="js-duck-meta-part__count" aria-live="polite">
</p>
<p class="duck-meta-part duck-meta-part__name" id="js-duck-meta-part__name" aria-live="polite">
</p>
<p class="duck-meta-part duck-meta-part__talk" id="js-duck-meta-part__talk" aria-live="polite">
</p>
<p class="duck-meta-part duck-meta-part__color" id="js-duck-meta-part__color" aria-live="polite">
</p>
<p class="duck-meta-part duck-meta-part__dance" id="js-duck-meta-part__dance" aria-live="polite">
</p>
</div>
<a class="message-log__trigger-link" id="js-message-log__trigger-link" onclick="showLogOverlay()">Show PubNub message log</a>
</article>
</div>
<div class="accessory-overlay" id="js-accessory-overlay">
<span class="helper"></span>
<div>
<div class="accessory-overlay__close-button" id="js-accessory-overlay__close-button" onclick="hideLogOverlay()">X</div>
<!-- show the messge log (responding to showLogOverlay() )-->
<div class="message-log-area" id="js-message-log-area">
<p>The latest JSON messages sent to and received from PubNub.</p>
<div class="message-log-area__table-wrap">
<table class="message-log-area__table" id="js-message-log-area__table"></table>
</div>
</div>
<!-- show history -->
<div class="chat-history-area" id="js-chat-history-area">
<p>Chat history</p>
<div class="message-log-area__table-wrap">
<table class="message-log-area__table" id="js-chat-history-area__table"></table>
<table class="hidden-chat-history-table" id="js-hidden-chat-history-table" style="display:none">
<tr><td id="js-hidden-chat-history-table-td" class="duck-chat-history__td">
<div class="duck-chat-history__meta">
<span class="duck-chat-history__who">A duck said:</span>
<span class="duck-chat-history__when"></span>
</div>
<div class="duck-chat-history__what">
</div>
</td></tr>
</table>
</div>
</div>
<!-- show text chat optional input (responding to showTextInputOverlay() )-->
<form action="#" id="js-overlay-text-chat" class="overlay-text-chat" style="display:none" onsubmit="handleCustomTextMessageSend()">
<h3>Custom message</h3>
<p class="accessory-overlay-description">Like a good pirate duck, you are not constrained by the button. Send a custom message to the ducks!</p>
<div class="accessory-overlay-input-area">
<label for="js-overlay-text-chat-input">Message to send (80 characters max)</label>
<input type="text" id="js-overlay-text-chat-input" class="overlay-text-chat-input" maxlength="80">
<input type="submit" value="Send">
<input type='button' onclick="hideLogOverlay()" name='Cancel' value='Cancel' />
</div>
</form>
<!-- show color optional input (responding to showColorInputOverlay() )-->
<form action="#" id="js-overlay-color-change" class="overlay-color-change" style="display:none" onsubmit="handleCustomColorMessageSend()">
<h3>Custom colors</h3>
<p class="accessory-overlay-description">Not everything needs to be yellow, blue, and red. Suggest the ducks change to your favorite color.</p>
<div class="accessory-overlay-input-area">
<label for="js-overlay-text-color-input">Pick a color</label>
<input type="color" value="#ff0000" id="js-overlay-color-change-input" class="overlay-color-change-input">
<input type="submit" value="Send">
<input type='button' onclick="hideLogOverlay()" name='Cancel' value='Cancel' />
</div>
</form>
</div>
</div>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.24.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/randomduckdata.js"></script>
<script src="js/pubnub-keys.js"></script>
<script src="js/index.js"></script>
</body>
</html>
<!-- Copyright 2019, Mark D. F. Williams, All rights reserved. -->