— Doux murmures —

Bienvenue, mon cœur~ ! L’apparence, c’est tout : tu t’habilles pour faire bonne impression, et voici la première étape.

Important !

J’ai utilisé plusieurs fichiers image pour créer ce modèle, tous hébergés sur Imgur. ICI se trouve un fichier zip contenant tout ce que j’ai utilisé. N’hésite pas à t’en servir comme tu le souhaites.

------------------------------------

COMMENT INSTALLER

1. Copie TOUT | (MIROIR GOOGLE DOCS)

2. Colle-le dans la zone About Me de JanitorAI.

3. Fais tes modifications là-bas (voir le pense-bête ci-dessous).

4. Enregistre, actualise, puis vérifie aussi sur ton téléphone.

RÈGLES POUR ÉVITER DE TOUT CASSER

1. Ne laisse aucune ligne vide. Pour commencer un nouveau paragraphe, tape <br><br>

2. Les liens d’image doivent être directs : https://i.imgur.com/abc123.png

Si tu n’utilises pas une image, laisse son champ vide comme ceci : src="" (les images vides se masquent et leurs cadres se replient)

3. Ne modifie que les mots entre guillemets « » ou entre > et <. Ne supprime pas les guillemets, < >, { } ni quoi que ce soit qui indique class=

4. N’ajoute jamais /* de commentaires / ni les caractères et ~ dans la partie <style> : JanitorAI coupe la feuille de style à cet endroit.

5. Reste sous les 70 000 caractères (le modèle en fait environ 57 900), sinon la fin du code sera coupée. Ajoute les images uniquement par lien. JanitorAI supprime tout CSS url(...), @import ainsi que les images intégrées (data:), donc ils ne peuvent pas être utilisés.

PENSE-BÊTE : Trouve ceci (Ctrl/Cmd + F) -> modifie-le

TON NOM

content:"Ton nom" ton nom affiché en haut de la page.

Le vrai nom d’utilisateur JanitorAI est caché et ce texte apparaît à sa place : écris ce que tu veux (garde les guillemets). Il s’affiche en majuscules dans la police Cinzel Decorative. Il se trouve dans la règle qui commence par .pp-uc-title::after Les noms longs doivent passer sur une deuxième ligne pour ne pas être coupés.

TEXTE DU PROFIL

content:"admirateurs" le mot après le nombre d’abonnés

content:"Inscrit·e : mm.dd.yy" ta date d’inscription. Écris ta date.

content:"Admirer" / "Admiré·e" le bouton de suivi

content:"Chéris" l’onglet des bots

content:"Lettres d’amour" l’onglet des scripts

content:"chéris" / "lettres d’amour" le mot à côté du nombre

PRONOMS

<div class="xb-pron"><span>pronoms</span><span>ici</span></div>

Écris tes pronoms (ou vraiment ce que tu veux) dans les spans. Ajoute ou supprime des spans selon tes besoins.

TES PHOTOS

(les PNG transparents rendent le mieux)

class="xb-sona" la grande image dans l’en-tête, côté droit

class="xb-intro-img" la grande image à côté de la présentation. Elle ne change jamais la taille de la boîte : elle est recadrée pour s’y adapter et peut dépasser de la boîte. Si l’image d’en-tête est vide, ta photo de profil habituelle apparaît dans un cadre rond entouré d’une rangée de perles. (Les perles sont définies par la règle .pp-uc-avatar-container::before. Supprime-la pour les retirer.)

ARRIÈRE-PLANS

La page est composée de couches, de l’arrière vers l’avant :

1. la couleur rose pâle de la page

2. ton image en plein écran (class="xb-bg"), à moitié opaque pour que le rose la teinte. Modifie opacity:.5 dans la règle .xb-bg. Laisse src="" si tu n’en veux pas.

3. le fond d’écran X/O (class="xb-wall"), un PNG transparent superposé à 30 % d’opacité. Modifie opacity:.3 dans la règle .xb-wall img. Le fond d’écran est une seule image de 3456 x 1728 pixels (incluse sous le nom "X-O Wallpaper 3456x1728.png") et son lien est déjà inséré. <div class="xb-wall"><img src="..."></div>. Remplace ce lien pour utiliser le tien, ou supprime tout le div pour le retirer.

MOTIF DE LA BANDE ÉTOILÉE

La bande rose étoilée derrière la présentation est une SEULE image sans raccord, de 3840 x 4800 pixels (incluse sous le nom "Sweet Nothings - Star Pattern 3840x4800.png"), dont le lien est déjà inséré dans <div class="xb-pat"><img src="..."></div>. Elle s’affiche à sa taille réelle depuis le coin supérieur gauche, afin que les étoiles ne soient jamais étirées. Pour utiliser ton propre motif, remplace ce lien. Fais une image de 3840 x 4800 (une image plus grande sera simplement recadrée ; une plus petite laissera des zones vides sur les très grands écrans) et garde le fichier sous 1 Mo pour qu’Imgu ne le recompresse pas. Il n’y a pas de motif CSS de secours, donc si le lien ne fonctionne plus, la bande sera rose uni. La bande se fond dans le fond d’écran sur ses bords supérieur et inférieur.

STATUT

Appuie sur l’enveloppe pour assombrir la page et faire apparaître une lettre avec ton message. Appuie n’importe où à l’extérieur pour la fermer.

class="xb-status xb-online" remplace xb-online par xb-away ou xb-offline

<b>Petit mot doux</b> le texte sur l’enveloppe. La partie "- open" qui suit est automatique.

<span class="xb-msg">...</span> le message <i>...</i> la date (le mot "écrit" apparaît devant)

PRÉSENTATION

class="xb-title" le titre principal

class="xb-hl" la première ligne mise en évidence

<p>...</p> le texte de la bio

class="xb-chips" les étiquettes en forme de pastille. Les formes X et O alternent automatiquement.

Liens : <a href="COLLE-LE-LIEN-ICI" class="xb-link">

<img src=""><span>Nom</span><i>petite ligne</i></a>

Trois liens sont prévus (une rangée de trois colonnes).

NŒUDS

Nœud de la boîte de présentation : <img class="xb-bow" src="..."> en haut du div xb-intro-text (sa taille est définie par la règle .xb-intro-text .xb-bow)

Nœud de l’enveloppe : <span class="xb-seal"><img src="..."></span> (sa taille est width:140px dans la règle .xb-seal)

Nœuds des séries : <img class="xb-bow" src="..."> dans le <summary> de chaque couverture de série (sa taille est définie par la règle .xb-sitem .xb-bow)

Supprime un <img class="xb-bow"> pour retirer un nœud. Pour ajouter une couverture de série, copie toute une ligne de couverture afin que son nœud soit inclus.

RECOLORER UN NŒUD : le CSS ne peut pas modifier les couleurs d’une image, mais il peut

les décaler. Ajoute un filtre à la règle de ce nœud, par exemple :

filter:hue-rotate(-70deg)

Pour un nœud rose : -70deg pour du lavande, -115deg pour du bleu, +55deg pour de l’orange ou de l’or, +150deg pour du vert. Les parties blanches restent blanches. Ajoute saturate(1.3) ou brightness(1.1) après pour ajuster. Tu ne peux pas obtenir une couleur hexadécimale exacte de cette façon (pour cela, modifie le PNG lui-même). Note qu’un nouveau filtre remplace l’ombre douce du nœud ; répète-la donc : filter:hue-rotate(-70deg) drop-shadow(0 4px 4px #d9648b40)

LA BOÎTE BIO (X X X)

La boîte s’ouvre en douceur avec un fondu et un glissement. Pour modifier cela, change @keyframes xb-drop et la partie animation:xb-drop .7s de la règle .xb-bio. La fermeture est instantanée. Supprime les deux pour revenir à une ouverture brusque.

À PROPOS DE MOI

class="xb-photo xb-p1" et "xb-p2" deux portraits ovales (src="" si tu n’en veux pas ; si les deux sont vides, les boîtes occupent toute la largeur)

class="xb-cap" l’autocollant sur les photos <div class="xb-box"><b>Infos</b><p> trois boîtes. Le libellé se trouve dans <b>, le texte dans <p>.

FEUILLE DE ROUTE

(dans la boîte Extras, sous son texte)

Quatre petites boîtes de projets sur lesquelles tu peux appuyer pour les ouvrir. Chacune :

<details class="xb-job xb-done"><summary><span>Titre</span>

</summary><p>Les détails vont ici.</p></details>

La classe détermine son apparence :

xb-job xb-done terminé : cœur plein, titre barré

xb-job xb-now en cours : cœur pulsant et bord rose

xb-job prévu : cœur en contour

Copie une ligne pour ajouter un projet, supprime-en une pour le retirer. Pour supprimer toute la feuille de route, supprime le bloc <div class="xb-road"> (de son <div> d’ouverture jusqu’au </div> correspondant). Le mot "Feuille de route" au-dessus de la liste vient de la règle .xb-road::before.

VITRINE

(l’étagère des séries)

Chaque série est composée d’une paire correspondante :

<details class="xb-sitem xb-s1" ...> la couverture (image + nom)

<div class="xb-sinfo xb-i1"> la page qui s’ouvre pour s1 correspond à i1, s2 à i2, et ainsi de suite. Garde les numéros correspondants. Sur la page : image de bannière, titre, description et lien (inscris le tag de ta série à la place de YOURTAG). Cinq séries sont prévues. S’il t’en faut moins, supprime les deux parties d’une paire. La rangée de couvertures défile horizontalement sur toutes les tailles d’écran, tu peux donc en ajouter plus de cinq : copie une couverture, attribue-lui le numéro suivant (xb-s6, xb-i6), puis ajoute xb-s6 et xb-i6 à la longue règle du CSS qui répertorie s1-s5 et i1-i5 (celle qui commence par .xb-series:has(.xb-s1[open])). L’espace sous les couvertures reste toujours réservé afin que la page ne bouge pas quand tu sélectionnes une série. Seule la fenêtre crème apparaît et disparaît en fondu.

MODE GALERIE

(Si tu ne veux pas de section de séries)

1. Ajoute le mot xb-gallery à la classe du bloc Vitrine : <div class="xb-drawer xb-series xb-gallery" id="xb-series">

2. Supprime tout le bloc <div class="xb-sdisplay"> ... </div> (toutes les pages xb-sinfo), afin qu’il ne reste pas d’espace vide.

3. Place chaque lien d’image dans le <img src=""> d’une couverture, et garde ou efface le nom. Un <b></b> vide masque le petit ruban.

Les couvertures ne seront plus cliquables et tu peux en ajouter autant que tu veux en copiant une ligne de couverture. Remplace le titre Vitrine par un titre comme "Galerie".

MEILLEURS AMIS

<a href="COLLE-LE-LIEN-ICI" class="xb-pal"><img src="">

<span>Nom</span></a>

OBSESSIONS

<a href="COLLE-LE-LIEN-ICI" class="xb-fav"><img src="">

<span>Nom du bot</span></a>

Les deux sont des rangées qui défilent horizontalement. Une ligne = un élément. Copie une

ligne pour en ajouter, supprime-en une pour en retirer. Les sections Meilleurs amis et Obsessions se trouvent toutes les deux

sous l’onglet Collection.

TITRES DES SECTIONS

La rangée de x o x o sous chaque titre vient de la règle

.xb-title::after (modifie les mots dans content:"" ou supprime

la règle).

FICHES DE PERSONNAGES

Chaque fiche de bot ressemble à une publication Instagram : cœur + nom du bot + points en haut, image carrée dans un cadre rose, et pied de page avec le nombre de discussions, le nombre de jetons et un "xoxo" en écriture manuscrite. La fiche est construite uniquement à partir des éléments de carte propres au site ; le cœur et les icônes de bulle de discussion sont donc décoratifs. Sur ordinateur, survole une fiche et une fenêtre « Commentaires » glissera vers le haut avec le résumé du bot, le créateur@name à côté d’un cœur et les étiquettes listées en bas. Les téléphones et tablettes n’ont pas de survol : un appui ouvre donc simplement le bot, et la fenêtre peut ne pas s’afficher.

ONGLETS, RECHERCHE ET TRI

Les onglets Chéris / Lettres d’amour, la barre de recherche, le bouton de filtre et le menu de tri sont redessinés en crème et or pour s’accorder à la page. Consulte la section TEXTE DU PROFIL pour renommer les onglets.

LES EXTRAS

PÉTALES QUI TOMBENT

la ligne qui commence par <div class="xb-petals"> (les X, O et cœurs qui tombent). Supprime-la pour les retirer.

XOXO PULSANT

un "xoxo" rose dans le coin de la boîte de présentation. Il est défini par la règle .xb-intro-text::after : modifie le mot, la taille ou la couleur, ou supprime la règle. Les étiquettes laissent de la place à côté sur les grands écrans et se placent au-dessus sur les téléphones.

EAU

les douces ondulations roses et les scintillements au bas de la carte d’en-tête sont définis par les règles .xb-hdr::before (vagues) et .xb-hdr::after (scintillements). Supprime les deux pour les retirer. Le léger halo du nom est défini par la règle .pp-uc-title::before.

ANIMAL DE COMPAGNIE DE LA PAGE

un petit animal se promène au bas de l’écran, par-dessus tout le reste, alternant au hasard entre l’immobilité et la marche, avec un léger effet d’écrasement et d’étirement. Il se retourne quand il marche vers la gauche. Trouve <div class="xb-pet"> au bas du HTML. Mets ta première image (au repos) dans xb-pet-idle img et ta deuxième image (en marche) dans xb-pet-walk img. Chaque img se trouve dans son propre span ; ne touche pas aux spans. Supprime tout le div xb-pet pour

retirer l’animal. Sur les téléphones, il marche juste au-dessus de la barre de menu inférieure du site. Le trajet se répète toutes les 80 secondes. Pour le modifier, change les pourcentages dans @keyframes xb-petmove (les valeurs left:), en gardant synchronisés les pourcentages correspondants de xb-petidle, xb-petwalk et xb-petflip.

MOUVEMENTS RÉDUITS

si un visiteur a activé l’option « réduire les animations », les animations restent immobiles et la marche de l’animal est masquée (il voit l’image au repos).

PAS DE VARIABLES

JanitorAI supprime les variables CSS (les lignes --quelquechose

), donc ce modèle n’en utilise pas. Les couleurs

sont indiquées dans chaque règle, donc Rechercher & Remplacer

fonctionne partout.

COULEURS

Couleurs principales (rechercher et remplacer pour recolorer) :

#fb9ebb rose #f2799f rose soutenu (boutons)

#fedcdb rose poudré #ffe6ee rose pâle

#f6c3d3 bordures douces #5a3228 titres (brun foncé)

#43261f texte courant #86594c brun doux (libellés)

#fffafa blanc nacré #d8b97c bordure dorée

#d9648b rose (cadres des fiches)

CRÉDIT

CSS Sweet Nothings par @Ru1nous

Libre d’utilisation et de modification comme tu le souhaites ! Un crédit est apprécié, mais pas obligatoire.

La petite ligne "SWEET NOTHINGS CSS by Ru1nous" au bas de la page peut rester

ou être supprimée, comme tu préfères.