Purrfect Art Style Blog: Códigos del Tocadiscos y el Paint

Llegar a hacer el coso y editarlo sin q se modifique td me fue muy complicado pero, justo por eso se los dejare aca para q lo puedan agregar a sus blogs, lo de azul es lo de cambiar ₊⊹.𖧧.⋆˚𖥸✧˚೯⁺
Draw me codigo :

<h3>✏️ Dibuja aquí Meow</h3>

<label>Color</label>

</div>

<label>Grosor</label>

<button id="clearBtn">Borrar</button>

<button id="downloadBtn">Descargar PNG</button>

</div>

<style>

#layla-paint {

width:175px;

height:420px;

padding: 15px;

background: rgba(125, 250, 137, 0.5);

border: 4px solid #01820e;

border-radius: 20px;

box-shadow: 0 4px 10px rgba(1,130,14,0.3);

text-align: center;

font-family: Arial, sans-serif;

}

#layla-paint h3 {

margin: 0 0 2px 0; /* separación exacta de 2px */

color: #01820e;

}

#paintCanvas {

background: #ffffff;

border: 3px dashed #01820e;

border-radius: 30px;

touch-action: none;

cursor: crosshair;

display: block;

margin: 0 auto;

}

.paint-controls {

position:absolute

margin-top: 10px;

display: flex;

flex-direction: column;

gap: 8px;

}

.color-row {

display: flex;

justify-content: center;

gap: 6px;

}

.colorPicker {

width: 49px;

height: 35px;

padding: 0;

border: 2px solid #01820e;

border-radius: 6px;

cursor: pointer;

}

.paint-controls label {

font-size: 14px;

color: #014d08;

}

#brushSize {

accent-color: #01820e;

}

button {

padding: 6px;

border-radius: 10px;

border: none;

background: #01820e;

color: white;

cursor: pointer;

transition: 0.2s;

}

button:hover {

background: #026d12;

}

</style>

const canvas = document.getElementById("paintCanvas");

const ctx = canvas.getContext("2d");

const colorPickers = document.querySelectorAll(".colorPicker");

const brushSize = document.getElementById("brushSize");

const clearBtn = document.getElementById("clearBtn");

const downloadBtn = document.getElementById("downloadBtn");

let drawing = false;

let currentColor = colorPickers[0].value;

// Cambiar color activo según el cuadrito que edites

colorPickers.forEach(picker => {

picker.addEventListener("input", () => {

currentColor = picker.value;

});

// Cargar dibujo guardado

const savedImage = localStorage.getItem("xMiniPaint");

if (savedImage) {

const img = new Image();

img.src = savedImage;

img.onload = () => ctx.drawImage(img, 0, 0);

}

function startDraw(e) {

drawing = true;

draw(e);

}

function endDraw() {

drawing = false;

ctx.beginPath();

localStorage.setItem("xMiniPaint", canvas.toDataURL());

}

function draw(e) {

if (!drawing) return;

const rect = canvas.getBoundingClientRect();

const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;

const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;

ctx.lineWidth = brushSize.value;

ctx.lineCap = "round";

ctx.strokeStyle = currentColor;

ctx.lineTo(x, y);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(x, y);

}

// Mouse

canvas.addEventListener("mousedown", startDraw);

canvas.addEventListener("mouseup", endDraw);

canvas.addEventListener("mousemove", draw);

canvas.addEventListener("mouseleave", endDraw);

// Touch

canvas.addEventListener("touchstart", startDraw);

canvas.addEventListener("touchend", endDraw);

canvas.addEventListener("touchmove", draw);

clearBtn.addEventListener("click", () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

localStorage.removeItem("laylaMiniPaint");

});

downloadBtn.addEventListener("click", () => {

const link = document.createElement("a");

link.download = "michi-paint.png";

link.href = canvas.toDataURL();

link.click();

});

</script>

Aca termina el codigo (no agregues esto)

Tocadiscos

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<style>

/* CONTROLES */

/* CONTENEDOR */

.controls{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

width:120px;

height:30px;

}

/* BOTONES */

.control{

width:28px;

height:28px;

background:#eee;

border-radius:6px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

position:absolute;

}

/* POSICION DE CADA BOTON */

.play{

left:0px;

}

.stop{

left:46px;

gap:3px;

}

.random{

left:92px;

}

/* ICONOS */

.triangle{

width:0;

height:0;

border-left:10px solid black;

border-top:6px solid transparent;

border-bottom:6px solid transparent;

}

.bar{

width:4px;

height:12px;

background:black;

}

.random img{

width:16px;

height:16px;

}

/* CAJA DISCOS */

.vinyl-stack-box{

width:210px;

height:120px;

background:#a4e9a5;

border:4px solid #01820e;

border-radius:18px;

margin:auto;

margin-bottom:40px;

position:relative;

overflow:hidden;

}

.vinyl-stack{

position:absolute;

left:10px;

top:10px;

height:90px;

}

.album{

position:absolute;

width:90px;

height:90px;

border-radius:6px;

overflow:hidden;

cursor:pointer;

transition:transform .4s;

}

.album img{

width:100%;

height:100%;

object-fit:cover;

}

.a1{ left:0px; z-index:42; }

.a2{ left:12px; z-index:38; }

.a3{ left:24px; z-index:34; }

.a4{ left:36px; z-index:30; }

.a5{ left:48px; z-index:26; }

.a6{ left:60px; z-index:22; }

.a7{ left:72px; z-index:18; }

.a8{ left:84px; z-index:14; }

.a9{ left:96px; z-index:10; }

.a10{ left:108px; z-index:6; }

.album:hover{

transform:translateX(35px);

z-index:50;

}

/* TOCADISCOS */

.turntable{

width:210px;

height:240px;

background:#a4e9a5;

border:4px solid #01820e;

border-radius:18px;

margin:auto;

position:relative;

}

/* DISCO */

.platter{

width:150px;

height:150px;

border-radius:50%;

background:#222;

position:absolute;

top:20px;

left:50%;

transform:translateX(-50%);

}

.vinyl{

width:140px;

height:140px;

border-radius:50%;

background:black;

position:absolute;

top:5px;

left:5px;

overflow:hidden;

}

.vinyl-cover{

position:absolute;

width:60px;

height:60px;

top:50%;

left:50%;

transform:translate(-50%,-50%);

border-radius:50%;

object-fit:cover;

}

.label{

width:18px;

height:18px;

background:white;

border-radius:50%;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

/* BRAZO */

.tonearm-base{

width:18px;

height:18px;

background:#ccc;

border-radius:50%;

position:absolute;

top:40px;

right:30px;

}

.tonearm{

width:80px;

height:5px;

background:#ddd;

position:absolute;

top:48px;

right:30px;

transform:rotate(30deg);

transform-origin:right center;

transition:transform .4s;

}

/* BOTONES */

.control{

width:28px;

height:28px;

background:#eee;

border-radius:6px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}

.triangle{

width:0;

height:0;

border-left:10px solid black;

border-top:6px solid transparent;

border-bottom:6px solid transparent;

}

.stop{

gap:3px;

}

.bar{

width:4px;

height:12px;

background:black;

}

.random img{

width:16px;

height:16px;

}

/* BARRA */

.slider{

width:120px;

height:5px;

background:#6dbb78;

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

border-radius:4px;

cursor:pointer;

}

.slider-btn{

width:12px;

height:12px;

background:white;

border-radius:50%;

position:absolute;

top:-3px;

left:0;

}

/* ANIMACION */

@keyframes spin{

from{transform:rotate(0)}

to{transform:rotate(360deg)}

}

.spin{

animation:spin 3s linear infinite;

}

</style>

const albums=document.querySelectorAll(".album")

const player=document.getElementById("player")

player.volume = 0.6

const cover=document.querySelector(".vinyl-cover")

const vinyl=document.querySelector(".vinyl")

const slider=document.querySelector(".slider-btn")

const sliderBar=document.querySelector(".slider")

const tonearm=document.querySelector(".tonearm")

let currentIndex=0

function loadTrack(index){

currentIndex=index

player.src=albums[index].dataset.audio

cover.src=albums[index].querySelector("img").src

}

function playTrack(){

player.play()

vinyl.classList.add("spin")

tonearm.style.transform="rotate(15deg)"

}

albums.forEach((album,i)=>{

album.onclick=()=>{

loadTrack(i)

playTrack()

}

})

document.querySelector(".play").onclick=()=>{

if(!player.src){

loadTrack(0)

}

playTrack()

}

document.querySelector(".stop").onclick=()=>{

player.pause()

vinyl.classList.remove("spin")

tonearm.style.transform="rotate(30deg)"

}

document.querySelector(".random").onclick=()=>{

let randomIndex=Math.floor(Math.random()*albums.length)

loadTrack(randomIndex)

playTrack()

}

player.ontimeupdate=()=>{

if(player.duration){

let percent=(player.currentTime/player.duration)*100

slider.style.left=percent+"%"

}

sliderBar.onclick=(e)=>{

let rect=sliderBar.getBoundingClientRect()

let pos=(e.clientX-rect.left)/rect.width

player.currentTime=pos*player.duration

}

/* AUTO SIGUIENTE CANCION */

player.onended=()=>{

currentIndex++

if(currentIndex>=albums.length){

currentIndex=0

}

loadTrack(currentIndex)

playTrack()

}

</script>

Aca termina el codigo espero q les sea de ayuda, traten de editarle poco xq se vuelve un caos XD, en cualquier caso si quieren editarle mas o agregar o quitar musica y asi consulten con chat gpt x siaca antes de editar. la parte de azul es dnd se agregal los links o urls de las cosas o para q le editen el color a su gusto jeje.

Buena suerte, os quiero musho y hasta luegooo ₊˚✮🍵(⌯ⓛ•ⓛ⌯)🌱₊˚୭,

lunes, 2 de marzo de 2026

Códigos del Tocadiscos y el Paint

No hay comentarios:

Publicar un comentario