Pesquisar neste blog

Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

06/07/2024

Atalhos de comandos em HTML5

1. div(header>ul>li*3)+section+footer>p

<div></div>
<header>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</header>
<section></section>
<footer>
    <p></p>
</footer>


2. div(header>ul>p*2>li*5)+section+footer*2>p+(div*2)

<div></div>
<header>
    <ul>
        <p>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </p>
        <p>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </p>
    </ul>
</header>
<section></section>
<footer>
    <p></p>
    <div></div>
    <div></div>
</footer>
<footer>
    <p></p>
    <div></div>
    <div></div>
</footer>


4   .div$*4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>


5.    .div*4

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>


6.    .div*5>p

<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>


7.   .div$*4>(p$)

<div class="div1">
    <p1></p1>
</div>
<div class="div2">
    <p2></p2>
</div>
<div class="div3">
    <p3></p3>
</div>
<div class="div4">
    <p4></p4>
</div>


05/06/2024

Bateria Carregando em HTML


Código em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bateria</title>
    <link href="" rel="" integrity="" crossorigin="">
</head>
<style>
  .battery-top {
    width: 30px;
    height: 10px;
    background: black;
    margin: 0 auto;
    border: 3px solid silver;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  .battery-content {
    width: 150px;
    height: 250px;
    background: black;
    position: relative;
    margin: 0 auto;
    border: 3px solid silver;
    border-radius: 18px;
  }
  .charge {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 14px;
    animation: battery 8s linear infinite;
  }
  @keyframes battery {
    0% {
      height: 0%;
      background: red;
    }
    25% {
      height: 25%;
      background: orange;
    }
    50% {
      height: 50%;
      background: rgb(7, 195, 241);
    }
    75% {
      height: 75%;
      background: blue;
    }
    100%{
      height: 100%;
      background: rgb(0, 255, 0);
    }
  }
</style>
<body>
  <div class="main">
    <div class="battery-top"></div>
    <div class="battery-content">
    <div class="charge"></div>
  </div>
</body>
</html>


02/06/2024

Animação com Hélice rotacional em HTML















Código feito em HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
    border: 20px solid aqua;
    padding: 50px;
    border-radius: 50%;
    animation: fananim linear infinite;
}

button{
    cursor: pointer;
    width: 100px;
    height: 100px;
    padding: 20px 30px;
    margin: 0 20px;
    font-size: 25px;
    font-weight: 550;
    border: none;
    background-color: silver;
    border-radius: 50%;
    transition: 0.1s;
}

button:active{
    box-shadow: 0px 10px 10px black;
    transform: scale(0.95);
}

.main button:nth-last-child(5){
    background-color: rgb(0, 255, 0);
}

.main button:nth-last-child(4){
    background-color: red;
}
@keyframes fananim {
    100%
    {
        transform: rotate(360deg);
    }
}
</style>
<body>
  <div>
    <img id="img" src="Fan.png" alt="" srcset="">
    <button onclick="myfunon()">ON</button>
    <button onclick="myfunoff()">OFF</button>
    <button onclick="myfun1()">1</button>
    <button onclick="myfun2()">2</button>
    <button onclick="myfun3()">3</button>
  </div>  
 
</body>
  <script>
    let a=document.getElementById("img");
    function myfunon()
    {a.style.animationDuration = 3+"s";}
    function myfunoff()
    {a.style.animationDuration=0+"s";}
    function myfun1()
    {a.style.animationDuration=1+"s";}
    function myfun2()
    {a.style.animationDuration=0.5+"s";}
    function myfun3()
    {a.style.animationDuration=0.1+"s";}
  </script>
</html>


Palavras chave:

Animation with Rotational Helix in HTML
Animación con Hélice Rotacional en HTML
Animasi karo Rotational Helix ing HTML
Animasjon med Rotational Helix i HTML
HTMLдеги Rotational Helix менен анимация
Анимация с использованием вращающейся спирали в HTML
אנימציה עם Rotational Helix ב-HTML
Animation leh Helix Rotational oo HTML ah
HTML의 회전 나선을 사용한 애니메이션

29/06/2023

CRUD com PHP

Objetivo: Fazer um CRUD em PHP

Saída do designer em PHP














Arquivo 1: cadastrar_pessoa.php

<?php
// 6 funções
Class Pessoa{


    private $pdo;
    // CONEXÃO COM O BANCO DE DADOS
    public function __construct($dbname, $host, $user, $senha) // tudo ok
    {
        try
        {
            $this->pdo = new PDO("mysql:dbname=".$dbname.";host=".$host,$user);
        }
        catch (PDOException $e) {//erro para o PDO
            echo "Erro com o Banco de Dados: ".$e->getMessage();
            exit();
        }
        catch(Exception $e){ // Erros genéricos
            echo "Erro genérico: ".$e->getMessage();
            exit();
        }
    }
    //------- BUSCAR DADOS E EXIBIR NO LADO DIREITO DA TELA ----------
    public function buscarDados() // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->query("SELECT * FROM pessoa ORDER BY id");
        $res = $cmd->fetchAll(PDO::FETCH_ASSOC);// economiza memória
        return $res;
    }
    // FUNÇÃO DE CADASTRAR PESSOAS NO BANCO DE DADOS
    public function cadastrarPessoa($nome, $telefone, $email)
    {
        // Antes de cadastrar verificar se já tem o EMAIL cadastrado
        $cmd = $this->pdo->prepare("SELECT id FROM pessoa WHERE email = :e");
        $cmd->bindValue(":e", $email);
        $cmd->execute();
        if ($cmd->rowCount() > 0)  //se > 0 email já existe no BD
        {
            return false;
        }else  // não foi encontrado no BD
        {
            $cmd = $this->pdo->prepare("INSERT INTO pessoa(nome, telefone, email)
            VALUES (:n, :t, :e)");
            $cmd->bindValue(":n", $nome);
            $cmd->bindValue(":t", $telefone);
            $cmd->bindValue(":e", $email);
            $cmd->execute();
            return true;
        }
    }
    // MÉTODO PARA EXCLUIR PESSOA
    public function excluirPessoa($id) // tudo ok
    {
        $cmd = $this->pdo->prepare("DELETE FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }

    // BUSCAR DADOS DE UMA PESSOA
    public function buscarDadosPessoa($id) // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->prepare("SELECT * FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
        $res = $cmd->fetch(PDO::FETCH_ASSOC);//economiza memória
        return $res;
    }

    // ATUALIZAR DADOS NO BANCO DE DADOS
   
    public function atualizarDados($id, $nome, $telefone, $email){ // tudo ok
       
        $cmd = $this->pdo->prepare("UPDATE pessoa SET nome = :n, telefone = :t,
        email = :e WHERE id = :id");
        $cmd->bindValue(":n", $nome);
        $cmd->bindValue(":t", $telefone);
        $cmd->bindValue(":e", $email);
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }
}
?>


Arquivo 2: index.php

<?php
require_once 'classe_pessoa.php';
$p = new Pessoa("crudpdo", "localhost", "root", "");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Pessoa</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <?php
    if (isset($_POST['nome']))
    //CLICOU NO BOTÃO CADASTRAR OU EDITAR
    {
        if (isset($_GET['id_up']) && !empty($_GET['id_up']))
        {
            $id_upd = addslashes($_GET['id_up']);
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if (!empty($nome) && !empty($telefone) && !empty($email))
            {
                $p->atualizarDados($id_upd, $nome, $telefone, $email);
               
                header("location: index.php");
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
        // ---------------------------- CADASTRAR ----------------------------
        else
        {
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if(!empty($nome) && !empty($telefone) && !empty($email))
            {
                //cadastrar
                if (!$p->cadastrarPessoa($nome, $telefone, $email))
                {
                    ?>
                        <div>
                            <img src="aviso.png" alt="">
                            <h4>Email já está cadastrado !</h4>
                        </div>
                    <?php
                }
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
    }
    ?>
    <?php
        if (isset($_GET['id_up'])) //SE A PESSOA CLICOU EM EDITAR
        {
            $id_update = addslashes($_GET['id_up']);
            $res = $p->buscarDadosPessoa($id_update);
        }

    ?>
    <section id = "esquerda">
        <form action="" method = "POST">
            <h2>CADASTRAR PESSOA</h2>
            <label for="nome">Nome</label>
            <input type="text" name = "nome" id = "nome"
            value="<?php if(isset($res)){echo $res['nome'];} ?>">
           
            <label for="telefone">Telefone</label>
            <input type="text" name="telefone" id="telefone"
            value="<?php if(isset($res)){echo $res['telefone'];} ?>">

            <label for="email">Email</label>
            <input type="email" name="email" id="email"
            value= "<?php if(isset($res)) {echo $res['email']; } ?>">

            <input type="submit"
            value= "<?php if (isset($res)) { echo "Atualizar"; }else { echo
    "Cadastrar"; } ?>">
        </form>
    </section>
    <section id="direita">
        <table>
            <tr id="titulo">
                <td>NOME</td>
                <td>TELEFONE</td>
                <td colspan="2">EMAIL</td>
            </tr>
            <?php
                $dados = $p->buscarDados();
                if(count($dados) > 0)//TEM PESSOAS NO BANCO DE DADOS
                {
                    for($i=0; $i < count($dados); $i++)
                    {
                        echo "<tr>";
                        foreach ($dados[$i] as $k => $v)
                        {
                            if($k != "id")
                            {
                                echo "<td>".$v."</td>";
                            }
                        }
                        ?>
                            <td>
                                <?php echo $dados[$i]['id'] ?>                              
                                <a href="index.php?id_up=<?php echo $dados[$i]['id']; ?>">Editar</a>
                                <a href="index.php?id=<?php echo $dados[$i]['id']; ?>">Excluir</a>
                            </td>
                        <?php
                        echo "</tr>";
                    }                    
                }
                else // O BANCO DE DADOS ESTÁ VAZIO
                {
                    ?>
                    </table>

                        <div class="aviso">
                            <h4>Ainda não há pessoas cadastradas !</h4>
                        </div>
                    <?php
                }
            ?>
        </table>
    </section>
</body>
</html>

<?php
    if (isset($_GET['id'])) {
        $id_pessoa = addslashes($_GET['id']);
        $p->excluirPessoa($id_pessoa);
        header("location: index.php");//atualiza a página após o clique
    }
?>


Arquivo 3: estilo.css

*{
    padding: 0px;
    margin: 0px;
    font-family: arial;
}

label, input{
    display: block;
    line-height: 30px;
    height: 30px;
    outline: none;
    font-size: 13pt;
    width: 100%;
}

form{
    width: 330px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 30px auto; /*automático dos lados*/
}

input[type="submit"]{
    margin-top: 10px;
    cursor: pointer;
}

#esquerda{
    width: 35% ;
    height: 500px;
    float: left;
}

h2{
    text-align: center;
}

#direita{
    margin-top: 30px;
    width: 65%;
    height: 500px;
    float: left;

}

table {
    background-color: rgba(0, 0, 0, 0.2);
    width: 90%;
    margin: auto;
}

tr{
    line-height: 30px;
}

tr#titulo{
    font-weight: bold;
    background-color: rgba(0,0,0, .6);
    color: white;
}

td{
    padding: 0px 5px;
}

a{
    background-color: white;
    color: black;
    padding: 5px;
    margin: 0px 5px;
    float: left;
}

.aviso {
   
    width: 90%;
    height: 50px;
    margin: 30px auto 0px auto; /* margin no auto */
}
img {
    width: 50px;
    display: block;
    float: left; /*flutuar à esquerda*/
}
h4{
    float: left;
    line-height: 50px;
}


Créditos para: Mirian TechCod


04/04/2023

Bolas de ping pong em CSS

Saída gerada























<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: white;
    }    
    .container{
        width: 200px;
        height: 60px;
        margin: auto;
        margin-top: 40%;
        margin-left: 50%;
        transform: translate(-50%, -50%);
    }
    .ball{
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        left: 15%;
        animation: ball .5s alternate infinite ease;
    }
    @keyframes ball {
        0%{
            top: 60px;
            height: 5px;
            border-radius: 50px 50px 25px 25px;
            transform: scaleX(1.7);
            background-color: #FF3EA5FF;
        }
        40%{
            height: 20px;
            border-radius: 50%;
            transform: scaleX(1);
            background-color: #EDFF00FF;
        }
        100%{
            top: 0%;
            background-color: #00A4CCFF;
        }
    }
    .ball:nth-child(2){
        left: 45%;
        animation-delay: .2s;
    }
    .ball:nth-child(3){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
    .shadow{
        width: 20px;
        height: 4px;
        border-radius: 50%;
        background-color: #ffffff59;
        position: absolute;
        top: 62px;
        z-index: -1;
        left: 15%;
        filter: blur(1px);
        animation: shadow .5s alternate infinite ease;
    }
    @keyframes shadow {
        0%{
            transform: scaleX(1.5);
            background-color: #ff3ea56b;
        }
        40%{
            transform: scaleX(1);
            opacity: .7;
            background-color: #edff0066;
        }
        100%{
            transform: scaleX(.2);
            opacity: .4;
            background-color: #edff0066;
        }
    }
    .shadow:nth-child(4){
        left: 45%;
        animation-delay: .2s;
    }
    .shadow:nth-child(5){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
</style>
<body>
    <div class="container">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>