Skip to content

Commit 1b8803f

Browse files
NatolixNatolix
authored
Update index.html
1 parent 6f02762 commit 1b8803f

1 file changed

Lines changed: 103 additions & 17 deletions

File tree

‎index.html‎

Lines changed: 103 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,121 @@
11
<!DOCTYPE html>
2+
23
<html lang="fr">
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Compagnon</title>
5+
<meta charset="UTF-8">
6+
<title>CompagnonIcons</title>
7+
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: Arial, sans-serif;
17+
height: 100vh;
18+
background: linear-gradient(135deg, #4f46e5, #9333ea);
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
color: white;
24+
}
25+
26+
/* Titre */
27+
h1 {
28+
font-size: 3em;
29+
margin-bottom: 40px;
30+
padding: 15px 30px;
31+
border-radius: 20px;
32+
background: rgba(255,255,255,0.1);
33+
backdrop-filter: blur(10px);
34+
}
35+
36+
/* Grid */
37+
.grid {
38+
display: flex;
39+
gap: 30px;
40+
}
41+
42+
/* Carrés */
43+
.card {
44+
width: 140px;
45+
height: 140px;
46+
border-radius: 25px;
47+
background: rgba(255,255,255,0.1);
48+
backdrop-filter: blur(10px);
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
cursor: pointer;
53+
transition: 0.25s;
54+
}
655

7-
<!-- Icônes -->
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
56+
.card:hover {
57+
transform: scale(1.1);
58+
}
59+
60+
/* Images */
61+
.card img {
62+
width: 70%;
63+
height: 70%;
64+
object-fit: contain;
65+
}
66+
67+
/* Popup */
68+
.popup {
69+
position: fixed;
70+
bottom: 20px;
71+
background: rgba(0,0,0,0.7);
72+
padding: 10px 20px;
73+
border-radius: 10px;
74+
opacity: 0;
75+
transition: 0.3s;
76+
}
77+
78+
.popup.show {
79+
opacity: 1;
80+
}
81+
</style>
982

1083
</head>
84+
1185
<body>
1286

13-
<h1>Compagnon</h1>
14-
<p>Ton assistant scolaire intelligent</p>
87+
<h1>Compagnon</h1>
88+
89+
<div class="grid">
90+
91+
<div class="card" onclick="copyText('images/note.png')">
92+
<img src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png">
93+
</div>
1594

16-
<hr>
95+
<div class="card" onclick="copyText('images/user.png')">
96+
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png">
97+
</div>
1798

18-
<h2><i class="fas fa-book"></i> Notes</h2>
19-
<p>Consulte tes notes facilement</p>
99+
<div class="card" onclick="copyText('images/settings.png')">
100+
<img src="https://cdn-icons-png.flaticon.com/512/2099/2099058.png">
101+
</div>
20102

21-
<h2><i class="fas fa-chart-line"></i> Moyennes</h2>
22-
<p>Visualise ta progression</p>
103+
</div>
23104

24-
<h2><i class="fas fa-user"></i> Compte</h2>
25-
<p>Gère ton profil</p>
105+
<div id="popup" class="popup">Copié !</div>
26106

27-
<h2><i class="fas fa-gear"></i> Paramètres</h2>
28-
<p>Personnalise ton expérience</p>
107+
<script>
108+
function copyText(text) {
109+
navigator.clipboard.writeText(text);
29110

30-
<hr>
111+
const popup = document.getElementById("popup");
112+
popup.classList.add("show");
31113

32-
<button onclick="alert('Bientôt disponible !')">Accéder</button>
114+
setTimeout(() => {
115+
popup.classList.remove("show");
116+
}, 1200);
117+
}
118+
</script>
33119

34120
</body>
35121
</html>

0 commit comments

Comments
 (0)