Untitled
unknown
plain_text
2 years ago
12 kB
2
Indexable
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Compiler</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar">
<ul class="dropdown">
<li class="dropdown-item">
<a id="light" href="#">Light</a>
</li>
<li class="dropdown-item">
<a id="dark" href="#">Dark</a>
</li>
</ul>
</nav>
<script>
const darkButton = document.getElementById("dark");
const lightButton = document.getElementById("light");
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.body.setAttribute("data-theme", currentTheme);
}
function removeActive() {
for (const button of [darkButton, lightButton]) {
button.classList.remove("active-theme");
}
}
function openTab(tabName) {
const tabcontent = document.getElementsByClassName("tabcontent");
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
const tablinks = document.getElementsByClassName("tablinks");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
event.currentTarget.classList.add("active");
}
darkButton.onclick = () => {
document.body.setAttribute("data-theme", "dark");
removeActive();
darkButton.classList.add("active-theme");
localStorage.setItem("theme", "dark");
};
lightButton.onclick = () => {
document.body.setAttribute("data-theme", "light");
removeActive();
lightButton.classList.add("active-theme");
localStorage.setItem("theme", "light");
};
</script>
<div class="grid-container">
<nav class="menu">
Menu
<button class="menu-item">Plik</button>
<button class="menu-item">Edycja</button>
<button class="menu-item">Opcja</button>
<button class="menu-item">Dodatkowo</button>
</nav>
<nav class="files">
<ul>
<li>
<span class="caret">Folder 1</span>
<ul class="nested">
<li>Plik 1.1</li>
<li>Plik 1.2</li>
<li>Plik 1.3</li>
</ul>
</li>
<li>
<span class="caret">Folder 2</span>
<ul class="nested">
<li>
<span class="caret">Podfolder 2.1</span>
<ul class="nested">
<li>Plik 2.1.1</li>
<li>Plik 2.1.2</li>
</ul>
</li>
<li>Plik 2.2</li>
</ul>
</li>
</ul>
</nav>
<nav class="text">
<p>Tutaj będzie tekst programu</p>
</nav>
<div class="code">
<pre>
<code class="language-c">
Code...
</code>
</pre>
</div>
<div class="tabs">
<button class="tablinks" onclick="openTab('tab1')" data-tab="tab1">Wybór procesora</button>
<button class="tablinks" onclick="openTab('tab2')" data-tab="tab2">Opcje zależne od procesora</button>
<button class="tablinks" onclick="openTab('tab3')" data-tab="tab3">Standard kodu źródłowego</button>
<button class="tablinks" onclick="openTab('tab4')" data-tab="tab4">Opcje generowania kodu</button>
</div>
<div id="tab1" class="tabcontent">
<h3>Wybór procesora</h3>
<label for="processor">Procesor:</label>
<select id="processor" name="processor">
<option value="processor1">Procesor 1</option>
<option value="processor2">Procesor 2</option>
<option value="processor3">Procesor 3</option>
</select>
</div>
<div id="tab2" class="tabcontent">
<h3>Opcje zależne od procesora</h3>
<label for="option1">Opcja 1:</label>
<input
type="checkbox"
id="option1"
name="option1"
value="option1"
>
<label for="option2">Opcja 2:</label>
<input
type="checkbox"
id="option2"
name="option2"
value="option2"
>
</div>
<div id="tab3" class="tabcontent">
<h3>Standard kodu źródłowego</h3>
<label for="standard">Standard:</label>
<select id="standard" name="standard">
<option value="c99">C99</option>
<option value="c11">C11</option>
</select>
</div>
<div id="tab4" class="tabcontent">
<h3>Opcje generowania kodu</h3>
<label for="external-stack">Stos zewnętrzny:</label>
<input
type="checkbox"
id="external-stack"
name="external-stack"
value="external-stack"
>
<label for="profiling-data">Dane profilowania:</label>
<input
type="checkbox"
id="profiling-data"
name="profiling-data"
value="profiling-data"
>
</div>
</div>
</body>
<style>
:root {
--black: #050505;
--white: #ffffff;
--gray: #444;
--light_gray: #dadada;
--light_gray2: #9f9f9f;
--light_gray3: rgb(110, 109, 109)
--peach: rgb(220, 148, 121);
--light_pink: #a9828d;
--pink: rgb(179, 0, 155);
--pink2: rgb(184, 97, 97);
--pink3: rgb(174, 89, 89);
--pink4: rgb(170, 88, 88);
--light_blue: rgb(189, 220, 248);
--light_blue2: rgb(59, 94, 124);
--light_violet: rgb(82, 89, 216);
--light_violet2: rgba(60, 66, 175, 0.792);
--blue_violet: rgb(27, 33, 152);
--blue: rgb(0, 65, 89);
--dark_blue: rgb(0, 55, 95);
--very_dark_blue: rgb(5, 5, 32);
/* Page background*/
--bg: var(--light_pink);
/* Files section's colours */
--file_bg: var(--light_blue);
--file_text: var(--blue);
--file_squares: var(--pink);
/* Menu section's colours */
--menu_bg: var(--pink2);
--menu_text: var(--dark_blue);
--menu_item_bg: var(--pink4);
--menu_item_border: var(--pink3);
--menu_item_text: var(--black);
/* Code section's colours */
--code_bg: bisque;
--code_text: var(--black);
/* Tabs section's colours */
--tabs_bg: var(--gray);
--button_tablinks_bg: var(--light_gray2);
--buttons: var(--light_gray);
--tabcontent_bg: var(--white);
/* Program text srction's colours */
--text_bg: var(--peach);
--text_color: var(--black);
--theme_changing_butt: var(--very_dark_blue);
}
body {
background-color: var(--bg);
width: 100%;
height: 100%;
}
/* Buttons for changing theme color */
#light, #dark {
color: var(--theme_changing_butt);
}
/* Menu section */
.menu {
background-color: var(--menu_bg);
color: var(--menu_text);
grid-column: 1/6;
grid-row: 1;
text-align: center;
overflow: hidden;
}
.menu-item {
border-color: var(--menu_item_border);
color: var(--menu_item_text);
cursor: pointer;
height: 100%;
background-color: var(--menu_item_bg);
margin-left: 5%;
overflow: hidden;
}
.text {
color: var(--text_color);
grid-row: 3/6;
grid-column: 5;
background-color: var(--text_bg);
text-align: center;
overflow: scroll;
font-size: small;
}
/* Code section */
.code {
background-color: var(--code_bg);
color: var(--code_text);
grid-column: 3/4;
grid-row: 3/6;
overflow: scroll;
font-size: small;
}
/* Tabs section */
.tabs {
background-color: var(--tabs_bg);
grid-row: 5/7;
grid-column: 3/6;
overflow: hidden;
}
.tablinks {
background-color: var(--button_tablinks_bg);
cursor: pointer;
height: 100%;
/* width: 15%; */
color: var(--code_text);
}
.tabcontent {
text-align: center;
background-color: var(--tabcontent_bg);
height: 120%;
grid-row: 7;
grid-column: 3/6;
font-size: medium;
}
input[type="checkbox"]:checked~.tabcontent {
display: block;
}
/* Files section */
.files {
background-color: var(--file_bg);
grid-column: 1;
grid-row: 3/7;
overflow: hidden;
font-size: small;
}
ul {
list-style: square;
color: var(--file_text);
}
li::marker {
color: var(--file_squares);
}
/* Grid */
.grid-container {
display: grid;
grid-row-gap: 10px;
grid-template-rows: 14% 1% 70% 3% 12%;
grid-template-columns: 25% 5% 40% 5% 25%;
}
[data-theme="dark"] {
/* Page background*/
--bg: var(--black);
/* Files section's colours */
--file_bg: var(--light_blue2);
--file_text: var(--light_blue);
--file_squares: var(--pink2);
/* Menu section's colours */
--menu_bg: var(--light_violet);
--menu_text: var(--white);
--menu_item_bg: var(--light_violet2);
--menu_item_border: var(--blue_violet);
--menu_item_text: var(--white);
/* Code section's colours */
--code_bg: rgb(55, 49, 96);
--code_text: var(--white);
/* Tabs section's colours */
--tabs_bg: var(--gray);
--button_tablinks_bg: var(--gray);
--buttons: var(--light_gray3);
--tabcontent_bg: var(--white);
/* Program text srction's colours */
--text_bg: rgba(13, 42, 70, 0.829);
--text_color: var(--white);
--theme_changing_butt: var(--white);
}
@media (min-width: 375px) and (max-width: 812px) {
/* Adjust the layout of the navbar */
.navbar {
flex-direction: column;
align-items: center;
}
.dropdown {
display: flex;
flex-direction: column;
align-items: center;
}
.dropdown-item {
margin: 0.5rem;
font-size: 0.6rem;
}
/* Reduce the font size of the menu items */
.menu {
font-size: 0.8rem;
}
.menu-item {
font-size: 0.4rem;
margin-left: 5%;
width: 14%;
}
/* Adjust the layout of the files section */
.nested {
display: none;
}
.caret {
display: block;
font-size: 0.5rem;
}
.caret::before {
content: "\25B6";
display: inline-block;
margin-right: 5px;
transform: rotate(90deg);
transition: transform 0.2s ease-out;
}
.caret-down::before {
transform: rotate(0);
}
/* Reduce the font size of the text and code sections */
.text, .code {
font-size: 0.5rem;
}
.tabs {
grid-column: 1/6;
margin-right: 0rem;
margin-left: 0rem;
height: 95%;
font-size: 20%;
}
.tablinks {
grid-column: 1/6;
margin-right: 0rem;
margin-left: 1rem;
width: 4.5rem;
font-size: 0.3rem;
}
.tabcontent {
grid-column: 1/6;
font-size: 0.3rem;
}
.files {
overflow: scroll;
grid-row: 3/5;
}
.grid-container {
grid-row-gap: 6px;
}
#light, #dark {
font-size: 0.4rem;
}
}
</style>
</html>
Editor is loading...