🎮ArcadeLab

Chiper Web Grana // CS 1

by MegaFlare51
1485 lines25.2 KB
▶ Play
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0,
               maximum-scale=1.0, user-scalable=no">

<title>Chiper Web Grana // CS 1</title>

<style>

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-tap-highlight-color:transparent;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Arial,sans-serif;
    color:white;
    background:
        radial-gradient(circle at 50% -10%,
        #16a34a 0%,
        #063b24 28%,
        #020a07 70%);
}

button,input{
    font:inherit;
}

button{
    cursor:pointer;
}

.app{
    min-height:100dvh;
    padding-bottom:25px;
}

/* =========================
   TOPO
========================= */

.header{
    padding:18px 15px;
    background:rgba(1,10,7,.94);
    border-bottom:1px solid rgba(74,222,128,.35);
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(10px);
}

.logo{
    font-size:23px;
    font-weight:bold;
    text-shadow:
        0 0 8px #fff,
        0 0 20px #22c55e;
}

.subtitle{
    margin-top:6px;
    color:#9eeeb8;
    font-size:12px;
}

/* =========================
   MENU
========================= */

.menu{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:12px;
    background:rgba(1,10,7,.75);
}

.menu button{
    flex:none;
    border:1px solid #16803c;
    background:#082617;
    color:#b9ffd0;
    padding:9px 13px;
    border-radius:12px;
}

.menu button.active{
    background:#16a34a;
    color:white;
    border-color:#5cff8d;
}

/* =========================
   CONTEÚDO
========================= */

.content{
    padding:13px;
    max-width:700px;
    margin:auto;
}

.page{
    display:none;
}

.page.active{
    display:block;
    animation:entrada .25s ease;
}

@keyframes entrada{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

h2{
    margin:5px 0 13px;
    font-size:21px;
}

.card{
    background:rgba(4,28,17,.92);
    border:1px solid rgba(34,197,94,.3);
    border-radius:17px;
    padding:15px;
    margin-bottom:13px;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.card-title{
    font-weight:bold;
    margin-bottom:10px;
    color:#7dffa5;
}

/* =========================
   SALDO
========================= */

.balance{
    text-align:center;
    padding:22px 15px;
}

.balance-label{
    color:#91bda0;
    font-size:12px;
}

.balance-value{
    margin-top:6px;
    font-size:35px;
    font-weight:bold;
    text-shadow:0 0 18px rgba(34,197,94,.55);
}

.stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:15px;
}

.stat{
    background:#071b10;
    border-radius:13px;
    padding:12px;
}

.stat small{
    color:#8cab98;
}

.stat strong{
    display:block;
    margin-top:5px;
    font-size:18px;
}

/* =========================
   FORM
========================= */

input{
    width:100%;
    padding:13px;
    margin:6px 0;
    border:1px solid #1b7940;
    border-radius:12px;
    outline:none;
    background:#06180d;
    color:white;
}

input:focus{
    border-color:#4ade80;
    box-shadow:0 0 10px rgba(74,222,128,.2);
}

.main-btn{
    width:100%;
    padding:13px;
    margin-top:7px;
    border:0;
    border-radius:12px;
    background:#16a34a;
    color:white;
    font-weight:bold;
}

.main-btn:active{
    transform:scale(.98);
}

.secondary{
    background:#123321;
}

/* =========================
   TRANSAÇÕES
========================= */

.transaction{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.transaction:last-child{
    border-bottom:0;
}

.transaction-info{
    min-width:0;
}

.transaction-name{
    font-weight:bold;
}

.transaction-date{
    color:#789182;
    font-size:10px;
    margin-top:3px;
}

.entry{
    color:#4ade80;
    font-weight:bold;
}

.expense{
    color:#ff7777;
    font-weight:bold;
}

/* =========================
   METAS
========================= */

.goal{
    margin-top:12px;
}

.goal-top{
    display:flex;
    justify-content:space-between;
    font-size:13px;
}

.progress{
    height:10px;
    margin-top:7px;
    border-radius:20px;
    overflow:hidden;
    background:#092014;
}

.progress-bar{
    height:100%;
    width:0%;
    background:#22c55e;
    transition:.3s;
}

/* =========================
   CALCULADORA
========================= */

.calc-result{
    min-height:55px;
    padding:14px;
    margin-top:10px;
    border-radius:12px;
    background:#06180d;
    color:#9fffb8;
    font-size:20px;
    font-weight:bold;
}

/* =========================
   IDEIAS
========================= */

.idea{
    padding:13px;
    margin-top:9px;
    border-radius:13px;
    background:#06180d;
    border:1px solid rgba(34,197,94,.18);
}

.idea strong{
    display:block;
    color:#7dffa5;
    margin-bottom:5px;
}

.idea p{
    color:#b2cdbb;
    font-size:13px;
    line-height:1.5;
}

/* =========================
   CS
========================= */

.cs-hero{
    text-align:center;
    padding:22px 10px;
}

.cs-logo{
    font-size:55px;
}

.cs-title{
    font-size:28px;
    font-weight:bold;
    margin-top:7px;
}

.cs-text{
    color:#a8c5b2;
    line-height:1.5;
    margin-top:8px;
}

.tip{
    padding:12px;
    margin-top:8px;
    background:#06180d;
    border-radius:12px;
    line-height:1.5;
    color:#c6e4ce;
}

.tip b{
    color:#5cff8d;
}

/* =========================
   RODAPÉ
========================= */

.footer{
    text-align:center;
    color:#60806b;
    font-size:10px;
    padding:15px;
}

.danger{
    border-color:rgba(255,80,80,.3);
}

.danger button{
    background:#6e1717;
}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:380px){

    .logo{
        font-size:20px;
    }

    .content{
        padding:10px;
    }

    .balance-value{
        font-size:30px;
    }

}

</style>
</head>

<body>

<div class="app">

<header class="header">
    <div class="logo">
        💰 Chiper Web Grana // CS 1
    </div>

    <div class="subtitle">
        Ferramentas, metas, ideias e diversão em uma só Web ⚡
    </div>
</header>

<nav class="menu">

    <button class="active" onclick="abrir('inicio',this)">
        🏠 Início
    </button>

    <button onclick="abrir('financeiro',this)">
        💰 Grana
    </button>

    <button onclick="abrir('metas',this)">
        🎯 Metas
    </button>

    <button onclick="abrir('calculadora',this)">
        🧮 Calculadora
    </button>

    <button onclick="abrir('ia',this)">
        🤖 IA
    </button>

    <button onclick="abrir('cs',this)">
        🎮 CS 1
    </button>

</nav>

<main class="content">

<!-- ================= INÍCIO ================= -->

<section id="inicio" class="page active">

    <div class="card balance">

        <div class="balance-label">
            SALDO ATUAL
        </div>

        <div class="balance-value" id="saldo">
            R$ 0,00
        </div>

        <div class="stats">

            <div class="stat">
                <small>Entradas</small>
                <strong id="totalEntradas">
                    R$ 0,00
                </strong>
            </div>

            <div class="stat">
                <small>Gastos</small>
                <strong id="totalGastos">
                    R$ 0,00
                </strong>
            </div>

        </div>

    </div>

    <div class="card">

        <div class="card-title">
            ⚡ Atalhos
        </div>

        <button class="main-btn"
                onclick="abrir('financeiro')">
            💰 Adicionar dinheiro ou gasto
        </button>

        <button class="main-btn secondary"
                onclick="abrir('metas')">
            🎯 Criar uma meta
        </button>

        <button class="main-btn secondary"
                onclick="abrir('calculadora')">
            🧮 Abrir calculadoras
        </button>

    </div>

    <div class="card">

        <div class="card-title">
            🧠 Dica da Chiper
        </div>

        <p id="dica">
            Organize seu dinheiro antes de pensar em gastar.
        </p>

        <button class="main-btn secondary"
                onclick="novaDica()">
            🔄 Outra dica
        </button>

    </div>

</section>

<!-- ================= FINANCEIRO ================= -->

<section id="financeiro" class="page">

    <h2>💰 Controle de dinheiro</h2>

    <div class="card">

        <div class="card-title">
            ➕ Nova entrada
        </div>

        <input id="entradaNome"
               placeholder="Ex: mesada, venda, prêmio">

        <input id="entradaValor"
               type="number"
               inputmode="decimal"
               placeholder="Valor">

        <button class="main-btn"
                onclick="adicionarEntrada()">
            Adicionar entrada
        </button>

    </div>

    <div class="card">

        <div class="card-title">
            ➖ Novo gasto
        </div>

        <input id="gastoNome"
               placeholder="Ex: jogo, lanche, compra">

        <input id="gastoValor"
               type="number"
               inputmode="decimal"
               placeholder="Valor">

        <button class="main-btn"
                onclick="adicionarGasto()">
            Adicionar gasto
        </button>

    </div>

    <div class="card">

        <div class="card-title">
            📋 Histórico
        </div>

        <div id="historico">
            Nenhuma movimentação ainda.
        </div>

    </div>

</section>

<!-- ================= METAS ================= -->

<section id="metas" class="page">

    <h2>🎯 Metas</h2>

    <div class="card">

        <div class="card-title">
            Criar meta
        </div>

        <input id="metaNome"
               placeholder="Ex: comprar um cube">

        <input id="metaValor"
               type="number"
               inputmode="decimal"
               placeholder="Valor da meta">

        <button class="main-btn"
                onclick="criarMeta()">
            Criar meta
        </button>

    </div>

    <div id="listaMetas"></div>

</section>

<!-- ================= CALCULADORA ================= -->

<section id="calculadora" class="page">

    <h2>🧮 Calculadoras</h2>

    <div class="card">

        <div class="card-title">
            Porcentagem
        </div>

        <input id="porcentagem"
               type="number"
               placeholder="Porcentagem">

        <input id="numero"
               type="number"
               placeholder="Número">

        <button class="main-btn"
                onclick="calcularPorcentagem()">
            Calcular
        </button>

        <div class="calc-result"
             id="resultadoPorcentagem">
            Resultado aparecerá aqui
        </div>

    </div>

    <div class="card">

        <div class="card-title">
            Dividir dinheiro
        </div>

        <input id="dinheiroDividir"
               type="number"
               placeholder="Valor total">

        <input id="pessoasDividir"
               type="number"
               placeholder="Quantidade de pessoas">

        <button class="main-btn"
                onclick="dividirDinheiro()">
            Dividir
        </button>

        <div class="calc-result"
             id="resultadoDivisao">
            Resultado aparecerá aqui
        </div>

    </div>

</section>

<!-- ================= IA ================= -->

<section id="ia" class="page">

    <h2>🤖 Ideias com IA</h2>

    <div class="card">

        <div class="card-title">
            💡 Ideias de projetos
        </div>

        <div id="ideias"></div>

        <button class="main-btn"
                onclick="novaIdeia()">
            🔄 Nova ideia
        </button>

    </div>

    <div class="card">

        <div class="card-title">
            🚀 Importante
        </div>

        <p style="line-height:1.5;color:#b8d0bf">
            IA pode ajudar você a aprender programação,
            criar projetos, estudar e desenvolver ideias.
            Não existe garantia de ganhar dinheiro:
            resultados dependem do projeto, trabalho,
            público e vários outros fatores.
        </p>

    </div>

</section>

<!-- ================= CS ================= -->

<section id="cs" class="page">

    <div class="card cs-hero">

        <div class="cs-logo">
            🎮
        </div>

        <div class="cs-title">
            CS 1
        </div>

        <div class="cs-text">
            Área especial da Chiper para quem curte
            Counter-Strike e quer aprender mais.
        </div>

    </div>

    <div class="card">

        <div class="card-title">
            🎯 Dicas
        </div>

        <div class="tip">
            <b>💡 Mira:</b>
            pratique manter a mira na altura provável
            da cabeça.
        </div>

        <div class="tip">
            <b>🧠 Estratégia:</b>
            comunicação e posicionamento são tão
            importantes quanto mira.
        </div>

        <div class="tip">
            <b>🗺️ Mapas:</b>
            aprender os caminhos e posições ajuda
            bastante durante as partidas.
        </div>

        <div class="tip">
            <b>⚡ Treino:</b>
            pratique de forma consistente em vez de
            tentar melhorar tudo de uma vez.
        </div>

    </div>

</section>

<!-- ================= CONFIG ================= -->

<section class="card danger">

    <div class="card-title">
        ⚙️ Dados
    </div>

    <p style="color:#bba8a8;font-size:13px;line-height:1.5">
        Os dados desta Web ficam salvos somente
        no armazenamento local do navegador.
    </p>

    <button class="main-btn"
            onclick="limparTudo()">
        🗑️ Limpar todos os dados
    </button>

</section>

</main>

<div class="footer">
    ⚡ Chiper Web Grana // CS 1
    <br>
    Parte do universo Chiper
</div>

</div>

<script>

/* =========================================
   DADOS
========================================= */

let dados =
JSON.parse(
    localStorage.getItem("chiper_grana")
) || {
    entradas:[],
    gastos:[],
    metas:[]
};


/* =========================================
   SALVAR
========================================= */

function salvar(){

    localStorage.setItem(
        "chiper_grana",
        JSON.stringify(dados)
    );

}


/* =========================================
   FORMATAR DINHEIRO
========================================= */

function dinheiro(valor){

    return valor.toLocaleString(
        "pt-BR",
        {
            style:"currency",
            currency:"BRL"
        }
    );

}


/* =========================================
   MENU
========================================= */

function abrir(id,botao){

    document.querySelectorAll(".page")
    .forEach(p =>
        p.classList.remove("active")
    );

    const pagina =
        document.getElementById(id);

    if(pagina)
        pagina.classList.add("active");

    if(botao){

        document.querySelectorAll(".menu button")
        .forEach(b =>
            b.classList.remove("active")
        );

        botao.classList.add("active");

    }

    window.scrollTo(0,0);

    atualizar();

}


/* =========================================
   ATUALIZAR
========================================= */

function atualizar(){

    let entradas =
        dados.entradas.reduce(
            (a,b)=>a+b.valor,
            0
        );

    let gastos =
        dados.gastos.reduce(
            (a,b)=>a+b.valor,
            0
        );

    let saldo =
        entradas-gastos;

    document.getElementById("saldo")
        .textContent =
        dinheiro(saldo);

    document.getElementById("totalEntradas")
        .textContent =
        dinheiro(entradas);

    document.getElementById("totalGastos")
        .textContent =
        dinheiro(gastos);

    renderHistorico();
    renderMetas();

}


/* =========================================
   ENTRADA
========================================= */

function adicionarEntrada(){

    const nome =
        document.getElementById("entradaNome")
        .value.trim();

    const valor =
        Number(
            document.getElementById("entradaValor")
            .value
        );

    if(!nome || !valor || valor<=0){

        alert("Digite um nome e um valor válido.");

        return;

    }

    dados.entradas.push({

        nome:nome,
        valor:valor,
        data:new Date().toLocaleDateString("pt-BR")

    });

    salvar();

    document.getElementById("entradaNome").value="";
    document.getElementById("entradaValor").value="";

    atualizar();

}


/* =========================================
   GASTO
========================================= */

function adicionarGasto(){

    const nome =
        document.getElementById("gastoNome")
        .value.trim();

    const valor =
        Number(
            document.getElementById("gastoValor")
            .value
        );

    if(!nome || !valor || valor<=0){

        alert("Digite um nome e um valor válido.");

        return;

    }

    dados.gastos.push({

        nome:nome,
        valor:valor,
        data:new Date().toLocaleDateString("pt-BR")

    });

    salvar();

    document.getElementById("gastoNome").value="";
    document.getElementById("gastoValor").value="";

    atualizar();

}


/* =========================================
   HISTÓRICO
========================================= */

function renderHistorico(){

    const area =
        document.getElementById("historico");

    const lista = [

        ...dados.entradas.map(
            (x,i)=>({
                ...x,
                tipo:"entrada",
                indice:i
            })
        ),

        ...dados.gastos.map(
            (x,i)=>({
                ...x,
                tipo:"gasto",
                indice:i
            })
        )

    ];

    if(!lista.length){

        area.textContent =
            "Nenhuma movimentação ainda.";

        return;

    }

    area.innerHTML="";

    lista.reverse().forEach(item=>{

        const div =
            document.createElement("div");

        div.className="transaction";

        div.innerHTML=`

            <div class="transaction-info">

                <div class="transaction-name">
                    ${escapeHTML(item.nome)}
                </div>

                <div class="transaction-date">
                    ${item.data}
                </div>

            </div>

            <div class="${
                item.tipo==="entrada"
                ? "entry"
                : "expense"
            }">

                ${
                    item.tipo==="entrada"
                    ? "+"
                    : "-"
                }

                ${dinheiro(item.valor)}

            </div>

        `;

        area.appendChild(div);

    });

}


/* =========================================
   METAS
========================================= */

function criarMeta(){

    const nome =
        document.getElementById("metaNome")
        .value.trim();

    const valor =
        Number(
            document.getElementById("metaValor")
            .value
        );

    if(!nome || !valor || valor<=0){

        alert("Digite um nome e um valor válido.");

        return;

    }

    dados.metas.push({

        nome:nome,
        valor:valor

    });

    salvar();

    document.getElementById("metaNome").value="";
    document.getElementById("metaValor").value="";

    atualizar();

}


function renderMetas(){

    const area =
        document.getElementById("listaMetas");

    if(!dados.metas.length){

        area.innerHTML=`
            <div class="card">
                Nenhuma meta criada ainda 🎯
            </div>
        `;

        return;

    }

    const entradas =
        dados.entradas.reduce(
            (a,b)=>a+b.valor,
            0
        );

    area.innerHTML="";

    dados.metas.forEach((meta,index)=>{

        const porcentagem =
            Math.min(
                100,
                (entradas/meta.valor)*100
            );

        const card =
            document.createElement("div");

        card.className="card";

        card.innerHTML=`

            <div class="goal-top">

                <strong>
                    🎯 ${escapeHTML(meta.nome)}
                </strong>

                <span>
                    ${Math.round(porcentagem)}%
                </span>

            </div>

            <div style="
                margin-top:7px;
                color:#9bb6a4;
                font-size:12px;
            ">

                ${dinheiro(entradas)}
                /
                ${dinheiro(meta.valor)}

            </div>

            <div class="progress">

                <div
                    class="progress-bar"
                    style="width:${porcentagem}%"
                ></div>

            </div>

            <button
                class="main-btn secondary"
                onclick="removerMeta(${index})"
            >
                🗑️ Remover meta
            </button>

        `;

        area.appendChild(card);

    });

}


function removerMeta(index){

    dados.metas.splice(index,1);

    salvar();
    atualizar();

}


/* =========================================
   CALCULADORAS
========================================= */

function calcularPorcentagem(){

    const porcentagem =
        Number(
            document.getElementById("porcentagem")
            .value
        );

    const numero =
        Number(
            document.getElementById("numero")
            .value
        );

    if(!Number.isFinite(porcentagem) ||
       !Number.isFinite(numero)){

        return;

    }

    const resultado =
        numero*porcentagem/100;

    document.getElementById(
        "resultadoPorcentagem"
    ).textContent =
        dinheiro(resultado);

}


function dividirDinheiro(){

    const valor =
        Number(
            document.getElementById("dinheiroDividir")
            .value
        );

    const pessoas =
        Number(
            document.getElementById("pessoasDividir")
            .value
        );

    if(
        !Number.isFinite(valor) ||
        !Number.isFinite(pessoas) ||
        pessoas<=0
    ){

        return;

    }

    const resultado =
        valor/pessoas;

    document.getElementById(
        "resultadoDivisao"
    ).textContent =
        dinheiro(resultado)
        +
        " por pessoa";

}


/* =========================================
   IDEIAS DE IA
========================================= */

const ideias=[

    [
        "🌐 Criar uma Web",
        "Use HTML, CSS e JavaScript para criar uma ferramenta simples e publique na internet."
    ],

    [
        "🎮 Criar um game",
        "Comece com um jogo pequeno e vá adicionando sistemas aos poucos."
    ],

    [
        "🤖 Criar um chatbot",
        "Monte uma interface de conversa e depois conecte uma API de IA."
    ],

    [
        "📱 Criar uma ferramenta mobile",
        "Faça uma Web responsiva que funcione como aplicativo no celular."
    ],

    [
        "🧮 Criar uma calculadora",
        "Escolha um problema específico e transforme a solução em uma ferramenta."
    ],

    [
        "📚 Criar uma Web de estudos",
        "Organize matérias, resumos, exercícios e ferramentas em uma única página."
    ],

    [
        "🎨 Criar um gerador",
        "Crie uma ferramenta que gere nomes, ideias, listas ou outros conteúdos."
    ]

];


function novaIdeia(){

    const ideia =
        ideias[
            Math.floor(
                Math.random()*ideias.length
            )
        ];

    document.getElementById("ideias")
        .innerHTML=`

        <div class="idea">

            <strong>
                ${ideia[0]}
            </strong>

            <p>
                ${ideia[1]}
            </p>

        </div>

    `;

}


/* =========================================
   DICAS
========================================= */

const dicas=[

    "Organize seu dinheiro antes de pensar em gastar.",

    "Uma meta fica mais fácil quando você divide o objetivo em etapas.",

    "Aprender uma habilidade pode ser mais valioso do que procurar dinheiro rápido.",

    "Projetos pequenos ajudam a ganhar experiência.",

    "Antes de gastar, pense se aquilo realmente é importante para você.",

    "Use tecnologia para aprender e construir coisas, não apenas consumir."

];


function novaDica(){

    document.getElementById("dica")
        .textContent =
        dicas[
            Math.floor(
                Math.random()*dicas.length
            )
        ];

}


/* =========================================
   SEGURANÇA DO TEXTO
========================================= */

function escapeHTML(texto){

    return String(texto)
        .replace(/&/g,"&amp;")
        .replace(/</g,"&lt;")
        .replace(/>/g,"&gt;")
        .replace(/"/g,"&quot;")
        .replace(/'/g,"&#039;");

}


/* =========================================
   LIMPAR
========================================= */

function limparTudo(){

    const confirmar =
        confirm(
            "Tem certeza que deseja apagar todos os dados?"
        );

    if(!confirmar)
        return;

    dados={
        entradas:[],
        gastos:[],
        metas:[]
    };

    salvar();
    atualizar();

}


/* =========================================
   INICIALIZAÇÃO
========================================= */

atualizar();
novaIdeia();

</script>

</body>
</html>

Game Source: Chiper Web Grana // CS 1

Creator: MegaFlare51

Libraries: none

Complexity: complex (1485 lines, 25.2 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: chiper-web-grana-cs-1-megaflare51" to link back to the original. Then publish at arcadelab.ai/publish.