Hello! I've been hosting a web for a music streamer. It's hosted on Firebase, along with the database, and the files are stored on Dropbox. Each song is shown on a Songcard React element, this is the whole code, I'll be highlighting the important parts afterwards:

import React from 'react'
import { useRef, useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlay, faPause, faHeart, faPlus, faDownload } from '@fortawesome/free-solid-svg-icons'
import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons';
import { logEvent } from "firebase/analytics";

export const SongCard = ({ song, currSong, setCurrSong, isLogged, liked, handleLikedSong,
    search, selectedTags, volumen, currentPage, analytics }) => {
    const audioRef = useRef();
    const [isPlaying, setIsPlaying] = useState(false);
    const [currentTime, setCurrentTime] = useState('00:00');
    const [duration, setDuration] = useState('00:00');

    useEffect(() => {
        handlePlayPause(false);
    }, [currentPage]);

    useEffect(() => {
        const pauseSong = async () => {
            setCurrSong(null);
            handlePlayPause(false);
        };
        pauseSong();
    }, [search, selectedTags]);

    useEffect(() => {
        const changeVolumen = async () => {
            audioRef.current.volume = volumen / 100;
        };
        changeVolumen();
    }, [volumen]);

    const setCurrentTimeFormat = (timeInSeconds) => {
        const minutes = Math.floor(timeInSeconds / 60);
        const seconds = Math.floor(timeInSeconds % 60);
        const formattedTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        setCurrentTime(formattedTime);
    };

    const handleLoadedMetadata = () => {
        const totalDuration = audioRef.current.duration;
        const minutes = Math.floor(totalDuration / 60);
        const seconds = Math.floor(totalDuration % 60);
        const formattedDuration = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        setDuration(formattedDuration);
    };

    const handlePlayPause = (play) => {
        if (play) {
            if (currSong != null && audioRef != currSong.audioRef) {
                currSong.audioRef.current.pause();
            }
            setCurrSong({ ...song, audioRef });
            setIsPlaying(true);
            audioRef.current.play();
            logEvent(analytics, `playSong - ${song.song_name}`);
        } else {
            setIsPlaying(false);
            audioRef.current.pause();
        }
    };

    const handleProgressClick = (e) => {
        const progressWidth = e.target.clientWidth;
        const clickOffsetX = e.nativeEvent.offsetX;
        const clickPercent = clickOffsetX / progressWidth;
        const newTime = clickPercent * audioRef.current.duration;
        audioRef.current.currentTime = newTime;
        setCurrentTimeFormat(newTime);
        handlePlayPause(true);
    };

    return (
        <div className={`d-flex flex-column justify-content-center ${isPlaying ? 'card cardPlaying' : 'card'}`}>
            <div className={`card__title`}>{song.song_name}</div>
            <div className="card__subtitle">{song.song_origin}</div>
            <div className="card__tags">{song.song_tags.join(', ')}</div>
            <div className="card__wrapper">
                <div className="card__time card__time-passed">{currentTime}</div>
                <div className="card__timeline progress-bar" onClick={handleProgressClick}>
                    <progress
                        value={audioRef.current ? audioRef.current.currentTime : 0}
                        max={audioRef.current ? audioRef.current.duration : 0}
                    />
                </div>
                <div className="card__time card__time-left">{duration}</div>
            </div>
            <div className="card__wrapper mx-auto">
                {/* {isLogged && (
                    <button className='playlistButton rounded-circle' id="like-song" onClick={() => handleAddToPlaylist(song.song_id)}>
                        <FontAwesomeIcon icon={faPlus} />
                    </button>
                )} */}
                {isLogged && (
                    <button className='playlistButton rounded-circle' id={`${!liked ? "like" : "dislike"} ${song.song_name}`} onClick={() => handleLikedSong(song.song_id)}>
                        {!liked ? (
                            <FontAwesomeIcon icon={faHeartRegular} />
                        ) : (
                            <FontAwesomeIcon icon={faHeart} />
                        )}
                    </button>
                )}
                {(song.song_lore !== undefined && song.song_lore !== '') && (
                    <button className='fw-bolder playlistButton rounded-circle loreButton'>
                        !
                        <span className="loreText">{song.song_lore}</span>
                    </button>
                )}
                {!isPlaying ? (
                    <button className='playlistButton rounded-circle' id={`play ${song.song_name}`} onClick={() => handlePlayPause(true)}>
                        <FontAwesomeIcon icon={faPlay} />
                    </button>
                ) :
                    (
                        <button className='playlistButton rounded-circle' id={`pause ${song.song_name}`} onClick={() => handlePlayPause(false)}>
                            <FontAwesomeIcon icon={faPause} />
                        </button>
                    )}
                <button
                    className='playlistButton rounded-circle'
                    id="download-song"
                    onClick={() => { window.open(song.song_file, "_blank") }}>
                    <FontAwesomeIcon icon={faDownload} />
                </button>
                <audio
                    onLoadedMetadata={handleLoadedMetadata}
                    onTimeUpdate={() => setCurrentTimeFormat(audioRef.current.currentTime)}
                    onPause={() => handlePlayPause(false)}
                    onEnded={() => handlePlayPause(false)}
                    ref={audioRef}
                    src={song.song_file}
                    type="audio/mpeg"
                />
            </div>
        </div>
    )
}

export default SongCard;

It's been working flawlessly until a few hours ago, when it suddenly stopped showing each song duration and recognizing the src file, preventing people from playing them. However, the download button is still working.

const handleLoadedMetadata = () => {
        const totalDuration = audioRef.current.duration;
        const minutes = Math.floor(totalDuration / 60);
        const seconds = Math.floor(totalDuration % 60);
        const formattedDuration = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        setDuration(formattedDuration);
    };

<div className="card__time card__time-left">{duration}</div>

No changes have been made in the code for a few weeks. I've tried it on several browsers, with no success at all.

https://ibb.co/0XWGGRb

Here's an image of the current state of the web, where you can see how the duration is 0:00 instead of the real one. I've ran out of ideas, it simply won't recognize src files, although this button works:

<button
    className='playlistButton rounded-circle'
    id="download-song"
    onClick={() => { window.open(song.song_file, "_blank") }}>
    <FontAwesomeIcon icon={faDownload} />
</button>

^(Hello, I am trying to add cookies to my webpage but there is an error in my JS that I cannot seem to debug. Is anyone willing to help out? the code for my JS cookies is less than 60 lines so its not an overwhelming amount of code to go over. T^T)

I am working on a website and I want a contact form that includes a person's name, phone number, email, etc. When a user fills out and submits this form where does the information go? Is it possible for it to go to an email address that I have set? Or is there a better way to go about this. Thanks

Hey so I'm building my first ever website to host my portfolio, and I'm struggling to figure out why my linked pages (I know they dont lead to any other link) aren't in line with "Firstname Lastname". If anyone is willing to help me out that would be amazing. Thanks!!

here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/media-queries.css" />
</head>
<body>
    <nav id="dekstop-nav">
        <div class="logo">Firstname Lastname </div>
        <div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>
    <script src="js/script.js"></script>
</body>
</html>

Here's my file structure (idk how to post an image of it):

root

--> index.html

css

--> style.css

--> media-queries.css

image

[empty]

js

--> script.js

<label for="name"> Name: </label>

<input type="text" id="name">

Hi. Could someone explain me how this program works ? I mean, what does exactly "label for="name" " mean ? And what does "id="name" " mean after the input ? Thank you.

Hello I have to make the Lebanon Flag with svg in html for school. And I always fail at the tree in the middle. Have someone has the code for it?

 <!doctype html>

<html>
    <head><!-- CSS -->
<style>
    p {
    color:green;
    }
    #playbutton {display: none;}
</style> <!--end of css, also play button display = none until the corect code is inputed.-->
<body>
    <h1>sorry, but this page is under works right now...</h1>
    <p>for game testers only:</p>
    <form name="form" id="form">
        <label for="Gametester">Gametester:</label>
        <textarea name="text" id="text" value="1" cols="12" rows="1" maxlength="12"></textarea>
        <input type="button" value="Play." id="submit">
    </form>
<!-- gametester box id is "text"-->
<img src="PlayA.gif" id="playbutton">
<script>
    //state all var
    let form = document.getElementByID('form')
    let awnser = document.form.text
    let submit = document.getElementByID('submit')
    let playbutton = document.getElementByID('playbutton')
//please let this work for god sakes
submit.addEventListener('click',function() {
    if(awnser.value === '[REDACTED]'){//right now redacted because im keeping my game safe.
    playbutton.style.display = 'inline';
    }
});//ties off function and event listener.
</script>
    </body>
    </html>

Please help! Im making an HTML game that needs a code for gametesters to play it (aka some friends) Im trying to make it so that when the playtester types in the code [REDACTED] it will show an image called "PlayA.gif" in the CSS the image shouldnt show but then in the <script> i tell it to show when the [REDACTED] code. This is probably hard because of my less knoledge of javascript. If anyone could PLEASE. help me with this. it would be AMAZING. thanks.

I'm very new to HTML and hosting websites in general, and I'm attempting to just get this basic one running and figured out. I have opened port 80 through my router (and restarted the router), allowed port 80 through firewall TCP+UDP inbound/outbound, I have given the entire partition full control for all users including "Everyone" which I specified.

The basic index.html opens (for myself), but when I try to run the path to the directory, it gives me the error: "403 - Forbidden: Access is denied. You do not have permission to view this directory or page using the credentials that you supplied." None of my friends can even load the site, and I just can't figure out why.

I've looked up solutions but it seems like every single post I can find on this issue has to do with some sort of hosting site, and I'm just trying to host this myself on IIS. If there is specific info I need to provide, or if this is not the subreddit that I should be inquiring to, a redirect would be appreciated.

Here is my code, if it matters for this issue. Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.center {
margin: auto;
width: 50%;
height: 50%;
padding: 10px;
}
body, html {
background-color:powderblue;
height: 100%;
margin: 0;
}
</style>
</head>

<body style="background-image: url('Unas Annus.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">

<script>
var password = "Unas Annus";
(function passcodeprotect() {
var passcode = prompt("Memento Mori...");
while (passcode !== password) {
alert("An unbeknownst answer by those who wish to intrude.");
return passcodeprotect();
}
}());
alert("Your answer is... acceptable. Welcome to The Dark Acrhives.");
</script>
<div class="center">
<p title="NEVER share this archive. The Secrets of Necromancy must die here."
style="text-align:center;
color:white;
font-size:30px;
background-color:black;
border: 2px solid #dddddd;
border-collapse: collapse;
"> <a href="Unas Annus">
The Power of Necromancy is not for the feint of heart... 
<br> Are you sure you know what you are doing?
</p>
</div>
</body>
</html>

hello my logo in the header gets divided into 2 lines how do i make it in 1 line? the logo is "good to go" but the word "go" comes in a second line why??

<header>
            <div id='Logo'>
                <h1>Good To Go</h1>
            </div>
            <div class='navigation'>
                <a href="HomePage.html" accesskey="H">Home Page</a>
                <a href="OwnerDashboard.html" accesskey="O">Owner Dashboard</a>
                <a href="CustomerDashboard.html" accesskey="C">Customer Dashboard</a>
            </div>
        </header>


header {
    display: flex;
    background-color: #0C1213 ;
    color: #D6B360 ;
    padding: 0% ;
    margin: 0% ;
    height: 5.5em ;
    width: 100% ;
    justify-content: space-between ;
    align-items: center ;
}

#Logo {
    margin-left: 1em;
    color: #E3BF70 ;
}

So, while it seems like a simple concept, the designer has made my life difficult on this one. I have a ribbon SVG element that is a series of paths that curve and loop (with gradient shadows) that I need to animate as the user scrolls down the page. It should be visible as it grows, roughly keeping up with the user's progression. The designer has indicated that it doesn't need to scroll backwards as a user scrolls up the page, but has not said that it couldn't/shouldn't. My thought is using some sort of mask layer, but the loops are messing with my mind on how to accomplish this. Any suggestions would be great! If anyone has seen a similar effect, please provide the URL. Thank you!

EDIT: If it matters, this is a WordPress/Elementor Pro site.

I recently completed my portfolio and shared it with some friends to proofread. One of them comment how the videos were all terrible and I asked him to elaborate. He sent me this screenshot:

https://imgur.com/a/UHL9UOq

The real video is of course no where near this bright and the issue seemed to only appear for him. I've been unable to replicated this effect on any of my devices and am thus unsure how to deal with it. The file is just a simple .mov

Hi! I have a gallery on this page - https://www.shantilalee.com/print and it's on the format.com platform. I need the padding between images here to be bigger. There are settings on the backend to adjust gallery design, but I have another gallery on a different page so I can't change the padding in the design settings or it will affect both galleries.

So I added this code to add more padding between images specifically on this page (please note this is a format.com site, so I can't change the entire HTML, I can only add coding to the theme css stylesheet ):

body.page-12840938 .gallery .asset {
    padding: 0 45px 45px 0 !important;
}

This adds padding below and on the right of each image, which is exactly what I need. But problem is, there is padding on the images that sit at the end of each row, on the right side of the page, making the page look off-centered and less wide. Is there any way to remove the padding on the right specifically for images that sit on the end of each row?

I tried assigning 0 right padding to body.page-12840938 .gallery .row:last-child .asset, and there are 5 images per row, but the layout is masonry so the last image on the right is not always the 5th image. I also tried assigning it to the 5th, 10th image etc, but same problem. Any ideas on how to fix this? Thanks heaps!

Is it possible for a bg image to push the content near it?

Creating a list with jumplinks, can't get rid of bullet points
Hi, would appreciate any help if someone has any ideas.
I've been looking for a way to make a list with jump links to headings within a text (it's just like a top 10 of H3s) and particularly #heading style instead of just adding an actual link. The jump links work, but I'm getting a list with bullet points and I'd love to avoid that. What can I do?
P.S. If there's a way to add some code to make the lines closer together, I would also appreciate that!
My current code is this:

<a href="#text-1" class="Link" data-ga-slug="text-1">Text 1</a>

<a href="#text-2" class="Link" data-ga-slug="text-2">Text 2</a>

<a href="#text-3" class="Link" data-ga-slug="text-3">Text 3</a>

More details here.

More details here.</Text>

More details here.

I have images saved on my pc that I will be uploading to my workplace app. One of the pictures will be a holiday request form. They click the picture and the post opens up and says click here to request holidays.

I want for people to click the picture and the holiday request form opens without the need for a click here.

Is that doable ??

Cheers

I’m trying to resize the pdf by giving width 100% and height 600. Its working computer but not in ios device

Hi I was wondering if anyone had any answers for this question I posted on stackoverflow. I am having trouble with formatting the html on local host vs on the browser.

https://stackoverflow.com/questions/78400600/issue-with-wkhtmltopdf-html-css-rendering-on-localhost-vs-hosted-in-browser

Hi,

I’m looking for a way to publish a basic HTML website to the internet. I just have a couple pictures, text, and an MP3 file. When I am testing the website on the computer everything works because all the files are contained in the same folder. How do I get the files into like Wordpress.com because all that is showing is the text and the pictures and mp3 files show like an emoji with a squiggle because it can’t locate the files.

I'm very very very new to this, but I can't open a html file, Any help?
Just says:
Your file couldn’t be accessed
It may have been moved, edited, or deleted.
ERR_FILE_NOT_FOUND

On Chrome, I'm trying to download an image that, when you're on the website, it lets you zoom in when hovered over it. Inspecting the element, it's doing a simple transform: scale(3) to zoom in, but I can't save the zoomed in version. If I save just the original image and zoom in, the quality is way worse. I've tried a bunch of different interpolation methods to try to reproduce it, but the upscaling in the browser is still the best version. Does anyone know how I can just download the scaled version, or replicate the scaling?

Hey guys. I started learning the bootstrap framework and I've decided to practice building my portfolio. Basically right now im trying to edit the text-decoration when I over the nav bar links to get an underline but its not working. Im guessing it has something to do with one of the bootstrap classes but im honestly not sure any help would be appreciated! Feedback welcome so far as well. Please ignore my comments lol I am still learning

HTML doc:

<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>

<span class="fs-4">X</span>

CSS doc:

/* General styling */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: "Poppins", sans-serif;
}

/* (causes the webpage to scroll rather than jump to links) */
html {
    scroll-behavior: smooth;
}

/* Nav bar styling */
.nav-link {
    color: black;
    font-size: 1.3rem;

}

.a:hover {
    text-decoration: underline;
    text-underline-offset: 1rem;
}

I made a website to read books for a publishing company where they give me .epub files and every page is an html file.

I used iframes to render these and I have two prefetch links that point towards the next two pages. I noticed these links don't seem to help performance-wise (the users can see a small loading at every new page).

Here's what the links look like:

<link id="pre1" rel="prefetch" href="app.com/media/page32.xhtml">

Did I miss something important? Does this also prefetch the images inside the html page?

I guess it's doable with some javascript parsing the html and manually loading the images but I'd prefer a pure html option if it exists.

ive inspected the code of this site and it seems like they are using tables to achieve this effect, but its still a bit beyond my understanding. searching online i know that there are ways to add images to tables but they are used quite differently
https://web.archive.org/web/20041110033404/http://www.xbox.com/en-us/default.htm

<table border="0" cellpadding="0" cellspacing="0" width="770">  
<tbody><tr>  
	<td><img src="Xbox.com%20Xbox.com%20Home\_files/xboxui-bottom-toolbar\_r1\_c1.jpg" width="57" height="58" border="0"></td>  
	<td><a href="https://web.archive.org/web/20041110033404/http://www.xbox.com/" onmouseout="XWP\_SwapImage('xboxuibottomtoolbar\_r1\_c2','/xsys/images/footer/xboxui-bottom-toolbar\_r1\_c2.jpg');" onmouseover="XWP\_SwapImage('xboxuibottomtoolbar\_r1\_c2','/xsys/images/footer/xboxui-bottom-toolbar\_r1\_c2\_f2.jpg');"><img name="xboxuibottomtoolbar\_r1\_c2" src="Xbox.com%20Xbox.com%20Home\_files/xboxui-bottom-toolbar\_r1\_c2.jpg" width="116" height="58" border="0"></a></td>  
	<td><img src="Xbox.com%20Xbox.com%20Home\_files/xboxui-bottom-toolbar\_r1\_c3.jpg" width="482" height="58" border="0"></td>  
	<td><img name="xboxuibottomtoolbar\_r1\_c4" src="Xbox.com%20Xbox.com%20Home\_files/xboxui-bottom-toolbar\_r1\_c4.jpg" width="115" height="58" border="0"></a></td>  
</tr>  
<tr>

this isnt my code by the way. just messed around with the site to get to the part that has some of what im talking about so you can get an understanding of it. i havent gotten to implementing this anywhere because i dont know how to go on about it in the first place, but id just want something like this around a box

I want to make some particles follow the mouse pointer on my neocities website.

And i need to know how because there are no good tutorials out there on youtube.

Hi guys

I have a HTML-Website and I want to "secure" this site, so only users with username and password can access it. The content is not delicate, so it not have to be high secure.

I have a apache-webserver.

I read about http-basic-authentication. But is this still working with newest browser versions?

If yes, can I just put the PHP-code in front of the HTML code and it works? I tried it, but didnt worked. Could it sitll be a .html-file or have it to be a .php-file? Where to put the username and password if I just put PHP-code in front of HTML code?

Best regards

So my website, Slamsout.github.io (heres the source code https://github.com/slamsout/slamsout.github.io ) ive been working on for a few days now i just started coding html a few days ago with the help of a college textbook i got from my aunt and learning the very basics from my comp sci class and currently i have no idea where to start at making it mobile friendly currently it looks like this on mobile, the colors are messed up and its very slightly to big for the screen (images in comments) i only started learning 2-3 days ago so im kinda stupid when it comes to html i usually code python any ideas?

I was making a website for a project at school using only HTML and CSS and I just found out that bootstrap was required, alongside HTML and CSS. is there any way to convert the HTML and CSS site to a bootstrap compatible one without ruining the framework?

I'm wanting to create sub menus for my current menu, but not sure how. I know I need a CSS code with a new sub menu.

<ul>
<li class="selected">
<a href="#">Home</a> 
</li>
<li class="selected">
<a href="#">Broadcast Schedule</a> 
</li>
<li class="selected">
<a href="#">Racing Leagues</a> 
</li>
<li class="selected">
<a href="#">League Standings</a> 
</li>

<li class="selected">
<a href="#">YouTube Stream</a>
</li>

<li>
<a href="#">News</a> 
</li>
<li>
<a href="#">About</a> 
</li>
<li>
<a href="#">Contact</a> 
</li>
</ul>

.body div.content ul {
list-style:none;
padding:0 18px 0 0;
margin:0;
}
.body div.content ul li:first-child {
background:none;
margin:0;
padding:0;
}
.body div.content ul li {
overflow:hidden;
background:url(../images/border.png) repeat-x left top;
margin:23px 0 0;
padding:25px 0 0;
}
.body div.content ul li span {
display:block;
height:24px;
background:none #414141;
font-size:10px;
line-height:24px;
color:#f9fafd;
padding:0 0 0 15px;
font-family: 'Conv_OpenSans-Regular';
margin:0 0 24px;
}
.body div.content ul li a {
display:block;
float:left;
margin:0 23px 0 0;
}
.body div.content ul li a img {
border:4px solid #808080;
}
.body div.content ul li a img:hover {
filter:alpha(opacity=80);/* Needed for IE7 */
opacity:0.8;
}
.body div.content ul li div {
float:left;
width:360px;
}
.body div.content ul li div h3 {
margin:0 0 18px;
display:inline-block;
color:#a50606;
font-size:26px;
line-height:27px;
font-family: 'Conv_JockeyOne-Regular';
font-style:normal;
text-transform:none;
font-weight:normal;
text-decoration:none;
}
.body div.content ul li div h3 a:hover {
text-decoration:underline;
}
.body div.content ul li div p {
font-family: 'Conv_OpenSans-Regular';
font-size:12px;
line-height:24px;
font-style:italic;
color:#3e3e3d;
margin:0 0 23px;
padding:0;
text-align: justify;
}
.body div.content ul li div p a {
margin:0;
float:none;
display:inline;
}
.body div.content ul li div a {
font-size:12px;
line-height:24px;
color:#a50606;
font-family: 'Conv_OpenSans-Regular';
letter-spacing:-0.025em;
}
.body div.content ul li div a:hover {
color:#414141;
}