Caricamento URL

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

15 May 2025

Animazione della barra di caricamento CSS

30 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Loader with Fullscreen Feature</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>URL Loader</h1>
        <div class="input-group">
            <select id="protocol">
                <option value="http://">http://</option>
                <option value="https://">https://</option>
            </select>
            <input type="text" id="url-input" placeholder="Enter URL">
            <button id="load-button"class=btn>Load</button>
        </div>
        <iframe id="url-iframe" src=""></iframe>
        <div class="output-group">
            <input type="text" id="current-url" readonly>
            <button id="copy-button"class=btn>Copy URL</button>
        </div>
        <div class="iframe-controls">
            <button id="fullscreen-button"class=btn>Fullscreen</button>
        </div>
    </div>
    <footer>
        <div class="footer-content">
            <span>© Realmpowed Group</span>
            <div class="footer-buttons">
                <button id="clear-cookies-button"class=btn>Clear Cookies</button>
                <button id="change-bg-button"class=btn>Change Background Color</button>
            </div>
        </div>
    </footer>

<div id="color-picker-modal" class="modal">
        <div class="modal-content">
            <span id="close-modal">×</span>
            <input type="color" id="color-picker">
            <button id="apply-color-button"class=btn>Apply Color</button>
        </div>
    </div>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
    flex: 1;
    width: 80%;
    max-width: 800px;
    margin: auto;
}

.input-group {
    margin-bottom: 20px;
}

#url-input, #current-url {
    width: 60%;
    padding: 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#load-button, #copy-button, #clear-cookies-button, #change-bg-button {
    padding: 10px 20px;
    border: none;
    background-color: #000000;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#load-button:hover, #copy-button:hover, #clear-cookies-button:hover, #change-bg-button:hover {
    background-color: #000000;
}

iframe {
    width: 100%;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

footer {
    background-color: #000000;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-buttons {
    display: flex;
    gap: 10px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 300px;
    text-align: center;
    border-radius: 10px;
}

#close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#close-modal:hover, #close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.btn {
    border: none;
    background-color: #000000;
    color: #ffffff;
    font-size: 16px;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
  }
    .btn::after {
      content: "";
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #000000;
      left: 0;
      top: 0;
      border-radius: 10px;
  }
  
  .btn::before {
    content: "";
    background: linear-gradient(
      45deg,
      #FF0000, #FF7300, #FFFB00, #48FF00,
      #00FFD5, #002BFF, #FF00C8, #FF0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height:  calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0;
  }
  
  @keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
  }
  
  /* hover */
  .btn:hover::before {
    opacity: 1;
  }
  
  .btn:active:after {
    background: transparent;
  }
  
  .btn:active {
    color: #000;
    font-weight: bold;
  }
  
  .btn-large {
    display: block;
    width: 100%;
  }
  
  .setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
  }

/* เพิ่ม CSS สำหรับปุ่ม fullscreen */
.iframe-controls {
    margin-top: 10px;
}

#fullscreen-button {
    padding: 10px 20px;
    border: none;
    background-color: #ff5722;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#fullscreen-button:hover {
    background-color: #e64a19;
}

JS

document.getElementById('load-button').addEventListener('click', function() {
    const protocol = document.getElementById('protocol').value;
    const urlInput = document.getElementById('url-input').value.trim();
    const iframe = document.getElementById('url-iframe');
    const currentUrl = document.getElementById('current-url');

if (urlInput) {
        const fullUrl = protocol + urlInput;
        iframe.src = fullUrl;
        currentUrl.value = fullUrl;
    } else {
        alert('Please enter a valid URL.');
    }
});

document.getElementById('copy-button').addEventListener('click', function() {
    const currentUrl = document.getElementById('current-url');
    currentUrl.select();
    currentUrl.setSelectionRange(0, 99999); // For mobile devices

navigator.clipboard.writeText(currentUrl.value)
        .then(() => {
            alert('URL copied to clipboard!');
        })
        .catch(err => {
            alert('Failed to copy URL: ' + err);
        });
});

document.getElementById('clear-cookies-button').addEventListener('click', function() {
    document.cookie.split(";").forEach(cookie => {
        document.cookie = cookie.replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
    });
    alert('All cookies have been cleared.');
});

document.getElementById('change-bg-button').addEventListener('click', function() {
    document.getElementById('color-picker-modal').style.display = "block";
});

document.getElementById('close-modal').addEventListener('click', function() {
    document.getElementById('color-picker-modal').style.display = "none";
});

document.getElementById('apply-color-button').addEventListener('click', function() {
    const color = document.getElementById('color-picker').value;
    document.body.style.backgroundColor = color;
    document.getElementById('color-picker-modal').style.display = "none";
});

Caricamento URL

Consigliato

caricamento

Animazione della barra di caricamento CSS

icona di caricamento 4

HTML

CSS

JS

Consigliato

caricamento

Animazione della barra di caricamento CSS

icona di caricamento 4

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS