Html codes

/* From Uiverse.io by Shaidend */ 
<div class="InputContainer">
  <input
    placeholder="Search"
    id="input"
    class="input"
    name="text"
    type="text"
  />

  <label class="labelforsearch" for="input">
    <svg class="searchIcon" viewBox="0 0 512 512">
      <path
        d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
      ></path>
    </svg>
  </label>
</div>

👍1

89 views16:39

Html codes

/* From Uiverse.io by Shaidend */ 
.InputContainer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding-left: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}

.input {
  width: 170px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 0.9em;
  caret-color: rgb(255, 81, 0);
}

.labelforsearch {
  cursor: text;
  padding: 0px 12px;
}

.searchIcon {
  width: 13px;
}

.border {
  height: 40%;
  width: 1.3px;
  background-color: rgb(223, 223, 223);
}

.micIcon {
  width: 12px;
}

.micButton {
  padding: 0px 15px 0px 12px;
  border: none;
  background-color: transparent;
  height: 40px;
  cursor: pointer;
  transition-duration: 0.3s;
}

.searchIcon path {
  fill: rgb(114, 114, 114);
}

.micIcon path {
  fill: rgb(255, 81, 0);
}

.micButton:hover {
  background-color: rgb(255, 230, 230);
  transition-duration: 0.3s;
}

98 views16:39

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShadUI Calendar Demo</title>
  <!-- React and ReactDOM -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- Babel for JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Initialize Tailwind CSS
    tailwind.config = {
      theme: {
        extend: {},
      },
    };
  </script>
  <!-- Date Utilities -->
  <script src="https://cdn.jsdelivr.net/npm/date-fns@2.30.0/dist/date-fns.min.js"></script>
  <!-- Radix UI Styles (if necessary for the calendar) -->
  <style>
    /* Add any custom styles required by ShadUI */
  </style>
</head>
<body class="bg-gray-100 p-6">
  <div id="root"></div>

  <script type="text/babel">
    const { useState } = React;

    function Calendar({ mode, selected, onSelect, className }) {
      // Generate a simple calendar UI (mocking ShadUI behavior for demo purposes)
      const days = Array.from({ length: 30 }, (_, i) => i + 1);
      const today = new Date();

      return (
        <div className={`grid grid-cols-7 gap-2 p-4 bg-white rounded-md border shadow-md ${className}`}>
          {days.map((day) => {
            const date = new Date(today.getFullYear(), today.getMonth(), day);
            const isSelected = selected && selected.toDateString() === date.toDateString();

            return (
              <button
                key={day}
                onClick={() => onSelect(date)}
                className={`p-2 text-sm rounded-md ${
                  isSelected ? "bg-blue-500 text-white" : "bg-gray-100"
                } hover:bg-blue-100`}
              >
                {day}
              </button>
            );
          })}
        </div>
      );
    }

    function CalendarDemo() {
      const [date, setDate] = useState(new Date());

      return (
        <div className="max-w-md mx-auto">
         <center> <h1 className="text-lg font-bold mb-4">ShadUI Calendar Demo</h1></center>
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            className="rounded-md"
          />
          <p className="mt-4 text-gray-700">
            Selected Date: <strong>{date.toDateString()}</strong>
          </p>
        </div>
      );
    }

    // Render the component
    ReactDOM.createRoot(document.getElementById("root")).render(<CalendarDemo />);
  </script>
</body>
</html>

107 views05:59

Html codes

Forwarded from Lifehack of the day

Find and track the IP address of any person

Grabify IP Logger can give you advanced and detailed statistical data and metadata for all clicks on your links. Your IP Logger link can access information about user’s IP address, location tracker (country, city) and so on.

The service works with just 3 simple steps:

✔️ Shorten long link.

✔️ Share the short link with another user.

✔️ Grab IP address after the user clicks on your short link.

Be attantive: you can also be a target of such actions ❗️Be careful opening links!

#service #security

👍2

99 views04:39

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Gallery</title>
    <style>
        /* Basic styling for the body */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        /* Styling the gallery container */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            padding: 10px;
            max-width: 1200px;
            margin: auto;
        }

        /* Styling individual images */
        .gallery img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        /* Hover effects for images */
        .gallery img:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        /* Responsive footer for branding */
        footer {
            text-align: center;
            padding: 15px;
            background-color: #333;
            color: #fff;
            font-size: 14px;
        }

        footer a {
            color: #1da1f2;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- Gallery Section -->
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <img src="image4.jpg" alt="Image 4">
        <img src="image5.jpg" alt="Image 5">
    </div>

    <!-- Footer Section -->
    <footer>
        Follow us on <a href="https://t.me/html_codee" target="_blank">Telegram</a> for more updates!
    </footer>
</body>
</html>

❤3

116 views10:53

Html codes

const number = 1234567.89;
const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number);

console.log(formatted); // $1,234,567.89

124 views14:12

Html codes via @QuizBot

🎲 Quiz 'Html'
🖊 3 questions · ⏱ 10 sec

125 views15:45

107 views13:58

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cursive Typewriter Animation</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

    body {
      font-family: 'Pacifico', cursive;
      background-color: #f5f5f5;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      flex-direction: column;
    }

    .typewriter {
      font-size: 2rem;
      color: #333;
      border-right: 3px solid #333;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      width: 0;
      animation: typing 5s steps(50) 1s forwards, blink 0.75s step-end infinite;
    }

    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }

    @keyframes blink {
      50% {
        border-color: transparent;
      }
    }

    .footer {
      margin-top: 20px;
      font-size: 1rem;
      font-family: Arial, sans-serif;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="typewriter">
    Hello, welcome to the typewriter animation in cursive!
  </div>
  <div class="footer">
    &copy; Bestpage IT
  </div>
</body>
</html>

👍2

110 views11:14

Html codes

Сheck if your data is leaking through a VPN

Do I Leak is a tool to check for data leaks through VPNs. It is designed to detect most leaks that could reveal your real identity.

To test, go to the link, select "VPN Leak Test" and click on "Begin test". Then follow the simple instruction and the service will check everything for you. Use only verified VPN services.

#security #privacy

126 views12:13

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Entity Detection</title>
  <script src="https://unpkg.com/compromise"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    textarea {
      width: 100%;
      height: 100px;
    }
    button {
      margin-top: 10px;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .results {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Entity Detection (People and Places)</h1>
  <textarea id="inputText" placeholder="Enter your text here..."></textarea>
  <button onclick="analyzeText()">Analyze</button>
  
  <div class="results">
    <h3>Results:</h3>
    <p><strong>People:</strong> <span id="people"></span></p>
    <p><strong>Places:</strong> <span id="places"></span></p>
  </div>

  <script>
    function analyzeText() {
      const text = document.getElementById('inputText').value;
      const doc = nlp(text);

      // Extract people and places
      const people = doc.people().out('array');
      const places = doc.places().out('array');

      // Display results
      document.getElementById('people').textContent = people.length ? people.join(', ') : 'None detected';
      document.getElementById('places').textContent = places.length ? places.join(', ') : 'None detected';
    }
  </script>
</body>
</html>

114 views04:14

Html codes

<iframe style="background: white;border-radius: 8px; border: none; box-shadow: 5px 5px 24px 0px #0000001F;" src="https://embed.writer.com/chat/jHZqvB2YSqb-R4GfdcWDHCw8U9Nr5HAsa6Hauc8JFrc" width="800" height="600"></iframe>

117 views04:15

Html codes

import pyfiglet

# write text
text = "Html"
result = pyfiglet.figlet_format(text)

# OUTPUT 
print(result)

111 views04:16

Html codes

iPhone_16_and_iPhone_16_Plus_-_Apple.html

635.2 KB

Share my html file

121 views05:34

Html codes

Forwarded from GOAL24

0:26

This media is not supported in your browser

VIEW IN TELEGRAM

🦋🌱MiniMax's new video tool was compared to Gen-3, using identical cues and adhering to the text-to-video feature. ✨

I have to say, the realism and accuracy of the MiniMax's cues was amazing. And the best part? It's 100% free at the moment! 👛

While I hope to have an image to video conversion feature soon, MiniMax already seems like a strong competitor to Gen-3. 🎩

Have you tried it out yet? 👀

🎥 #VideoAI

Please open Telegram to view this post

VIEW IN TELEGRAM

113 views12:54

Html codes

Credit Card UI Design.zip

905.1 KB

Credit card ui design
Source

@Html_codee

107 views13:26

Html codes

Please provide me with a neon HTML order placement area.

<html>
<head>
    <title>Neon Order Placement Area</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background: radial-gradient(circle at center, #000, #111);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        .order-container {
            background: #111;
            border: 2px solid #0ff;
            border-radius: 10px;
            padding: 20px;
            width: 400px;
            box-shadow: 0 0 15px #0ff, 0 0 30px #0ff, 0 0 45px #0ff;
            text-shadow: 0 0 10px #0ff;
        }
        .order-container h1 {
            text-align: center;
            color: #0ff;
            margin-bottom: 20px;
            text-shadow: 0 0 15px #0ff, 0 0 30px #0ff;
        }
        .order-container label {
            display: block;
            margin-bottom: 10px;
            color: #0ff;
            text-shadow: 0 0 5px #0ff;
        }
        .order-container input, .order-container select, .order-container textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #0ff;
            border-radius: 5px;
            background: #222;
            color: #fff;
            box-shadow: 0 0 10px #0ff inset;
        }
        .order-container input:focus, .order-container select:focus, .order-container textarea:focus {
            outline: none;
            box-shadow: 0 0 15px #0ff inset;
        }
        .order-container button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #0ff;
            color: #000;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
            box-shadow: 0 0 15px #0ff, 0 0 30px #0ff;
        }
        .order-container button:hover {
            background: #08f;
            box-shadow: 0 0 20px #08f, 0 0 40px #08f;
            transform: scale(1.05);
        }
        .order-container button i {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="order-container">
        <h1>Place Your Order</h1>
        <form>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your name" required>
            
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            
            <label for="product">Product</label>
            <select id="product" name="product" required>
                <option value="product1">Product 1</option>
                <option value="product2">Product 2</option>
                <option value="product3">Product 3</option>
            </select>
            
            <label for="quantity">Quantity</label>
            <input type="number" id="quantity" name="quantity" min="1" placeholder="Enter quantity" required>
            
            <label for="address">Shipping Address</label>
            <textarea id="address" name="address" rows="4" placeholder="Enter your shipping address" required></textarea>
            
            <button type="submit"><i class="fas fa-shopping-cart"></i> Place Order</button>
        </form>
    </div>
</body>
</html>

100 views03:54

Html codes

<html>
<head>
    <title>Neon Order Placement Area</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #000;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .order-container {
            background: #111;
            border: 2px solid #ff0;
            border-radius: 10px;
            padding: 20px;
            width: 400px;
            box-shadow: 0 0 20px #ff0;
        }
        .order-container h1 {
            text-align: center;
            color: #ff0;
            margin-bottom: 20px;
        }
        .order-container label {
            display: block;
            margin-bottom: 10px;
            color: #ff0;
        }
        .order-container input, .order-container select, .order-container textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ff0;
            border-radius: 5px;
            background: #222;
            color: #fff;
        }
        .order-container button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #ff0;
            color: #000;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .order-container button:hover {
            background: #cc0;
        }
    </style>
</head>
<body>
    <div class="order-container">
        <h1>Place Your Order</h1>
        <form>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your name" required>
            
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            
            <label for="product">Product</label>
            <select id="product" name="product" required>
                <option value="product1">Product 1</option>
                <option value="product2">Product 2</option>
                <option value="product3">Product 3</option>
            </select>
            
            <label for="quantity">Quantity</label>
            <input type="number" id="quantity" name="quantity" min="1" placeholder="Enter quantity" required>
            
            <label for="address">Shipping Address</label>
            <textarea id="address" name="address" rows="4" placeholder="Enter your shipping address" required></textarea>
            
            <button type="submit"><i class="fas fa-shopping-cart"></i> Place Order</button>
        </form>
    </div>
</body>
</html>

👍3

108 views03:56

Html codes

Congratulations on the arrival of the winter season! May this time bring you moments of joy, warmth, and delightful memories. Embrace the beauty of the season and enjoy all the wonders that winter has to offer. Wishing you a cozy and magical winter ahead! ❄️🌟🧣

95 views19:29

Html codes

`
<!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;

141 views19:31

Html codes

if (timeDifference <= 0) {
document.querySelector('.timer').style.display = 'none';
return;
}

const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

daysEl.textContent = String(days).padStart(2, '0');
hoursEl.textContent = String(hours).padStart(2, '0');
minutesEl.textContent = String(minutes).padStart(2, '0');
secondsEl.textContent = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();

// Snow Effect
const snowContainer = document.querySelector('.snow');

function random() {
return Math.random();
}

for (let i = 0; i < 50; i++) {
const flake = document.createElement('span');
const size = Math.random() * 6 + 2;
const pos = Math.random() * 100;
const duration = Math.random() * 3 + 2;
const delay = Math.random() * 5;

flake.style.width = ${size}px;
flake.style.height = ${size}px;
flake.style.left = ${pos}%;
flake.style.animationDelay = ${delay}s;
flake.style.animationDuration = ${duration}s;

snowContainer.appendChild(flake);
}
</script>
</body>
</html>
`

109 views19:31

About

Blog

Apps

Platform