@media only screen and (max-width: 767px){ .logo a {height: 65px;}
body{
margin:0;
font-family:Poppins;
background:#0a0a0a;
color:white;
text-align:center;
}
.container{
max-width:1400px;
margin:auto;
padding:30px;
}
.controls{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
margin-bottom:20px;
}
.controls input,
.controls select{
padding:6px;
font-size:13px;
}
.preview{
height:520px;
background-size:cover;
background-position:center;
border-radius:10px;
position:relative;
overflow:hidden;
}
.linha{
position:absolute;
cursor:move;
white-space:nowrap;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px currentColor,
0 0 40px currentColor,
0 0 80px currentColor,
0 0 120px currentColor,
0 0 200px currentColor;
}
.medida{
margin-top:10px;
font-size:18px;
}
button{
padding:14px 35px;
font-size:18px;
background:#00e5ff;
border:none;
border-radius:6px;
cursor:pointer;
}
const preview=document.getElementById("preview")
const textos=document.querySelectorAll(".texto")
const fontes=document.querySelectorAll(".fonte")
const cores=document.querySelectorAll(".cor")
const tamanhos=document.querySelectorAll(".tamanho")
let linhas=[]
for(let i=0;i<5;i++){
let span=document.createElement("span")
span.className="linha"
span.innerText=""
span.style.left="200px"
span.style.top=(80*i+80)+"px"
preview.appendChild(span)
linhas.push(span)
}
function atualizar(){
for(let i=0;i<5;i++){
let texto=textos[i].value
let fonte=fontes[i].value
let cor=cores[i].value
let tamanho=tamanhos[i].value
let linha=linhas[i]
linha.innerText=texto
linha.style.fontFamily=fonte
linha.style.color=cor
linha.style.fontSize=tamanho+"px"
}
calcular()
}
document.querySelectorAll("input,select").forEach(el=>{
el.addEventListener("input",atualizar)
})
document.getElementById("fundo").addEventListener("change",function(){
preview.style.backgroundImage="url("+this.value+")"
})
function calcular(){
let largura=0
let altura=0
linhas.forEach(linha=>{
let rect=linha.getBoundingClientRect()
if(rect.width>largura){
largura=rect.width
}
altura+=rect.height
})
document.getElementById("medida").innerText=
Math.round(largura/3)+"cm x "+Math.round(altura/3)+"cm"
}
let drag=false
let alvo=null
let offsetX,offsetY
preview.addEventListener("mousedown",e=>{
if(e.target.classList.contains("linha")){
drag=true
alvo=e.target
offsetX=e.offsetX
offsetY=e.offsetY
}
})
document.addEventListener("mousemove",e=>{
if(!drag)return
let rect=preview.getBoundingClientRect()
alvo.style.left=(e.clientX-rect.left-offsetX)+"px"
alvo.style.top=(e.clientY-rect.top-offsetY)+"px"
calcular()
})
document.addEventListener("mouseup",()=>drag=false)
function enviar(){
let texto=""
textos.forEach(t=>{
if(t.value){
texto+=t.value+"%0A"
}
})
let msg="Olá quero este neon:%0A"+texto
window.open("https://wa.me/5511959244373?text="+msg)
}
atualizar()
Rei do Neon - Especialistas em Letreiros de Neon LED