Html codes

Ai telegram bot code for free!

84 views08:07

91 views02:29

💻🧠 Top 10 Neural Networks for Coding Assistance

1.Chatgpt.com
2.deepseek.com
3.claude.ai
4.replit.com
5.deepcode.ai
6.github.com/copilot
7.tabnine.com
8.codeium.com
9.sourcegraph.com/cody
10.cursor.so

🔥 Bonus: blackbox.ai
🧑‍💻 #CodingAI
⚙️ #DevTools
🌐 #WebsitesAI

95 views09:37

Html codes

CodePen Blog
Chris’ Corner: Type Stuff!

Let’s do typography stuff!

* Video: “A live demo by me of early font editors on a real Macintosh Plus” by Mark Simonson
* Font: “Is this font easy for you to read? Good—that’s the idea.” Hyperlegible is the name of the font, designed for people with low vision.
* Technique: “Fluid typography means thinking in terms of type scales and flexible spacing across your defined design space.” Richard Rutter goes retrofitting a new type sizing technique into an old layout. Miriam is also thinking about all this. Richard also has a good one on avoiding faux bold, which has afflicted me many times. My hot take is that browsers shouldn’t do faux nuthin.
* Font: “To help young readers of all skill levels, we’re introducing Kermit, a child-friendly typeface created by the type design studio Underware.” It’s fairly pricey but I can imagine it being perfect for some projects. Like Comic Sans but cooler. P.S. you should really try Comic Code on CodePen, it’s awesome.
* Fonts: “UNCUT.wtf is a free typeface catalogue, focusing on somewhat contemporary type.” A lot of them are super similar which makes me wonder if many of them come from students taking a design class or something.
* Journey: “One day, I saw what felt like Gorton on a ferry traversing the waters Bay Area. A few weeks later, I spotted it on a sign in a national park. Then on an intercom. On a street lighting access cover. In an elevator. At my dentist’s office. In an alley.” Marcin Wichary on Manhattan’s hardest working typeface.
* Performance: “… file sizes of web fonts? I personally don’t have a gut feeling how much is too much and how much is to be expected.” Stoyan Stefanov reckons 20k is fair.
* Behind the Scenes: “This meant that on web we could simply start our font stacks with Verdana, pick a couple of reasonable fallbacks, and get IKEA branding effectively for free.” IKEA didn’t end up using Verdana, but I wish they did, I kinda love it at small sizes. This is a great look at a major typographic choice at a major brand from Robin Whittleton.
* Technique: “…we added text-wrap: balance on WordPress.org, and quickly got community feedback that it led to awkward, unexpected breaks in Japanese and Korean.” Kelly Choyce-Dwan whips out stuff like word-break: auto-phrase; for the win.

92 views20:19

Html codes

3d multiplayer game.html

30.6 KB

77 views09:23

Html codes

<div class="glass-box">
  <h3>Hello UI!</h3>
</div>

<style>
  .glass-box {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    color: white;
  }

  body {
    background: url('https://picsum.photos/800/600') no-repeat center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

70 views02:20

Html codes

WhatsApp.html

36 KB

WHATSAPP clone new version with real time chat

@Html_codee

58 views07:18

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Logo SVG</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f7;
        }
        .apple-logo {
            width: 150px;
            height: 150px;
        }
        .apple-logo:hover {
            filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
        }
    </style>
</head>
<body>
    <svg class="apple-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <!-- Apple logo shape -->
        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" 
              fill="#000"/>
    </svg>
</body>
</html>

68 views16:56

67 views05:10

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Neon Watch</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Courier New', Courier, monospace;
    }

    .watch {
      color: #0ff;
      font-size: 5em;
      text-shadow:
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #f0f,
        0 0 80px #f0f;
      transition: text-shadow 0.5s ease-in-out;
    }

    .watch:hover {
      text-shadow:
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #0ff,
        0 0 80px #f0f,
        0 0 160px #f0f;
    }
  </style>
</head>
<body>
  <div class="watch" id="neonWatch">00:00:00</div>

  <script>
    function updateClock() {
      const now = new Date();
      let hours = now.getHours().toString().padStart(2, '0');
      let minutes = now.getMinutes().toString().padStart(2, '0');
      let seconds = now.getSeconds().toString().padStart(2, '0');
      document.getElementById('neonWatch').textContent = `${hours}:${minutes}:${seconds}`;
    }

    setInterval(updateClock, 1000);
    updateClock(); // Initial call to display time immediately
  </script>
</body>
</html>

73 views04:16

Html codes

Who is making the Web standards?

Anonymous Quiz

Google

50%

The World Wide Web Committee

The World Wide Web Consortium

50%

The World Wide Web School

2 voters56 views04:26

Html codes

Forwarded from Cybersecurity & ethical hacking

🛑 Can PDF, MP3 & other files contain viruses? YES!

Here’s how 👇

📄 PDF Files
PDFs can contain JavaScript like this:

app.alert("You are infected!");

⚠️ They may:

• Run scripts automatically
• Redirect to phishing sites
• Contain hidden EXE/BAT files

🎵 MP3 Files
MP3s are audio, but still risky!
Example: song.mp3.exe
If file extensions are hidden, it looks safe — but it's actually a virus.
Some media players also have bugs that can be exploited via corrupted tags.

🧾 Other risky file types:
• .docm, .xlsm → Macros (malicious code)
• .zip, .rar → Hidden payloads
• .scr, .bat, .cmd → Scripts

🔐 Stay safe:

✅ Show full file extensions
✅ Don’t open unknown attachments
✅ Keep antivirus up to date
✅ Disable JavaScript in PDF readers
✅ Avoid double extensions

💡 Even files that “look normal” can be deadly.

Want a real example for learning (education only)? DM me.

#CyberSecurity #Malware #TelegramTips

@cybersecurity_html

45 views13:49

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello with Lottie</title>
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f0f0f0;
    }
  </style>
</head>
<body>

  <lottie-player 
    src="https://assets2.lottiefiles.com/packages/lf20_w51pcehl.json"  
    background="transparent"  
    speed="1"  
    style="width: 300px; height: 300px;"  
    loop  
    autoplay>
  </lottie-player>

</body>
</html>

63 views15:16

Html codes

CodePen Blog
Chris Corner: For The Sake of It

Somebody with good taste could’ve made my website, but then it wouldn’t be mine.
My website is ugly because I made it — Taylor Troesh
I love weird design ideas. Probably because so much of what we need to do as web designers is, appropriately, somewhat serious. We want things to be simple, clear, professional, so that people understand them and in many cases pay for them. So when the constraints relax, so can we. It’s unlikely that Taylor’s homepage would “perform well” in any sort of UX testing, but who cares? It’s not impossible to use, it’s just unusual. And crucially, it’s fun and memorable, which is likely a leg up on the last “dashboard” you saw.

It’s cool of Blackle Mori to have documented The Lost CSS Tricks of Cohost.org, a social network ultimately too cool for this world. I sort of suspect a lot of this trickery is available in advanced email clients too, where you definitely don’t have JavaScript, but do have access to more-modern-than-you’d-think HTML and CSS.

And high on the tranfixingly-weird scale is Amit Sheen’s CSS Spotlight Effect. Don’t write it off as a black page with a transparent circle moving with the mouse. I mean, it kinda is, but the filtering and scaling affects that come along for the ride are extremely cool. I actually just got to hang with Amit a bit at CSS Day in Amsterdam this past week. His talk was about building logic gates in CSS was pretty wild, and the whole thing end with him just showing off random amazing Pens of his on stage.

Sometimes design can feel impressive because of the extreme constraints of where you’re seeing it. I’m at an airport lounge right now where I’ve seen an exhibit of sculptures carved into the lead tips of pencils. It’s that same kind of feeling I get when I see art happen in the terminal, a place usually not regarded for it’s beauty. Like seeing a daisy grow from the cracks of a busted up sidewalk.

I like serious design as well. Certainly there is more money in it. I’m allowed to like them both, just like I enjoy both fine dining and fast food. I’ll just hit you with some quicker links though as I bet you’re tired of my going on.

* Chris Nager weighs in on Design Engineering from his experience with that title at Carta. “The most important skill design engineers possess is the ability to communicate with both designers and frontend engineers. They’re able to give feedback to both sides, and can act as translators between the two worlds through prototypes.” Emphasis mine, naturally.
* Lea Verou looks critically at a design change at GitHub in Minimalist Affordances: Making the right tradeoffs. Not only was it interesting, it showcases the power of blogging and making coherent points: GitHub noticed, talked with her, and improved the design.
* Grant Slatton on How to write a good design document. “Think of a design document like a proof in mathematics. The goal of a proof is to convince the reader that the theorem is true. The goal of a design document is to convince the reader the design is optimal given the situation.”

66 views19:32

54 views02:15

SVG drawing animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Drawing Animation</title>
  <style>
    /* SVG styling */
    .icon {
      width: 400px;
      height: 400px;
      color: #F06529; 
    }


    /* Path styling */
    .icon path {
      fill: none; /* Start with no fill for drawing effect */
      stroke: currentColor; /* Use currentColor for stroke */
      stroke-width: 1; /* Thin stroke for clarity */
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: var(--path-length);
      stroke-dashoffset: var(--path-length);
      animation: draw 2s ease-in-out forwards;
    }

    /* Drawing animation */
    @keyframes draw {
      0% {
        stroke-dashoffset: var(--path-length);
        fill: none;
      }
      80% {
        stroke-dashoffset: 0;
        fill: none;
      }
      100% {
        stroke-dashoffset: 0;
        fill: currentColor; /* Restore original fill */
      }
    }
  </style>
</head>
<body class="dark"> <!-- Add 'dark' class to test dark mode -->
  <svg class="icon w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
    <path d="m3 2 1.578 17.824L12 22l7.467-2.175L21 2H3Zm14.049 6.048H9.075l.172 2.016h7.697l-.626 6.565-4.246 1.381-4.281-1.455-.288-2.932h2.024l.16 1.411 2.4.815 2.346-.763.297-3.005H7.416l-.562-6.05h10.412l-.217 2.017Z"/>
  </svg>

  <script>
    // Get the path element
    const path = document.querySelector('.icon path');
    // Calculate the path's total length
    const pathLength = path.getTotalLength();
    // Set the path length as a CSS custom property
    path.style.setProperty('--path-length', pathLength);
  </script>
</body>
</html>

54 views14:44

Html codes

<picture> — Responsive image loading
<source> — Define media file formats
<dialog> — Create modal dialogs
<template> — Hidden HTML templates
<slot> — Insert custom content in Web Components
<main> — Marks the main content area
<mark> — Highlight text
<time> — Define a date or time
<meter> — Display scalar values (e.g. score)
<progress> — Show task progress (e.g. loading)
<output> — Display calculation results
<details> — Expandable/collapsible content
<summary> — Header for <details>
<figure> — Container for images or diagrams
<figcaption> — Caption for a <figure>

47 views11:13

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Avatar Animation</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #0f0f0f;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Segoe UI', sans-serif;
    }

    .coder-avatar {
      position: relative;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 25px rgba(0, 255, 170, 0.5);
      cursor: pointer;
    }

    .coder-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      z-index: 2;
      position: relative;
      transition: transform 0.5s ease;
    }

    .coder-avatar:hover img {
      transform: scale(1.05);
    }

    .coder-avatar::before {
      content: '';
      position: absolute;
      top: -25%;
      left: -25%;
      width: 150%;
      height: 150%;
      background: conic-gradient(
        from 0deg,
        #00ffcc,
        #0066ff,
        #00ffcc
      );
      animation: spin 5s linear infinite;
      z-index: 0;
      border-radius: 50%;
      filter: blur(10px);
    }

    .coder-avatar::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: #0f0f0f;
      border-radius: 50%;
      z-index: 1;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>

  <div class="coder-avatar">
    <img src="https://i.pravatar.cc/300?img=12" alt="programmer">
  </div>

</body>
</html>

46 views10:02

Html codes

<!DOCTYPE html>
<html>
<head>
  <title>Ably Real-Time Chat</title>
  <script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    #messages {
      border: 1px solid #ccc;
      padding: 10px;
      height: 300px;
      overflow-y: scroll;
      margin-bottom: 10px;
    }
    input, button {
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h2>💬 Ably Real-Time Chat</h2>
  <div id="messages"></div>
  <input type="text" id="msgInput" placeholder="Write a message..." />
  <button onclick="sendMessage()">Send</button>

  <script>
    const ably = new Ably.Realtime('key');
    const channel = ably.channels.get('chat');

    channel.subscribe('message', function(msg) {
      const p = document.createElement('p');
      p.textContent = msg.data;
      document.getElementById('messages').appendChild(p);
      document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
    });

    function sendMessage() {
      const input = document.getElementById('msgInput');
      const message = input.value.trim();
      if (message) {
        channel.publish('message', message);
        input.value = '';
      }
    }
  </script>
</body>
</html>

58 views14:34

Html codes

social network.html

27.4 KB

59 views13:50

About

Blog

Apps

Platform