-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathmain.html
115 lines (102 loc) · 3.86 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Page d'acceuil</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
font-family: "AnimalCrossing" ;
background-color: #0f0f3d; /* Couleur de fond */
color: white; /* Couleur du texte */
text-align: center; /* Alignement du texte */
}
h1 {
position: fixed;
font-size: 4em;
margin: 0.5em 0;
top :50px;
}
p {
position: fixed;
font-size: 2em;
max-width: 800px;
margin: 0.5em 20px;
word-wrap: break-word;
opacity: 0.5;
top : 230px;
}
</style>
</head>
<body>
<h1>Astrological Crossing</h1>
<p>
This project aims to allow the user to explore the different caracteristics of Animal Crossing villagers based on their astrologicsl sign. To do this, you choose the astrological sign that interests you with the arrows and you click on the buttons to explore the data. Are Leos more extraverted ? Are some animal species more represented by a sign than others ? It is for you to find out !
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js" ></script>
<script>
// variable nécessaires
let milieuX = window.innerWidth/2
let milieuY = window.innerHeight/2
let MonEspaceSVG = d3.select("body")
.append("svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight)
document.body.style.backgroundColor = "#0f0f3d";
//ajout texte bouton about
let TexteAbout = MonEspaceSVG.append('text')
.attr('id', 'TexteAbout')
.attr('x', milieuX-90 )
.attr('y', milieuY+225)
.attr('fill', "white")
.attr('opacity', "0.5")
.attr('font-size', "30")
.attr('font-family', "AnimalCrossing")
.text("About")
//ajout texte bouton continu
let TexteContinu = MonEspaceSVG.append('text')
.attr('id', 'TexteContinu')
.attr('x', milieuX+50 )
.attr('y', milieuY+225)
.attr('fill', "white")
.attr('opacity', "0.5")
.attr('font-size', "30")
.attr('font-family', "AnimalCrossing")
.text("Continue")
// ajout du bouton continu sur la page
let BoutonPersonality = MonEspaceSVG.append('image')
.attr('id', 'boutonGoContinu')
.attr('xlink:href', 'assets/Bouton.svg')
.attr('width', 120)
.attr('height', 120)
.attr('x', milieuX+50)
.attr('y', milieuY+250)
.attr('white-space')
//ajout bouton about sur la page
let BoutonAbout = MonEspaceSVG.append('image')
.attr('id', 'boutonGoAbout')
.attr('xlink:href', 'assets/Bouton.svg')
.attr('width', 120)
.attr('height', 120)
.attr('x', milieuX-110)
.attr('y', milieuY+250)
.attr('white-space')
// actions sur le bouton continu
function GOtoConstellation(){open("./Constellations.html","_self")}
let GotoConstellation = document.getElementById('boutonGoContinu');
GotoConstellation.addEventListener("click", GOtoConstellation)
// actions sur le bouton about
function GOtoAbout(){open("./about.html","_self")}
let GotoAbout = document.getElementById('boutonGoAbout');
GotoAbout.addEventListener("click", GOtoAbout)
</script>
</body>
</html>