— Sweet Nothings —

¡Te damos la bienvenida, cariño~! La apariencia lo es todo, vístete para impresionar y este es el primer paso.

¡Importante!

Usé varios archivos de imagen para crear esta plantilla, todos alojados en Imgur. AQUÍ hay un archivo zip con todos los que usé. Siéntete libre de usarlos como quieras.

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

CÓMO INSTALAR

1. Copia TODO | (ESPEJO DE GOOGLE DOCS)

2. Pégalo en el cuadro «About Me» de JanitorAI.

3. Haz los cambios ahí (consulta la guía rápida de abajo).

4. Guarda, actualiza la página y compruébalo también en tu teléfono.

REGLAS PARA QUE NO SE ROMPA

1. No dejes líneas en blanco en ninguna parte. Para empezar un párrafo nuevo, escribe <br><br>

2. Los enlaces de imágenes deben ser directos: https://i.imgur.com/abc123.png

Si no usas una imagen, déjala vacía así: src="" (las imágenes vacías se ocultan y sus marcos desaparecen)

3. Cambia solo las palabras que estén dentro de "comillas" o entre > y <. No borres las comillas, < >, { } ni nada que diga class=

4. Nunca añadas /* comentarios / ni los caracteres y ~ dentro de la parte <style>: JanitorAI corta la hoja de estilos al encontrarlos.

5. No superes los 70.000 caracteres (la plantilla tiene unos 57.900), o se cortará el final del código. Añade imágenes solo mediante enlaces. JanitorAI elimina cualquier CSS url(...), @import y las imágenes incrustadas (data:), así que no se pueden usar.

GUÍA RÁPIDA: Busca esto (Ctrl/Cmd + F) -> cámbialo

TU NOMBRE

content:"Your Name" tu nombre visible en la parte superior de la página.

El nombre de usuario real de JanitorAI está oculto, y este texto aparece en su lugar, así que escribe lo que quieras (conserva las comillas). Se muestra en mayúsculas con la fuente Cinzel Decorative. Está en la regla que empieza por .pp-uc-title::after. Los nombres largos deberían pasar a una segunda línea, para que no se corten.

TEXTO DEL PERFIL

content:"admirers" la palabra que aparece después del recuento de seguidores

content:"Joined: mm.dd.yy" la fecha en que te uniste. Escribe tu fecha.

content:"Admire" / "Admired" el botón de seguir

content:"Darlings" la pestaña de bots

content:"Love Letters" la pestaña de guiones

content:"darlings" / "love letters" la palabra junto al recuento

PRONOMBRES

<div class="xb-pron"><span>pronouns</span><span>here</span></div>

Escribe tus pronombres (o lo que quieras) en los spans. Añade o borra spans según sea necesario.

IMÁGENES TUYAS

(los PNG transparentes se ven mejor)

class="xb-sona" la imagen alta en el encabezado, a la derecha

class="xb-intro-img" la imagen alta junto a la presentación. Nunca cambia el tamaño del cuadro: se recorta para ajustarse y puede sobresalir por encima del cuadro. Si la imagen del encabezado está vacía, tu foto de perfil normal aparecerá en un marco redondo con un anillo de perlas. (Las perlas corresponden a la regla .pp-uc-avatar-container::before. Bórrala para quitarlas.)

FONDOS

La página está construida en capas, de atrás hacia delante:

1. el color rosa suave de la página

2. tu imagen de página completa (class="xb-bg"), con la opacidad a la mitad para que el rosa le dé un matiz. Cambia opacity:.5 en la regla .xb-bg. Deja src="" si no quieres ninguna.

3. el papel tapiz X/O (class="xb-wall"), un PNG transparente superpuesto con una opacidad del 30 %. Cambia opacity:.3 en la regla .xb-wall img. El papel tapiz es una imagen, de 3456 x 1728 píxeles (incluida como «X-O Wallpaper 3456x1728.png»), y ya tiene el enlace dentro. <div class="xb-wall"><img src="..."></div>. Cambia ese enlace para usar el tuyo, o borra todo el div para quitarlo.

EL PATRÓN DE LA FRANJA DE ESTRELLAS

La franja rosa de estrellas detrás de la presentación es UNA sola imagen continua, de 3840 x 4800 píxeles (incluida como «Sweet Nothings - Star Pattern 3840x4800.png»), y ya tiene el enlace dentro de <div class="xb-pat"><img src="..."></div>. Se muestra a su tamaño real desde la esquina superior izquierda, para que las estrellas nunca se estiren. Para usar tu propio patrón, reemplaza ese enlace. Haz que mida 3840 x 4800 (una imagen más grande simplemente se recorta; una más pequeña dejará zonas vacías en pantallas enormes) y mantén el archivo por debajo de 1 MB para que Imgur no lo vuelva a comprimir. No hay ningún patrón CSS alternativo, así que si el enlace deja de funcionar, la franja se verá de color rosa liso. La franja se funde con el papel tapiz en los bordes superior e inferior.

ESTADO

Al tocar el sobre, la página se oscurece y aparece una carta con tu mensaje. Toca en cualquier lugar fuera de ella para cerrarla.

class="xb-status xb-online" cambia xb-online por xb-away o xb-offline

<b>Nota de amor</b> la palabra del sobre. La parte «- open» que aparece después se añade automáticamente.

<span class="xb-msg">...</span> el mensaje <i>...</i> la fecha (antes aparece «written»)

PRESENTACIÓN

class="xb-title" el título principal

class="xb-hl" la primera línea resaltada

<p>...</p> el texto de la biografía

class="xb-chips" etiquetas en forma de píldora. Las formas X y O se alternan automáticamente.

Enlaces: <a href="PEGA-EL-ENLACE-AQUÍ" class="xb-link">

<img src=""><span>Nombre</span><i>línea pequeña</i></a>

Hay tres enlaces configurados (una fila de tres columnas).

LAZOS

Lazo del cuadro de presentación: <img class="xb-bow" src="..."> al principio del div xb-intro-text (su tamaño está en la regla .xb-intro-text .xb-bow)

Lazo del sobre: <span class="xb-seal"><img src="..."></span> (su tamaño es width:140px en la regla .xb-seal)

Lazos de las series: <img class="xb-bow" src="..."> dentro del <summary> de cada portada de serie (su tamaño está en la regla .xb-sitem .xb-bow)

Borra un <img class="xb-bow"> para quitar un lazo. Para añadir una portada de serie, copia una línea entera de portada para que conserve su lazo.

CAMBIAR EL COLOR DE UN LAZO: CSS no puede editar los colores de una imagen, pero puede

cambiarlos de tono. Añade un filtro a la regla de ese lazo, por ejemplo:

filter:hue-rotate(-70deg)

Para un lazo rosa: -70deg lavanda, -115deg azul, +55deg naranja o dorado, +150deg verde. Las partes blancas seguirán blancas. Añade saturate(1.3) o brightness(1.1) después para ajustarlo. No puedes conseguir un color hex exacto de esta manera (para eso, edita el PNG directamente). Ten en cuenta que un filtro nuevo reemplaza la sombra suave del lazo, así que repítela: filter:hue-rotate(-70deg) drop-shadow(0 4px 4px #d9648b40)

EL CUADRO DE LA BIOGRAFÍA (X X X)

El cuadro se abre suavemente con un desvanecimiento y un deslizamiento. Para cambiarlo, edita @keyframes xb-drop y la parte animation:xb-drop .7s de la regla .xb-bio. Se cierra de golpe. Borra ambas para volver a una apertura y cierre instantáneos.

SOBRE MÍ

class="xb-photo xb-p1" y "xb-p2" dos retratos ovalados (src="" si no quieres ninguno; si ambos están vacíos, los cuadros ocuparán todo el ancho)

class="xb-cap" la pegatina de las fotos <div class="xb-box"><b>Info</b><p> tres cuadros. La etiqueta está en <b>, el texto está en <p>.

HOJA DE RUTA

(dentro del cuadro Extra, debajo del texto)

Cuatro pequeños cuadros de proyectos que puedes tocar para abrir. Cada uno:

<details class="xb-job xb-done"><summary><span>Título</span>

</summary><p>Aquí van los detalles.</p></details>

La clase determina su aspecto:

xb-job xb-done terminado: corazón sólido, título tachado

xb-job xb-now en curso: corazón palpitante y borde rosa

xb-job planificado: corazón delineado

Copia una línea para añadir un proyecto, borra una línea para quitar uno. Para quitar toda la hoja de ruta, borra el bloque <div class="xb-road"> (desde el <div> inicial hasta el </div> correspondiente). La palabra «Roadmap» que aparece sobre la lista proviene de la regla .xb-road::before.

MUESTRARIO

(el estante de series)

Cada serie es un par correspondiente:

<details class="xb-sitem xb-s1" ...> la portada (imagen + nombre)

<div class="xb-sinfo xb-i1"> la página que se abre para s1 corresponde a i1, s2 corresponde a i2, y así sucesivamente. Mantén los números emparejados. En la página: imagen del encabezado, título, descripción y enlace (pon la etiqueta de tu serie donde dice YOURTAG). Hay cinco series configuradas. Si quieres menos, borra ambas partes de un par. La fila de portadas se desplaza lateralmente en pantallas de todos los tamaños, así que puedes añadir más de cinco: copia una portada, ponle el siguiente número (xb-s6, xb-i6) y luego añade xb-s6 y xb-i6 a la regla larga del CSS que enumera s1-s5 e i1-i5 (la que empieza por .xb-series:has(.xb-s1[open])). El espacio debajo de las portadas siempre queda reservado para que la página no salte cuando elijas una serie. Solo aparece y desaparece la ventana color crema.

MODO GALERÍA

(Si no quieres una sección de series)

1. Añade la palabra xb-gallery a la clase del bloque Muestrario: <div class="xb-drawer xb-series xb-gallery" id="xb-series">

2. Borra todo el bloque <div class="xb-sdisplay"> ... </div> (todas las páginas xb-sinfo) para que no quede espacio vacío.

3. Pon cada enlace de imagen en el <img src=""> de una portada y conserva o vacía el nombre. Si el <b></b> está vacío, la cinta pequeña se oculta.

Las portadas dejarán de ser clicables y puedes añadir tantas como quieras copiando una línea de portada. Cambia el título «Showcase» por algo como «Gallery».

MEJORES AMIGOS

<a href="PEGA-EL-ENLACE-AQUÍ" class="xb-pal"><img src="">

<span>Nombre</span></a>

OBSESIONES

<a href="PEGA-EL-ENLACE-AQUÍ" class="xb-fav"><img src="">

<span>Nombre del bot</span></a>

Ambas son filas que se desplazan lateralmente. Una línea = un elemento. Copia una

línea para añadir, bórrala para quitarla. Mejores amigos y Obsesiones aparecen

bajo la pestaña Colección.

TÍTULOS DE SECCIÓN

La fila de x o x o debajo de cada título proviene de la regla

.xb-title::after (cambia las palabras de content:"" o borra

la regla).

TARJETAS DE PERSONAJES

Cada tarjeta de bot parece una publicación de Instagram: corazón + nombre del bot + puntos en la parte superior, una imagen cuadrada en un marco rosa y un pie con el recuento de chats, el recuento de tokens y un «xoxo» escrito a mano. La tarjeta está hecha únicamente con los elementos de tarjeta propios del sitio, así que los iconos del corazón y la burbuja de chat son decorativos. En una computadora, pasa el cursor sobre una tarjeta y aparecerá una hoja de «Comentarios» que se desliza hacia arriba con el resumen del bot, el @name del creador junto a un corazón y las etiquetas en la parte inferior. Los teléfonos y las tabletas no tienen función de pasar el cursor, así que al tocar solo se abre el bot y puede que la hoja no aparezca.

PESTAÑAS, BÚSQUEDA Y ORDEN

Las pestañas Darlings / Love Letters, la barra de búsqueda, el botón de filtros y el menú de orden se han rediseñado en tonos crema y dorado para combinar con la página. Consulta TEXTO DEL PERFIL para cambiar el nombre de las pestañas.

LOS EXTRAS

PÉTALOS QUE CAEN

la línea que empieza por <div class="xb-petals"> (X, O y corazones que caen lentamente). Bórrala para quitarlos.

XOXO PALPITANTE

un «xoxo» rosa en la esquina del cuadro de presentación. Corresponde a la regla .xb-intro-text::after: cambia la palabra, el tamaño o el color, o borra la regla. Las etiquetas dejan espacio para ello en pantallas anchas y se colocan por encima en los teléfonos.

AGUA

el suave agua rosa ondulante y los destellos en la parte inferior de la tarjeta del encabezado corresponden a las reglas .xb-hdr::before (olas) y .xb-hdr::after (destellos). Borra ambas para quitarlos. El suave resplandor del nombre corresponde a la regla .pp-uc-title::before.

MASCOTA DE LA PÁGINA

una pequeña mascota camina por la parte inferior de la pantalla, por encima de todo lo demás, alternando al azar entre quedarse quieta y caminar, con un sutil efecto de compresión y estiramiento. Se da la vuelta cuando camina hacia la izquierda. Busca <div class="xb-pet"> al final del HTML. Pon tu primera imagen (quieta) en la img de xb-pet-idle y tu segunda imagen (caminando) en la img de xb-pet-walk. Cada img está dentro de su propio span; no cambies los spans. Borra todo el div xb-pet para

quitar la mascota. En los teléfonos, camina justo por encima de la barra de menú inferior del sitio. El recorrido se repite cada 80 segundos. Para cambiarlo, edita los porcentajes de @keyframes xb-petmove (los valores de left:), manteniendo sincronizados los porcentajes correspondientes de xb-petidle, xb-petwalk y xb-petflip.

MOVIMIENTO REDUCIDO

si un visitante tiene activada la opción «reducir movimiento», las animaciones se detienen y se oculta el desplazamiento de la mascota (verá la imagen de la mascota quieta).

SIN VARIABLES

JanitorAI elimina las variables CSS (las líneas --algo

), así que esta plantilla no usa ninguna. Los colores

están escritos en cada regla, así que Buscar & Reemplazar

funciona en todas partes.

COLORES

Colores principales (busca y reemplaza para cambiar los colores):

#fb9ebb rosa #f2799f rosa intenso (botones)

#fedcdb rubor #ffe6ee rosa pálido

#f6c3d3 bordes suaves #5a3228 títulos (marrón oscuro)

#43261f texto del cuerpo #86594c marrón suave (etiquetas)

#fffafa blanco perla #d8b97c ribete dorado

#d9648b rosa (marcos de las tarjetas)

CRÉDITOS

CSS Sweet Nothings, por @Ru1nous

¡Puedes usarlo y editarlo como quieras! Se agradece dar crédito, pero no es obligatorio.

La pequeña línea «SWEET NOTHINGS CSS by Ru1nous» en la parte inferior de la página puede quedarse

o quitarse; tú decides.