-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
124 lines (124 loc) · 6.42 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
<title>eg</title>
<style>
body {
background: #111;
color: #eee;
}
p {
width: auto;
font-weight: normal;
text-align: center;
font-size: 1em;
}
div#chat p {
padding: 5px;
border: solid 1px #111;
border-radius: 5px;
background-color: #1a1a1a;
color: #eee;
}
</style>
</head>
<body onload="doChat()">
<div class="container-fluid">
<div class="row">
<div class="col"></div>
<div class="col">
<div class="center-block" id="chat">
</div>
</div>
<div class="col"></div>
</div>
</div>
<script>
let strings = [
`we're leaving hospital now - Alex was feeling bad again, doctors tell us nothing can be done. It's something in the air that is causing all this people to feel sick`,
`we need to do something asap about this - Sasha told me you were joining the group, that's great. Let's see what we can think of together`,
`The doctor told me that Alex's problem has to do with a special kind of dust in the air... Something called 'PM10'. We need more information about it`,
`Please bring back a useful URL about PM10. Use <a href="https://duckduckgo.com">DuckDuckGo</a> search engine, I like my data as I like my coffee: UNTRACKED`,
`Ok so PM10 is a fine coarse dust that gets into the lungs and is terribly harmful for health... I guess other cities must have this same trouble. Let's see what's happening outside this town`,
`Sasha sent me this cool site: https://waqi.info/... It collects data from official monitoring networks. Maybe you can tell me which city has the worst PM10 quality index? It would be useful to contact someone from there`,
`I also checked the map, these official data is a complete fraud! If you search for our town, they say the air is clean! We can't trust the government for this. We need to start monitoring air quality ourselves`,
`My contact in Delhi mentioned a community where people build their own devices to monitor the environment. We need to see what this community is doing, go to their website https://publiclab.org/tags and bring me back the URL of the air-quality projects repository, please`,
`I was with Alex browsing the repository you brought and we found a cool project, it's well documented and I think we can replicate it with the materials we have at hand`,
`We need the list of materials so we can gather everything and start working. I think this people have it somewhere in this collaborative platform called GitHub: https://github.com/rlyehlab/eter, an URL will do`,
`We just checked and we have all the necessary to start building the device! I'll meet you tomorrow 7pm at the hacklab`
];
const chat = document.getElementById('chat');
chat.appendChild(document.createElement('div')).setAttribute('id','message');
const message = document.getElementById('message');
function doChat(){ setView(3) };
function doNext(){
while (chat.firstChild) {
chat.removeChild(chat.firstChild);
}
chat.appendChild(document.createElement('div')).setAttribute('id','message');
};
function doCheck(){
const url = document.getElementById('exampleInput').value;
if(url.startsWith('https://duckduckgo.com/?q=')){
let regex = url.match(/air|health|pm10|pollution|quality/gi);
if(regex.length==5){
console.log(regex);
message.innerHTML = message.innerHTML.concat('<p>Cool story!</p>');
}
if(url.match(/PM10/g)){
message.innerHTML = message.innerHTML.concat('<p>Easy as lazy, but still cool...</p>');
}
} else {
message.innerHTML = message.innerHTML.concat('<p>You are not even trying it! UNTRACKEDly talking...</p>');
}
};
function setView(n){
switch(n){
case 1:
window.setTimeout( function(){
message.innerHTML = message.innerHTML.concat('<p>'+strings[0]+'</p>');
window.setTimeout( function(){
message.innerHTML = message.innerHTML.concat('<p>'+strings[1]+'</p>');
window.setTimeout( function(){
message.insertAdjacentHTML('afterend', `
<div class="form-row text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary" onclick="doNext()">Next</button>
</div>
</div>`
)}, 1000)
}, 1000)
}, 1000);
break;
case 3:
window.setTimeout( function(){
message.innerHTML = message.innerHTML.concat('<p>'+strings[2]+'</p>');
window.setTimeout( function(){
message.innerHTML = message.innerHTML.concat('<p>'+strings[3]+'</p>');
window.setTimeout( function(){
message.insertAdjacentHTML('afterend', `
<div class="form-row form-group text-center">
<div class="col-12">
<input class="form-control" id="exampleInput" placeholder="Enter URL">
<br>
<button type="submit" class="btn btn-primary" onclick="doCheck()">Next</button>
</div>
</div>
`);
doCheck();
}, 1000)
}, 1000)
}, 500);
break;
}
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>