Friday, August 15, 2025

Bouncing Button with Direction Change

Full Code:


Demo :



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

    button {
      padding: 14px 28px;
      font-size: 18px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      position: relative;
    }

    /* Bounce animation */
    @keyframes bounceRight {
      0%   { transform: translateX(0) scale(1); }
      30%  { transform: translateX(50px) scale(1.2); }
      50%  { transform: translateX(30px) scale(0.9); }
      70%  { transform: translateX(40px) scale(1.1); }
      100% { transform: translateX(0) scale(1); }
    }

    @keyframes bounceLeft {
      0%   { transform: translateX(0) scale(1); }
      30%  { transform: translateX(-50px) scale(1.2); }
      50%  { transform: translateX(-30px) scale(0.9); }
      70%  { transform: translateX(-40px) scale(1.1); }
      100% { transform: translateX(0) scale(1); }
    }

    .bounceRight {
      animation: bounceRight 0.6s;
    }

    .bounceLeft {
      animation: bounceLeft 0.6s;
    }
  </style>
</head>
<body>

  <button id="bounceBtn">Click Me</button>

  <script>
    const btn = document.getElementById("bounceBtn");
    let direction = true; // true = right, false = left

    btn.addEventListener("click", () => {
      if (direction) {
        btn.classList.add("bounceRight");
      } else {
        btn.classList.add("bounceLeft");
      }

      // toggle direction for next click
      direction = !direction;

      // remove class after animation so it can retrigger
      btn.addEventListener("animationend", () => {
        btn.classList.remove("bounceRight", "bounceLeft");
      }, { once: true });
    });
  </script>

</body>
</html>
- No comments:
Labels:
Location: Puranpur, Uttar Pradesh 262122, India

CSS Triangles

 <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Triangles – Quick Examples</title>
  <style>
    :root { --size: 60px; --color: #4f46e5; --bg: #0b1020; --fg: #e5e7eb; }
    html,body{height:100%}
    body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg);}
    .wrap{max-width:980px; margin:24px auto; padding:24px}
    h1{margin:0 0 6px; font-size:clamp(20px,3vw,32px)}
    p{margin:0 0 18px; color:#a6adbb}
    .grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px}
    .card{background:#0f162d; border:1px solid #1f2942; border-radius:18px; padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
    .title{font-weight:600; font-size:14px; letter-spacing:.3px; margin-bottom:10px; color:#c7d2fe}
    .box{display:flex; align-items:center; justify-content:center; height:140px}
    code{display:block; white-space:pre-wrap; background:#0b1226; border:1px solid #1c2546; padding:10px; border-radius:12px; color:#d1d7ff; font-size:12px}

    /* 1) Border trick triangles (no extra markup size) */
    .tri-up{ width:0; height:0; border-left: calc(var(--size) * .6) solid transparent; border-right: calc(var(--size) * .6) solid transparent; border-bottom: var(--size) solid var(--color); }
    .tri-down{ width:0; height:0; border-left: calc(var(--size) * .6) solid transparent; border-right: calc(var(--size) * .6) solid transparent; border-top: var(--size) solid var(--color); }
    .tri-left{ width:0; height:0; border-top: calc(var(--size) * .6) solid transparent; border-bottom: calc(var(--size) * .6) solid transparent; border-right: var(--size) solid var(--color); }
    .tri-right{ width:0; height:0; border-top: calc(var(--size) * .6) solid transparent; border-bottom: calc(var(--size) * .6) solid transparent; border-left: var(--size) solid var(--color); }

    /* 2) Equilateral triangle using clip-path (true triangle box) */
    .tri-eq{ width: calc(var(--size) * 2); height: calc(var(--size) * 1.732); background: #ef4444; clip-path: polygon(50% 0, 0 100%, 100% 100%); }

    /* 3) Triangle with outline (border + pseudo-element) */
    .tri-outline{ position:relative; width:0; height:0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid #10b981; }
    .tri-outline::before{ content:""; position:absolute; left:-44px; top:5px; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 78px solid #0b1020; }

    /* 4) Tooltip style caret using :after */
    .tooltip{ position:relative; background:#111827; padding:10px 12px; border-radius:10px; border:1px solid #1f2937; display:inline-block; }
    .tooltip::after{ content:""; position:absolute; left:18px; bottom:-10px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #111827; filter:drop-shadow(0 -1px 0 #1f2937); }
    .tooltip-wrap{ display:flex; align-items:center; justify-content:center; height:140px }

    /* Helper */
    .row{display:flex; gap:10px; align-items:center; justify-content:center}
    .knob{display:flex; gap:10px; align-items:center; margin:14px 0 0}
    input[type="color"], input[type="range"]{accent-color:#6366f1}
  </style>
</head>
<body>
  <div class="wrap">
    <h1>CSS Triangles</h1>
    <p>Common ways to draw triangles in pure CSS: the classic <b>border trick</b>, <b>clip-path</b> for true equilateral shapes, and a tooltip caret with <b>pseudo-elements</b>.</p>

    <div class="knob">
      <label>Color <input id="col" type="color" value="#4f46e5" /></label>
      <label>Size <input id="sz" type="range" min="24" max="110" value="60" /></label>
    </div>

    <div class="grid" style="margin-top:16px">
      <div class="card">
        <div class="title">Up (border trick)</div>
        <div class="box"><div class="tri-up"></div></div>
        <code>.tri-up{width:0;height:0;border-left:36px solid transparent;border-right:36px solid transparent;border-bottom:60px solid #4f46e5}</code>
      </div>

      <div class="card">
        <div class="title">Right (border trick)</div>
        <div class="box"><div class="tri-right"></div></div>
        <code>.tri-right{width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-left:60px solid #4f46e5}</code>
      </div>

      <div class="card">
        <div class="title">Down (border trick)</div>
        <div class="box"><div class="tri-down"></div></div>
        <code>.tri-down{width:0;height:0;border-left:36px solid transparent;border-right:36px solid transparent;border-top:60px solid #4f46e5}</code>
      </div>

      <div class="card">
        <div class="title">Left (border trick)</div>
        <div class="box"><div class="tri-left"></div></div>
        <code>.tri-left{width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-right:60px solid #4f46e5}</code>
      </div>

      <div class="card">
        <div class="title">Equilateral (clip-path)</div>
        <div class="box"><div class="tri-eq"></div></div>
        <code>.tri-eq{width:120px;height:207.8px;background:#ef4444;clip-path:polygon(50% 0, 0 100%, 100% 100%)}</code>
      </div>

      <div class="card">
        <div class="title">Tooltip caret (pseudo-element)</div>
        <div class="tooltip-wrap"><span class="tooltip">Hello! I have a tail</span></div>
        <code>.tooltip::after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #111827}</code>
      </div>
    </div>
  </div>

  <script>
    // small controls to tweak color/size live
    const col = document.getElementById('col');
    const sz = document.getElementById('sz');
    const root = document.documentElement.style;
    col.addEventListener('input', e => root.setProperty('--color', e.target.value));
    sz.addEventListener('input', e => root.setProperty('--size', e.target.value + 'px'));
  </script>
</body>
</html>

Preview




- No comments:
Labels:

Thursday, August 14, 2025

Happy independence day to all


 

Happy independence day to all.

Website Development Services Puranpur

Youtube - phpecho

- No comments:
Labels:

Wednesday, August 13, 2025

Coming new video with source code (Billing Software using GST Report)

 


Final Year Project + Full Source Code

- No comments:
Labels:

Monday, August 4, 2025

Custom Popup using HTML + CSS + Javascript

 


Video Link - Go to video

Full Code - 

<style>
    .popup-overlay{
        display: none;
        position:fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: gainsboro;
        z-index: 999;
        justify-content: center;
        align-items: center;
    }
    .popup-box{
        background: white;
        padding: 20px 30px;
        border-radius: 20px;
        box-shadow: 2px 2px 2px 2px gray;
        max-width: 300px;
    }

</style>
<button onclick="showpopup()">Show Popup</button>

<!--Popup structure-->
<div class="popup-overlay" id="popup">
    <div class="popup-box">
        <h2>Welcome</h2>
        <p>This is custom popup by phpecho</p>
        <button onclick="popclose()">Close</button>
    </div>
</div>

<script>
    function showpopup(){
        document.getElementById("popup").style.display = 'flex';
    }

       function popclose(){
        document.getElementById("popup").style.display = 'none';
    }
</script>

- No comments:
Labels:

Thursday, July 31, 2025

List and Tuples in Python (New Video)

 



Video  link - Go to Video

Full code : 

Defining list


color = ["red","green","blue"]
color.append("yellow")  # adding color
color[1] = "pink"
print(color)

Defining Tuples


fruits = ("orange","banana","mango")
fruits.append("guava")
fruits[1] = "guava"
print(fruits)


- No comments:
Labels:
Location: Puranpur, Uttar Pradesh 262122, India

Wednesday, July 30, 2025

Password Remember using php

 


Video Link - Go to video

Full code - 

<?php
 if($_SERVER['REQUEST_METHOD']=="POST")
 {
     $email = $_POST['email'];
     $password = $_POST['password'];


                    if(isset($_POST['remember'])){

                        setcookie("email", $email, time()+(86400 * 30));
                        setcookie("password", $password, time()+(86400 * 30));

                    }
                    else{
                        setcookie("email", "", time()-3600);
                        setcookie("password", "", time()-3600);
                    }

     echo "Login Successfull";

 }
?>


<html>
    <head>
        <title>Password Remember using php</title>
    </head>
    <body>
      <form method="POST">
        Email - <input type="textbox" name="email" value="<?php echo isset($_COOKIE['email']) ? $_COOKIE['email'] : ''; ?>"><br><br>
        Password - <input type="password" name="password" value="<?php echo isset($_COOKIE['password']) ? $_COOKIE['password'] : ''; ?>"><br><br>
        <input type="checkbox" name="remember"<?php if(isset($_COOKIE['email'])) echo "checked"; ?>> Remember Me <br><br>
        <input type="submit" value="Login">
      </form>
    </body>
</html>



- No comments:
Labels:

Tuesday, July 29, 2025

Learn Web Application Development with WDS

 This web application demonstrates dynamic form submission and data display using AJAX with PHP and MySQL as the backend technologies. The frontend is built using HTML and styled with Bootstrap for a responsive and user-friendly interface. AJAX (Asynchronous JavaScript and XML) is used to send form data to the server without reloading the page, enhancing user experience by making the application faster and more interactive.



 PHP handles server-side logic, processes incoming requests, and interacts with the MySQL database to store and retrieve user data. Bootstrap is used for styling form elements and layout, ensuring the design is modern and mobile-friendly. The application includes functionalities like inserting new user records and displaying them in real-time using AJAX, providing a seamless and efficient workflow for users. This setup is ideal for building real-time applications such as contact forms, registration systems, feedback forms, and admin panels.


  • Review of Core Basics
  • Project-Based Learning
  • Advanced Theories and Models
  • Basic to Advanced Concepts & Terminology

Full Course                   |                           Crash Course

- No comments:
Labels:
Location: Puranpur, Uttar Pradesh 262122, India

Monday, July 28, 2025

Web Development Programs With WDS Puranpur

 A well-designed course should progress through three structured levels: beginner, intermediate, and advanced. At the beginner level, the focus is on introducing the subject, building foundational knowledge, and familiarizing learners with essential tools, concepts, and terminology through simple examples and guided exercises.

The intermediate level deepens understanding by introducing more complex topics, practical applications, and real-world problem-solving. This stage typically includes project-based learning, hands-on challenges, and exposure to common industry scenarios.



The advanced level is aimed at mastery and professional application, where learners engage in high-level concepts, performance optimization, real-life case studies, and the development of a final capstone project. It often includes expert insights, portfolio building, and career guidance to prepare learners for real-world success. This progressive structure ensures that learners not only gain knowledge but also develop the confidence and skills to apply it effectively.

  • Review of Core Basics
  • Project-Based Learning
  • Advanced Theories and Models
  • Basic to Advanced Concepts & Terminology

Full Course                   |                           Crash Course

- 1 comment:
Labels:
Location: Puranpur, Uttar Pradesh 262122, India

Monday, July 21, 2025

Tech News

 जापान के शोधकर्ताओं का कहना है कि उन्होंने सबसे तेज़ इंटरनेट स्पीड का नया विश्व रिकॉर्ड बनाया है, जहाँ उन्होंने 1,120 मील (1,802 किलोमीटर) की दूरी पर प्रति सेकंड 125,000 गीगाबाइट से ज़्यादा डेटा ट्रांसमिट किया है।यह अमेरिका की औसत इंटरनेट स्पीड से लगभग 40 लाख गुना ज़्यादा है और कुछ मोटे अनुमानों के मुताबिक, इससे आप पूरे इंटरनेट आर्काइव को चार मिनट से भी कम समय में डाउनलोड कर सकते हैं। यह 2024 में वैज्ञानिकों की एक अलग टीम द्वारा बनाए गए 50,250 जीबी/सेकंड के पिछले विश्व रिकॉर्ड से भी दोगुने से भी ज़्यादा है।




जापान ने डेटा ट्रांसमिशन स्पीड में एक नया वैश्विक रिकॉर्ड बनाकर इंटरनेट तकनीक की सीमाओं को आगे बढ़ाया है। राष्ट्रीय सूचना एवं संचार प्रौद्योगिकी संस्थान (एनआईसीटी) ने घोषणा की है कि उसकी इंटरनेट स्पीड 1.02 पेटाबिट्स प्रति सेकंड (पीबीपीएस) हो गई है। इस स्पीड से डेटा ट्रांसफर इतना तेज़ होता है कि नेटफ्लिक्स की पूरी लाइब्रेरी या विकिपीडिया का अंग्रेज़ी संस्करण डाउनलोड करने में सिर्फ़ एक सेकंड लगेगा।

यह अभूतपूर्व स्पीड कई देशों की मौजूदा इंटरनेट स्पीड से कहीं ज़्यादा है। उदाहरण के लिए, यह भारत की औसत इंटरनेट स्पीड, जो लगभग 63.55 एमबीपीएस है, से 1.6 करोड़ गुना तेज़ है। हाल के आंकड़ों के अनुसार, संयुक्त राज्य अमेरिका की तुलना में जापान की नई स्पीड लगभग 35 लाख गुना तेज़ है।

- No comments:
Labels:
Subscribe to: Comments (Atom)

  1. What is Google Opal? It’s a no-code / low-code AI mini-app builder developed by Google Labs. You describe what you want in natural ...

  • Password Remember using php
      Video Link -  Go to video Full code -  <?php   if ( $_SERVER [ 'REQUEST_METHOD' ]== "POST" )  {       $email = $_POS...
  • API using Php | How to design API using php (Mysql Addon)
    index.php <?php $url = "your url" ; $web = curl_init (); curl_setopt ( $web ,CURLOPT_URL, $url ); curl_setopt ( $web ,CURLOPT...
  • Coming Soon.
                                                                            Go to our Channel -  Youtube