-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshakti.html
172 lines (169 loc) · 9.01 KB
/
shakti.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shakti</title>
<link rel="stylesheet" type="text/css" href="shakti.css">
<link rel="stylesheet" type="text/css" href="fonts.css">
</head>
<style>
html {
background: url(img/chambre_terre.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<header>
<nav>
<ul id="menu">
<li><span class="menu1">chapitres</span>
<ul>
<li><a href="shakti.html#bd1">Chapitre 1</a></li>
<li><a href="shakti13.html#bd1">Chapitre 7</a></li>
<li><a href="shakti3.html#bd1">Chapitre 2</a></li>
<li><a href="shakti15.html#bd1">Chapitre 8</a></li>
<li><a href="shakti5.html#bd1">Chapitre 3</a></li>
<li><a href="shakti16.html#bd1">Chapitre 9</a></li>
<li><a href="shakti7.html#bd1">Chapitre 4</a></li>
<li><a href="shakti18.html#bd1">Chapitre 10</a></li>
<li><a href="shakti9.html#bd1">Chapitre 5</a></li>
<li><a href="shakti19.html#bd1">Fin 1</a></li>
<li><a href="shakti11.html#bd1">Chapitre 6</a></li>
<li><a href="shakti20.html#bd1">Fin 2</a></li>
</ul></li>
<li><a href="home.html"><h1><span class="one">SHA</span>KTI</h1></a></li>
<li><a class="chichi" href="http://aborddeshakti.wordpress.com/"><span class="menu2">blog</span></a></li>
</ul>
</nav>
</header>
<div class="index">
<section>
<audio id="intro" autoplay loop>
<source src="musique/Onze.wav">
<source src="musique/Onze.mp3">
</audio>
<button type="submit" id="btn"> </button>
</section>
<div class="sprite"><img id="Delphine" src="sprites/delphine_terre2.png" alt="Delphine habillée en terrienne"/></div>
<div class="tab" id="bd1">
<div class="scroll">
<p class="prenom">Radio-réveil</p>
<p>*driiiing* *driiiiiing*</p>
<p>Debout Delphine, il est l'heure de se réveiller !<p>
</div>
<div>
<div class="suivant"><a href="#bd2"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd2">
<div class="scroll">
<p class="prenom">...</p>
<p>Hmpf. C'est l'heure ?</p>
<p>La voix de ce réveil me tape sur les nerfs... Je dois me motiver, cette journée est particulière après tout. Les habitants de Shakti nous rendent visite pour sélectionner certains d'entre nous.</p>
</div>
<div>
<div class="precedent"><a href="#bd1"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd3" id="a"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd3">
<div class="scroll">
<p class="prenom">Delphine</p>
<p>J'aimerais tellement les rejoindre, être privilégiée. Je n'ose espérer tant nous sommes nombreux à en rêver. Néanmoins, mon ami Gidéon m'a dit qu'il n'y avait aucune chance de louper le coche cette fois-ci.
La compatibilité de nos organismes avec cette nouvelle atmosphère a été testée, et d'après lui, les nôtres semblent en parfaite adéquation. Pourvu qu'il ait raison.<p>
</div>
<div>
<div class="precedent"><a href="#bd2" id="b"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd4"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd4">
<div class="scroll">
<p class="prenom">Delphine</p>
<p>Cette planète semble parfaite, l'écran géant qui diffuse à longueur de temps des images de ce nouveau monde attise la curiosité et l'envie. Celles-ci nous rappellent que nous avons une chance d'y parvenir, peut-être est-ce mon tour aujourd'hui ? Maintenant que j'ai atteint la majorité, j'apparais sur les listes de Shakti.</p>
</div>
<div>
<div class="precedent"><a href="#bd3"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd5"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd5">
<div class="scroll">
<p class="prenom">Delphine</p>
<p class="italic">Depuis notre naissance, nous possèdons une puce implantée dans notre main droite. Elle nous permet de contrôler divers éléments à distance comme l'accès aux locaux, la consultation de notre terminal personnel d'information (TPI) qui est une importante source d'informations sur shakti, etc. C'est un peu notre carte d'identité et notre télécommande.</p>
</div>
<div>
<div class="precedent"><a href="#bd4"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd6"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd6">
<div class="scroll">
<p class="prenom">Delphine</p>
<p class="italic">C'est une technologie Shaktienne qui semble avoir une importance cruciale chez eux malgré l'utilisation superficielle que nous en avons sur Terre. Finalement, notre vie ici ne ressemble pas du tout à la leur. le développement et le futur se trouve là-bas, alors qu'ici nous régressons au fur et à mesure, trop préoccupés par notre survie.</p>
</div>
<div>
<div class="precedent"><a href="#bd5"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd7"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd7">
<div class="scroll">
<p class="prenom">Delphine</p>
<p class="italic">Nous travaillons la terre à mains nues, comme le faisaient nos ancêtres. La culture nous permet de subsister parce que le monde extérieur au camp est un endroit dangereux et inconnu dans lequel les ressources se font rares. Nous y sommes des proies plus que des prédateurs.</p>
</div>
<div>
<div class="precedent"><a href="#bd6"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd8"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd8">
<div class="scroll">
<p class="prenom">Delphine</p>
<p class="italic">D'ailleurs, ceux qui ont voulu essayer de s'y rendre ne sont jamais revenu. La nature a reprit ses droits tout autour de nous. Les Shaktiens ne se préoccupent de nous qu'occasionnellement, même s'ils reçoivent en permanence des informations transmises via notre puce.</p>
</div>
<div>
<div class="precedent"><a href="#bd7"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd9"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd9">
<div class="scroll">
<p class="prenom">Delphine</p>
<p>Pfiou, la tension monte d'un cran, je dois être impassible et forte. Allez Delphine, ton avenir est en jeu. Il faut vraiment que j'y aille, Gidéon doit m'attendre et arriver en retard aux sélections serait mal vu.</p>
</div>
<div>
<div class="precedent"><a href="#bd8"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="#bd10" id="d"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<div class="tab" id="bd10">
<div class="scroll">
<p class="prenom">Radio-réveil</p>
<p>Shakti : Deux ans après le précédent grand départ, les membres d'INDRA viennent de nouveau récupérer certains membres de la communauté Terrienne. Si des mouvements de foule sont prévisibles, les autorités surveillent chaque rue pour éviter tout débordement.</p>
</div>
<div>
<div class="precedent"><a href="#bd9" id="c"><img class="fleche" src="sprites/fleche2.png" alt="flèche précédente" /></a></div>
<div class="suivant"><a href="shakti2.html#bd1"><img class="fleche" src="sprites/fleche.png" alt="flèche suivante" /></a></div>
</div>
</div>
<script type="text/javascript" src="shakti.js"></script>
<script>
document.getElementById('a').onclick = function(){
document.getElementById('Delphine').className="anime";
};
document.getElementById('b').onclick = function(){
document.getElementById('Delphine').className="anime2";
};
document.getElementById('c').onclick = function(){
document.getElementById('Delphine').className="anime";
};
document.getElementById('d').onclick = function(){
document.getElementById('Delphine').className="anime2";
};
</script>
</body>
</html>