Browse Source

"Prog + quantic fluctuations"

Doug Le Tough 2 years ago
parent
commit
ffb0d27e85
4 changed files with 388 additions and 82 deletions
  1. 1
    0
      .gitignore
  2. 291
    52
      prog.html
  3. 32
    7
      scripts/thsf.js
  4. 64
    23
      styles/thsf.css

+ 1
- 0
.gitignore View File

@@ -1,2 +1,3 @@
1 1
 *.un~
2 2
 *.swp
3
+*.sh

+ 291
- 52
prog.html View File

@@ -10,7 +10,7 @@
10 10
   <link rel="icon" type="image/png" href="/images/favicon.png" />
11 11
   <script src="/scripts/thsf.js"></script>
12 12
 </head>
13
-<body id='body' onload='javascipt:load();'>
13
+<body id='body' onload='javascipt:load();get_programme("thursday");'>
14 14
   <header><img src='/images/banner_full.png' alt='THSF 9' title='THSF 9'/><div class='header_subtitle'>THSF 9</div></header>
15 15
   <div class='content'>
16 16
     <nav id='nav' class='vertical_navbar'>
@@ -22,61 +22,300 @@
22 22
         </h4>
23 23
       </article>
24 24
       <article>
25
-        <h3>
26
-          <span class='title'>
27
-             Jeudi 10 mai 2018
28
-          </span>
29
-          <br/>
30
-          <span class='subtitle'>
31
-             JEUDI 10 MAI 2018
32
-          </span>
33
-        </h3>
34
-        <p>
35
-          Work in progress. Please wait while processing...
36
-        </p>
25
+        <h5>
26
+            <span id='thursday' class='prog_button' onclick='javascript:get_programme(this.id);'>Jeudi 10/05</span>
27
+            <span id='friday' class='prog_button' onclick='javascript:get_programme(this.id);'>Vendredi 11/05</span>
28
+            <span id='saturday' class='prog_button'onclick='javascript:get_programme(this.id);' >Samedi 12/05</span>
29
+            <span id='sunday' class='prog_button'onclick='javascript:get_programme(this.id);' >Dimanche 13/05</span></h5>
37 30
       </article>
38
-      <article>
39
-        <h3>
40
-          <span class='title'>
41
-             Vendredi 11 mai 2018
42
-          </span>
31
+<!--
32
+      JEUDI ************************
33
+-->
34
+      <section id='thursday_prog'>
35
+        <article>
36
+          <h3>
37
+            <span class='title'>
38
+               Conférences
39
+            </span>
40
+          </h3>
41
+          <h3>
42
+            <span class='subtitle'>
43
+               CONFERENCES
44
+            </span>
45
+          </h3>
46
+<!--
47
+          <h4 name='time' id='0'>14H00</h4> -
48
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
43 49
           <br/>
44
-          <span class='subtitle'>
45
-             VENDREDI 11 MAI 2018
46
-          </span>
47
-        </h3>
48
-        <p>
49
-          Work in progress. Please wait while processing...
50
-        </p>
51
-      </article>
52
-      <article>
53
-        <h3>
54
-          <span class='title'>
55
-             Samedi 12 mai 2018
56
-          </span>
50
+          <h4 name='time' id='1'>15H00</h4> -
51
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
52
+-->
53
+        </article>
54
+        <article>
55
+          <h3>
56
+            <span class='title'>
57
+               Conférences éclair
58
+            </span>
59
+          </h3>
60
+          <h3>
61
+            <span class='subtitle'>
62
+               CONFERENCES ECLAIR
63
+            </span>
64
+          </h3>
65
+        </article>
66
+        <article>
67
+          <h3>
68
+            <span class='title'>
69
+               Ateliers
70
+            </span>
71
+          </h3>
72
+          <h3>
73
+            <span class='subtitle'>
74
+               ATELIERS
75
+            </span>
76
+          </h3>
77
+        </article>
78
+        <article>
79
+          <h3>
80
+            <span class='title'>
81
+               Concerts
82
+            </span>
83
+          </h3>
84
+          <h3>
85
+            <span class='subtitle'>
86
+               CONCERTS
87
+            </span>
88
+          </h3>
89
+        </article>
90
+        <article>
91
+          <h3>
92
+            <span class='title'>
93
+               Performances
94
+            </span>
95
+          </h3>
96
+          <h3>
97
+            <span class='subtitle'>
98
+               PERFORMANCES
99
+            </span>
100
+          </h3>
101
+        </article>
102
+      </section>
103
+<!--
104
+      VENDREDI ************************
105
+-->
106
+      <section id='friday_prog'>
107
+        <article>
108
+          <h3>
109
+            <span class='title'>
110
+               Conférences
111
+            </span>
112
+          </h3>
113
+          <h3>
114
+            <span class='subtitle'>
115
+               CONFERENCES
116
+            </span>
117
+          </h3>
118
+<!--
119
+          <h4 name='time' id='2'>14H00</h4> -
120
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
57 121
           <br/>
58
-          <span class='subtitle'>
59
-             SAMEDI 12 MAI 2018
60
-          </span>
61
-        </h3>
62
-        <p>
63
-          Work in progress. Please wait while processing...
64
-        </p>
65
-      </article>
66
-      <article>
67
-        <h3>
68
-          <span class='title'>
69
-             Dimanche 13 mai 2018
70
-          </span>
122
+          <h4 name='time' id='3'>15H00</h4> -
123
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
124
+-->
125
+        </article>
126
+        <article>
127
+          <h3>
128
+            <span class='title'>
129
+               Conférences éclair
130
+            </span>
131
+          </h3>
132
+          <h3>
133
+            <span class='subtitle'>
134
+               CONFERENCES ECLAIR
135
+            </span>
136
+          </h3>
137
+        </article>
138
+        <article>
139
+          <h3>
140
+            <span class='title'>
141
+               Ateliers
142
+            </span>
143
+          </h3>
144
+          <h3>
145
+            <span class='subtitle'>
146
+               ATELIERS
147
+            </span>
148
+          </h3>
149
+        </article>
150
+        <article>
151
+          <h3>
152
+            <span class='title'>
153
+               Concerts
154
+            </span>
155
+          </h3>
156
+          <h3>
157
+            <span class='subtitle'>
158
+               CONCERTS
159
+            </span>
160
+          </h3>
161
+        </article>
162
+        <article>
163
+          <h3>
164
+            <span class='title'>
165
+               Performances
166
+            </span>
167
+          </h3>
168
+          <h3>
169
+            <span class='subtitle'>
170
+               PERFORMANCES
171
+            </span>
172
+          </h3>
173
+        </article>
174
+      </section>
175
+<!--
176
+      SAMEDI ************************
177
+-->
178
+      <section id='saturday_prog'>
179
+        <article>
180
+          <h3>
181
+            <span class='title'>
182
+               Conférences
183
+            </span>
184
+          </h3>
185
+          <h3>
186
+            <span class='subtitle'>
187
+               CONFERENCES
188
+            </span>
189
+          </h3>
190
+<!--
191
+          <h4 name='time' id='4'>14H00</h4> -
192
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
71 193
           <br/>
72
-          <span class='subtitle'>
73
-             DIMANCHE 13 MAI 2018
74
-          </span>
75
-        </h3>
76
-        <p>
77
-          Work in progress. Please wait while processing...
78
-        </p>
79
-      </article>
194
+          <h4 name='time' id='5'>15H00</h4> -
195
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
196
+-->
197
+        </article>
198
+        <article>
199
+          <h3>
200
+            <span class='title'>
201
+               Conférences éclair
202
+            </span>
203
+          </h3>
204
+          <h3>
205
+            <span class='subtitle'>
206
+               CONFERENCES ECLAIR
207
+            </span>
208
+          </h3>
209
+        </article>
210
+        <article>
211
+          <h3>
212
+            <span class='title'>
213
+               Ateliers
214
+            </span>
215
+          </h3>
216
+          <h3>
217
+            <span class='subtitle'>
218
+               ATELIERS
219
+            </span>
220
+          </h3>
221
+        </article>
222
+        <article>
223
+          <h3>
224
+            <span class='title'>
225
+               Concerts
226
+            </span>
227
+          </h3>
228
+          <h3>
229
+            <span class='subtitle'>
230
+               CONCERTS
231
+            </span>
232
+          </h3>
233
+        </article>
234
+        <article>
235
+          <h3>
236
+            <span class='title'>
237
+               Performances
238
+            </span>
239
+          </h3>
240
+          <h3>
241
+            <span class='subtitle'>
242
+               PERFORMANCES
243
+            </span>
244
+          </h3>
245
+        </article>
246
+      </section>
247
+<!--
248
+      DIMANCHE ************************
249
+-->
250
+      <section id='sunday_prog'>
251
+        <article>
252
+          <h3>
253
+            <span class='title'>
254
+               Conférences
255
+            </span>
256
+          </h3>
257
+          <h3>
258
+            <span class='subtitle'>
259
+               CONFERENCES
260
+            </span>
261
+          </h3>
262
+<!--
263
+          <h4 name='time' id='6'>14H00</h4> -
264
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
265
+          <br/>
266
+          <h4 name='time' id='7'>15H00</h4> -
267
+          <h5>Emmanuel Ferrand: "Mes couilles sur la commode"</h5><h6>(Salle 1)</h6>
268
+-->
269
+        </article>
270
+        <article>
271
+          <h3>
272
+            <span class='title'>
273
+               Conférences éclair
274
+            </span>
275
+          </h3>
276
+          <h3>
277
+            <span class='subtitle'>
278
+               CONFERENCES ECLAIR
279
+            </span>
280
+          </h3>
281
+        </article>
282
+        <article>
283
+          <h3>
284
+            <span class='title'>
285
+               Ateliers
286
+            </span>
287
+          </h3>
288
+          <h3>
289
+            <span class='subtitle'>
290
+               ATELIERS
291
+            </span>
292
+          </h3>
293
+        </article>
294
+        <article>
295
+          <h3>
296
+            <span class='title'>
297
+               Concerts
298
+            </span>
299
+          </h3>
300
+          <h3>
301
+            <span class='subtitle'>
302
+               CONCERTS
303
+            </span>
304
+          </h3>
305
+        </article>
306
+        <article>
307
+          <h3>
308
+            <span class='title'>
309
+               Performances
310
+            </span>
311
+          </h3>
312
+          <h3>
313
+            <span class='subtitle'>
314
+               PERFORMANCES
315
+            </span>
316
+          </h3>
317
+        </article>
318
+      </section>
80 319
     </main>
81 320
   </div>
82 321
   <footer>© - Tetalab - Le hacker space Toulousaing' putaing' cong' -</footer>

+ 32
- 7
scripts/thsf.js View File

@@ -13,6 +13,34 @@ function getcookie(cname) {
13 13
   if (parts.length == 2) return parts.pop().split(";").shift();
14 14
 }
15 15
 
16
+function get_programme(day){
17
+  var days = ['thursday', 'friday', 'saturday', 'sunday'];
18
+  for (dday in days) {
19
+    document.getElementById(days[dday]).className = 'prog_button';
20
+    document.getElementById(days[dday]+'_prog').style.display = 'none';
21
+  }
22
+  document.getElementById(day).className = 'prog_button_selected';
23
+  document.getElementById(day+'_prog').style.display = 'block';
24
+}
25
+
26
+function rnd_time() {
27
+  var hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
28
+  var mins = ['00', '10', '20', '30', '40', '50'];
29
+  var hour = Math.floor(Math.random() * hours.length);
30
+  var min = Math.floor(Math.random() * mins.length);
31
+  return hours[hour]+"H"+mins[min];
32
+}
33
+
34
+function quantic_fluctuations() {
35
+  var items = document.getElementsByName('time');
36
+  var len = items.length
37
+  var num_swap = Math.floor(Math.random() * len);
38
+  for (var i=0; i<len; i++){
39
+    var rnd = Math.floor(Math.random() * 10);
40
+    if (rnd % 2) items[i].innerHTML = rnd_time();
41
+  }
42
+}
43
+
16 44
 function select_style() {
17 45
   style = getcookie('thsf_style');
18 46
   if (style != null) {
@@ -27,13 +55,7 @@ function switch_class(classname) {
27 55
   var actual = document.getElementById('body').className;
28 56
   if (actual != classname)
29 57
     document.getElementById('body').className = classname;
30
-  var items = Array();
31
-  items[0] = 'french';
32
-  items[1] = 'braille';
33
-  items[2] = 'morse';
34
-  items[3] = 'klingon';
35
-  items[4] = 'glyph';
36
-  items[5] = 'mayan';
58
+  var items = ['french', 'braille','morse', 'klingon', 'glyph', 'mayan'];
37 59
   for (item in items) {
38 60
     document.getElementById(items[item]).className = 'mini';
39 61
   }
@@ -69,4 +91,7 @@ function load(){
69 91
   document.getElementById('nav').innerHTML = menu;
70 92
   select_style();
71 93
   document.getElementById(page).className = 'selected';
94
+  if (page == 'prog') {
95
+    setInterval(function(){ quantic_fluctuations(); }, 3000);
96
+  }
72 97
 }

+ 64
- 23
styles/thsf.css View File

@@ -83,6 +83,11 @@ div.content {
83 83
     border-width: 0 1px 0 1px;
84 84
 }
85 85
 
86
+div.frame_content {
87
+    min-height: calc(100vh);
88
+    background: var(--site-bg);
89
+}
90
+
86 91
 footer {
87 92
   height: 35px;
88 93
   font-size: 12px;
@@ -139,44 +144,39 @@ div.content > nav.vertical_navbar > a.selected_mini {
139 144
 main {
140 145
   color: var(--text-color);
141 146
   width: 100%;
147
+  
148
+}
149
+
150
+main > div.frame_container {
151
+  border-style: none;
152
+  width: 100%;
153
+  height: 1024px;
154
+  overflow: hidden;
142 155
 }
143 156
 
144
-main > article {
157
+main > article,
158
+main > section > article {
145 159
   padding: 10px;
146 160
   color: var(--text-color);
147 161
   display: block;
148 162
 }
149 163
 
150
-main > article > img.right {
151
-  float: right;
152
-  margin: 10px;
153
-  border-color: #BE8649
154
-}
155
-
156
-main > article > img.left {
157
-  float: left;
158
-  margin: 10px;
159
-  border-color: #BE8649
160
-}
161
-
162 164
 main > article > div > p > img.logo-partenaire {
163 165
   margin: 10px;
164 166
 }
165 167
 
166
-main > article {
167
-  padding: 10px;
168
-  color: var(--text-color);
169
-  display: block;
170
-}
171
-
172
-main > article > h3 > span.title {
168
+main > article > h3 > span.title,
169
+main > section > article > h3 > span.title
170
+{
173 171
   font-size: 30px;
174 172
   color: var(--text-color);
175 173
   margin-bottom: 10px;
176 174
   text-decoration: none;
177 175
 }
178 176
 
179
-main > article > h3 > span.subtitle {
177
+main > article > h3 > span.subtitle,
178
+main > section > article > h3 > span.subtitle
179
+{
180 180
   font-family: 'Morse';
181 181
   font-size: 15px;
182 182
   vertical-align: top;
@@ -197,19 +197,56 @@ main > article > h5 {
197 197
   color: var(--green);
198 198
   margin-bottom: 0px;
199 199
 }
200
+main > section > article > h4 {
201
+  display: inline;
202
+  font-size: 20px;
203
+  color: var(--red);
204
+  margin: 5px 0 5px 0;
205
+}
206
+
207
+main > section > article > h5 {
208
+  display: inline;
209
+  font-size: 20px;
210
+  color: var(--green);
211
+  margin: 5px 0 5px 0;
212
+}
213
+
214
+main > section > article > h6 {
215
+  display: inline;
216
+  font-size: 20px;
217
+  color: var(--text-color);
218
+  margin: 5px 0 5px 10px;
219
+}
200 220
 
201 221
 main > article > h4 > a {
202 222
   font-size: 20px;
203
-  color: var(--text_color);
223
+  color: var(--text-color);
204 224
   margin-bottom: 0px;
205 225
 }
206 226
 
207 227
 main > article > h5 > a {
208 228
   font-size: 20px;
209
-  color: var(--text_color);
229
+  color: var(--text-color);
210 230
   margin-bottom: 0px;
211 231
 }
212 232
 
233
+main > article > h5 > span.prog_button {
234
+  color: var(--text-color);
235
+  margin-right: 20px;
236
+}
237
+
238
+main > article > h5 > span.prog_button:hover {
239
+  color: var(--red);
240
+  cursor: pointer;
241
+  margin-right: 20px;
242
+}
243
+
244
+main > article > h5 > span.prog_button_selected {
245
+  color: var(--green);
246
+  cursor: pointer;
247
+  margin-right: 20px;
248
+}
249
+
213 250
 main > article > hr {
214 251
   color: var(--text-color);
215 252
   border-width: 1px;
@@ -258,6 +295,10 @@ main > article > ul > li > a:hover {
258 295
   border-style: none;
259 296
 }
260 297
 
298
+.nomargin {
299
+  margin: 0;
300
+}
301
+
261 302
 @media screen and (min-width: 1000px) {
262 303
   div.content {
263 304
       display: flex;

Loading…
Cancel
Save