index.html
3.95 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="/style.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:300italic' rel='stylesheet' type='text/css'>
<style>
.thought {
font-family: 'Alegreya Sans', sans-serif;
}
.thought__heading {
text-align: center;
margin-top: 0;
margin-bottom: 0;
color: white;
}
.thought__form-container {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 20px;
top: 0;
z-index: 1;
}
.thought__item {
width: 100%;
max-width: 900px;
}
.thought__input {
flex: 1;
font-family: 'Alegreya Sans', sans-serif;
font-size: 25px;
font-weight: 500;
padding: 15px;
width: 100%;
margin-bottom: 10px;
background-color: white;
border-radius: 5px;
}
.thought__add {
width: 30px;
height: 30px;
font-family: Tahoma, arial;
text-align: center;
border-radius: 50%;
background-color: white;
font-size: 25px;
font-weight: 700;
}
.thought__add:hover::after {
background-color: rgba(0,0,0,0.2);
}
.thought__add:focus::after {
background-color: rgba(0,0,0,0.2);
}
.thought__add::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50%;
transition: background-color 0.3s;
background-color: rgba(0,0,0,0);
}
.thought__list {
list-style-type: circle;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
overflow-y: auto;
padding: 90px 20px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
min-height: 100vh;
}
@media (max-width: 567px) {
.thought__heading {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="thought hue page">
<div class="thought__form-container hue">
<h2 id='title' class="thought__heading hue">Add a thought...</h2>
<button class="thought__add say huet">
<span aria-hidden="true">+</span>
<span class="visually-hidden">Add thought</span>
</button>
</div>
<ul class="thought__list">
</ul>
</div>
<script src="/jquery.js"></script>
<script src="/gun.js"></script>
<script>
// Check out the interactive tutorial
// for how to build a simplified version
// of this example: https://scrimba.com/c/cW2Vsa
var gun = Gun(location.origin + '/gun');
var think = gun.get('think1/' + location.hash.slice(1));
var thoughtItemStr = function(id) { return '<li class="thought__item"><label class="visually-hidden" for="' + id + '">Thought</label><input id="' + id + '" class="thought__input huet"><li/>'}
var typing, throttle;
$('.thought__add').on('click', function () {
$(thoughtItemStr('')).prependTo('.thought__list').find('.thought__input').focus();
});
$(document).on('keyup', '.thought__input', function () {
var input = $(this), id = input.attr('id');
if (!id) {
input.attr('id', id = Gun.text.random());
}
typing = id;
clearTimeout(throttle);
throttle = setTimeout(function () {
think.get(id).put(input.val());
typing = false;
}, 10);
});
think.map().on(function (thought, id) {
var li = $('#' + id).parent()[0] || $(thoughtItemStr(id)).prependTo('.thought__list');
if (thought) {
if (id === typing) { return }
$(li).find('.thought__input').val(thought);
} else {
$(li).hide();
}
});
</script>
</div>
</body>