Skip to content

Commit 443db02

Browse files
author
markzegarelli
committed
Update styling for all
1 parent 0488873 commit 443db02

File tree

10 files changed

+312
-240
lines changed

10 files changed

+312
-240
lines changed

‎src/_includes/components/codepens/group-spec.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
2+
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
3+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = document.getElementById("name").value;
7+
var industry = document.getElementById("industry").value;
8+
var employees = document.getElementById("employees").value;
9+
var plan = document.getElementById("plan").value;
10+
var totalBilled = document.getElementById("totalBilled").value;
11+
var user_agent = window.navigator.userAgent
12+
var ts = Date.now()
13+
var date = new Date(ts)
14+
var now = date.toISOString()
15+
var received = ts + 233
16+
var received_ts = new Date(received)
17+
var received_iso = received_ts.toISOString()
18+
var output = `{
19+
"anonymousId": "507f191e810c19729de860ea",
20+
"channel": "browser",
21+
"context": {
22+
"ip": "8.8.8.8",
23+
"userAgent": "${user_agent}"
24+
},
25+
"integrations": {
26+
"All": true,
27+
"Mixpanel": false,
28+
"Salesforce": false
29+
},
30+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
31+
"receivedAt": "${received_iso}",
32+
"sentAt": "${now}",
33+
"timestamp": "${now}",
34+
"traits": {
35+
"name": "${name}",
36+
"industry": "${industry}",
37+
"employees": ${employees},
38+
"plan": "${plan}",
39+
"total billed": ${totalBilled}
40+
},
41+
"type": "group",
42+
"userId": "97980cfea0067",
43+
"groupId": "0e8c78ea9d97a7b8185e8632",
44+
"version": "1.1"
45+
}`
46+
output_container.innerHTML = output
47+
Prism.highlightElement(output_container)
48+
}
49+
50+
</script>
51+
<script>
52+
function showOutput() {
53+
var show = document.getElementById("output-code");
54+
if (show.style.display === "block") {
55+
show.style.display = "none";
56+
} else {
57+
show.style.display = "block";
58+
}
59+
}
60+
61+
</script>
62+
63+
<div class="sample-code-container">
64+
<div class="form">
65+
<h3> Sample Group call</h3>
66+
<div class="sample-form">
67+
<label for="name">Name:</label>
68+
<input type="text" id="name">
69+
<label for="industry">Title:</label>
70+
<input type="text" id="industry">
71+
<label for="employees">Employees:</label>
72+
<input type="text" id="employees">
73+
<label for="plan">Plan:</label>
74+
<input type="text" id="plan">
75+
<label for="totalBilled">Total Billed:</label>
76+
<input type="text" id="totalBilled">
77+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()"
78+
value="See a sample group call">
79+
</div>
80+
</div>
81+
82+
83+
<div class="output">
84+
<h4>Sample Group Call</h4>
85+
<pre class="language-javascript"><code class="language-javascript" id="output_container">
86+
Sample output goes here!
87+
</code></pre>
88+
</div>
89+
</div>

‎src/_includes/components/codepens/identify-spec.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
2+
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
3+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = document.getElementById("name").value;
7+
var email = document.getElementById("email").value;
8+
var plan = document.getElementById("plan").value;
9+
var logins = document.getElementById("logins").value;
10+
var street = document.getElementById("street").value;
11+
var city = document.getElementById("city").value;
12+
var state = document.getElementById("state").value;
13+
var postcode = document.getElementById("postcode").value;
14+
var country = document.getElementById("country").value;
15+
var user_agent = window.navigator.userAgent
16+
var ts = Date.now()
17+
var date = new Date(ts)
18+
var now = date.toISOString()
19+
var received = ts + 233
20+
var received_ts = new Date(received)
21+
var received_iso = received_ts.toISOString()
22+
var output = `{
23+
"anonymousId": "507f191e810c19729de860ea",
24+
"channel": "browser",
25+
"context": {
26+
"ip": "8.8.8.8",
27+
"userAgent": "${user_agent}"
28+
},
29+
"integrations": {
30+
"All": false,
31+
"Mixpanel": true,
32+
"Salesforce": true
33+
},
34+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
35+
"receivedAt": "${received_iso}",
36+
"sentAt": "${now}",
37+
"timestamp": "${now}",
38+
"traits": {
39+
"name": "${name}",
40+
"email": "${email}",
41+
"plan": "${plan}",
42+
"logins": ${logins},
43+
"address": {
44+
"street": "${street}",
45+
"city": "${city}",
46+
"state": "${state}",
47+
"postalCode": "${postcode}",
48+
"country": "${country}"
49+
}
50+
},
51+
"type": "identify",
52+
"userId": "97980cfea0067",
53+
"version": "1.1"
54+
}`
55+
output_container.innerHTML = output
56+
Prism.highlightElement(output_container)
57+
}
58+
59+
</script>
60+
<script>
61+
function showOutput() {
62+
var show = document.getElementById("output-code");
63+
if (show.style.display === "block") {
64+
show.style.display = "none";
65+
} else {
66+
show.style.display = "block";
67+
}
68+
}
69+
70+
</script>
71+
72+
<div class="sample-code-container">
73+
<div class="form">
74+
<h4> Sample Identify </h4>
75+
<div class="sample-form">
76+
<label for="name">Name:</label>
77+
<input type="text" id="name">
78+
<label for="email">Email:</label>
79+
<input type="text" id="email">
80+
<label for="plan">Plan:</label>
81+
<input type="text" id="plan">
82+
<label for="logins">Logins:</label>
83+
<input type="text" id="logins">
84+
<label for="street">Street:</label>
85+
<input type="text" id="street">
86+
<label for="city">City:</label>
87+
<input type="text" id="city">
88+
<label for="state">State:</label>
89+
<input type="text" id="state">
90+
<label for="postcode">Zip Code:</label>
91+
<input type="text" id="postcode">
92+
<label for="country">Country:</label>
93+
<input type="text" id="country">
94+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample identify call">
95+
</div>
96+
</div>
97+
98+
<div class="output">
99+
<h4>Sample Identify Call</h4>
100+
<pre><code class="language-javascript" id="output_container">Sample output goes here!</code></pre>
101+
</div>
102+
</div>

‎src/_includes/components/codepens/page-spec.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
2+
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
3+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = "Page call Spec"
7+
var title = document.title
8+
var url = window.location.href
9+
var user_agent = window.navigator.userAgent
10+
var ts = Date.now()
11+
var date = new Date(ts)
12+
var now = date.toISOString()
13+
var received = ts + 233
14+
var received_ts = new Date(received)
15+
var received_iso = received_ts.toISOString()
16+
var output = `{
17+
"anonymousId": "507f191e810c19729de860ea",
18+
"channel": "browser",
19+
"context": {
20+
"ip": "8.8.8.8",
21+
"userAgent": "${user_agent}"
22+
},
23+
"integrations": {
24+
"All": true,
25+
"Mixpanel": false,
26+
"Salesforce": false
27+
},
28+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
29+
"name": "${name}",
30+
"properties": {
31+
"title": "${title}",
32+
"url": "${url}"
33+
},
34+
"receivedAt": "${received_iso}",
35+
"sentAt": "${now}",
36+
"timestamp": "${now}",
37+
"type": "page",
38+
"userId": "97980cfea0067",
39+
"version": "1.1"
40+
}`
41+
output_container.innerHTML = output
42+
Prism.highlightElement(output_container)
43+
}
44+
45+
</script>
46+
<script>
47+
function showOutput() {
48+
var show = document.getElementById("output_container");
49+
if (show.style.display === "block") {
50+
show.style.display = "none";
51+
} else {
52+
show.style.display = "block";
53+
}
54+
}
55+
56+
</script>
57+
58+
<div class="sample-code-container">
59+
<div class="form">
60+
<h4> Make a Page Call </h4>
61+
<div class="sample-form">
62+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()"
63+
value="See a sample page call" />
64+
</div>
65+
</div>
66+
67+
<div class="output">
68+
<h4>Sample Page Call</h4>
69+
<pre class="language-javascript code-output"><code class="language-javascript" id="output_container">
70+
71+
</code></pre>
72+
</div>
73+
</div>

‎src/_includes/content/codepens/screen-spec.html renamed to ‎src/_includes/components/codepens/screen-spec.html

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
function showMessage(){
44
var name = document.getElementById("name").value;
55
var variation = document.getElementById("variation").value;
6+
var ts = Date.now()
7+
var date = new Date(ts)
8+
var now = date.toISOString()
9+
var received = ts + 233
10+
var received_ts = new Date(received)
11+
var received_iso = received_ts.toISOString()
612
var output =
713
`{
814
"anonymousId": "3a12eab0-bca7-11e4-8dfc-aa07a5b093db",
@@ -16,13 +22,13 @@
1622
"Salesforce": false
1723
},
1824
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
19-
"name": "${name}",
25+
"name": "Dropdown selected",
2026
"properties": {
2127
"variation": "${variation}"
2228
},
23-
"receivedAt": "2015-02-23T22:28:55.387Z",
24-
"sentAt": "2015-02-23T22:28:55.111Z",
25-
"timestamp": "2015-02-23T22:28:55.111Z",
29+
"receivedAt": "${received_iso}",
30+
"sentAt": "${now}",
31+
"timestamp": "${now}",
2632
"type": "screen",
2733
"userId": "97980cfea0067",
2834
"version": "1.1"
@@ -45,11 +51,20 @@
4551
<div class="sample-code-container">
4652
<div class="form">
4753
<h4> Sample Screen </h4>
48-
<label for="name">Name:</label>
49-
<input type="text" id="name"><br>
54+
<!-- <label for="name">Name:</label>
55+
<input type="text" id="name"><br> -->
56+
<div class="sample-form">
5057
<label for="variation">Variation:</label>
51-
<input type="text" id="variation"><br>
52-
<input type="submit" id="submit" onclick="showMessage(); showOutput()" value="See a sample Screen call">
58+
59+
60+
<!-- <input type="text" id="variation"><br> -->
61+
<select name="variation" id="variation">
62+
<option value="blue">Blue</option>
63+
<option value="green">Green</option>
64+
<option value="red">Red</option>
65+
</select>
66+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample Screen call">
67+
</div>
5368
</div>
5469

5570
<div class="output">

‎src/_includes/content/codepens/track-spec.html renamed to ‎src/_includes/components/codepens/track-spec.html

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
function showMessage(){
44
var event = document.getElementById("event").value;
55
var title = document.getElementById("title").value;
6+
var user_agent = window.navigator.userAgent
7+
var ts = Date.now()
8+
var date = new Date(ts)
9+
var now = date.toISOString()
10+
var received = ts + 233
11+
var received_ts = new Date(received)
12+
var received_iso = received_ts.toISOString()
613
var output =
714
`{
815
"anonymousId": "23adfd82-aa0f-45a7-a756-24f2a7a4c895",
@@ -18,18 +25,18 @@
1825
"title": "Spec: Track",
1926
"url": "https://segment.com/docs/connections/spec/track/"
2027
},
21-
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36",
22-
"ip": "108.0.78.21"
28+
"userAgent": "${user_agent}",
29+
"ip": "8.8.8.8"
2330
},
2431
"event": "${event}",
2532
"integrations": {},
2633
"messageId": "ajs-f8ca1e4de5024d9430b3928bd8ac6b96",
2734
"properties": {
2835
"title": "${title}"
2936
},
30-
"receivedAt": "2015-12-12T19:11:01.266Z",
31-
"sentAt": "2015-12-12T19:11:01.169Z",
32-
"timestamp": "2015-12-12T19:11:01.249Z",
37+
"receivedAt": "${received_iso}",
38+
"sentAt": "${now}",
39+
"timestamp": "${now}",
3340
"type": "track",
3441
"userId": "AiUGstSDIg",
3542
"originalTimestamp": "2015-12-12T19:11:01.152Z"
@@ -52,11 +59,17 @@
5259
<div class="sample-code-container">
5360
<div class="form">
5461
<h3> Sample Track call</h3>
62+
<div class="sample-form">
5563
<label for="event">Event:</label>
56-
<input type="text" id="event"><br>
64+
<input type="text" id="event" value="Course clicked" disabled>
5765
<label for="title">Title:</label>
58-
<input type="text" id="title"><br>
59-
<input type="submit" id="submit" onclick="showMessage(); showOutput()" value="See a sample Track call">
66+
<select name="title" id="title">
67+
<option value="Intro to Analytics">Intro to Analytics</option>
68+
<option value="Protocols 101">Protocols 101</option>
69+
<option value="Reverse ETL">Reverse ETL</option>
70+
</select>
71+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample Track call">
72+
</div>
6073
</div>
6174

6275
<div class="output">

0 commit comments

Comments
 (0)