utenti.html: Aggiunte sezioni, lista di test
This commit is contained in:
+52
-252
@@ -4,261 +4,61 @@
|
|||||||
|
|
||||||
{{define "body"}}
|
{{define "body"}}
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>
|
||||||
|
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
|
||||||
|
Utenti
|
||||||
|
</h2>
|
||||||
|
|
||||||
<h2>
|
<p>
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
|
Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente
|
||||||
Utenti
|
per filtrare la lista in tempo reale.
|
||||||
</h2>
|
</p>
|
||||||
|
|
||||||
<p>
|
<div class="search">
|
||||||
Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale.
|
<input type="text" id="search-field" placeholder="Cerca...">
|
||||||
</p>
|
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/search.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="search">
|
<div class="user-list">
|
||||||
<input type="text" id="search-field" placeholder="Cerca...">
|
<!-- Dummy data -->
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/search.png"/>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div class="user-list">
|
<script>
|
||||||
<div class="user">
|
document.addEventListener('DOMContentLoaded', ({ }) => {
|
||||||
<div class="contact">
|
const $userList = document.querySelector('.user-list');
|
||||||
<h3 class="fullname">Persona 1</h3>
|
const $user = document.createElement('div');
|
||||||
<h4 class="username">persona1</h4>
|
$user.innerHTML = `
|
||||||
</div>
|
<div class="user">
|
||||||
<div class="links">
|
<div class="contact">
|
||||||
<a href="#">
|
<h3 class="fullname"></h3>
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
<h4 class="username"></h4>
|
||||||
</a>
|
</div>
|
||||||
<a href="#">
|
<div class="links">
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
<a href="#">
|
||||||
</a>
|
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png" />
|
||||||
</div>
|
</a>
|
||||||
</div>
|
<a href="#">
|
||||||
<div class="user">
|
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
||||||
<div class="contact">
|
</a>
|
||||||
<h3 class="fullname">Persona 2</h3>
|
</div>
|
||||||
<h4 class="username">persona2</h4>
|
</div>
|
||||||
</div>
|
`;
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
// Per mostrare che la pagina regge molti utenti senza laggare troppo
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
Array(1400).fill(0).map(({ }, i) => {
|
||||||
</a>
|
setTimeout(() => {
|
||||||
<a href="#">
|
// Pare che questa riga sia la più dispendiosa
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
const $newUser = $user.cloneNode(true);
|
||||||
</a>
|
|
||||||
</div>
|
$newUser.querySelector('.fullname').innerHTML = `Persona ${i + 1}`;
|
||||||
</div>
|
$newUser.querySelector('.username').innerHTML = `persona${i + 1}`;
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
$userList.appendChild($newUser.firstElementChild);
|
||||||
<h3 class="fullname">Persona 3</h3>
|
}, 0)
|
||||||
<h4 class="username">persona3</h4>
|
});
|
||||||
</div>
|
})
|
||||||
<div class="links">
|
</script>
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 4</h3>
|
|
||||||
<h4 class="username">persona4</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 5</h3>
|
|
||||||
<h4 class="username">persona5</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 6</h3>
|
|
||||||
<h4 class="username">persona6</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 7</h3>
|
|
||||||
<h4 class="username">persona7</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 8</h3>
|
|
||||||
<h4 class="username">persona8</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 9</h3>
|
|
||||||
<h4 class="username">persona9</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 10</h3>
|
|
||||||
<h4 class="username">persona10</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 11</h3>
|
|
||||||
<h4 class="username">persona11</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 12</h3>
|
|
||||||
<h4 class="username">persona12</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 13</h3>
|
|
||||||
<h4 class="username">persona13</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 14</h3>
|
|
||||||
<h4 class="username">persona14</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 15</h3>
|
|
||||||
<h4 class="username">persona15</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 16</h3>
|
|
||||||
<h4 class="username">persona16</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<div class="contact">
|
|
||||||
<h3 class="fullname">Persona 17</h3>
|
|
||||||
<h4 class="username">persona17</h4>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{end}}
|
{{end}}
|
||||||
Reference in New Issue
Block a user