Skip to content

Commit

Permalink
Big update
Browse files Browse the repository at this point in the history
  • Loading branch information
@lenylvt
lenylvt committed Aug 13, 2024
1 parent 9e1bdca commit 7b203de
Show file tree
Hide file tree
Showing 3 changed files with 370 additions and 255 deletions.
385 changes: 370 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,377 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Search Bar</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model's - AI HUB France</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #000000;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.container {
width: 100%;
max-width: 600px;
text-align: center;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.subtitle {
font-size: 1rem;
margin-bottom: 1rem;
opacity: 0.7;
}
.search-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding: 10px;
display: flex;
margin-bottom: 20px;
}
#searchBox {
flex-grow: 1;
background: transparent;
border: none;
color: #ffffff;
font-size: 1rem;
padding: 10px;
outline: none;
}
button {
background-color: #4299e1;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
button:hover {
background-color: #3182ce;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
#resultsContainer {
width: 100%;
max-width: 600px;
}
.result-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.result-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.result-item h2 {
margin: 0;
font-size: 30;
}
.model-info {
font-size: 0.9rem;
opacity: 0.7;
margin: 5px 0;
}
.action-buttons {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.btn {
flex: 1;
padding: 10px 15px;
border-radius: 15px;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
cursor: pointer;
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
margin: 0 5px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.download-btn {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 38px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}

.download-btn:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.download-btn:hover {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}

.download-btn:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}

.copy-btn {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 38px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}

.copy-btn:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.copy-btn:hover {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}

.copy-btn:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
}
.modal-content {
background-color: #1a202c;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
position: relative;
color: #ffffff;
}
.close {
color: #aaa;
position: absolute;
top: 10px;
right: 20px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<button id="toggleMode" class="toggle-mode">Changer de Mode</button>
<div class="search-container">
<h1>Chercher un Modèle</h1>
<div class="search-bar">
<input type="text" id="searchBox" placeholder="Plus de 20.000 modèles grâce à Applio !">
<button onclick="search()">🔍</button>
<div class="container">
<h1>Model's</h1>
<div class="subtitle">By AI HUB France</div>
<div class="search-container">
<input type="text" id="searchBox" placeholder="Chercher un Modèle" aria-label="Chercher un Modèle">
<button onclick="search(true)">🔍</button>
</div>
<div id="resultsContainer"></div>
</div>
<h3 id="resultsHeading">‿︵‿︵‿︵‿︵‿︵‿</h3>
<div id="resultsContainer"></div>
<script src="script.js"></script>

<div id="infoModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div id="modalContent"></div>
</div>
</div>

<script>
const apiKey = 'd13b8b0e-c27a-4bf8-a4bc-e2cd9cdbbd1a';
let currentPage = 1;
let isLoading = false;
let hasMoreResults = true;

async function search(reset = false) {
if (reset) {
currentPage = 1;
document.getElementById('resultsContainer').innerHTML = '';
hasMoreResults = true;
}

if (isLoading || !hasMoreResults) return;

isLoading = true;
const input = document.getElementById('searchBox').value;
let apiUrl;

if (input === '') {
apiUrl = `https://api.applio.org/key=${apiKey}/models/perpage=25/page=${currentPage}`;
} else {
if (input.length < 3) {
displayError('Tu as déjà vu un nom avec moins de 3 lettres ? Mets en plus !');
isLoading = false;
return;
}
apiUrl = `https://api.applio.org/key=${apiKey}/models/search?name=${encodeURIComponent(input)}`;
}

try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
if (data.length === 0) {
if (reset) {
displayError('Aucun modèle trouvé pour votre recherche.');
}
hasMoreResults = false;
} else {
displayResults(data, reset);
currentPage++;
}
} catch (error) {
displayError(`Erreur de recherche: ${error.message}`);
} finally {
isLoading = false;
}
}

function displayResults(data, reset) {
const container = document.getElementById('resultsContainer');
if (reset) {
container.innerHTML = '';
}
data.forEach(item => {
const epochs = item.epochs ? item.epochs : 'Inconnu';
const itemHTML = `
<div class="result-item">
<h2 title="${item.name}">${item.name}</h2>
<p class="model-info">Epochs: ${epochs}</p>
<p/>
<div class="action-buttons">
<a href="${item.link}" class="btn download-btn">Télécharger</a>
<button class="btn copy-btn" onclick="copyLink('${item.link}')">Copier Lien</button>
</div>
</div>
`;
container.innerHTML += itemHTML;
});
}

function displayError(message) {
const container = document.getElementById('resultsContainer');
if (message === 'Fetch error: HTTP error! Status: 404') {
container.innerHTML = `
<div class="result-item">
<h4>Je crois que c'est pas ici :(</h4>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="download-btn">Télécharger</a>
</div>
`;
} else {
container.innerHTML = `<div class="info-box">${message}</div>`;
}
}

function copyLink(link) {
navigator.clipboard.writeText(link).then(() => {
alert('Lien copié dans le presse-papiers!');
}, (err) => {
console.error('Erreur lors de la copie: ', err);
});
}

// Fermer le modal en cliquant sur le bouton de fermeture (x)
document.querySelector('.close').onclick = function() {
document.getElementById('infoModal').style.display = 'none';
}

// Fermer le modal en cliquant en dehors de celui-ci
window.onclick = function(event) {
const modal = document.getElementById('infoModal');
if (event.target == modal) {
modal.style.display = 'none';
}
}

// Infinite scroll
window.onscroll = function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
search();
}
};

// Initial load of models
window.onload = () => search(true);
</script>
</body>
</html>
</html>
Loading

0 comments on commit 7b203de

Please sign in to comment.