<!DOCTYPE html>
<html>
<head>
<title>Chatbot Widget</title>
<style>
/* Chatbot styles */
.chatbot-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 350px;
height: 500px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.chatbot-header {
background-color: #f2f2f2;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.chatbot-header h3 {
margin: 0;
}
.chatbot-body {
padding: 10px;
height: 400px;
overflow-y: scroll;
}
.chatbot-message {
margin-bottom: 10px;
}
.user-message {
background-color: #e2f0ff;
padding: 5px 10px;
border-radius: 10px;
}
.assistant-message {
background-color: #fff;
padding: 5px 10px;
border-radius: 10px;
}
.chatbot-footer {
padding: 10px;
}
.chatbot-input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.chatbot-input:focus {
outline: none;
}
</style>
</head>
<body>
<div class="chatbot-container">
<div class="chatbot-header">
<h3>Chatbot Widget</h3>
</div>
<div class="chatbot-body" id="chatbot-body">
<!-- Chat messages will be appended here -->
</div>
<div class="chatbot-footer">
<input type="text" id="chatbot-input" placeholder="Type your message...">
</div>
</div>
<script>
const chatbotBody = document.getElementById('chatbot-body');
const chatbotInput = document.getElementById('chatbot-input');
// Function to append a user message to the chatbot body
function appendUserMessage(message) {
const userMessageElement = document.createElement('div');
userMessageElement.className = 'chatbot-message user-message';
userMessageElement.textContent = message;
chatbotBody.appendChild(userMessageElement);
}
// Function to append an assistant message to the chatbot body
function appendAssistantMessage(message) {
const assistantMessageElement = document.createElement('div');
assistantMessageElement.className = 'chatbot-message assistant-message';
assistantMessageElement.textContent = message;
chatbotBody.appendChild(assistantMessageElement);
}
// Function to handle user input
function handleUserInput() {
const userInput = chatbotInput.value;
appendUserMessage(userInput);
// Send user input to the backend or a chatbot service for processing
// Receive the response and call appendAssistantMessage(response) to display it
// Clear the input field
chatbotInput.value = '';
}
// Event listener for input field
chatbotInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
handleUserInput();
event.preventDefault();
}
});
</script>
</body>
</html>
🥰2
`<!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);
}
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown with Snow Globe</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1e1e1e, #000);
overflow: hidden;
color: white;
}
.container {
text-align: center;
}
.timer-title {
font-size: 2rem;
margin-bottom: 20px;
color: #f9f9f9;
}
.timer {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 40px;
}
.time {
text-align: center;
}
.time span {
display: block;
font-size: 3rem;
background: linear-gradient(135deg, #ccc, #888);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:
0 1px 2px #999,
0 2px 4px #888,
0 3px 6px #777,
0 4px 8px #666,
0 5px 10px #555;
}
.time small {
font-size: 1rem;
text-transform: uppercase;
color: #aaa;
}
.snow-globe {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
background: radial-gradient(circle at 50% 60%, #e6f7ff, #80bfff);
border-radius: 50%;
border: 8px solid silver;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), inset 0 4px 8px rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.snow-globe .scene {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.snow-globe .scene h1 {
font-size: 1.5rem;
color: white;
text-shadow: 0 2px 4px #000;
margin-bottom: 30px;
}
.base {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 60px;
background: linear-gradient(to bottom, #999, #666);
border-radius: 0 0 20px 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.2);
}
.snow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.snow span {
position: absolute;
top: -10px;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: fall linear infinite;
opacity: 0.8;
}
@keyframes fall {
0% {
transform: translateY(0) translateX(0);
opacity: 1;
}
100% {
transform: translateY(300px) translateX(calc(-50px + 100px * random));
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="timer-title">New Year Countdown</h1>
<div class="timer">
<div class="time">
<span id="days">00</span>
<small>Days</small>
</div>
<div class="time">
<span id="hours">00</span>
<small>Hours</small>
</div>
<div class="time">
<span id="minutes">00</span>
<small>Minutes</small>
</div>
<div class="time">
<span id="seconds">00</span>
<small>Seconds</small>
</div>
</div>
<div class="snow-globe">
<div class="snow"></div>
<div class="scene">
<h1>Happy New Year!</h1>
</div>
<div class="base"></div>
</div>
</div>
<script>
// Countdown Timer
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
function updateCountdown() {
const newYear = new Date('January 1, 2025 00:00:00').getTime();
const now = new Date().getTime();
const timeDifference = newYear - now;
🌟 Elevate Your Website with Innovative CSS Animation and Transition Effects! 🌟
Dive into the world of CSS animations and transitions to add a touch of magic to your website. Explore mesmerizing techniques that will captivate your visitors and elevate their browsing experience.
1. Text Shadow Pulse Effect:
2. Background Color Shift:
3. 3D Flip Card:
4. Ripple Effect on Click:
5. Scrolling Progress Indicator:
6. Image Hover Zoom:
7. Slide In Navigation:
Ready to enchant your website with these CSS codes? Explore these techniques and transform your digital experience!
🚀 #CSSAnimations #WebDesign #Innovation #html #web #new
---
@Html_codee
Dive into the world of CSS animations and transitions to add a touch of magic to your website. Explore mesmerizing techniques that will captivate your visitors and elevate their browsing experience.
1. Text Shadow Pulse Effect:
@keyframes pulse {
0%, 100% {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}
}
.pulsing-text {
animation: pulse 1.5s infinite;
}
2. Background Color Shift:
.button {
background-color: #3498db;
transition: background-color 0.4s ease;
}
.button:hover {
background-color: #2ecc71;
}
3. 3D Flip Card:
<div class="card">
<div class="front">Front</div>
<div class="back">Back</div>
</div>
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card div {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border: 1px solid #ccc;
}
4. Ripple Effect on Click:
.button {
overflow: hidden;
position: relative;
}
.button::before {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple 0.6s linear;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
5. Scrolling Progress Indicator:
<div class="progress-bar"></div>
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 5px;
background-color: #3498db;
transition: width 0.1s ease;
}
6. Image Hover Zoom:
.image-hover {
overflow: hidden;
}
.image-hover img {
transition: transform 0.5s ease;
}
.image-hover:hover img {
transform: scale(1.1);
}
7. Slide In Navigation:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
.nav {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.nav.active {
transform: translateX(0);
}
Ready to enchant your website with these CSS codes? Explore these techniques and transform your digital experience!
🚀 #CSSAnimations #WebDesign #Innovation #html #web #new
---
@Html_codee
<!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>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Flag animation</title>
<style>
:root{
--w: 900px;
}
html,body{height:100%;margin:0;font-family:Arial, sans-serif}
.page{
min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f2faff;padding:20px;
}
.flag-wrap{width:min(95vw,var(--w));max-width:1000px;}
svg{display:block;width:100%;height:auto;border:1px solid #ccc;border-radius:6px;overflow:visible}
.controls{margin-top:12px;display:flex;gap:10px}
button{padding:6px 12px;border-radius:6px;border:0;background:#0b5ed7;color:#fff;font-weight:600;cursor:pointer}
button.secondary{background:#eee;color:#111}
@media (prefers-reduced-motion: reduce){
.wave-filter{filter:none !important}
}
</style>
</head>
<body>
<div class="page">
<div class="flag-wrap">
<svg id="uzflag" viewBox="0 0 900 450" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="wave" x="-20%" y="-20%" width="140%" height="140%" class="wave-filter">
<feTurbulence id="turb" baseFrequency="0.009 0.02" numOctaves="2" seed="2" type="fractalNoise" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="18" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<rect width="900" height="450" fill="#ffffff" />
<g id="flagGroup" filter="url(#wave)">
<rect x="0" y="0" width="900" height="150" fill="#1EB3E6" />
<rect x="0" y="150" width="900" height="6" fill="#C82B2B" />
<rect x="0" y="156" width="900" height="138" fill="#FFFFFF" />
<rect x="0" y="294" width="900" height="6" fill="#C82B2B" />
<rect x="0" y="300" width="900" height="150" fill="#118C4E" />
</g>
</svg>
<div class="controls">
<button id="playBtn">Play</button>
<button id="pauseBtn" class="secondary">Stop</button>
</div>
</div>
</div>
<script>
(function(){
const turb = document.getElementById('turb');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
let running = true;
let start = performance.now();
let rafId;
const params = {
baseX: 0.009,
baseY: 0.02
}
function animate(now){
const t = (now - start);
const bx = params.baseX + Math.sin(t * 0.0006) * 0.003;
const by = params.baseY + Math.cos(t * 0.0009) * 0.006;
turb.setAttribute('baseFrequency', bx + ' ' + by);
rafId = requestAnimationFrame(animate);
}
rafId = requestAnimationFrame(animate);
playBtn.addEventListener('click', ()=>{
if(!running){ running = true; rafId = requestAnimationFrame(animate); }
});
pauseBtn.addEventListener('click', ()=>{
if(running){ running = false; cancelAnimationFrame(rafId); }
});
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if(mq.matches){ if(running){ cancelAnimationFrame(rafId); } }
})();
</script>
</body>
</html>