Html codes

HeyGen 3.0 dropped new AI avatars that look real.

The viseme morphing appears slightly slow, but 99% of people won’t notice its AI-generated content.

Source | Artificial intelligence 🤖

77 views13:03

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Matching Puzzle</title>
<style>
/* Basic reset and background styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a1a1d;
color: #eee;
}

h1 {
text-align: center;
color: #f26d21;
margin-bottom: 20px;
}

/* Game Board */
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 15px;
}

/* Card Styles */
.card {
width: 100px;
height: 100px;
background-color: #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: transparent;
cursor: pointer;
transition: transform 0.2s;
}

.card.flip {
color: #fff;
background-color: #f26d21;
transform: rotateY(180deg);
}

.card.matched {
background-color: #333;
color: #333;
cursor: not-allowed;
}

/* Game Info */
.game-info {
margin-top: 20px;
text-align: center;
font-size: 1.2em;
color: #f26d21;
}

</style>
</head>
<body>
<div>
<h1>🎃 Halloween Matching Puzzle 👻</h1>
<div class="game-board" id="gameBoard"></div>
<div class="game-info" id="gameInfo">Attempts: 0</div>
</div>

<script>
// Halloween icons
const halloweenIcons = ["🎃", "👻", "🕸️", "🧛", "🧙", "🕷️", "💀", "🍬"];
const gameBoard = document.getElementById("gameBoard");
const gameInfo = document.getElementById("gameInfo");

// Duplicate and shuffle icons for pairs
let cards = [...halloweenIcons, ...halloweenIcons];
cards.sort(() => 0.5 - Math.random());

let firstCard = null;
let secondCard = null;
let attempts = 0;
let matches = 0;

// Render cards
cards.forEach(icon => {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = icon;
card.addEventListener("click", () => flipCard(card));
gameBoard.appendChild(card);
});

// Flip card function
function flipCard(card) {
if (card.classList.contains("flip") || card.classList.contains("matched")) return;

card.classList.add("flip");

if (!firstCard) {
firstCard = card;
} else {
secondCard = card;
attempts++;
gameInfo.textContent = Attempts: ${attempts};
checkForMatch();
}
}

// Check for a match
function checkForMatch() {
const isMatch = firstCard.innerHTML === secondCard.innerHTML;
if (isMatch) {
firstCard.classList.add("matched");
secondCard.classList.add("matched");
matches++;
if (matches === halloweenIcons.length) {
setTimeout(() => alert(You won in ${attempts} attempts!), 500);
}
resetTurn();
} else {
setTimeout(() => {
firstCard.classList.remove("flip");
secondCard.classList.remove("flip");
resetTurn();
}, 1000);
}
}

82 views04:18

Html codes

// Reset turn
function resetTurn() {
firstCard = null;
secondCard = null;
}

</script>
</body>
</html>

80 views04:18

Html codes

🎃

77 views04:19

Html codes

🚀 Introducing Free SVG Icons Your Ultimate SVG Icon Search Engine Discover and access over 200,000 open-source SVG icons in one place. Our powerful search engine lets you: 🔍 Instantly search through our massive icon collection 🛸 Download icons with one click 📸 Copy SVG code directly to your clipboard ⛓️‍💥 Access 100% free, open-source icons Checkout More About Free SVG Icons here → https://freesvgicons.com/

Free SVG Icons

Iconbuddy — Free and Open Source SVG icons

Browse and download 300,000+ SVG icons from multiple open source icon libraries. Customize color, size, and export as SVG, PNG, JSX, or Base64.

72 views07:53

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello in 99 Languages</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h1 {
            color: #333;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<h1>Hello in 99 Languages</h1>
<ul>
    <li>English: Hello</li>
    <li>Spanish: Hola</li>
    <li>French: Bonjour</li>
    <li>German: Hallo</li>
    <li>Italian: Ciao</li>
    <li>Portuguese: Olá</li>
    <li>Russian: Привет</li>
    <li>Chinese (Mandarin): 你好</li>
    <li>Japanese: こんにちは</li>
    <li>Korean: 안녕하세요</li>
    <li>Arabic: مرحبا</li>
    <li>Hindi: नमस्ते</li>
    <li>Greek: Γειά σας</li>
    <li>Dutch: Hallo</li>
    <li>Turkish: Merhaba</li>
    <li>Swedish: Hej</li>
    <li>Norwegian: Hei</li>
    <li>Danish: Hej</li>
    <li>Finnish: Hei</li>
    <li>Polish: Cześć</li>
    <li>Hebrew: שלום</li>
    <li>Thai: สวัสดี</li>
    <li>Vietnamese: Xin chào</li>
    <li>Indonesian: Halo</li>
    <li>Filipino: Kamusta</li>
    <li>Persian: سلام</li>
    <li>Swahili: Jambo</li>
    <li>Hungarian: Szia</li>
    <li>Czech: Ahoj</li>
    <li>Romanian: Salut</li>
    <li>Ukrainian: Привіт</li>
    <li>Bulgarian: Здравейте</li>
    <li>Serbian: Здраво</li>
    <li>Slovak: Ahoj</li>
    <li>Croatian: Bok</li>
    <li>Bosnian: Zdravo</li>
    <li>Slovenian: Živjo</li>
    <li>Estonian: Tere</li>
    <li>Latvian: Sveiki</li>
    <li>Lithuanian: Labas</li>
    <li>Malaysian: Halo</li>
    <li>Amharic: ሰላም</li>
    <li>Afrikaans: Hallo</li>
    <li>Albanian: Përshëndetje</li>
    <li>Armenian: Բարեւ</li>
    <li>Azerbaijani: Salam</li>
    <li>Bengali: হ্যালো</li>
    <li>Basque: Kaixo</li>
    <li>Belarusian: Прывітанне</li>
    <li>Georgian: გამარჯობა</li>
    <li>Irish: Dia dhuit</li>
    <li>Icelandic: Halló</li>
    <li>Kazakh: Сәлем</li>
    <li>Kurdish: Silav</li>
    <li>Kinyarwanda: Muraho</li>
    <li>Macedonian: Здраво</li>
    <li>Mongolian: Сайн байна уу</li>
    <li>Nepali: नमस्ते</li>
    <li>Papiamento: Halo</li>
    <li>Pashto: سلام</li>
    <li>Samoan: Talofa</li>
    <li>Scottish Gaelic: Halò</li>
    <li>Sindhi: سلام</li>
    <li>Sinhala: හෙලෝ</li>
    <li>Somali: Salaan</li>
    <li>Sundanese: Halo</li>
    <li>Tajik: Салом</li>
    <li>Uzbek: Salom</li>
    <li>Tamil: வணக்கம்</li>
    <li>Telugu: హలో</li>
    <li>Tigrinya: ሰላም</li>
    <li>Urdu: ہیلو</li>
    <li>Wolof: Salaam</li>
    <li>Yoruba: Pẹlẹ o</li>
    <li>Zulu: Sawubona</li>
    <!-- You can add more languages if needed -->
</ul>

</body>
</html>

62 viewsedited 15:13

Html codes

<!-- Modal toggle -->
<button data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
  Toggle modal
</button>

<!-- Main modal -->
<div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Terms of Service
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4">
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                <button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
            </div>
        </div>
    </div>
</div>

66 views12:51

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Neon Glow Button</title>
    <style>
        /* 
         * Enhanced Neon Glow Button Style
         * (c) 2024 3legsbird
         
        .neon-button {
            display: inline-block;
            padding: 0.6em 1.5em;
            font-family: inherit;
            font-size: 1em;
            font-weight: bold;
            text-transform: uppercase;
            color: #00eaff;
            background-color: transparent;
            border: 2px solid #00eaff;
            border-radius: 0.4em;
            text-align: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;

            /* Neon Glow Effect */
            box-shadow: 
                0 0 5px rgba(0, 234, 255, 0.5),
                0 0 15px rgba(0, 234, 255, 0.4),
                0 0 20px rgba(0, 234, 255, 0.6),
                0 0 30px rgba(0, 234, 255, 0.8);
            transition: color 0.3s ease, box-shadow 0.3s ease;
        }

        /* Glowing Hover Effect with Pulse */
        .neon-button:hover {
            color: #fff;
            box-shadow: 
                0 0 10px rgba(0, 234, 255, 0.7),
                0 0 20px rgba(0, 234, 255, 0.6),
                0 0 30px rgba(0, 234, 255, 0.8),
                0 0 40px rgba(0, 234, 255, 1),
                0 0 50px rgba(0, 234, 255, 1);
        }

        /* Pulse Animation for Hover */
        .neon-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background-color: rgba(0, 234, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.6s ease;
            pointer-events: none;
        }

        .neon-button:hover::after {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0;
        }

        /* Active State - Slight Dim */
        .neon-button:active {
            color: #00eaff;
            box-shadow: 
                0 0 5px rgba(0, 140, 154, 0.5),
                0 0 10px rgba(0, 140, 154, 0.4),
                0 0 15px rgba(0, 140, 154, 0.6),
                0 0 20px rgba(0, 140, 154, 0.8);
        }

        /* Enhanced Focus for Accessibility */
        .neon-button:focus-visible {
            outline: 3px solid #00eaff;
            outline-offset: 4px;
        }
    </style>
</head>
<body style="background-color: #111; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0;">

    <button class="neon-button">Neon Glow</button>

</body>
</html>

73 views13:04

Html codes

https://perchance.org/ai-rpg#data=uup1:9ed51eeb7d93e148a27d829eb3aee4a1.gz

perchance.org

🗡️ AI RPG - Text Adventure - free, unlimited, no sign-up ― Perchance Generator

Completely free & unlimited AI Text Adventure. Interactive AI story/game, kinda like AI Dungeon. DnD AI / Game Master, with no sign-up or login. Be whoever you want, do whatever you want. Fast generation and there are *no* daily usage restrictions - unlimited…

69 views10:00

Html codes

`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D Collision Simulation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
background-color: #f4f4f9;
}

canvas {
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 15px;
}

.controls {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
border-radius: 8px;
background-color: #e0e5ec;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
}

.controls label {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: #333;
}

.controls input {
width: 60px;
padding: 5px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
}

.controls button {
padding: 8px 12px;
font-size: 14px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}

.controls button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<canvas id="simulation" width="400" height="200"></canvas>

<div class="controls">
<label>
Block 1 Mass:
<input type="number" id="block1Mass" value="2" step="0.1">
</label>
<label>
Block 2 Mass:
<input type="number" id="block2Mass" value="3" step="0.1">
</label>
<button onclick="updateMasses()">Update Masses</button>
<button onclick="resetSimulation()">Reset Simulation</button>
</div>

<script>
const canvas = document.getElementById("simulation");
const ctx = canvas.getContext("2d");

let collisionCount = 0; // Counter for collisions

class Block {
constructor(x, y, width, height, mass, velocity, color) {
this.initialX = x; // Store initial position for resetting
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.mass = mass;
this.velocity = velocity;
this.color = color;
this.initialVelocity = velocity; // Store initial velocity for resetting
}

draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}

update() {
this.x += this.velocity;
this.checkLeftWallCollision();
}

checkLeftWallCollision() {
if (this.x <= 0) {
this.x = 0; // Correct position
this.velocity = -this.velocity;
collisionCount++; // Increment collision counter
}
}

reset() {
this.x = this.initialX;
this.velocity = this.initialVelocity;
}
}

let block1 = new Block(50, 80, 50, 50, 2, 0, "blue"); // Initial Mass = 2, Velocity = 2
let block2 = new Block(300, 80, 50, 50, 3, -1, "red"); // Initial Mass = 3, Velocity = -1

function detectCollision(b1, b2) {
return b1.x + b1.width >= b2.x && b1.x <= b2.x + b2.width;
}

function resolveCollision(b1, b2) {
const v1Final = (b1.velocity * (b1.mass - b2.mass) + 2 * b2.mass * b2.velocity) / (b1.mass + b2.mass);
const v2Final = (b2.velocity * (b2.mass - b1.mass) + 2 * b1.mass * b1.velocity) / (b1.mass + b2.mass);

b1.velocity = v1Final;
b2.velocity = v2Final;

collisionCount++; // Increment collision counter for block-to-block collision
}

function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

block1.update();
block2.update();

if (detectCollision(block1, block2)) {
resolveCollision(block1, block2);
}

block1.draw();
block2.draw();

ctx.fillStyle = "black";
ctx.font = "16px Arial";
ctx.fillText("Collisions: " + collisionCount, 10, 20);

requestAnimationFrame(update);
}

77 views11:38

Html codes

function updateMasses() {
const block1MassInput = parseFloat(document.getElementById("block1Mass").value);
const block2MassInput = parseFloat(document.getElementById("block2Mass").value);

if (block1MassInput > 0) block1.mass = block1MassInput;
if (block2MassInput > 0) block2.mass = block2MassInput;

collisionCount = 0; // Reset collision count on mass change
}

function resetSimulation() {
collisionCount = 0;
block1.reset();
block2.reset();
}

update();
</script>

</body>
</html>
`

91 views11:38

89 views08:55

Working?

109 views13:08

Html codes

Html codes pinned «Working?»

13:11

Html codes

css loading animation.zip

100 views13:11

100 views13:11

Fun APIs For Your Project(part-2)

Poems API:- https://poems.one/api/poem/#

brewerydb:- https://www.brewerydb.com/developers/docs

Fruityvice:- https://www.fruityvice.com/

Meme Generator:- https://imgflip.com/api

NASA:- https://api.nasa.gov/index.html

OpenUV:- https://www.openuv.io/

Poems One

Poems API

110 views13:11

Html codes

©️

codewithrandom(last 3msg)

96 views13:13

Html codes

<!DOCTYPE html>
<html>

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
 <!-- Optional Bootstrap theme -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
</head>

<body>

 <img src="img/bk.jpg" class="img-rounded" alt="Rounded Image">
 <img src="img/bk.jpg" class="img-circle" alt="Circular Image">
 <img src="img/bk.jpg" class="img-thumbnail" alt="Thumbnail Image">

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
</body>

</html>

99 views05:21

Html codes

Email app.html

14.1 KB

98 views12:24

About

Blog

Apps

Platform