Html codes

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotating Yin-Yang Symbol</title>
<style>
div {
  width: 0;
  height: 200px;
  border-left: 100px solid black;
  border-right: 100px solid #fff;
  box-shadow: 0 0 15px rgba(0,0,0,.5);
  border-radius: 100px;
  -webkit-animation: rotation 2.5s linear infinite;
}

div:before {
  content: "";
  position: absolute;
  height: 100px;
  z-index: 1;
  border-radius: 100px;
  border-left: 50px solid #fff;
  border-right: 50px solid #fff;
  left: -50px;
  box-shadow: 0 100px 0 black;
}

div:after {
  content: "";
  position: absolute;
  height: 30px;
  z-index: 1;
  border-radius: 30px;
  border-left: 15px solid;
  border-right: 15px solid;
  top: 40px;
  left: -15px;
  box-shadow: 0 100px 0 white;
}

@-webkit-keyframes rotation {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

👍1

119 views10:06

Html codes via @vid

https://www.youtube.com/watch?v=JtrFzoL1joI

YouTube

How To Make A Music Player Using HTML CSS And JavaScript

Learn How To Make A Music Player Using HTML CSS And JavaScript
#htmlandcss #javascript

👉 Download 30 JavaScript projects Source Code (Including Music Player):
https://greatstack.dev/go/30-js-projects

❤️ SUBSCRIBE: https://goo.gl/tTFmPb

This this video…

121 views10:55

Html codes

Can a form have multiple submit button with different destination?

Anonymous Quiz

71%

Yes

29%

7 voters122 views11:43

Html codes

shenzhen_nony_factory_map.html

3.9 KB

115 views03:19

Html codes

shenzhen_nony_factory_map.html

Map example

106 views03:19

Html codes

Forwarded from AI Locator - Mapping Out AI Innovation

🤖 Service That Tells If AI Can Replace Your Job

AI’s "Will AI Take My Job?" — a playful yet insightful tool to assess your job security in the age of AI. Simply update your resume in PDF format, upload it, and let the AI analyze your career’s vulnerability to automation.

Find out how secure your profession is in the age of AI!

99 views03:49

Html codes

There are several video libraries and frameworks for HTML that can help you integrate video functionality into your web applications easily. Here are some popular ones:

📚 1. Video.js
⦁ Description: An open-source HTML5 video player that supports modern video formats and offers a customizable interface.
⦁ Features: Responsive design, support for subtitles and captions, a wide range of plugins, and skin customization.
⦁ Website: videojs.com

📚 2. Plyr
⦁ Description: A simple, customizable HTML5 media player for video and audio.
⦁ Features: Full HTML5 support, modern UI, support for Vimeo and YouTube, and accessibility features.
⦁ Website: plyr.io

📚 3. MediaElement.js
⦁ Description: A framework for embedding media while providing a consistent playback experience across browsers.
⦁ Features: Works with both audio and video, provides flash fallback for older browsers, and has various skins available.
⦁ Website: mediaelementjs.com

📚 4. hls.js
⦁ Description: A JavaScript library that plays HTTP Live Streaming (HLS) in browsers that do not support it natively.
⦁ Features: Adaptive streaming, low latency, and extensive error handling.
⦁ Website: hlsjs.dev

📚 5. Clappr
⦁ Description: A versatile media player that supports streaming and various media formats.
⦁ Features: Support for HLS, DASH, and progressive downloads. It’s easy to extend with plugins.
⦁ Website: clappr.io

📚 6. Video.js Vimeo
⦁ Description: A plugin for Video.js that provides additional functionalities for Vimeo videos.
⦁ Features: Seamless integration with Video.js for playback of Vimeo-hosted videos.

📚 7. Cloudinary Video Player
⦁ Description: A versatile video player that allows seamless integration with videos hosted on Cloudinary.
⦁ Features: Supports adaptive streaming, responsive design, and a variety of customization options.
⦁ Website: cloudinary.com

📚 8. YouTube IFrame API
⦁ Description: Allows you to embed and control YouTube videos using JavaScript.
⦁ Features: Supports customizing the player, controlling playback, and event handling.
⦁ Documentation: YouTube API

📚 9. Lite YouTube Embed
⦁ Description: A lightweight YouTube embed tool that loads videos only when interacted with.
⦁ Features: Speedy loading, minimal impact on page performance, and responsive design.
⦁ Website: github.com/harish2704/lite-youtube-embed

📚 10. jPlayer
⦁ Description: A jQuery plugin that allows you to play audio and video and is highly customizable.
⦁ Features: Supports HTML5, Flash, and Jukebox modes.
⦁ Website: jplayer.org

📚 Integration Tips
⦁ When integrating video libraries, make sure to account for accessibility (e.g., captions and keyboard navigation).
⦁ Optimize videos for various devices and browsers.
⦁ Be aware of licensing and copyright issues when using third-party content (like YouTube or Vimeo).

These libraries can help streamline your video development process and enhance the user experience on your website. Depending on your specific needs (e.g., whether you need HLS support, custom branding, etc.), you can choose the one that best fits your project.

100 views03:52

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Histogram Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myHistogram" width="400" height="200"></canvas>
    <script>
        const ctx = document.getElementById('myHistogram').getContext('2d');
        const myHistogram = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['0-10', '11-20', '21-30', '31-40', '41-50'],
                datasets: [{
                    label: 'My Dataset',
                    data: [12, 19, 3, 5, 2], // Example data
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

100 views03:54

Html codes

GitHub__Let’s_build_from_here_·_GitHub.html

264.5 KB

Share my html file

98 views04:20

Html codes

To create a drone-like animation effect using HTML and CSS, you can modify the provided code snippet. Here is an example of how you can adjust the code to create a drone-like animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drone-Like Dots Animation</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            overflow: hidden;
        }

        .dot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #FFF;
            animation: move 2s infinite;
            opacity: 0;
        }

        @keyframes move {
            0% {
                opacity: 0;
                transform: translateY(0) rotate(0deg);
            }
            50% {
                opacity: 1;
                transform: translateY(-50px) rotate(180deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-100px) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <script>
        const container = document.body;

        for (let i = 0; i < 50; i++) {
            const dot = document.createElement('div');
            dot.className = 'dot';
            dot.style.top = Math.random() * 100 + 'vh';
            dot.style.left = Math.random() * 100 + 'vw';
            dot.style.animationDelay = Math.random() + 's';
            container.appendChild(dot);
        }
    </script>
</body>
</html>

In this code snippet, dots are created with a drone-like animation effect. They move up and down while rotating, giving the impression of drones flying. You can further customize the animation properties like speed, direction, and rotation to fine-tune the drone effect. Feel free to adjust the code to meet your specific requirements and desired animation style! If you need any further assistance or modifications, feel free to ask.

105 views09:03

Html codes

#include <stdio.h>
#include <math.h>

#define N 1000000
#define PI 3.141592653589793

double f1(double x) {
return 5.0 * (1 - cos(2 * x));
}

double f2(double x) {
return 5.0 * pow(log(x + 1), 2) / (x + 1);
}

double f3(double x) {
return exp(PI - x) / sqrt(x * x + 1);
}

double simpsons_rule(double (*func)(double), double a, double b, int n) {
if (n % 2 != 0) {
printf("Error: N must be even.\n");
return -1;
}

double h = (b - a) / n;
double sum = func(a) + func(b);

for (int i = 1; i < n; i += 2) {
double x = a + i * h;
sum += 4.0 * func(x);
}
for (int i = 2; i < n; i += 2) {
double x = a + i * h;
sum += 2.0 * func(x);
}

return (h / 3.0) * sum;
}

int main() {
double integral1 = 5.0 * PI / 2.0;
double integral2 = simpsons_rule(f2, 0, PI, N);
double integral3 = simpsons_rule(f3, 0, PI, N);
double result = integral1 - integral2 + integral3;
printf("Integral 1 : %.10f\n", integral1);
printf("Integral 2 : %.10f\n", integral2);
printf("Integral 3 : %.10f\n", integral3);
printf("By solving all equation:( %.10f-%.10f+%.10f)\n", integral1,integral2,integral3);
printf("your age is approximately : %.10f\n", result);

return 0;
}

108 views04:00

Html codes

Calculate hard exam with C

98 views04:01

Html codes

Here is an example of how you can use the Tone.js library to create a simple oscillator that plays a musical tone in an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tone.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/tone"></script>
<script>
  // Create a new Tone.js oscillator
  const synth = new Tone.Synth().toDestination();

  // Play a musical tone when the button is clicked
  document.getElementById('playButton').addEventListener('click', () => {
    synth.triggerAttackRelease('C4', '8n');
  });
</script>
</head>
<body>
<button id="playButton">Play Tone</button>
</body>
</html>

In this example, Tone.js is used to create a simple synthesizer that plays a musical tone when a button with the id "playButton" is clicked. The tone played is a 'C4' note with a duration of '8n'. You can customize the note and duration according to your preferences.

108 views13:17

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Search</title>
</head>
<body>

<img src="cats" type="search" alt="Search result image">
<img src="dogs" type="search" alt="Search result image">
<img src="birds" type="search" alt="Search result image">

<script>
// Function to fetch the first image from the new API
async function fetchImage(searchTerm) {
try {
const response = await fetch(https://api.kastg.xyz/api/search/google-image?q=${searchTerm});

if (response.ok) {
const data = await response.json();

if (data && data.length > 0) {
return data[0]; // Return the URL of the first image
}
}

return null;
} catch (error) {
console.error('Error fetching image:', error);
return null;
}
}

// Compiler function to process <img type="search">
async function compileSearchImages() {
const searchImages = document.querySelectorAll('img[type="search"]');

searchImages.forEach(async (img) => {
const searchTerm = img.getAttribute('src');
const imageUrl = await fetchImage(searchTerm);

if (imageUrl) {
img.src = imageUrl; // Replace the src with the fetched image URL
} else {
img.alt = 'No image found'; // Handle case where no image is found
}
});
}

// Run the compiler when the document is loaded
document.addEventListener('DOMContentLoaded', compileSearchImages);
</script>
</body>
</html>

118 views03:22

About

Blog

Apps

Platform