-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
311 lines (296 loc) · 20.9 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!-- Δημήτρης Ρίγκος - 069111 - ΑΘΗ3
ΠΛΗ23 - 2η Γραπτή Εργασία - Άσκηση 5
Υλοποίηση με Bootstrap.
Ακολουθώντας τα βήματα που περιγράφονται στα tutorials (w3 και pdf),
εισάγουμε τo απαραίτητo HTML5 tag doctype και ορίζουμε τη γλώσσα και
τηκ κωδικοποίηση χαρακτήρων με τα lang και charset. -->
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="utf-8">
<!-- Το ακόλουθο meta http-equiv είναι αχρείαστο αν σκοπεύουμε να
υποστηρίζουμε μοντέρνους browser. To εισάγουμε γιατί προτείνεται
στο site του bootstrap. Αναθέτουμε την τιμή IE=Edge στο content
καθώς οποιαδήποτε άλλη δεν αναγνωρίζεται στην W3C πιστοποίηση.
Με αυτή "λέμε" στον browser να αποδώσει όσο καλύτερα γίνεται-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Φροντίζουμε να ανταποκρίνεται/προβάλλεται ο σχεδιασμός δυναμικά
εισάγωντας το ακόλουθο meta tag, ορίζοντας έτσι να ακολουθεί
το πλάτος της οθόνης, χωρίς κανένα zoom. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Για τα προηγούμενα τρία meta tags, καθορίζονται αυστηρά ως πρώτα
μέσα στο head, από τον οδηγό στο site του bootstrap.
Ακολουθεί ο τίτλος της σελίδας (ορατός στο παράθυρο και στην
καρτέλα του browser. -->
<title>Σύλλογος Ονειροναυτών</title>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Τώρα δηλώνουμε το bootstrap stylesheet.
Στην παρούσα υλοποίηση, το αποθηκεύσαμε τοπικά για να συμπεριληφθούν
τα απαραίτητα αρχεία στο zip της απάντησης. Αν και κοστίζει σε χρόνο
φόρτωσης και σε όγκο, θεωρούμε πως είναι καλή πρακτική καθώς έτσι,
δεν θα αντιμετωπίσουμε πρόβλημα προβολής, ακόμα και αν έχει πρόβλημα
το CDN.
Μια άλλη σημείωση είναι πως χρησιμοποιούμε και θα υποβάλλουμε το
τις κανονικές και όχι τις minimized εκδόσεις των css, καθώς είναι πιο
εύκολη η επεξεργασία και προβολή τους (αν υπάρξει ανάγκη).
<link href="css/bootstrap.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Συμπεριλαμβάνουμε και ένα custom.css φτιαγμένο από εμάς. Το
συμπεριλαμβάνουμε μετά το original bootstrap.css για να επικρατούν οι
δικές του οδηγίες. -->
<link href="css/custom.css" rel="stylesheet">
<!-- Η συμπερίληψη των βιβλιοθηκών jQuery και bootstrap.js, για λόγους
ταχύτητας στη φόρτωση, ενδείκνυται να δηλώνεται πριν από το </body>.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
<!-- Και έτσι κλεινουμε το head κομμάτι. -->
</head>
<!-- Ξεκινάει το body και ενεργοποιούμε τη δυνατότητα data-spy στο scroll της
οθόνης. Έτσι, όταν θα είμαστε στο x section του site θα γίνεται active και το
αντίστοιχο link στη navbar. -->
<body data-spy="scroll" data-target="#navHeaderCollapse">
<!-- Είσαγουμε την μπάρα πλοήγησης navbar. Επιλέγουμε το αντεστραμμένο στυλ
(navbar-inverse) και την τοποθετούμε σταθερά στο πάνω μέρος της σελίδας
(fixed-top). Χρησιμοποιούμε fixed-top και όχι static-top για να παραμένει
σταθερά στην κορυφή, ακόμα και όταν κάνουμε scroll. -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Ορίζουμε το header της navbar. -->
<div class = "navbar-header">
<!-- Ξεκινάμε με το να κατασκευάσουμε το κουμπί που θα φαίνεται
σε μικρότερες οθόνες. Η λειτουργικότητα ορίζεται από το "collapse"
και το περιεχόμενο δείχνει στο αντίστοιχο id. -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target = "#navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class="navbar-brand navbar-link" href="#jumbo"><img src="images/logo.jpg" alt="Logo" style="max-width:50px; margin-top: -7px;"/></a>
<a class="navbar-brand navbar-link" href="#jumbo"><strong>Σύλλογος Ονειροναυτών</strong></a>
</div>
<div class="collapse navbar-collapse" id = "navHeaderCollapse">
<!-- Ο τρόπος που γίνεται η σύνδεση, είναι με μία αδιάτακτη λίστα,
όπου κάθε γραμμή της κάνει αναφορά στα id των sections του site. -->
<ul class="nav navbar-nav navbar-right" id="nav">
<li><a href="#whoAreWe"> Ποιοί Είμαστε</a></li>
<li><a href="#draseis"> Δράσεις</a></li>
<li><a href="#gineMelos"> Γίνε Μέλος</a></li>
<li><a href="#contact"> Επικοινωνία</a></li>
</ul>
</div>
</div>
</nav>
<!-- Ακολουθεί το jumbotron με το πρώτο μέρος της σελίδας.
Διαμορφώνουμε τον τίτλο ως h1.-->
<div id = "jumbo">
<div class = "jumbotron">
<h1>Σύλλογος Ονειροναυτών</h1>
<p>Ο μέσος όρος της διάρκειας που ονειρευόμαστε στη ζωή μας είναι
6 χρόνια. Για 2100 μέρες, ταξιδεύουμε σε αχαρτογράφητα νερά. Στο
σύλλογό μας, ερευνούμε και ανακαλύπτουμε πορείες και τεχνικές, που
μας επιτρέπουν να συνειδητοποιούμε και να διαμορφώνουμε το ταξίδι
μας. Αν σε ενδιαφέρει και σένα, επιβιβάσου...</p>
</div>
</div>
<!-- Ακολουθεί το section "Ποιοι Είμαστε". -->
<div id = "whoAreWe">
<!-- Εκμεταλλευόμενοι το grid του bootstrap, τοποθετούμε μία σειρά
με το format που ορίζουμε στο custom.css και μέσα σε αυτή,... -->
<div class="row classRow">
<!-- χωρίζουμε το διαθέσιμο εύρος των 12 στηλών σε δύο υπερστήλες, μία
με 8 και διαμόρφωση ορισμένη στο custom.css που θα φιλοξενεί το κομμάτι
"Τι είναι ο σύλλογος"... -->
<div class="col-sm-8 classCol">
<h2>Τι είναι ο Σύλλογος Ονειροναυτών;</h2>
<p>Πριν από λίγα χρόνια, δυο φίλοι που έκαναν διακοπές στην
Ελαφόνησο συνάντησαν ένα παλιό φίλο τους. Χαρήκανε πολύ
που τον ξανάβλεπαν ύστερα από τόσο καιρό. Είχε φύγει 7
χρόνια πριν για να συνεχίσει τις σπουδές του στην ψυχολογία,
στο πανεπιστήμιο του Μισκατόνικ, στο Άρκαμ της Μασσαχουσέττης.
Καθίσανε όλοι μαζί στην άμμο, κάτω απ' τη σκιά ενός κέδρου και
μιλήσανε για το τι έκανε ο καθένας, όσο ήταν χώρια. </p>
<p>Την επόμενη μέρα, μίλησαν στο τηλέφωνο. Για πρώτη φορά μετά
από 7 χρόνια. Και όλοι είχαν δει το ίδιο όνειρο... </p>
<p>Αν τελείωνε εκεί, θα ήταν σαν μία ιστορία τρόμου, που την
διηγείσαι σε κατασκηνώσεις, γύρω απ' τη φωτιά. Δεν τελείωσε εκεί
όμως! Αφού συνειδητοποίησαν πως, όχι μόνο μοιράστηκαν το ίδιο
όνειρο αλλά κατάφεραν να επικοινωνήσουν και τα νέα τους μέσα σε
αυτό, η επικοινωνία τους έγινε καθημερινή και αποφάσισαν να
αφιερώσουν το χρόνο τους, στην έρευνα πάνω στα όνειρα και στη
γνωριμία με άλλους ανθρώπους που έζησαν κάτι παρόμοιο ή εντρυφούν
και αυτοί σε σχετικά.</p>
<p>Όσο πέρναγε ο καιρός, μεγάλωνε το πλήθος αυτών που έβλεπε τον
εαυτό του να ανήκει σε αυτή τη... συνομοταξία. Μέσα από διάλογο,
αναδείχτηκε η ανάγκη της δημιουργίας μίας οντότητας, που θα
προγραμματίζει, οργανώνει και διευθύνει δράσεις που θα υποστηρίζουν
και θα προάγουν τους σκοπούς του συνόλου αυτών των ομοιδεατών.</p>
<p>Έτσι, δημιουργήθηκε ο Σύλλογος Ονειροναυτών.</p>
</div>
<div class="col-sm-4">
<!-- και μία με 4 που φιλοξενεί το alert-info, διαμορφωμένο στο
custom.css με το σκοπό του συλλόγου. -->
<div class="alert alert-info" id="goal">
<h2>Σκοπός του Συλλόγου:</h2>
Η έρευνα και εφαρμογή μεθόδων και τεχνικών για την απόκτηση
της ικανότητας, να βιώνουμε το όνειρο ως συνειδητή εμπειρία
και να μπορούμε να αλληλοεπιδρούμε με τα στοιχεία του.
</div>
</div>
</div>
</div>
<!-- Ακολουθεί το section "Δράσεις".
Με παρόμοιο τρόπο χωρίζουμε το πλέγμα σε μία γραμμή 3 στηλών για τις δράσεις.-->
<div id = "draseis">
<div class="row classRow">
<div class="col-sm-4 classCol">
<h2>Ομιλία του δρ. Έρικ Ζαν.</h2>
<p>Ο δρ. Έρικ Ζαν, κορυφαίος νευροψυχολόγος, θεωρείται παγκοσμίως
ο πιο ειδικός πάνω στον τρόπο επίδρασης του ονείρου στον εγκέφαλο,
ανακαλύπτοντας πρώτος την αυξημένη λειτουργία των νευρώνων του
υπερχιασματικού πυρήνα.</p>
<p>Την Τετάρτη 1 Φεβρουαρίου, στα γραφεία του συλλόγου μας,
θα μας μιλήσει για τα νέα ευρήματά του στην ταυτοποίηση των διαδικασιών
που φαίνονται απαραίτητες για την κινητοποίηση των χολινεργικών
γεφυροπρομηκικών νευρώνων που ευθύνονται για τον παράδοξο ύπνο (σ.
Παράδοξος είναι ο ύπνος με όνειρα).</p>
<!-- Εδώ εισάγουμε την εικόνα της δράσης. Ορίζουμε περιθώρια στο
custom.css και την κάνουμε responsive και κύκλο. -->
<div class="imgf">
<img class="img-circle img-responsive center-block" src="images/EricZann.jpg" alt="Ο Έρικ Ζανν.">
</div>
<!-- Από κάτω, τοποθετούμε με μικρότερα, έντονα και πλάγια γράμματα
τη λεζάντα της εικόνας. -->
<div class="caption text-center">
<p class = "small"><i><strong>Ο δρ. Έρικ Ζανν.</strong></i></p>
</div>
</div>
<div class="col-sm-4 classCol">
<h2>Ύπνος - Μια αποκαλυπτική ιστορία.</h2>
<p>Ο Χ.Φ.Λάβκραφτ, ο μόνος έγκριτος ερευνητής των αρχαίων ριζών
που κρύβονται πίσω από τον ανθρωπομορφισμό του ύπνου, χωρίς να
τον καταβάλλουν οι υποκείμενες σιωπηλές πραγματικότητες του κοινωνικού
ασυνειδήτου, θα μοιραστεί μαζί μας τις ενδείξεις που έχει για την
ύπαρξη ενός άλλου κόσμου. Ενός κόσμου που τα πάντα μπορεί να συμβούν
και μόνο ονειρευόμενος μπορεί να βρεθεί κάποιος εκεί.</p>
<p>Αν σας ακούγεται ωραίο, την Παρασκευή 10 Φεβρουαρίου, στο αμφιθέατρο
του συλλόγου μας, η αφήγηση από τον ίδιο της πραγματικής ιστορίας που
διαδραματίστηκε ενώπιόν του, μπορεί να σας κάνει να αλλάξετε γνώμη</p>
<div class="imgf">
<img class="img-circle img-responsive center-block" src="images/HPLovecraft.jpg" alt="Ο Χ.Φ.Λάβκραφτ.">
</div>
<div class="caption text-center">
<p class = "small"><i><strong>Ο Χ.Φ.Λάβκραφτ.</strong></i></p>
</div>
</div>
<div class="col-sm-4 classCol">
<h2>Ομαδικές συνεδρίες ονειροναυτικής.</h2>
<p>Από το Σάββατο 11 Φεβρουαρίου, ξεκινάνε πάλι οι ομαδικές συνεδρίες
ονειροναυτικής. Ύστερα από την περυσινή επιτυχία και τις πολλές δηλώσεις
συμμετοχής για φέτος, το υπνωτήριό μας θα ανοίγει κάθε δύο Σαββατοκύριακα
για όλα τα μέλη μας. Φέτος, σκοπός είναι να συντάξουμε μία λίστα με
ασφαλείς τεχνικές έκτακτης έγερσης.</p>
<div class="imgf">
<img class="img-circle img-responsive center-block" src="images/Sleeping.jpg" alt="Ομαδικές συνεδρίες ονειροναυτικής.">
</div>
<div class="caption text-center">
<p class = "small"><i><strong>Ομαδικές συνεδρίες ονειροναυτικής.</strong></i></p>
</div>
</div>
</div>
</div>
<!-- Ακολουθεί το section "Γίνε Μέλος". -->
<div id = "gineMelos">
<div class = "row classRow">
<form>
<!-- Το καινούριο στοιχείο είναι η τοποθέτηση μίας φόρμας μέσα στη γραμμή. Η φόρμα
ορίζεται και αυτή με γραμμές και στήλες. Τα στοιχεία της φόρμας που καθορίζονται
είναι το είδος δεδομένων, είδος στοιχείου, περιγραφή, ενδεικτικό κείμενο και
αναγκαιότητα συμπλήρωσης. -->
<h1>Γίνε μέλος, είναι απλό!</h1>
<br>
<div class = "form-group row">
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName" aria-describedby="inputName" placeholder="Ονοματεπώνυμο" required>
</div>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail" aria-describedby="inputEmail" placeholder="Email" required>
</div>
</div>
<br>
<div class="form-group row">
<div class="col-sm-12">
<textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Πως μπορείς να βοηθήσεις;"></textarea>
</div>
</div>
<!-- Στο τέλος, ακολουθεί το κουμπί υποβολής. Βασικό, μεγάλο και τιτλοφορημένο. -->
<div style="padding-bottom: 25px">
<button type="submit" class="btn btn-primary btn-lg">Υποβολή</button>
</div>
</form>
</div>
</div>
<!-- Ακολουθεί το section "Επικοινωνία". -->
<div id = "contact">
<div class = "row classRow">
<div class = "col-sm-12 col-left">
<h2>Επικοινώνησε μαζί μας.</h2>
</div>
</div>
<!-- Το καινούριο στοιχείο εδώ είναι η εισαγωγή glyphicns. Σε κάθε γραμμή
στοιχείων, στην πρώτη στήλη μπαίνει το glyphicon και στη δεύτερη το περιεχόμενο. -->
<div class="row classRow">
<div class="col-sm-1 col-left classSmCol">
<p><span class="glyphicon glyphicon-home"></span>
</div>
<div class = "col-sm-11 col-left">
<p>Πυθίας 1 κ' Κάλχα,</p>
<p>Νέοι Δελφοί - 123 45,</p>
<p>Aθήνα.</p>
</div>
</div>
<div class="row classRow">
<div class="col-sm-1 classSmCol">
<p><span class="glyphicon glyphicon-phone"></span>
</div>
<div class = "col-sm-11">
<p>212-34.56.789</p>
</div>
</div>
<div class="row classRow">
<div class="col-sm-1 classSmCol">
<p><span class="glyphicon glyphicon-envelope"></span>
</div>
<div class = "col-sm-11">
<!-- Εδώ, με το mailto: προστίθεται η λειτουργικότητα του να δημιουργείται
ένα mail με το προεπιλεγμένο πρόγραμμα e-mail του υπολογιστή, με προσυμπληρωμένη
διεύθυνση παραλήπτη. -->
<p><a href="mailto:#">dreamnauts@dreamnauts.not</a></p>
</div>
</div>
</div>
<!-- Συμπερίληψη των απαραίτητων βιβλιοθηκών (βλ. σχόλια στο head)
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>