Skip to content

Commit c827354

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

1 file changed

Lines changed: 78 additions & 48 deletions

File tree

‎index.html‎

Lines changed: 78 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,76 +3,87 @@
33
<html lang="fr">
44
<head>
55
<meta charset="UTF-8">
6-
<title>CompagnonIcons</title>
6+
<title>Compagnon Icons</title>
77

88
<style>
9-
* {
10-
margin: 0;
11-
padding: 0;
12-
box-sizing: border-box;
13-
}
14-
159
body {
10+
margin: 0;
1611
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;
12+
background: #0f172a;
2313
color: white;
2414
}
2515

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);
16+
/* Header simple */
17+
.header {
18+
padding: 20px 30px;
3419
}
3520

36-
/* Grid */
21+
.header h1 {
22+
margin: 0;
23+
font-size: 28px;
24+
}
25+
26+
.header p {
27+
margin-top: 5px;
28+
opacity: 0.6;
29+
}
30+
31+
/* Barre recherche */
32+
.search {
33+
margin: 20px 30px;
34+
}
35+
36+
.search input {
37+
width: 100%;
38+
padding: 12px;
39+
border-radius: 10px;
40+
border: none;
41+
outline: none;
42+
background: #1e293b;
43+
color: white;
44+
}
45+
46+
/* Grid icônes */
3747
.grid {
38-
display: flex;
39-
gap: 30px;
48+
display: grid;
49+
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
50+
gap: 15px;
51+
padding: 20px 30px;
4052
}
4153

42-
/* Carrés */
54+
/* Carte icône */
4355
.card {
44-
width: 140px;
45-
height: 140px;
46-
border-radius: 25px;
47-
background: rgba(255,255,255,0.1);
48-
backdrop-filter: blur(10px);
56+
background: #1e293b;
57+
border-radius: 12px;
58+
height: 70px;
4959
display: flex;
5060
align-items: center;
5161
justify-content: center;
5262
cursor: pointer;
53-
transition: 0.25s;
63+
transition: 0.2s;
5464
}
5565

5666
.card:hover {
57-
transform: scale(1.1);
67+
background: #334155;
5868
}
5969

60-
/* Images */
70+
/* Image */
6171
.card img {
62-
width: 70%;
63-
height: 70%;
64-
object-fit: contain;
72+
width: 28px;
73+
height: 28px;
6574
}
6675

6776
/* Popup */
6877
.popup {
6978
position: fixed;
70-
bottom: 20px;
71-
background: rgba(0,0,0,0.7);
72-
padding: 10px 20px;
73-
border-radius: 10px;
79+
bottom: 15px;
80+
left: 50%;
81+
transform: translateX(-50%);
82+
background: #1e293b;
83+
padding: 8px 16px;
84+
border-radius: 8px;
7485
opacity: 0;
75-
transition: 0.3s;
86+
transition: 0.2s;
7687
}
7788

7889
.popup.show {
@@ -84,36 +95,55 @@
8495

8596
<body>
8697

87-
<h1>Compagnon</h1>
98+
<div class="header">
99+
<h1>Compagnon Icons</h1>
100+
<p>Icônes simples et rapides</p>
101+
</div>
102+
103+
<div class="search">
104+
<input placeholder="Rechercher une icône...">
105+
</div>
88106

89107
<div class="grid">
90108

91-
<div class="card" onclick="copyText('images/note.png')">
109+
<div class="card" onclick="copy('note')">
92110
<img src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png">
93111
</div>
94112

95-
<div class="card" onclick="copyText('images/user.png')">
113+
<div class="card" onclick="copy('user')">
96114
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png">
97115
</div>
98116

99-
<div class="card" onclick="copyText('images/settings.png')">
117+
<div class="card" onclick="copy('settings')">
100118
<img src="https://cdn-icons-png.flaticon.com/512/2099/2099058.png">
101119
</div>
102120

121+
<div class="card" onclick="copy('search')">
122+
<img src="https://cdn-icons-png.flaticon.com/512/622/622669.png">
123+
</div>
124+
125+
<div class="card" onclick="copy('check')">
126+
<img src="https://cdn-icons-png.flaticon.com/512/190/190411.png">
127+
</div>
128+
129+
<div class="card" onclick="copy('close')">
130+
<img src="https://cdn-icons-png.flaticon.com/512/1828/1828778.png">
131+
</div>
132+
103133
</div>
104134

105135
<div id="popup" class="popup">Copié !</div>
106136

107137
<script>
108-
function copyText(text) {
109-
navigator.clipboard.writeText(text);
138+
function copy(name) {
139+
navigator.clipboard.writeText(name);
110140

111141
const popup = document.getElementById("popup");
112142
popup.classList.add("show");
113143

114144
setTimeout(() => {
115145
popup.classList.remove("show");
116-
}, 1200);
146+
}, 1000);
117147
}
118148
</script>
119149

0 commit comments

Comments
 (0)