Hugging Face's logo

Spaces:
Abmacode12
/
codenook-studio
Running

App Files Community
Abmacode12 commited on
Commit
0dc23f2
·
verified ·
1 Parent(s): f078ffd

<!DOCTYPE html>

Browse files

<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mise en page trois colonnes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.column {
flex: 1;
padding: 20px;
border: 1px solid #ccc;
}
.column:not(:last-child) {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>Colonne 1</p>
</div>
<div class="column">
<p>Colonne 2</p>
</div>
<div class="column">
<p>Colonne 3</p>
</div>
</div>
</body>
</html>

Files changed (2) hide show
  1. index.html +36 -88
  2. script.js +1 -22
index.html CHANGED
@@ -1,93 +1,41 @@
 
1
  <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Espace Codage - Thème</title>
7
-
8
- <!-- Tailwind CSS via CDN -->
9
- <script src="https://cdn.tailwindcss.com"></script>
10
-
11
- <!-- Icons (Feather) -->
12
- <script src="https://unpkg.com/feather-icons"></script>
13
-
14
- <!-- Styles -->
15
- <link rel="stylesheet" href="style.css" />
 
 
 
 
 
 
 
 
 
 
16
  </head>
17
- <body class="bg-gray-50 text-gray-900 antialiased">
18
- <div class="flex h-screen">
19
- <!-- Sidebar -->
20
- <aside class="w-72 bg-white border-r border-gray-200 flex flex-col p-5">
21
- <h2 class="text-xl font-bold mb-5 text-gray-800">Espace Codage</h2>
22
-
23
- <button type="button" class="w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition">
24
- Nouvelle tâche
25
- </button>
26
-
27
- <div class="mt-4 relative">
28
- <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
29
- <i data-feather="search" class="w-4 h-4"></i>
30
- </span>
31
- <input
32
- type="search"
33
- placeholder="Rechercher"
34
- class="w-full rounded-md border border-gray-300 bg-white pl-10 pr-3 py-2 text-sm placeholder-gray-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
35
- />
36
- </div>
37
-
38
- <nav class="mt-6 flex-1 overflow-y-auto">
39
- <ul class="space-y-2">
40
- <li>
41
- <a href="#" class="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:text-blue-700 transition">
42
- <i data-feather="book" class="w-4 h-4"></i>
43
- Bibliothèque
44
- </a>
45
- </li>
46
- <li>
47
- <a href="#" class="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:text-blue-700 transition">
48
- <i data-feather="folder" class="w-4 h-4"></i>
49
- Projet 1
50
- </a>
51
- </li>
52
- <li>
53
- <a href="#" class="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:text-blue-700 transition">
54
- <i data-feather="folder" class="w-4 h-4"></i>
55
- Projet 2
56
- </a>
57
- </li>
58
- <li>
59
- <a href="#" class="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:text-blue-700 transition">
60
- <i data-feather="folder" class="w-4 h-4"></i>
61
- Projet 3
62
- </a>
63
- </li>
64
- </ul>
65
- </nav>
66
- </aside>
67
-
68
- <!-- Main content -->
69
- <main class="flex-1 bg-white p-5 overflow-y-auto">
70
- <div class="flex items-center justify-end gap-2 mb-5">
71
- <button type="button" class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition">
72
- <i data-feather="edit-2" class="w-4 h-4"></i>
73
- Modifier
74
- </button>
75
- <button type="button" class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition">
76
- <i data-feather="send" class="w-4 h-4"></i>
77
- Publié
78
- </button>
79
- </div>
80
-
81
- <div class="content-area h-[600px] w-full border border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-500 text-lg">
82
- Échec du chargement de l'aperçu.
83
- </div>
84
- </main>
85
- </div>
86
-
87
- <script src="script.js"></script>
88
- <script>
89
- feather.replace();
90
- </script>
91
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
92
  </body>
93
- </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="fr">
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Mise en page trois colonnes</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+ .container {
15
+ display: flex;
16
+ height: 100vh;
17
+ }
18
+ .column {
19
+ flex: 1;
20
+ padding: 20px;
21
+ border: 1px solid #ccc;
22
+ }
23
+ .column:not(:last-child) {
24
+ margin-right: 20px;
25
+ }
26
+ </style>
27
  </head>
28
+ <body>
29
+ <div class="container">
30
+ <div class="column">
31
+ <p>Colonne 1</p>
32
+ </div>
33
+ <div class="column">
34
+ <p>Colonne 2</p>
35
+ </div>
36
+ <div class="column">
37
+ <p>Colonne 3</p>
38
+ </div>
39
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  </body>
41
+ </html>
script.js CHANGED
@@ -1,23 +1,2 @@
1
 
2
- document.addEventListener('DOMContentLoaded', () => {
3
- // Replace Feather icons after DOM loads
4
- if (typeof feather !== 'undefined') {
5
- feather.replace();
6
- }
7
-
8
- // Make the preview area clickable to simulate loading
9
- const preview = document.querySelector('.content-area');
10
- if (preview) {
11
- preview.style.cursor = 'pointer';
12
- preview.addEventListener('click', () => {
13
- preview.textContent = 'Chargement...';
14
- preview.classList.remove('text-gray-500');
15
- preview.classList.add('text-blue-600');
16
- setTimeout(() => {
17
- preview.textContent = 'Aperçu chargé ✔';
18
- preview.classList.remove('text-blue-600');
19
- preview.classList.add('text-gray-500');
20
- }, 1200);
21
- });
22
- }
23
- });
 
1
 
2
+ // Script is no longer needed for this simple layout