devtips/librairie.html at main · Syloww/devtips · GitHub

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Librairies - DEVTIPS</title>
    <meta name="description" content="Découvrez les meilleures librairies et outils pour le développement web avec DEVTIPS. CSS, JavaScript, frameworks et plus encore.">
    <meta name="keywords" content="librairies, outils, développement web, CSS, JavaScript, frameworks, devtips">
    <meta name="robots" content="index, follow">
    <meta name="author" content="GLENAC Salim">
    <meta name="language" content="fr">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles/index.css">
    <link rel="stylesheet" media="screen and (max-width: 680px)" href="styles/mobile.css">
</head>
<body>
    <header class="main-header">
        <div class="container">
            <a href="index.html" class="logo">DEVTIPS</a>
            <nav class="nav-menu">
                <a href="index.html">Accueil</a>
                <a href="cours.html">Cours</a>
                <a href="inspiration.html">Inspiration</a>
                <a href="librairie.html" class="active">Librairies</a>
                <a href="blog.html">Blog</a>
                <a href="credits.html">Crédits</a>
            </nav>
            <button class="menu-toggle" aria-label="Toggle menu">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <main>
        <section class="page-header">
            <div class="container header-content">
                <h1>Librairies & <span>Outils</span></h1>
                <p>Découvrez les meilleures librairies, frameworks et outils pour accélérer votre développement web et créer des applications modernes.</p>
                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="librarySearchInput" placeholder="Rechercher une librairie...">
                    </div>
                </div>
            </div>
        </section>

        <section class="filters">
            <div class="container">
                <div class="filter-tabs" id="categoryFilters">
                    <button class="filter-tab active" data-category="all">
                        <i class="fas fa-globe"></i> Toutes les librairies
                    </button>
                    <button class="filter-tab" data-category="css">
                        <i class="fab fa-css3-alt"></i> CSS
                    </button>
                    <button class="filter-tab" data-category="javascript">
                        <i class="fab fa-js"></i> JavaScript
                    </button>
                    <button class="filter-tab" data-category="framework">
                        <i class="fas fa-layer-group"></i> Frameworks
                    </button>
                    <button class="filter-tab" data-category="tools">
                        <i class="fas fa-tools"></i> Outils
                    </button>
                </div>
                <div class="filter-options">
                    <div class="filter-group">
                        <label for="typeFilter">Type :</label>
                        <select id="typeFilter">
                            <option value="all">Tous</option>
                            <option value="library">Librairie</option>
                            <option value="framework">Framework</option>
                            <option value="tool">Outil</option>
                            <option value="plugin">Plugin</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="sortFilter">Trier par :</label>
                        <select id="sortFilter">
                            <option value="default">Défaut</option>
                            <option value="name-asc">Nom (A-Z)</option>
                            <option value="name-desc">Nom (Z-A)</option>
                            <option value="stars-desc">Popularité</option>
                            <option value="updated-desc">Dernière mise à jour</option>
                        </select>
                    </div>
                </div>
            </div>
        </section>

        <section class="libraries-section">
            <div class="container">
                <div class="libraries-grid" id="librariesGrid">
                    <!-- Les librairies seront chargées ici par JavaScript -->
                </div>
                <div id="noResults" class="no-results" style="display: none;">
                    <i class="fas fa-exclamation-circle"></i>
                    <h3>Aucune librairie trouvée</h3>
                    <p>Essayez d'ajuster vos filtres ou votre recherche.</p>
                </div>
            </div>
        </section>

        <section class="cta-section">
            <div class="container cta-content">
                <h2>Vous avez une librairie à partager ?</h2>
                <p>Contribuez à notre collection et aidez la communauté à découvrir de nouveaux outils.</p>
                <a href="mailto:contact@devtips.com" class="btn btn-primary">Proposer une librairie <i class="fas fa-chevron-right"></i></a>
            </div>
        </section>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2024 DEVTIPS. Tous droits réservés.</p>
            <nav class="footer-nav">
                <a href="privacy.html">Politique de confidentialité</a>
                <a href="legal.html">Mentions légales</a>
            </nav>
        </div>
    </footer>

    <div id="notification" class="notification">
        Mise à jour de notre <br><b>politique de confidentialité</b> !
    </div>

    <script src="js/menu.js"></script>
    <script src="js/notif.js"></script>
    <script src="js/libraries.js"></script>
</body>
</html>