Codes

LAST.FM NOW PLAYING WIDGET

What is this?:

This is a custom-coded web widget that connects to your Last.fm account. Instead of a static image, it uses live data to show what you are listening to right now (or what you played last).

What is it for?:

It’s a stylish way to share your musical vibe on personal websites, portfolios, or profile pages (like Carrd or Tumblr). It automatically updates whenever you play a new song, showing the album art, track title, and artist.

How to Set It Up:

1. Get your API Key: Go to Last.fm API page, create an app and copy the Key.
2. Configure: Replace "API-KEY-HERE" and "YOUR-USERNAME" in the script
3. Customize: Edit colors in the :root section of the CSS inside the textarea.

Note:

I haven't tested this on sites like Tumblr, Carrd, Strawpage, and similar platforms, so I'm not sure if it works the same way as on Neocities and Nekoweb. If it doesn't work, you can send me a message on my Guestbook! I'll try to fix it as soon as possible! <3

[ CODE ]

<style>
    :root {
        --bg-color: #0f0f0f;
        --card-bg: #1e1e1e;
        --text-main: #ffffff;
        --text-alt: #a0a0a0;
        --accent-color: #ff4500;
        --border-radius: 15px;
        --padding: 20px;
    }
    .widget-container {
        background: var(--card-bg);
        width: 300px;
        padding: var(--padding);
        border-radius: var(--border-radius);
        text-align: center;
        font-family: sans-serif;
    }
    #track-art { width: 100%; aspect-ratio: 1/1; border-radius: 10px; object-fit: cover; }
    #track-name { display: block; color: var(--text-main); font-weight: bold; margin: 10px 0 5px; }
    #artist-name { display: block; color: var(--text-alt); font-size: 0.9rem; }
    .playing-now { color: var(--accent-color); font-weight: bold; font-size: 0.7rem; }
</style>

<div class="widget-container">
    <div id="status-row">LOADING...</div>
    <img id="track-art" src="" alt="Album Art">
    <span id="track-name">Track Name</span>
    <span id="artist-name">Artist Name</span>
    <span id="time-ago"></span>
</div>

<script>
    const API_KEY = 'API-KEY-HERE';
    const USERNAME = 'YOUR-USERNAME';
    
    async function fetchLastFM() {
        const url = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${USERNAME}&api_key=${API_KEY}&format=json&limit=1`;
        try {
            const response = await fetch(url);
            const data = await response.json();
            const track = data.recenttracks.track[0];
            document.getElementById('track-name').innerText = track.name;
            document.getElementById('artist-name').innerText = track.artist['#text'];
            document.getElementById('track-art').src = track.image[3]['#text'];
            const isPlaying = track['@attr'] && track['@attr'].nowplaying === 'true';
            document.getElementById('status-row').innerText = isPlaying ? "• NOW PLAYING" : "LAST PLAYED";
            document.getElementById('status-row').className = isPlaying ? "playing-now" : "";
        } catch (err) { console.error(err); }
    }
    fetchLastFM();
    setInterval(fetchLastFM, 30000);
</script>

Dynamic Browser Tab Title

What is this?:

A small script that animates your browser tab text, making it appear letter-by-letter (typing effect).

What is it for?:

To make your page stand out in a sea of open tabs and add a personal, dynamic touch to your site's header.

How to Set It Up:

1. Change the text: Find tb8_messages[0] = "NAME-HERE"; and replace "NAME-HERE" with your text.
2. Adjust Speed: Change tb8_speed for typing speed (Lower = Faster). Change tb8_delay for the pause before it restarts.
3. Place: Paste the whole code into the < head > or at the bottom of your HTML.

Note:

I DIDN'T CREATE THIS!!! The website I got it from was Angelovin! I'm not sure if she actually created it, but all the credit goes to her—I'm just passing it on to you!!!

[ CODE ]

                                <script>
        function tb8_makeArray(n){ this.length = n; return this.length; }
        tb8_messages = new tb8_makeArray(1);
        tb8_messages[0] = "NAME-HERE";
        tb8_rptType = 'infinite';
        tb8_speed = 220;
        tb8_delay = 1000;
        var tb8_counter=1, tb8_currMsg=0, tb8_tekst ="", tb8_i=0, tb8_TID = null;
        function tb8_pisi(){
            tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
            document.title = tb8_tekst;
            tb8_sp=tb8_speed;
            tb8_i++;
            if (tb8_i==tb8_messages[tb8_currMsg].length){
                tb8_currMsg++; tb8_i=0; tb8_tekst=""; tb8_sp=tb8_delay;
            }
            if (tb8_currMsg == tb8_messages.length){ tb8_counter++; tb8_currMsg = 0; }
            tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
        }
        tb8_pisi();
    </script>

DYNAMIC LINKS

What is this?:

A dynamic banner that rotates images and links. Perfect for webrings or ad spaces. Use an iframe to host it for better compatibility.

How to configure:

1. Setup Mode: Change RANDOM_MODE to true/false for shuffle or sequence.
2. Add Content: Update the content array with your image URLs and destination links.
3. The Iframe: Save this code as a standalone .html page and embed it using an iframe tag.

Note:

Set the background to transparent in your CSS for a seamless look.

[ CODE ]

<script>
(function() {
    // --- CONFIGURATION ---
    const RANDOM_MODE = true; // true = Shuffle / false = Sequential
    const CHANGE_INTERVAL = 30000; // 30 seconds
    
    const content = [
        { img: "IMAGE_URL_1", url: "LINK_1" },
        { img: "IMAGE_URL_2", url: "" }, // Empty url = No link
        { img: "IMAGE_URL_3", url: "LINK_3" }
    ];

    let currentIndex = 0;
    document.body.style.cssText = "margin:0; overflow:hidden; width:180px; height:180px; position:relative; background:transparent;";

    const anchor = document.createElement('a');
    anchor.style.cssText = "display:block; width:100%; height:100%;";
    document.body.appendChild(anchor);

    const img = document.createElement('img');
    img.style.cssText = "width:100%; height:100%; object-fit:cover;";
    anchor.appendChild(img);

    const updateWidget = () => {
        if (RANDOM_MODE) {
            currentIndex = Math.floor(Math.random() * content.length);
        } else {
            currentIndex = (currentIndex + 1) % content.length;
        }
        const item = content[currentIndex];
        img.src = item.img;
        anchor.href = item.url || "javascript:void(0)";
        anchor.style.cursor = item.url ? "pointer" : "default";
    };

    updateWidget();
    setInterval(updateWidget, CHANGE_INTERVAL);

    // Optional Badge
    const info = document.createElement('a');
    info.innerText = "CoreDreamz";
    info.href = "https://coredreamz.neocities.org/";
    info.style.cssText = "position:absolute; bottom:5px; right:5px; background:rgba(155,1,1,0.8); color:#fff; font-size:9px; padding:2px 5px; text-decoration:none; font-family:sans-serif; border-radius:5px;";
    document.body.appendChild(info);
})();
</script>

CODES