im making a Fortnite/roblox game

#beginners #css #html #showdev
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Load Roblox / Fortnite</title>
  <style>
    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; background:#0f1720; color:#e6eef8; margin:0; padding:20px; }
    .container { max-width:1100px; margin:0 auto; }
    h1 { margin:0 0 12px; font-size:20px; }
    .row { display:flex; gap:20px; flex-wrap:wrap; }
    .card { background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:14px; border-radius:12px; flex:1 1 460px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
    label { display:block; font-size:13px; margin-bottom:8px; color:#bcd3ff; }
    input[type="text"]{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:inherit; }
    button { margin-top:10px; padding:10px 12px; border-radius:8px; border:0; cursor:pointer; background:#2563eb; color:white; font-weight:600; }
    iframe { width:100%; height:560px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:#000; }
    .notice { font-size:13px; color:#c9d7ff; margin-top:10px; opacity:0.9; }
    .muted { opacity:0.7; font-size:13px; margin-top:8px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Load a Roblox or Fortnite page</h1>
    <div class="row">
      <div class="card">
        <strong>Roblox</strong>
        <p class="muted">Enter the Roblox game's web page URL (for example: <code>https://www.roblox.com/games/GAMEID/Name</code>)</p>
        <label for="robloxUrl">Roblox game URL</label>
        <input id="robloxUrl" type="text" placeholder="https://www.roblox.com/games/123456789/Your-Game-Name" />
        <div style="display:flex; gap:8px; margin-top:8px;">
          <button id="embedRoblox">Embed in iframe (may be blocked)</button>
          <button id="openRoblox" style="background:#059669">Open in new tab</button>
        </div>
        <p class="notice">
          Note: many websites (including Roblox) disallow embedding in iframes. If you see a blank iframe or an error, use the "Open in new tab" button — the page will then handle launching the Roblox player.
        </p>

        <div id="robloxFrameWrap" style="margin-top:12px; display:none;">
          <iframe id="robloxFrame" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"></iframe>
        </div>
      </div>

      <div class="card">
        <strong>Fortnite / Epic Games</strong>
        <p class="muted">Fortnite is distributed by Epic Games and typically runs via a launcher or console — it is not embeddable in a web iframe.</p>
        <label for="fortniteUrl">(Optional) Epic / Fortnite URL</label>
        <input id="fortniteUrl" type="text" placeholder="https://www.epicgames.com/fortnite/en-US/home" />
        <div style="display:flex; gap:8px; margin-top:8px;">
          <button id="openFortnite" style="background:#ef4444">Open Fortnite / Epic page</button>
        </div>
        <p class="notice">
          Tip: visiting the Fortnite page in a new tab will show install/launcher instructions. There is no supported way to embed the running Fortnite game inside a web page.
        </p>
      </div>
    </div>
  </div>

  <script>
    const embedBtn = document.getElementById('embedRoblox');
    const openBtn = document.getElementById('openRoblox');
    const robloxUrlInput = document.getElementById('robloxUrl');
    const frameWrap = document.getElementById('robloxFrameWrap');
    const robloxFrame = document.getElementById('robloxFrame');

    const openFortniteBtn = document.getElementById('openFortnite');
    const fortniteUrlInput = document.getElementById('fortniteUrl');

    // Helper: normalize urls by adding https if missing
    function normalizeUrl(u){
      if(!u) return '';
      try{
        const parsed = new URL(u, window.location.href);
        return parsed.href;
      }catch(e){
        return u.startsWith('http') ? u : 'https://' + u;
      }
    }

    embedBtn.addEventListener('click', () => {
      const url = normalizeUrl(robloxUrlInput.value.trim());
      if(!url){
        alert('Paste the Roblox game URL into the input first.');
        return;
      }
      // Show iframe and try to load the roblox page. Most likely the site will block this.
      robloxFrame.src = url;
      frameWrap.style.display = 'block';

      // quick visual hint: if iframe fails (blank), user should open in new tab
      setTimeout(() => {
        try {
          // trying to read contentDocument will often throw if cross-origin or blocked
          const doc = robloxFrame.contentDocument;
          // if contentDocument exists but seems empty, warn
          if (!doc || doc.body.innerHTML.trim() === '') {
            console.warn('Iframe looks empty — site may block embedding.');
          }
        } catch (err) {
          // cross-origin or blocked - nothing to do here
          console.log('Cannot access iframe contents (expected for cross-origin). If it appears blank, open in new tab.');
        }
      }, 1200);
    });

    openBtn.addEventListener('click', () => {
      const url = normalizeUrl(robloxUrlInput.value.trim());
      if(!url){
        alert('Paste the Roblox game URL into the input first.');
        return;
      }
      // Open in a new tab/window so the site can handle launching the player
      window.open(url, '_blank', 'noopener');
    });

    openFortniteBtn.addEventListener('click', () => {
      const url = normalizeUrl(fortniteUrlInput.value.trim() || 'https://www.epicgames.com/fortnite/en-US/home');
      window.open(url, '_blank', 'noopener');
    });

    // example: pre-fill with common placeholders
    robloxUrlInput.value = 'https://www.roblox.com/games/YOUR_GAME_ID/Your-Game-Name';
    fortniteUrlInput.value = 'https://www.epicgames.com/fortnite/en-US/home';
  </script>
</body>
</html>
DEV Community

im making a Fortnite/roblox game

Top comments (0)
