SÍNDROME DEL IMPOSTOR

Les suenas conocido esto, no? Pos si es que no les suena se los dire ahorita mismo, el síndrome del impostor es una fenómeno en el cual la persona que lo padece, duda de sus logros o de sus logros, sintiendo un miedo constante a que la gente las vea como un fraude. En resumen, es sentirte malo en algo que de verdad eres bueno.

Pues bueno, estoy pasando por una crisis de este fenómeno en estos momentos , como les dije en el post anterior estoy tratando de escribir un fanfic y esta es como la cuarta vez que vuelvo a escribir todo de cero, siento que todo está mal hecho, que los párrafos son muy largos, que la puntuación y comas están puestas como la mierda, trate de hacer algo que me recomendaron que es luego de escribir pasar el texto por alguna IA para que me corrija los errores gramaticales, pero cuando lo hago siento que suena muy IA aunque no le cambie nada al texto original. 

Y pos eso me de como que un poquito de ansiedad, uno, que la gente diga que lo hice con IA y dos, que no le guste a nadie y que sea una mierdilla. 

Obviamente no es sólo con esto que me pasa últimamente, siento que todo lo que hago está mal hecho, mediocre o simplemente horrible, y se que no es así, o bueno pienso yo, porque siempre me dicen que están bien y que lo hago increíble, pero siento que la gente lo dice porque me quiere.

Y todo esto me hizo darme cuenta la poca fé que me tengo, ¿Mala autoestima? Lo más probable, se que soy buena en cosas, si, pero también se que no soy lo sufrientemente buena, o no tanto como a MI me gastaría serlo. Alguien viéndolo de ese lado puede decir que esta bien querer superarse a uno mismo, pero el problema es que yo no veo mejoras y me da miedo, porque siento que nunca voy a estar conforme conmigo misma y eso me aterra.

De hecho , crear mi blog y comenzar a subir tutoriales a TikTok fue una odisea para mi al principio, pensando que a nadie le servirían y que haría el ridículo, pero me gusta ver lo mucho que le sirve ustedes mis pollos a hacer sus blog, amo ver sus blog, responder sus mensajes y ayudarlos a hacer su propio espacio.

Estoy trabajando lo más que puedo con mi odio a mi misma, voy de apoco, quizás me arriesgue saliendo de mi zona de confort por aqui o por TikTok subiendo al más que no sean solo tutoriale.

Siento que me fui por las ramas, sorry si es asi, los tkm.

QUIERO HACER UN FANFIC

Bueno el título ya dice realmente lo que vengo a hablar el día de hoy así que no me voy a detener a explicar mucho eso o quizás sí lo que pase.

Bueno hace unos días ya les dije que me volví a meter de cabeza en lo que es el Dracotok y con eso volvieron a aparecer la época de leer fanfics, cuestión es que a pesar de pillar unos muy buenos que me gustan y también cuando no pillo alguno con la temática especia le pido a algunas IAs (gracias girlies de tiktok por darme la idea) aún así tengo un vacío que no lo puedo llenar con esas historias, así que ahora tengo un mini fanfic todo mal hecho en mis documentos de Google

Ósea no creo que tenga mucho que aportar a la bonita comunidad que hace fanfics pero igual me gustaría publicarlo, porque como que tengo ideas bien chicle bomba, aún estoy viendo como llevar esas historias a palabras más bonitas.

No solo tengo historias con el Draco, pero es a la que más le estoy metiendo amor en estos momento, porque ya les dije que me obsesione.

Miren vamos a hacer algo, les voy a dejar la mini sipnosis que tengo hasta ahora de la historia y ustedes me dicen si le ven potencial o si me retiro de este mundo antes de entrar , decir que llevo menos de la mitad de lo que quiero, y si, esa es mi excusa por si dicen que es mala, poder defenderme.

"Pertenecer a una familia de Slytherins de sangre pura y terminar en Hufflepuff ya era bastante difícil para Nellie Pembroke, pero su verdadero error no fue quedar en la casa equivocada, fue enamorarse del chico equivocado: Draco Malfoy, su ex de segundo año.

Luego de un año entero de silencio y miradas esquivadas, el destino hace que se vuelvan a juntar, aunque Nellie ya no es la misma niña que Draco dejó, el daño no se ha ido, él, atrapado entre la presión de su padre y sus sentimientos, tendrá que decidir si vale la pena luchar por ella. ¿Podrá Draco remendar las heridas del pasado? ¿Podrá Nellie perdonar? Y lo más importante... ¿Podrán estar juntos sin romperse otra vez?"

Ya les dije que los estoy intentando, no sean malulos, que sepan que no tiene ni titulo esta cosa así que los tkm, besitos, vaii

CICLO CELULAR CON MOMI

Chikos se supone que mañana tengo evaluación del ciclo celular así que les voy a dar una clase para poder estudiar, sorry si les revivo traumas con esto.

RESUMEN

El ciclo celular es el proceso en el cual una célula se divide para formar dos celular hijas exactamente iguales, este ciclo dura aproximadamente 24 horas, depende de la temperatura y nutrientes. Se encuentra subdivida en etapas secundaria.

IMPORTANCIA DEL CICLO CELULAR

Este es un proceso muy importante en el cual la célula crece, duplica su ADN y se divide en dos células completamente iguales, así asegurando la continuidad de la vida de los seres vivos.

PARTES DEL CICLO CELULAR

Interfase: Esta etapa es la más prolongada del ciclo celular

Fase M (Mitosis): En esta etapa se lleva a cabo la división celular, generando las células hijas para luego reiniciar el ciclo.

INTERFASE

Fase G1: Aquí se dedica a crecer, fabricar proteínas y duplicar sus organelos (como las mitocondrias). 

Fase S: Se duplica el ADN. Cada filamento de cromatina hace una copia exacta de sí mismo, por lo que la célula pasa a tener el doble de material genético, preparándose para la división.

Fase G2: La célula sigue creciendo un poco más y revisa que el ADN se haya copiado sin errores (gracias al punto de control G2). Además, empieza a fabricar las estructuras necesarias para la división que viene justo después (la Fase M).

MITOSIS

Profase: El ADN se condensa y se forman los cromosomas visibles. El núcleo empieza a desaparecer y se forma el huso mitótico (los "hilos" que moverán los cromosomas).

Metafase: Los cromosomas se alinean perfectamente en el centro (ecuador) de la célula. Cada uno se engancha a las fibras del huso.

Anafase: Las copias de los cromosomas se separan. Las fibras del huso los jalan hacia los polos opuestos de la célula.

Telofase: Los cromosomas llegan a los extremos y se descondensan. Se vuelven a formar los dos núcleos celulares. El núcleo se ha dividido

Citocinesis

Justo al final o después de la Telofase, el citoplasma de la célula se estrangula por el medio y se corta, separando físicamente a las dos nuevas células hijas.

COMPACTACIÓN DEL MATERIAL GENETICO EN LAS ETAPAS

Interfase                                                                                 Mitosis

G1: Cromatina                                                                   Profase: Cromosoma

S: Doble hélice                                                                  Metafase: Cromosoma

G2: Cromatina                                                                   Anafase: Cromátida

                                                                               Telofase: Cromatina

DIFERENCIAS ENTRE MITOSIS Y MEIOSIS

Mitosis

Genera 2 células idénticas, mantiene la carga genética (diploides o 2n). Ocurre en células somáticas (todas las de tu cuerpo, como la piel o los músculos).

Meiosis

Genera 4 células distintas, reduce la carga a la mitad (haploides o n) y tiene crossing-over (intercambio de ADN) en la Profase I, que es lo que nos hace únicos. Ocurre solo en células germinales para formar gametos (Ovulo o espermatozoide).

IMPORTANCIA

Mitosis

Su objetivo es multiplicar las células con su material genético y gracias a este proceso los seres vivo se pueden desarrollar desde una sola célula.

Meiosis

Permite la reproducción de los seres vivos y hace que los genes se mezclen de forma aleatoria haciendo que sean únicas.

PUNTOS DE CONTROL

Son los encargados de verificar que la célula este correctamente formada y sin errores, se encuentra en tres lugares, los cuales son G1, G2 y M.

G1: Es el encargado de revisar el tamaño de la célula, sus nutrientes y ver que el ADN no este dañado.

G2: Se encarga de verificar que el ADN se haya duplicado completamente y sin errores.

M: Este punto se encarga de que todos los cromosomas estén alineados y unidos correctamente, asegurando que cada célula hija reciba el numero correcto de cromosomas, se encuentra en la metafase.

EL GLOW UP DE BAD BUNNY

Diré esto de la forma mas sincera posible, aunque obviamente se nota lo mucho que quiero al Benito Antonio ahora, antes me cagaba Bad Bunny, no como persona, pq no me daba el tiempo de conocerlo realmente, sino por la música que hacia en su época, y realmente no lo culpo, hoy en día disfruto mucho de sus canciones antiguas. Pero algo que esta claro (según yo) es que el Bad Bunny del 2016 que conquistó al mundo con su música trap parece un artista completamente diferente al que tenemos ahora con esa mezcla de pop urbano.

A pesar de estos cambios notorios que tenemos en Benito existe algo que va desde sus inicios hasta hoy que es su amor por PR y por Latinoamérica, lo que se vio mucho en el Super Bowl, pero como dije, esto viene desde sus inicios y (ya más informada de su vida) me veo en la necesidad de contar todo lo que yo se de su trayectoria.

Así que tendremos en cuenta que hace año y pico que termine una relación de tres años, que soy bastante

Lo que comenzó a destacar a Benito en sus inicios en 2016 fue la manera en que mezclaba distintos géneros musicales, arriesgándose mucho en lo que era la época y hasta diría en la aprobación que llegaría a tener su música, esto combinado con la influencia que tiene de su país hizo que en muchas ocasiones fuese el artista más escuchado a nivel global.

Aprovecho el momento para hablar también de como en 2019 lidero protestas en Puerto Rico pausando su carrera, demostrando lo unido que estaba con "su pueblo" por decirlo de alguna manera, usando "El apagón" como evidencia de la crisis de su país, y estas no serian las únicas veces en las que veríamos lo mucho que ama de donde viene.

Ya yéndonos a tiempo más actual en 2025 aparece DTMF, donde podemos ver un cambio a una percepción más madura de lo habíamos visto en los anteriores álbumes, volviéndonos a afirmar lo arriesgado que es y que no tiene limite este hombre.

Su ultimo álbum (por ahora) no habla tanto de la fama actual que tiene, sino más que nada de recuerdos, nostalgia y cosas que han cambiado o ya de por si no están, a diferencia de sus hits más sonados antes, como Un verano sin ti o YHLQMDLG, El Club (la canción que abrió el "proyecto") se fue más que nada por los detalles y la conexión emocional, alejándose completamente del ambiente únicamente de fiesta.

Todo esto llamo mucho la atención, es más, es desde aquí en la que yo aparezco para quedarme en este mundo, con todo el alboroto que se hizo, sale el cortometraje que se los dejo aquí por si no lo han visto aún, esto nos dio el "debut" de Bad Bunny como guionista y director, en pocas palabras el corto representa la conexión que tenemos con el pasado y lo importante que es preservar la memoria, destacando la nostalgia de un lugar que ya cambio.

Para no extenderme mucho más (que puedo) me queda decir el porque deberías aunque sea darle una oportunidad a alguna canción del Benito, si es que no lo has hecho.

Benito Antonio Martínez Ocasio es alguien que incluso con la fama que llega a tener actualmente siempre su inspiración a sido su hogar Puerto Rico, tomando sonidos tradicionales, colaborando con artistas locales y utilizando playas de su infancia o barrios populares para las escenografías de sus videos, todo esto para resaltar la riqueza cultural de la isla y con esto poder vernos reflejados como latinos, usando referencias culturales que todos podemos percibir como nuestras.

ENCUESTITA

Ya chicuelos, hemos vuelto después de 10 días y volvemos con el tutorial de la encuesta "¿Cómo te sientes hoy?" Así que sin nada más que decir les comparto mi conocimiento, trate de simplificar lo más que pude para que les quede igual de bello, pero sin tantos problemas.

CÓDIGO

<style>

.momi-mood-widget {

  /* CAMBIA ESTE COLOR */

  --color-base: #000000; 

  --fuente-elegida: 'Slackey', cursive;

  

  all: initial;

  display: block;

  font-family: var(--fuente-elegida);

}

.momi-mood-widget .mood-card {

  width: 210px; 

  /* Aumenté el porcentaje de blanco en el degradado para que se vea más "brillante" */

  background: linear-gradient(180deg, color-mix(in srgb, var(--color-base), #fff 40%) 0%, var(--color-base) 100%);

  padding: 16px;

  border-radius: 12px; 

  border: 1px solid rgba(255,255,255,0.3);

  text-align: center;

  margin: 20px auto;

  /* Sombras más intensas para dar profundidad de objeto */

  box-shadow: 

    0 10px 20px rgba(0,0,0,0.3), 

    inset 0 2px 2px rgba(255,255,255,0.6), 

    inset 0 -2px 5px rgba(0,0,0,0.2);

}

.momi-mood-widget .mood-title {

  font-family: var(--fuente-elegida);

  font-size: 15px;

  color: #fff;

  margin: 0 0 14px 0;

  text-shadow: 0 1px 2px rgba(0,0,0,0.5);

}

.momi-mood-widget .mood-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}

.momi-mood-widget .mood-item {

  /* Fondo con más transparencia para que la luz de fondo resalte */

  background: rgba(255, 255, 255, 0.15);

  border: 1px solid rgba(255, 255, 255, 0.4);

  border-radius: 8px;

  padding: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

  display: flex;

  justify-content: center;

  align-items: center;

  /* Pequeño reflejo superior en el cuadrito */

  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);

}

.momi-mood-widget .mood-item:hover {

  background: rgba(255, 255, 255, 0.4);

  transform: translateY(-2px);

  box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.8);

}

.momi-mood-widget .mood-item.selected {

  background: #fff;

  border: 1.5px solid #fff;

  box-shadow: 0 0 15px #fff;

}

.momi-mood-widget .mood-item img { 

  width: 32px; 

  height: 32px; 

  display: block; 

  image-rendering: pixelated; 

}

</style>

Como les dije trate de simplificarlo lo más que pude, como verán solo tienen que cambiar 4 cosillas y una de esas es opcional, recuerden pegar esto en notas y cambiar las cosas desde ahí para que no sea tan complicado, el primer cambio es el color base #000000, aquí como el nombre dice ponen el color del que quieran su encuesta, no se preocupen por las luces ni las sombras, hice que el mismo código sacara esos colores solito :), luego eso esta 'Slackey', cursive, que es la fuente que quieran ponerle al titulo de la encueta. de eso viene el numero de pixeles que en mi caso lo tengo en 210px, no creo que sea necesario cambiarlo, pero es en caso de que tengan más o menos espacio en sus cositos de los lados. Ya por ultimo va el tamaño de la letra, yo se los deje en 15px, pero pueden ponerlo de la medida que quieran.

Espero les sirva mis chicuelos, los quiero, lo siento por no haber actualizado hace rato -3-

EN EL AMOR NUNCA TANTO

Esta es una frase que usamos mucho de broma con mi super amiga Hannah, pero como que hace muy poco me dio por analizarla realmente y preguntarme a mi que opinaba de lo que significa, de eso igual comencé a preguntarle a algunos amigos y de toda esa mini investigación nació esto.

Como dije, voy a hablar más que nada lo que yo creo, agregando las opiniones que me dieron mis amigos, pero quiero aclarar que todo esto es en base a mi experiencia, porque creo que sea lo mismo pensar en esto siendo una migajera, a contestarlo cuando estas conociendo a alguien o llevas años de relación o acabas de terminar. Siento que tu contexto lo es todo.

Así que tendremos en cuenta que hace año y pico que termine una relación de tres años, que soy bastante chica entre comillas y que soy bastante arrastrada por amor.

Y como les acabo de decir, siempre trato de dar todo por amor, soy una de esas ya pocas personas que aman amar con intensidad cuando tengo a alguien que en serio marco mi corazón de pollo de forma muy significativa, en mi cabeza loca no existe un limite cuando se trata de querer demostrar cuanto amo o quiero a alguien especial, incluso puede ser algo que involuntariamente hagas solo pq te importa esa persona, pero aquí igual va un tema muy importante que reflexione, no importa que tan grandes son esas ganas incontrolables de querer demostrar a alguien cuanto lo amas, lo que importa es que haces con esa emoción.

Aquí es cuando las opiniones se dividen y la verdad apoyo de distinta manera cada perspectiva, tengo gente que uno debería expresar todo lo que sientes, expresar de forma libre sin importar ego o orgullo, aprovechar quizás esa etapa de enamoramiento total y dar siempre el 1000% de ti para que esa persona nunca dude cuanto la amas, y como les dije, soy de este tipo de persona, aunque algunas veces me arrepiento de ser así no puedo evitarlo. Pero también tengo otra perspectiva que es la que trato de seguir ahora, esta dice que (mínimo yo y los que me respondieron) estamos en una etapa de muchos cambios y realmente no sabemos como seremos mañana y cuanto llegaremos a cambiar y que parte de querernos a nosotros mismos es aprender a cuidar y poder regular nuestra integridad emocional.

Teniendo estos dos puntos de vista, que ya dije el como yo los apoyo, daré el veredicto final de esta mini investigación, creo que esta bien el querer demostrar el amor que le tenemos a alguien, pero tan de golpe, aprender a equilibrar de buena manera lo que es nuestra intensidad hacia alguien con protegernos a nosotros mismos.

Al final no se trata de irnos (o irme más bien) a un extremo o a otro, sino de poder entender que si soy capaz de cuidarme a mi y a mi corazoncito, puedo ser capaz de amor a otros desde algo mucho más sano y consciente, no una batalla de "te amo más porque te doy más", sino un espacio donde ambos puedan ser intensos a su forma sin miedo a romperse.

Wafles de plátano

Yo se que tu no lo sabes, pero mi receta de wafles de plátano es muy exigido en mi liceo cuando la llevo, así que se las voy a enseñar, siéntanse afortunados (algo nada que ver, me acabo de enterar que plátano lleva tilde).

INGREDIENTES

Waflera

1 plátano 

2 huevos 

2 cucharadas grandes de harina de avena/normal

1 chorrito de vainilla o 1 cucharada de canela o los dos (no juzgo)

1 cuchara de mantequilla

Lo que quieras echarle

PASO A PASO

1.- Muele el plátano y mézclalo con los 2 huevitos.

2.- Añade las cucharadas de harina junto con el chorrito de vainilla o la canela (o los dos).

3.- Derrite la mantequilla y espárcela por la waflera.

4.- Cocínalo por 4 a 6 minutos o al ojo.

Mis tips para ver si esta listo es levantar la tapa, si queda pegado se tiene que dejar cerrada y esperar, después doy vuelta el wafle, no se si sirve para algo pero siempre lo hago.

5.- Sirve todos en un plato y ponle lo que quieras encima.

En mi caso le hecho chocolate amargo, fruta picada, Nutella, no se me ocurre que más.

Y LISTO!, Tendras los wafles más ricos del mundo.

MP3

Prepárense chicuelos que este es uno de los código más largos que tengo, pero la verdad lo que tienen que cambiar no es mucho que digamos y tratare de explicar para que sirve cada cosito, ¡OJO! solo tienen que cambiar lo que esta en negritas y les recomiendo pegarlo en notas primero para que no sea tan complicado, si no les funciona métanlo al chatgpt, que ni yo lo entiendo Hago lo mejor que puedo.

CÓDIGO

<link href="https://fonts.googleapis.com/css2?family=Slackey&display=swap" rel="stylesheet" />

<div class="ipod-widget">
  <div class="ipod">
    <div class="screen">
      <img id="cover" src="" alt="cover" />
      <p id="track-title">Cargando...</p>
      
      <div class="progress-container" id="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
      </div>
      <div class="time-display">
        <span id="current-time">0:00</span> / <span id="duration-time">0:00</span>
      </div>
    </div>

    <div class="controls-wheel">
      <button id="play" class="ipod-btn btn-play-pause state-paused" title="Play/Pause">
        <span class="play-icon"></span>
      </button>
      <button id="prev" class="ipod-btn btn-prev" title="Anterior">
        <span class="icon-prev"></span>
      </button>
      <button id="next" class="ipod-btn btn-next" title="Siguiente">
        <span class="icon-next"></span>
      </button>
    </div>

    <div class="youtube-hidden-container">
      <div id="player"></div>
    </div>
  </div>
</div>

<style>
.ipod-widget {
  all: initial;
  display: block;
  font-family: FUENTE_BASE_AQUÍ, sans-serif;
}

.ipod-widget .ipod {
  width: 200px;
  background: #000000;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2), inset -3px -3px 7px **#000000**, inset 3px 3px 7px **#000000**;
  text-align: center;
  margin: 20px auto;
  border: 1px solid #000000;
  position: relative;
  overflow: hidden;
}

.ipod-widget .youtube-hidden-container {
  width: 2px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.01;
  overflow: hidden;
}

.ipod-widget .screen {
  background: #000000;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.5);
}

.ipod-widget .screen img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #2a5d85;
}

.ipod-widget .screen p {
  font-family: 'Slackey', cursive;
  font-size: 13px;
  color: #152026; 
  margin: 5px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.ipod-widget .time-display {
  font-size: 10px;
  color: #22435c;
  font-family: *FUENTE_TIEMPO_AQUÍ*;
  font-weight: bold;
}

.ipod-widget .progress-container {
  width: 100%;
  background: #2a5d85;
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 5px;
  position: relative;
}

.ipod-widget .progress-bar {
  background: #00ffcc;
  height: 100%;
  width: 0%;
  border-radius: 3px;
}

.ipod-widget .controls-wheel {
  position: relative;
  width: 140px;
  height: 140px;
  background: #ffffff;
  border-radius: 50%;
  margin: 20px auto 5px auto;
  border: 1px solid #dcdcdc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 2px 5px rgba(0,0,0,0.05);
}

.ipod-widget .ipod-btn {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}

.ipod-widget .ipod-btn:active {
  transform: scale(0.85);
}

.ipod-widget .btn-play-pause {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f0f0f0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 2;
}
.ipod-widget .btn-play-pause:active {
  transform: translate(-50%, -50%) scale(0.9);
}

.ipod-widget .play-icon {
  display: block;
  transition: all 0.1s ease;
}

.ipod-widget .state-paused .play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #555;
  margin-left: 4px;
}

.ipod-widget .state-playing .play-icon {
  width: 12px;
  height: 14px;
  border-left: 4px solid #555;
  border-right: 4px solid #555;
  box-sizing: border-box;
}

.ipod-widget .btn-prev {
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}
.ipod-widget .btn-prev:active {
  transform: translateY(-50%) scale(0.85);
}
.ipod-widget .icon-prev {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #555;
  position: relative;
}
.ipod-widget .icon-prev::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #555;
}

.ipod-widget .btn-next {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.ipod-widget .btn-next:active {
  transform: translateY(-50%) scale(0.85);
}
.ipod-widget .icon-next {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #555;
  position: relative;
}
.ipod-widget .icon-next::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #555;
}
</style>

<script>
let player;
let current = 0;
let progressInterval;
let apiReady = false;

const playlist = [
  {
    title: "TITULO - NOMBRE DEL ARTISTA 1",
    id: "ID DE YOUTUBE 1",
    cover: "URL DE LA IMAGEN DE PORTADA 1"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 2",
    id: "ID DE YOUTUBE 2",
    cover: "URL DE LA IMAGEN DE PORTADA 2"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 3",
    id: "ID DE YOUTUBE 3",
    cover: "URL DE LA IMAGEN DE PORTADA 3"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 4",
    id: "ID DE YOUTUBE 4",
    cover: "URL DE LA IMAGEN DE PORTADA 3"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 5",
    id: "ID DE YOUTUBE 5",
    cover: "URL DE LA IMAGEN DE PORTADA 5"
  }
];

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    height: "2",
    width: "2",
    videoId: playlist[current].id,
    playerVars: {
      autoplay: 0,
      controls: 0,
      disablekb: 1,
      fs: 0,
      rel: 0,
      modestbranding: 1,
      playlist: playlist[current].id
    },
    events: {
      'onStateChange': onPlayerStateChange,
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  apiReady = true;
  updateUI();
}

function updateUI() {
  document.getElementById("track-title").textContent = playlist[current].title;
  document.getElementById("cover").src = playlist[current].cover;
}

function onPlayerStateChange(event) {
  const btnPlay = document.getElementById("play");
  
  if (event.data === YT.PlayerState.PLAYING) {
    btnPlay.classList.remove("state-paused");
    btnPlay.classList.add("state-playing");
    startProgressTimer();
  } else {
    btnPlay.classList.remove("state-playing");
    btnPlay.classList.add("state-paused");
    clearInterval(progressInterval);
  }

  if (event.data === YT.PlayerState.ENDED) {
    nextTrack();
  }
}

document.getElementById("play").onclick = () => {
  if (!apiReady || !player) return;
  
  const state = player.getPlayerState();
  if (state !== YT.PlayerState.PLAYING) {
    player.playVideo();
  } else {
    player.pauseVideo();
  }
};

fn = function nextTrack() {
  if (!player || !apiReady) return;
  current = (current + 1) % playlist.length;
  player.loadVideoById(playlist[current].id);
  updateUI();
}
document.getElementById("next").onclick = fn;

document.getElementById("prev").onclick = () => {
  if (!player || !apiReady) return;
  current = (current - 1 + playlist.length) % playlist.length;
  player.loadVideoById(playlist[current].id);
  updateUI();
};

function startProgressTimer() {
  clearInterval(progressInterval);
  progressInterval = setInterval(() => {
    if (player && player.getCurrentTime) {
      const currentTime = player.getCurrentTime();
      const duration = player.getDuration();
      
      if (duration > 0) {
        const percentage = (currentTime / duration) * 100;
        document.getElementById("progress-bar").style.width = percentage + "%";
        document.getElementById("current-time").textContent = formatTime(currentTime);
        document.getElementById("duration-time").textContent = formatTime(duration);
      }
    }
  }, 500);
}

function formatTime(time) {
  const mins = Math.floor(time / 60);
  const secs = Math.floor(time % 60);
  return mins + ":" + (secs < 10 ? "0" : "") + secs;
}

document.getElementById("progress-container").onclick = function(e) {
  if (player && player.getDuration && apiReady) {
    const rect = this.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const width = rect.width;
    const duration = player.getDuration();
    
    if (duration > 0) {
      const newTime = (clickX / width) * duration;
      player.seekTo(newTime, true);
    }
  }
};

window.onload = function() {
  if(apiReady) updateUI();
};
</script>
      



Como ven es un código muy largo y espero que me entiendan bien,, así que voy a explicar todo por orden, aunque igual sale la explicación al ladito de cada uno por si les sirve más, obvio igual si se les hace más fácil pasarlo por chatgpt se los recomiendo pq ni yo entendía esta wea (se merece la groseria por complicada).
Primero que todo, no me saquen ningún espacio ni ninguna comilla pq si no nos vamos al carajiño y con eso dijo empezamos.
Yapis chicuelos vamo a empezar, el primer coso que les sale para cambiar es el de "FUENTE_BASE_AQUÍ..." qué como dice es la letra base por si se te olvida poner tu fuente en otra sección del mp3 esta es la que se pondra, después de este viene la mayor parte de los colores de este gadgt, si les ayuda en color-calculator pueden ir viendo lo de los colores.
El primer cambio de color  #000000 que este es el color exterior de mp3, luego de este vienen las sombras de los laditos  inset -3px -3px 7px #000000 y inset 3px 3px 7px #000000 la idea es que sea un color más oscuro y más claro que el primero,  el siguiente es 1px solid #000000 que es un bordecito que rodea por fuera el mp3 que define su silueta.
Ahora yéndonos a la parte interior esta #000000 que es el el cuadradito interior del mp3, como el fondo de pantalla, luego viene font-family: 'Slackey', cursive, que en la parte de Slackey deben poner el tipo de letra exclusivo para el titulo de canción, después viene FUENTE_TIEMPO_AQUÍ que es para los números del tiempo la canción, yo recomiendo monospace para que se vea "natural" el cambio de números
Ahora viene otra parte complicada que es lo de las canciones, en esta ocasión puse 5 canciones, pero si quieren más pueden copiar el script de aquí abajo .
{
  title: "TU TITULO - NOMBRE DEL AUTOR 1",
  id: "ID_DE_YOUTUBE_1", 
  cover: "URL_DE_LA_IMAGEN_DE_PORTADA_1"
}

En la parte de title, dentro de las comillas va el nombre de la canción y el artista. Luego viene el id, que es el código de letras y números que aparece en el enlace de YouTube después de v= y antes de cualquier símbolo de &.

Por ejemplo, si la dirección es watch?v=gjWk-MY3pc4&list, tu ID secreto para las comillas seria gjWk-MY3pc4.

En cover, igual dentro de las comillas va la dirección de la imagen, que debería ser la portada de la canción que quieren poner.
Y eso sería todo, se que se ve muy complicado, pero cuando le agarras la onda no los es tanto .

Mini Paint

 Ya chikos aqui esta el super mini paint, uno de los gagdets más entretenidos en mi opinion, ojala les sirva muchooo.

CÓDIGO:

<div class="momi-paint-widget-left"> <!-- Barra de título clásica --> <div class="paint-window-bar"> <span class="paint-title">🎨 untitled - Paint</span> <div class="paint-window-controls"> <span class="paint-btn-mini">_</span> <span class="paint-btn-mini">✕</span> </div> </div> <!-- Barra de Menú --> <div class="paint-menu-bar"> <span>File</span><span>Edit</span><span>View</span><span onclick="clearCanvas()" class="clear-menu-btn">Clear</span> </div> <div class="paint-body"> <!-- Lienzo interactivo --> <canvas id="momiPaintCanvasLeft" width="232" height="170"></canvas> </div> <!-- PALETA COMPLETA DE DOS FILAS --> <div class="paint-footer-palette"> <!-- Indicador de color seleccionado a la izquierda --> <div class="selected-indicator-box"> <div id="momiCurrentColorPreview" style="background: #000000;"></div> </div> <!-- Contenedor de la cuadrícula de colores --> <div class="colors-grid-container"> <!-- FILA SUPERIOR --> <div class="color-pixel" style="background: #000000;" onclick="selectPaintColor('#000000')"></div> <div class="color-pixel" style="background: #808080;" onclick="selectPaintColor('#808080')"></div> <div class="color-pixel" style="background: #800000;" onclick="selectPaintColor('#800000')"></div> <div class="color-pixel" style="background: #808000;" onclick="selectPaintColor('#808000')"></div> <div class="color-pixel" style="background: #008000;" onclick="selectPaintColor('#008000')"></div> <div class="color-pixel" style="background: #008080;" onclick="selectPaintColor('#008080')"></div> <div class="color-pixel" style="background: #000080;" onclick="selectPaintColor('#000080')"></div> <div class="color-pixel" style="background: #800080;" onclick="selectPaintColor('#800080')"></div> <div class="color-pixel" style="background: #808040;" onclick="selectPaintColor('#808040')"></div> <div class="color-pixel" style="background: #004040;" onclick="selectPaintColor('#004040')"></div> <div class="color-pixel" style="background: #0080ff;" onclick="selectPaintColor('#0080ff')"></div> <div class="color-pixel" style="background: #004080;" onclick="selectPaintColor('#004080')"></div> <div class="color-pixel" style="background: #400080;" onclick="selectPaintColor('#400080')"></div> <div class="color-pixel" style="background: #804000;" onclick="selectPaintColor('#804000')"></div> <!-- FILA INFERIOR --> <div class="color-pixel" style="background: #ffffff;" onclick="selectPaintColor('#ffffff')"></div> <div class="color-pixel" style="background: #c0c0c0;" onclick="selectPaintColor('#c0c0c0')"></div> <div class="color-pixel" style="background: #ff0000;" onclick="selectPaintColor('#ff0000')"></div> <div class="color-pixel" style="background: #ffff00;" onclick="selectPaintColor('#ffff00')"></div> <div class="color-pixel" style="background: #00ff00;" onclick="selectPaintColor('#00ff00')"></div> <div class="color-pixel" style="background: #00ffff;" onclick="selectPaintColor('#00ffff')"></div> <div class="color-pixel" style="background: #0000ff;" onclick="selectPaintColor('#0000ff')"></div> <div class="color-pixel" style="background: #ff00ff;" onclick="selectPaintColor('#ff00ff')"></div> <div class="color-pixel" style="background: #ffff80;" onclick="selectPaintColor('#ffff80')"></div> <div class="color-pixel" style="background: #00ff80;" onclick="selectPaintColor('#00ff80')"></div> <div class="color-pixel" style="background: #e0f7fa;" onclick="selectPaintColor('#e0f7fa')"></div> <div class="color-pixel" style="background: #aab6ff;" onclick="selectPaintColor('#aab6ff')"></div> <div class="color-pixel" style="background: #ffa07a;" onclick="selectPaintColor('#ffa07a')"></div> <div class="color-pixel" style="background: #ffb6c1;" onclick="selectPaintColor('#ffb6c1')"></div> </div> </div> </div> <style> .momi-paint-widget-left { all: initial; display: block; width: 250px; background: #d4d0c8; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #404040; border-bottom: 2px solid #404040; box-shadow: 1px 1px 0px #000; padding: 2px; box-sizing: border-box; font-family: 'Consolas', monospace; margin: 20px auto 20px 0; user-select: none; } .momi-paint-widget-left .paint-window-bar { background: #000080; padding: 3px 5px; display: flex; justify-content: space-between; align-items: center; } .momi-paint-widget-left .paint-title { font-size: 11px; font-weight: bold; color: #ffffff; } .momi-paint-widget-left .paint-window-controls { display: flex; gap: 2px; } .momi-paint-widget-left .paint-btn-mini { background: #d4d0c8; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; font-size: 9px; padding: 0px 4px; color: #000; font-weight: bold; } .momi-paint-widget-left .paint-menu-bar { display: flex; gap: 8px; padding: 3px 4px; font-size: 11px; color: #000; border-bottom: 1px solid #808080; } .momi-paint-widget-left .clear-menu-btn { color: #ff3b30; font-weight: bold; cursor: pointer; text-decoration: underline; } .momi-paint-widget-left .paint-body { background: #808080; padding: 3px; display: flex; justify-content: center; } .momi-paint-widget-left canvas { background: #ffffff; border-top: 2px solid #404040; border-left: 2px solid #404040; border-bottom: 2px solid #fff; border-right: 2px solid #fff; display: block; cursor: crosshair; } .momi-paint-widget-left .paint-footer-palette { display: flex; align-items: center; padding: 5px; background: #d4d0c8; gap: 6px; border-top: 1px solid #808080; } .momi-paint-widget-left .selected-indicator-box { width: 28px; height: 28px; background: #d4d0c8; border-top: 2px solid #404040; border-left: 2px solid #404040; border-bottom: 2px solid #fff; border-right: 2px solid #fff; position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .momi-paint-widget-left #momiCurrentColorPreview { width: 14px; height: 14px; border: 1px solid #000; } .momi-paint-widget-left .colors-grid-container { display: grid; grid-template-columns: repeat(14, 1fr); gap: 1px; flex-grow: 1; } .momi-paint-widget-left .color-pixel { width: 12px; height: 12px; box-sizing: border-box; border-top: 1px solid #404040; border-left: 1px solid #404040; border-bottom: 1px solid #fff; border-right: 1px solid #fff; cursor: pointer; } </style> <script> document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('momiPaintCanvasLeft'); const ctx = canvas.getContext('2d'); const colorPreview = document.getElementById('momiCurrentColorPreview'); let painting = false; let currentColor = '#000000'; let brushSize = 3; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; function startPosition(e) { painting = true; draw(e); } function endPosition() { painting = false; ctx.beginPath(); } function draw(e) { if (!painting) return; const rect = canvas.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; ctx.lineWidth = brushSize; ctx.strokeStyle = currentColor; ctx.lineTo(clientX - rect.left, clientY - rect.top); ctx.stroke(); ctx.beginPath(); ctx.moveTo(clientX - rect.left, clientY - rect.top); } canvas.addEventListener('mousedown', startPosition); canvas.addEventListener('mouseup', endPosition); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseleave', endPosition); canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startPosition(e); }); canvas.addEventListener('touchend', endPosition); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e); }); window.selectPaintColor = function(color) { currentColor = color; colorPreview.style.background = color; brushSize = (color === '#ffffff') ? 12 : 3; }; window.clearCanvas = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); }; }); </script>

Bueno en este código lo único que tienen que hacer es pegarlo en un gadget y debería funcionarles bien, lo que más podrían cambiar por si les queda muy pequeño o muy grande en su espacio, seria los pixeles de ancho que tiene, que es lo que puse en negritas, yo lo tengo en 250px como pueden ver, pq mi espacio es de 300x, así que ahí pueden probar y, solo si es necesario cambiarlo.

Aguante Gemini para los Gadgets

Antes de empezar a subir tutoriales de mis gadgets les voy a decir una cosilla, no se programar ni pio, la verdad la mayoría de mis gadgets los he sacado gracias al hermoso Gemini, el caso es que la mayoría de mis gadgets son prueba y error, y también así es como tengo la misma estética en todo y les voy a tratar de explicar mi método para sacar cosas tan lindas para decorar mu blog.

Se que sería más genial decir que se programar y que el blog es 100% hecho por mis manos artesanas, pero realmente es algo que se me dificulta mucho aprender pq tengo memoria de pez, obviamente no es que Gemini me de las ideas y todo, solo me ayuda a traer en código lo que se me ocurre de mi cabecita sin querer matarme un tiro.

Otra cosa que hago es buscar códigos existentes y adaptarlos a lo que quiero con la IA (como las burbujitas que tengo) y como dije, se que para algunos puede ser menospreciar a los programadores (perdón si es así, los tkm programadores), pero es lo que me a funcionado a mi.

Para darles el ejemplo y que lo vean más claro les voy a ir diciendo como fue hacer el primer gadgets que fue el hermoso reproductor de mp3.

La verdad este fue el más trabajado de hacer por muchas razones, pq no tenia muy claro como pedirle, pueden usar la IA que les facilite más el trabajo. 

Lo primero que tienen que tener claro es la estética de su gadgets, los colores, donde va a ir, que va a hacer, que tiene que mostrar y para que es. Y como les dije si tienen algún scrip que puedan darle como ejemplo será mucho mas fácil.

Este es el primer mensaje que le mande a Gemini:

"quiero un reproductor de musica que parezca un mp3, que yo pueda dejar un playlist y las personas que visiten mi web (blogger) puedan adelantar, atrasar y parar la playlist y las canciones, puedes guiarte del siguiente scrip, pero quiero que lo hagas mejor si es posible con el estilo frutiger"

Como ven no use ninguna palabra técnica ni nada por el estilo solo le dije lo más básico, después de eso con el código fue sacando más preguntas como "en donde pongo la portada y el video, eso no me quedo claro" o "no me funciona en blog, en que me equivoque" y de allí es solo prueba y erros, ir cambiando, probando en tu blog y si no funciona mandarlo a la IA para que pueda arreglarlo.

No se rindan si no les sale a la primera, pq obviamente la IA se puede equivocar y nosotros también en copiar el código, piensen que con el mp3 me demore 6 intentos a que me diera el resultado que tengo ahora, así que no te frustres por equivocarte.

El tip que les puedo dar es hacer todo en la misma conversación con tu IA, ya que asi, cuando ya tengas tu estética de colores o de diseño, con los demás gadgets que hagas puedes solo decirle "con la misma estética de los gadgets anteriores quiero que hagas...." y asi todo se vera con los mismos colores y en armonía.

Y asi es como pueden pedirle lo que sea y tener un blog único y lo más importante, un blog que sea tuyo.

OJALA LES SIRVA ESTE TIP!!