<!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>
<!-- 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>
<!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>
`<!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);
}
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>
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>
`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 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
<!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>
Professions That Will Survive the Future 🌟
As technology advances, some careers will continue to thrive due to their unique human skills and touch. Here are professions expected to stay relevant for years to come:
1. Programmers and IT Specialists 💻
Creating and advancing technology requires skilled developers who can innovate and maintain complex systems.
2. Healthcare Workers (Doctors and Nurses) 🩺
The human touch is essential in healthcare; AI and robots can’t fully replace the compassion and intuition needed for patient care.
3. Teachers and Educators 📚
Teaching goes beyond knowledge transfer; it involves motivation, mentorship, and guidance.
4. Artists, Designers, and Creative Professionals 🎨
Creativity and art rely on human emotions and personal expression, making these roles irreplaceable.
5. Authors and Writers ✍️
While AI can help generate content, true storytelling and deep human insights will always require a human touch.
6. Psychologists and Therapists 🧠
Addressing mental health and emotional issues requires genuine human interaction and empathy.
7. Engineers and Technical Experts 🏗️
Engineering solutions and technical problem-solving require creative and hands-on thinking that AI can’t replicate entirely.
8. Social Service Workers 🤝
Social care and support are deeply human activities that require understanding, empathy, and human connection.
Even with the rise of new technologies, these professions are expected to remain valuable and in demand. 🌍✨
Follow for more insights on the future of work and tech updates: @Html_codee
As technology advances, some careers will continue to thrive due to their unique human skills and touch. Here are professions expected to stay relevant for years to come:
1. Programmers and IT Specialists 💻
Creating and advancing technology requires skilled developers who can innovate and maintain complex systems.
2. Healthcare Workers (Doctors and Nurses) 🩺
The human touch is essential in healthcare; AI and robots can’t fully replace the compassion and intuition needed for patient care.
3. Teachers and Educators 📚
Teaching goes beyond knowledge transfer; it involves motivation, mentorship, and guidance.
4. Artists, Designers, and Creative Professionals 🎨
Creativity and art rely on human emotions and personal expression, making these roles irreplaceable.
5. Authors and Writers ✍️
While AI can help generate content, true storytelling and deep human insights will always require a human touch.
6. Psychologists and Therapists 🧠
Addressing mental health and emotional issues requires genuine human interaction and empathy.
7. Engineers and Technical Experts 🏗️
Engineering solutions and technical problem-solving require creative and hands-on thinking that AI can’t replicate entirely.
8. Social Service Workers 🤝
Social care and support are deeply human activities that require understanding, empathy, and human connection.
Even with the rise of new technologies, these professions are expected to remain valuable and in demand. 🌍✨
Follow for more insights on the future of work and tech updates: @Html_codee
Telegram
Html code & programming
Support e-mail: support@bestpage.x10.mx
"If you don't walk today, run tomorrow"
"Step into Tomorrow, Ignite Your Potential - Move Forward with Confidence!"
"If you don't walk today, run tomorrow"
"Step into Tomorrow, Ignite Your Potential - Move Forward with Confidence!"