smart_iot_dashboard.html
4.8 KB
📊 Features:
✅ Interactive Device Controls: Toggle Lights, Fan, and Security System.
✅ Temperature Adjustment: Use a slider to control temperature.
✅ Real-time Status Updates: Display real-time status messages.
✅ Visual Feedback: Indicators show device states.
✅ Responsive Design: Mobile and desktop friendly.
@Html_codee
✅ Interactive Device Controls: Toggle Lights, Fan, and Security System.
✅ Temperature Adjustment: Use a slider to control temperature.
✅ Real-time Status Updates: Display real-time status messages.
✅ Visual Feedback: Indicators show device states.
✅ Responsive Design: Mobile and desktop friendly.
@Html_codee
Attention, Question of the Day...
QUESTION:
In the past, the weight of THIS(!) would be around 200 grams at the beginning of the New Year...
As the year progresses and reaches its end in December, it loses a significant amount of weight, dropping to about 20 grams.
Nowadays, THIS(!) can be found on most people's phones...
Question:
What is THIS(!)?
(One word!)
QUESTION:
In the past, the weight of THIS(!) would be around 200 grams at the beginning of the New Year...
As the year progresses and reaches its end in December, it loses a significant amount of weight, dropping to about 20 grams.
Nowadays, THIS(!) can be found on most people's phones...
Question:
What is THIS(!)?
(One word!)
❤2
Happy New Year! 🎉
I sincerely congratulate you with the coming New Year!
🎄 May the new year bring you new dreams, new hopes and new opportunities. May your achievements in the past year be stronger, and may the new year be remembered with new victories. I wish you good health, family happiness, peace and blessings. Happy New Year! ✨
I sincerely congratulate you with the coming New Year!
🎄 May the new year bring you new dreams, new hopes and new opportunities. May your achievements in the past year be stronger, and may the new year be remembered with new victories. I wish you good health, family happiness, peace and blessings. Happy New Year! ✨
Why is a computer mouse called a mouse?
The "mouse" 🐭 got its name from its resemblance to the actual animal the mouse and had a cord trailing behind it much like a mouse's tail. It was to small to be a rat. However a "rat" is an old term which refers to damaged or obsolete hardware or malicious software... We often referred to viruses and malware as rats 🐀 🐀 🐁
The "mouse" 🐭 got its name from its resemblance to the actual animal the mouse and had a cord trailing behind it much like a mouse's tail. It was to small to be a rat. However a "rat" is an old term which refers to damaged or obsolete hardware or malicious software... We often referred to viruses and malware as rats 🐀 🐀 🐁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Mini Blog</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto">
<header class="bg-blue-600 p-4">
<h1 class="text-white text-2xl">Mini Blog</h1>
</header>
<main class="p-4">
<div class="grid grid-cols-1 gap-4" id="blogPosts">
</div>
</main>
</div>
<script>
const blogPosts = [
{
image: "https://storage.googleapis.com/a1aa/image/U9MFSPdORsrsJ5qZ8Ah5e4a5fdf14d89enNNGW2rhQqSBIIQB.jpg",
title: "Exploring the Mountains",
description: "Join us as we explore the beautiful mountain ranges and discover the hidden gems within.",
likes: 0,
comments: [],
},
{
image: "https://storage.googleapis.com/a1aa/image/QjfoDwsfmZuiEUqTFrHZ1sKbzYWEDn8a9uNN9xqUyfggAEEoA.jpg",
title: "City Life Adventures",
description: "Experience the vibrant life of the city with our guide to the best spots and activities.", likes: 0,
comments: [],
},
{
image: "https://storage.googleapis.com/a1aa/image/3c1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e.jpg",
title: "Culinary Delights",
description: "Discover the flavors of the world with our culinary adventures and recipes.",
likes: 0,
comments: [],
},
];
function renderPosts() {
const blogContainer = document.getElementById('blogPosts');
blogContainer.innerHTML = '';
blogPosts.forEach((post, index) => {
const postDiv = document.createElement('div');
postDiv.className = 'bg-white p-4 rounded-lg shadow-md';
postDiv.innerHTML = `
<img src="${post.image}" alt="${post.title}" class="w-full h-48 object-cover rounded-t-lg" />
<h2 class="text-xl font-bold mt-4">${post.title}</h2>
<p class="text-gray-700 mt-2">${post.description}</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-600 hover:text-blue-800" onclick="likePost(${index})">
<i class="fas fa-thumbs-up"></i> Like <span id="likeCount-${index}">(${post.likes})</span>
</button>
<button class="text-blue-600 hover:text-blue-800" onclick="commentPost(${index})">
<i class="fas fa-comment"></i> Comment
</button>
<button class="text-blue-600 hover:text-blue-800" onclick="sharePost(${index})">
<i class="fas fa-share"></i> Share
</button>
</div>
`;
blogContainer.appendChild(postDiv);
});
}
function likePost(index) {
blogPosts[index].likes++;
renderPosts();
}
function commentPost(index) {
const comment = prompt("Enter your comment:");
if (comment) {
blogPosts[index].comments.push(comment);
alert("Comment added!");
}
}
function sharePost(index) {
alert(`Sharing post: ${blogPosts[index].title}`);
}
renderPosts();
</script>
</body>
</html>
SQUID game mini games web sitesi .html
5.3 KB
SQUID game mini games web sitesi .html
<html>
<head>
<title>
YouTube Premium Alternative
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.11/vue.global.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="max-w-4xl mx-auto p-4" id="app">
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<div class="relative">
<img alt="A placeholder image of a video thumbnail with a play button in the center" class="w-full" height="450" src="https://storage.googleapis.com/a1aa/image/VDHNqPkNHeUnJKBWXmy8pqdtU4oMPe9vWe7RumN8NgR5h4EoA.jpg" width="800"/>
<button @click="subscribe" class="absolute top-2 right-2 bg-red-600 text-white px-4 py-2 rounded-full">
{{ subscribed ? 'Subscribed' : 'Subscribe' }}
</button>
</div>
<div class="p-4">
<h2 class="text-2xl font-bold mb-2">
Video Title
</h2>
<p class="text-gray-600 mb-4">
Channel Name
</p>
<div class="flex items-center mb-4">
<button @click="like" class="flex items-center text-gray-600 mr-4">
<i :class="['fas', liked ? 'fa-thumbs-up' : 'fa-thumbs-o-up', 'mr-2']">
</i>
Like
</button>
<button @click="dislike" class="flex items-center text-gray-600 mr-4">
<i :class="['fas', disliked ? 'fa-thumbs-down' : 'fa-thumbs-o-down', 'mr-2']">
</i>
Dislike
</button>
<button @click="toggleBackgroundPlay" class="flex items-center text-gray-600">
<i :class="['fas', backgroundPlay ? 'fa-pause' : 'fa-play', 'mr-2']">
</i>
{{ backgroundPlay ? 'Stop Background Play' : 'Background Play' }}
</button>
</div>
<p class="text-gray-800">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const subscribed = ref(false);
const liked = ref(false);
const disliked = ref(false);
const backgroundPlay = ref(false);
const subscribe = () => {
subscribed.value = !subscribed.value;
};
const like = () => {
liked.value = !liked.value;
if (liked.value) {
disliked.value = false;
}
};
const dislike = () => {
disliked.value = !disliked.value;
if (disliked.value) {
liked.value = false;
}
};
const toggleBackgroundPlay = () => {
backgroundPlay.value = !backgroundPlay.value;
};
return {
subscribed,
liked,
disliked,
backgroundPlay,
subscribe,
like,
dislike,
toggleBackgroundPlay
};
}
}).mount('#app');
</script>
</body>
</html>