Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
12 kB
1
Indexable
Never
<!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>