HTML Web - Posts - OneCompiler

Example heading with h2 size

Example heading with h3 size

Following is sample java code.

const newTitle = '<title>New Tab</title>';
const supportUTF = '<meta charset="UTF-8">';
const stylesheet = '<link rel="stylesheet" href="styles.css"/>';

const closeButton = `<button onclick="window.close()">Close window in case of emergency</button>`;
const urlInput = `<br><input type="text" id="textInput" placeholder="Put web here">`;
const keyInput = `<input type="text" id="keyToClose" placeholder="close key (default: >)" style="width: 520px;">`;
const confirmButton = `<input type="button" value="Confirm" onclick="createIframe()">`;

const sizeControls = `
  Custom height: <input type="text" id="customHeightText" placeholder="Height">
  <button id="applyCustomHeight">Apply</button>
  Width: <input type="text" id="customWidthText" placeholder="Width">
  <button id="applyCustomWidth">Apply</button>
`;

const dropdown = `
  <select id="domainOptions">
    <option value="">Select a domain option</option>
    <option value="none">Do not add anything</option>
    <option value="https://">Add https://---</option>
    <option value="www.">Add www.---</option>
    <option value=".io">Add ---.io</option>
    <option value=".org">Add ---.org</option>
    <option value=".edu">Add ---.edu</option>
  </select>
  <p>Don't include "https://" unless needed.</p>
`;

const disclaimer = `
  <p>DISCLAIMER: Some sites may block iframes. <button id="seeMore" style="background:none; border:none;">${String.fromCharCode(9654)}</button></p>
  <p id="moreText" style="display:none; margin-left:20px;"><i>Some sites restrict iframe use.</i></p>
`;

let newWindow;
let customHeight = 480;
let customWidth = 1250;

function openWindow() {
  if (newWindow && !newWindow.closed) {
    alert("Please don't open more than one tab.");
    return;
  }

  const fullHTML = `
    <html>
      <head>${newTitle}${supportUTF}${stylesheet}</head>
      <body>
        ${closeButton}
        ${urlInput}
        ${confirmButton}
        ${keyInput}
        ${dropdown}
        ${disclaimer}
        ${sizeControls}
        <script>
          let iframe;
          let customHeight = 480, customWidth = 1250;

          function concentateString(before, str, extra) {
            return before ? str + extra : extra + str;
          }

          function createIframe() {
            let url = document.getElementById('textInput').value.trim();
            const option = document.getElementById('domainOptions').value;

            switch(option) {
              case 'https://': url = concentateString(false, url, 'https://'); break;
              case 'www.': url = concentateString(false, url, 'www.'); break;
              case '.io': case '.org': case '.edu': url = concentateString(true, url, option); break;
              case 'none': case '': break;
              default: alert("Invalid option."); return;
            }

            if (!url.startsWith("http")) {
              alert("URL must start with http:// or https://");
              return;
            }

            if (iframe) iframe.remove();
            iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.width = customWidth;
            iframe.height = customHeight;
            iframe.sandbox = "allow-scripts allow-same-origin";
            document.body.appendChild(iframe);
          }

          document.addEventListener('keydown', e => {
            const key = (document.getElementById('keyToClose').value || '>').toLowerCase();
            if (document.activeElement.tagName !== "INPUT" && e.key.toLowerCase() === key) window.close();
          });

          const closedEmoji = String.fromCharCode(9660); // ▼
          const openEmoji = String.fromCharCode(9654);   // ▶
          
          document.getElementById('seeMore').onclick = () => {
            const more = document.getElementById('moreText');
            const btn = document.getElementById('seeMore');
            const showing = more.style.display === 'block';
            more.style.display = showing ? 'none' : 'block';
            btn.textContent = showing ? openEmoji : closedEmoji;
            if (iframe) iframe.height = showing ? customHeight : (customHeight - 30);
          };

          document.getElementById('applyCustomHeight').onclick = () => {
            const val = Number(document.getElementById('customHeightText').value);
            if (iframe && !isNaN(val)) {
              customHeight = val;
              iframe.height = val;
            } else alert("Create iframe first.");
          };

          document.getElementById('applyCustomWidth').onclick = () => {
            const val = Number(document.getElementById('customWidthText').value);
            if (iframe && !isNaN(val)) {
              customWidth = val;
              iframe.width = val;
            } else alert("Create iframe first.");
          };
        <\/script>
      </body>
    </html>
  `;

  newWindow = window.open();
  newWindow.document.write(fullHTML);
  newWindow.document.close();
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <script src="script.js"></script>
    <button class="custom" onclick="openWindow()">Click me in case the window did not open</button>
  </body>
</html>

body{
  padding: 25px;
  font-family: Sans-Serif;
}
.title {
	color: #5C6AC4;
}
.custom {
  background-color: #4CAF50; /* Green background */
  color: white; /* White text */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Add padding */
  font-size: 16px; /* Adjust font size */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.custom:hover {
  background-color: #45a049; /* Darker green on hover */
}

.custom:active {
  background-color: #3e8e41; /* Even darker green when clicked */
  transform: scale(0.98); /* Slightly shrink on click */
}

.custom:focus {
  outline: 2px solid #80d4a8; /* Add focus outline for accessibility */
}