<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="cleartype" content="on"> <meta name="HandheldFriendly" content="True"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="theme-color" content="white"/> <meta name="defaultLanguage" content="ru"> <link rel="icon" href="../favicon.svg"/> <link rel="apple-touch-icon" href="../logo192.png"/> <title>Code Scoring</title> <style> body { width: 100vw; height: 100vh; padding: 0; margin: 0; border: none; overflow: hidden; } header { width: 100vw; height: 40px; background-color: #001529; background-image: url(./jira/header.png); background-position: top left; background-size: auto 100%; background-repeat: no-repeat; } main { width: 100vw; height: calc(100vh - 40px); overflow: hidden; white-space: nowrap; } aside { display: inline-block; width: 220px; height: 100%; vertical-align: top; background-color: #001529; background-image: url(./jira/sidebar.png); background-position: top left; background-size: 100% auto; background-repeat: no-repeat; } iframe { display: inline-block; width: calc(100vw - 220px); height: 100%; padding: 0; margin: 0; border: none; overflow: hidden; vertical-align: top; } </style> </head> <body> <header id="header"></header> <main id="main"> <aside id="sidebar"></aside><iframe id="frame" width="100%" height="100%" src="/demo/?dump=./test.txt&theme=./themes/white.css" ></iframe> </main> <script> function getParametersFromString(text) { return Object.fromEntries((text || '') .substring(1, Infinity) .split('&') .map((token) => token.split('='))); } function getParametersFromURL() { const parameters = { ...getParametersFromString(location.search), ...getParametersFromString(location.hash), }; delete parameters['']; return parameters; } function getStyleById(id) { return document.getElementById(id).style; } function init() { const parameters = getParametersFromURL(); const sidebar = getStyleById('sidebar'); const header = getStyleById('header'); if (parameters.sidebarImage) { sidebar.backgroundImage = `url(${parameters.sidebarImage})`; } if (parameters.sidebarColor) { sidebar.backgroundColor = `#${parameters.sidebarColor}`; } if (parameters.width) { sidebar.width = `${parameters.width}px`; getStyleById('frame').width = `calc(100vw - ${parameters.width}px)`; } if (parameters.headerImage) { header.backgroundImage = `url(${parameters.headerImage})`; } if (parameters.headerColor) { header.backgroundColor = `#${parameters.headerColor}`; } if (parameters.height) { header.height = `${parameters.height}px`; getStyleById('main').height = `calc(100vh - ${parameters.height}px)`; } if (parameters.title) { document.title = parameters.title; } } init(); </script> </body> </html>