-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresults.html
More file actions
102 lines (94 loc) · 5.2 KB
/
results.html
File metadata and controls
102 lines (94 loc) · 5.2 KB
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
<!DOCTYPE html>
<html lang="fr" id="htmlRoot">
<head>
<meta charset="UTF-8">
<title>Search for Kids - Résultats</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="
default-src 'none';
script-src 'self' https://cdnjs.cloudflare.com;
style-src 'self' 'unsafe-inline';
img-src 'self' https: data: blob:;
connect-src 'self' https:;
font-src 'self';
form-action 'self';
base-uri 'self';
manifest-src 'self';">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="css/style.css?v=3">
<!-- 1️⃣ Charge config.js/config.demo.js + config-api-sources.json -->
<script src="js/loader.js?v=4"></script>
<!-- 2️⃣ Internationalisation -->
<script src="js/i18n.js?v=3"></script>
<!-- 3️⃣ DOMPurify pour la sécurité -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.7/purify.min.js"
integrity="sha256-QM/0krVDU6Vc35/7NpeGU5/7fVTSX5fdSh6JdbMJw10="
crossorigin="anonymous"></script>
<!-- 4️⃣ Moteur de recherche (découpé en modules) -->
<script src="js/search-cache.js?v=1"></script>
<script src="js/search-api.js?v=1"></script>
<script src="js/search-utils.js?v=1"></script>
<script src="js/search.js?v=6"></script>
<script src="js/voice-search.js?v=3"></script>
<script src="js/knowledge-panels.js?v=3"></script>
</head>
<body>
<div class="search-container">
<div class="search-bar">
<a href="index.html"><img src="logo.png" alt="Logo" height="40"></a>
<form>
<div class="input-wrapper">
<input type="text" id="searchInput" required autocomplete="off" data-i18n="placeholder" data-i18n-attr="placeholder">
<span class="clear-button" id="clearButton" style="display: none;">×</span>
<button type="button" id="voiceSearchButton">
<svg class="mic-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7z"/></svg>
<svg class="headphone-icon" viewBox="-2 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 13.5V13c0-4.97056 3.58172-9 8-9 4.4183 0 8 4.02944 8 9v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 17.4382V15.5614c0-.9178.62459-1.7177 1.51493-1.9403L4 13.5l1.25448-.3136c.3787-.0947.6332.1917.6332.5821v5.463c0 .3904-.2545.6768-.6332.5821L4 19.5l-1.48507-.2228C2.62459 19.1559 2 18.356 2 17.4382z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 17.4382V15.5614c0-.9178-.6246-1.7177-1.5149-1.9403L20 13.5l-1.2545-.3136c-.3787-.0947-.6332.1917-.6332.5821v5.463c0 .3904.2545.6768.6332.5821L20 19.5l1.4851-.2228c.8903-.1213 1.5149-.9178 1.5149-1.839z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
<button type="submit">🔍</button>
</form>
<div class="autocomplete-dropdown" id="autocompleteDropdown"></div>
</div>
</div>
<!-- Onglets de recherche façon Google -->
<div class="search-tabs">
<div class="tabs-container">
<a href="#" class="search-tab active" id="webTab" data-i18n="webTab">Tous</a>
<a href="#" class="search-tab" id="imagesTab" data-i18n="imagesTab">Images</a>
<div class="tools-container" id="toolsContainer" style="display: none;">
<a href="#" class="search-tab" id="toolsButton" data-i18n="toolsButton">Outils</a>
<div id="sortPanel" class="sort-panel">
<a href="#" class="sort-option" data-sort="" id="relevanceOption" data-i18n="relevanceOption">Pertinence</a>
<a href="#" class="sort-option" data-sort="date" id="dateOption" data-i18n="dateOption">Date</a>
</div>
</div>
</div>
</div>
<!-- Conteneur des résultats -->
<div class="results-wrapper">
<div id="searchStats" class="search-stats"></div>
<div id="loadingIndicator" class="loading" style="display: none;">
<div class="spinner"></div>
<span id="loadingText" data-i18n="loadingText">Recherche en cours...</span>
</div>
<div class="results-container" id="resultsContainer"></div>
<div id="pagination" class="pagination"></div>
</div>
<!-- Modal pour afficher les images en grand -->
<div id="imageModal" class="image-modal">
<span class="close-modal" onclick="closeImageModal()">×</span>
<div class="modal-content">
<img id="modalImage" class="modal-image" src="" alt="">
<div class="modal-info">
<div id="modalTitle"></div>
<div id="modalSource"></div>
<div id="modalDimensions"></div>
</div>
</div>
</div>
<!-- Footer avec signature -->
<div class="footer">
<div id="footerText" data-i18n="footerText"><!-- Le texte sera injecté par JavaScript --></div>
</div>
</body>
</html>