gribse/page-perso-chokbar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add content, change images, beautify

Browse source
This commit is contained in:
gribse 2025-11-30 12:27:04 +01:00
parent 12a760f6e1
commit a4e0fcb8dd
4 changed files with 133 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
Wood049_1K-JPG_Color.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 932 KiB

BIN
depositphotos_wood.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

202
index.html
View file

@ -14,58 +14,76 @@
src:url(TT2020Base-Regular.woff2)format('woff2');
}
html {
background-color: rgb(255, 255, 246);
background-image: url(Wood049_1K-JPG_Color.jpg);
body {
background-image: url(depositphotos_wood.jpg);
font-family: tt2020, 'Courier New', Courier, monospace;
font-size: 1.2em;
font-weight: 500;
color: #302e2a;
}
body > div {
a {
font-weight: bold;
color:rgb(200, 58, 48)
}
body > div {
position: relative;
}
body > div > div {
position: absolute;
background-image: url(papier.jpg);
background-repeat: repeat;
width: 800px;
height: 1150px;
left: 0;
right: 0;
margin-inline: auto;
margin-top: 50px;
box-shadow: 5px 5px 30px #302e2a, inset 5px 5px 30px #d5d5d5;
box-shadow: 5px 5px 20px #302e2a87, inset 5px 5px 30px #d5d5d5;
rotate: calc(sin(var(--i) * 1.61) * 1.5deg)
}
.page-content {
padding: 100px;
}
.main-title {
font-size: 4em;
font-family: 'Times New Roman', Times, serif;
}
.tape-tab {
position: absolute;
height: 55px;
width: 150px;
background-color: rgba(243, 90, 90, 0.75);
background-color: rgba(79, 136, 189, 0.671);
margin-top: calc(50px + (var(--i) - 1) * 100px);
margin-left: -100px;
margin-left: -120px;
rotate: calc(sin(var(--i) * 1.61) * 1.5deg);
padding: 10px;
vertical-align: middle;
z-index: 10;
color: black;
font-size: large;
}
.tape-tab:hover {
background-color: rgb(60, 153, 240);
transform:
rotateX(20deg)
rotateY(10deg)
perspective(800px);
transform-origin: 45% 33%;
transition: 150ms ease-out;
}
.polaroid{
position: relative;
width: 350px;
padding: 20px;
background-color: #FFF;
box-shadow: 0px 0px 5px #302e2a;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 30px;
}
.polaroid > img {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.polaroid > p {
@ -80,7 +98,7 @@
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pages = document.querySelectorAll('body > div');
const pages = document.querySelectorAll('body > div > div');
pages.forEach((page, index) => {
const tab = page.querySelector('.tape-tab');
tab.addEventListener('click', () => {
@ -95,74 +113,106 @@
</header>
<body>
<div style="--i:1; z-index: 11;">
<div class="tape-tab">
<span>Accueil</span>
<div class="pages">
<div style="--i:1; z-index: 100;">
<div class="tape-tab">
<span>Accueil</span>
</div>
<div class="page-content">
<h1 class="main-title">Rapport officiel</h1>
<p style="text-align: center;">sur l'activit" du collectif &laquo; La filouterie &raquo;</p>
<p style="text-align: center;">Le 30/11/2025, Paris</p>
<p style="text-align: center;">Préfecture de police</p>
<p style="text-align: center;">12 Rue Jean Bart, 75006 Paris, France</p>
<div class="polaroid">
<svg id="agrafe" viewBox="0 0 5px 50px"><rect x="0" y="30" width="5px" height="50px" fill="#a8a8a8" transform="rotate(45)" /></svg>
<img src="rirififiloulou.jpg"></img>
<p>Les 3 suspects</p>
</div>
</div>
</div>
<div class="page-content">
<h1>Rapport officiel</h1>
<p>Notre récente étude sur le collectif "La Filouterie" et leurs activtités</p>
<div class="polaroid">
<svg id="agrafe" viewBox="0 0 5px 50px"><rect x="0" y="30" width="5px" height="50px" fill="#a8a8a8" transform="rotate(45)" /></svg>
<img src="rirififiloulou.jpg"></img>
<p>Les 3 filous</p>
</div>
<p>Créateurs de ce collectifs, Gribse, Zuma et Mayel sévissent encore en abaissant la performance du réseau informatique</p>
<div style="--i:2; z-index: 99;">
<div class="tape-tab">
<span>Collectif</span>
</div>
<div class="page-content">
<h1>L'enquête</h1>
<p>Notre récente étude sur le collectif "La Filouterie" et leurs activtités</p>
<p>Le présent rapport vise à décrire nos découvertes à propos des individus qui se nomment « La Filouterie », le dangereux groupe menaçant pour Joja-Mart, Big Tech et notre productivité nationale.</p>
<p>Il résume 3 (trois) mois d’enquête, d’infiltration de leur réseau, et d’analyse des documents que nous avons pu collecter.</p>
<h1>Le collectif</h1>
<p>La filouterie est un collectif jeune, formé en novembre 2025 par nos trois suspects : </p>
<ul>
<li>
<strong>Zuma</strong><br/>
Semble être le cerveau de la bande. Fort de plus de 20 ans d’expérience en cyber-criminalité, il fait désormais partie d’un labo de recherche. Son objectif : détruire la performance des infrastructures réseau nationales, tout en réduisant l’impact économique des hébergeurs. Armé de cartes informatiques fabriquées hors du territoire national et d’une box tout ce qu’il y a de plus bête, il met à profit ses connaissances en shell (coquille) et linux pour déployer une infrastructure.
</li>
<li>
<strong>Mayel</strong><br/>
A l’aide d’un ordinateur miniature acheté sans déclaration sur le site de petites annonces « Le Bon Coin », il rajoute un nœud au réseau filou, et à notre enquête. Ses outils de prédilection : les « Grands modèles de langage », les images comiques virales (« mêmes »), et l’humour pour dissimuler ses méfaits. Des traces de violation des droits d’auteur ont été détectées sur les pages qu’il publie publiquement.
</li>
<li>
<strong>Gribse</strong><br/>
Multirécidiviste de l’auto-hébergement, notre service de renseignements lui accorde trois serveurs. Usant de la stratégie du code de mauvaise qualité pour brouiller les pistes, il fait usage de créativité pour créer des sites internet. Initialement rendu addict à l’auto-hébergement lors d’une soirée étudiante par Zuma, il ne pourra plus s’extirper de l’engrenage, au point de détourner du matériel pour servir son besoin de publications numériques.
</li>
</ul>
</div>
</div>
</div>
<div style="--i:2">
<div class="tape-tab">
<span>Filouterie</span>
</div>
<div class="page-content">
<h1>La Filouterie</h1>
<div style="--i:3; z-index: 98;">
<div class="tape-tab">
<span>Infrastructure</span>
</div>
<div class="page-content">
<h1>L’infrastructure</h1>
</div>
</div>
<div style="--i:3">
<div class="tape-tab">
<span>Gribse ?</span>
</div>
<div class="page-content">
<h1>Gribse ?</h1>
<p>C'est qui, encore, ça ?</p>
<p>Installation à l’initialive de Zuma, cette infrastructure multi-noeuds est auto-hébergée en autant de lieux distincts qu’il existe de membres dans la filouterie. Pour brouiller les pistes, nos 3 suspects utilisent des alias pour désigner leurs machines :</p>
</div>
</div>
<div style="--i:4">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<h2>Riri</h2>
<p>Précédemment utilisé comme matériel industriel professionnel, cette machine a été détournée pour un usage plus sombre : la participation aux noeuds du réseau.</p>
</div>
</div>
<div style="--i:5">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<h2>Fifi</h2>
<p>Ordionateur civil personnel détourné. Dangereux car difficilement détectable, et non contrôlable par les moyens classiques, comme les douanes, ou les fouilles à l’aéroport.</p>
</div>
</div>
<div style="--i:6">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
</div>
</div>
<div style="--i:7">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h2>Loulou</h2>
<p>« Baie de râpe », système-sur-une-chips. Nos services de renseignement, malgré l’aide du disctionnaire officiel <a href="https://bitoduc.fr/">Bitoduc</a>, ne déchiffretnt pas la nature de cet équipement.</p>
<p>D’après notre pôle de linguistique et de cryptographie, le nom « Filouterie » serait une contraction du nom des trois machines, elles-mêmes faisant référence à des personnages de bande-dessinée.</p>
<h2>Architecture distribuée</h2>
<p>Cette infrastructure multi-noeuds semble être distribuée simultanément en plusieurs sites physiques, ce qui lui permettrait une plus grande résilience en cas de mise hors-service d'un des noeuds par nos équipes sur le terrain. </p>
</div>
</div>
<div style="--i:4; z-index: 97;">
<div class="tape-tab">
<span>Zuma</span>
</div>
<div class="page-content">
<h1>Zuma</h1>
</div>
</div>
<div style="--i:5; z-index: 96;">
<div class="tape-tab">
<span>Mayel</span>
</div>
<div class="page-content">
<h1>Mayel</h1>
</div>
</div>
<div style="--i:6; z-index: 95;">
<div class="tape-tab">
<span>Gribse</span>
</div>
<div class="page-content">
<h1>Gribse</h1>
</div>
</div>
</div>
<span>Page mise à jour le 2025-11-23</span>

10
readMe.md
View file

@ -3,12 +3,16 @@
- [ ] randomize tape color
- [ ] replace tape-tab with conditional div css rule
- [x] make clicking the tab push page to front
- [ ] make the tab cutely bend when hovered
- [x] make the tab cutely bend when hovered
- [ ] write content (lol)
- [ ] add sounds ?
- [ ] add dossier cartonné ?
- [ ] add table background with linked objects ?
- [ ] add table background with linked objects ? (pen, clip, tape, coffee mug)
- [ ] find better paper texture
- [ ] make typed text more realistic (blur ?)
- [x] make typed text more realistic
- [ ] Add staple to polaroid conrners using svg
- [ ] Why the hell are the images so dark ?