Skip to content

Changed to windows 7 UI #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BouncyMustard wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Changed to windows 7 UI #6

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9bca558
Changed to Windows 7 UI
BouncyMustard Jun 28, 2025
0155d94
Changed to windows 7 ui
BouncyMustard Jun 28, 2025
2b25cb5
fix conflicts
yoper12 Jun 28, 2025
cd61348
fix
BouncyMustard Jun 28, 2025
6ac765e
fix2
BouncyMustard Jun 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
275 changes: 250 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,210 @@
<!DOCTYPE html>
<html lang="pl">

<head>
<<<<<<< HEAD
Comment thread
yoper12 marked this conversation as resolved.
Outdated
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gayming Technology Network</title>
<link rel="stylesheet" href="https://unpkg.com/7.css" />
<link
rel="icon"
type="image/png"
href="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png"
/>

=======
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gayming Technology Network</title>
<link rel="stylesheet" href="https://cdn.puffercat.xyz/c/debil-css/pro.css">
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png">
<script src="https://cdn.puffercat.xyz/c/windows-update/gospodarz.js"></script>
>>>>>>> 6908487aedcdbaee77ecd700bb77556183837246
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
background-color: #121212;
background-image: url("https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png");

Copilot AI Jun 28, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Consider moving inline style declarations (like this background-image) into an external stylesheet for better separation of concerns and maintainability.

Copilot uses AI. Check for mistakes.
background-repeat: repeat;
background-size: 100px auto;
}
</style>
</head>

main {
flex-direction: column;
height: 100dvh;
}
<body>
<<<<<<< HEAD
<div class="window glass active" style="max-width: 800px">
<div class="title-bar">
<div class="title-bar-text">Gayming Technology Network</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body has-space">
<menu role="tablist" aria-label="Window with Tabs">
<button role="tab" aria-controls="about" aria-selected="true">
About Us
</button>
<button role="tab" aria-controls="logo">Our Logo</button>
<button role="tab" aria-controls="filmik">Filmik popisowy</button>
</menu>
<article role="tabpanel" id="about">
Gayming Technology Network is a new, groundbreaking game development
studio that keeps up with trends and gamer needs. The studio's
productions will have high standard very good for average gamers. A
hunter-type game, after its official release, will rank among the most
played games due to its uniqueness and advanced mechanics, which
remain a mystery to everyone (even the creator). There is no other
project as grand as this one, destined to be loved by millions, or
even billions, of people.
=======
<main class="wyswietlacz-elastyczny">
<div class="wyswietlacz-elastyczny">
<div class="czcionka-nie-ma-szeryfa czcionka-niemale kolor-biale kafel" style="min-height: 50dvh; align-items: stretch;">
Gayming Technology Network is a new, groundbreaking game development studio that keeps up with trends and gamer
needs. The studio's productions will have high standard very good for average gamers. A hunter-type game,
after
its official release, will rank among the most played games due to its uniqueness and advanced mechanics,
which
remain a mystery to everyone (even the creator). There is no other project as grand as this one, destined to
be
loved by millions, or even billions, of people.
</div>
<img class="kafel" src="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png"
alt="GTN logo">
</div>
<iframe src="https://www.youtube-nocookie.com/embed/UgPdGWyvk1c" title="YouTube video player"
frameborder="0" class="kafel"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="no-referrer" allowfullscreen>
</iframe>
</main>
</body>
>>>>>>> 6908487aedcdbaee77ecd700bb77556183837246

.kafel {
border: 5px solid #575757;
margin: 10px;
border-radius: 10px;
padding: 5px;
}
<br />
<br />
<p>Development progress of Gra Typu Hunter</p>
<div role="progressbar" class="error">
<div style="width: 20%"></div>
</div>
<p>Development halted</p>
<br />
<br />
<p>Development progress of Gra Typu PreHunter</p>
<div role="progressbar" class="marquee"></div>

Copilot AI Jun 28, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the native element instead of a

with role="progressbar" can improve accessibility and built-in semantics.

Suggested change
<div role="progressbar" class="error">
<div style="width: 20%"></div>
</div>
<p>Development halted</p>
<br />
<br />
<p>Development progress of Gra Typu PreHunter</p>
<div role="progressbar" class="marquee"></div>
<progress class="error" value="20" max="100"></progress>
<p>Development halted</p>
<br />
<br />
<p>Development progress of Gra Typu PreHunter</p>
<progress class="marquee"></progress>

Copilot uses AI. Check for mistakes.
<p>Development scope not specified</p>
</article>

iframe {
flex: 1;
}
<article role="tabpanel" hidden id="logo">
<img
style="width: 100%"
src="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png"
/>
</article>

<article role="tabpanel" hidden id="filmik">
<p>
You create the content for each tab by using an
<code>article</code> tag.
</p>
<iframe
width="100%"
height="200"
src="https://www.youtube-nocookie.com/embed/UgPdGWyvk1c"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</article>
<section class="field-row" style="justify-content: flex-end">
<button class="default">OK</button>
<button>Cancel</button>
</section>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const tabs = document.querySelectorAll('[role="tab"]');
const tabPanels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach((tab) => {
tab.addEventListener("click", () => {
tabs.forEach((t) => t.setAttribute("aria-selected", "false"));
tabPanels.forEach((panel) => (panel.hidden = true));

img {
flex: 1;
width: 50%;
max-width: 50dvh;
tab.setAttribute("aria-selected", "true");
const tabId = tab.getAttribute("aria-controls");
const targetPanel = document.getElementById(tabId);
if (targetPanel) {
targetPanel.hidden = false;
}
});
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="pl">
<head>
<<<<<<< HEAD
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gayming Technology Network</title>
<link rel="stylesheet" href="https://unpkg.com/7.css" />
<link
rel="icon"
type="image/png"
href="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png"
/>

=======
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gayming Technology Network</title>
<link rel="stylesheet" href="https://cdn.puffercat.xyz/c/debil-css/pro.css">
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png">
<script src="https://cdn.puffercat.xyz/c/windows-update/gospodarz.js"></script>
>>>>>>> 6908487aedcdbaee77ecd700bb77556183837246
<style>
body {
background-image: url("https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png");
background-repeat: repeat;
background-size: 100px auto;
}
</style>
</head>

<body>
<<<<<<< HEAD
<div class="window glass active" style="max-width: 800px">
<div class="title-bar">
<div class="title-bar-text">Gayming Technology Network</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body has-space">
<menu role="tablist" aria-label="Window with Tabs">
<button role="tab" aria-controls="about" aria-selected="true">
About Us
</button>
<button role="tab" aria-controls="logo">Our Logo</button>
<button role="tab" aria-controls="filmik">Filmik popisowy</button>
</menu>
<article role="tabpanel" id="about">
Gayming Technology Network is a new, groundbreaking game development
studio that keeps up with trends and gamer needs. The studio's
productions will have high standard very good for average gamers. A
hunter-type game, after its official release, will rank among the most
played games due to its uniqueness and advanced mechanics, which
remain a mystery to everyone (even the creator). There is no other
project as grand as this one, destined to be loved by millions, or
even billions, of people.
=======
<main class="wyswietlacz-elastyczny">
<div class="wyswietlacz-elastyczny">
<div class="czcionka-nie-ma-szeryfa czcionka-niemale kolor-biale kafel" style="min-height: 50dvh; align-items: stretch;">
Expand All @@ -66,5 +227,69 @@
</iframe>
</main>
</body>
>>>>>>> 6908487aedcdbaee77ecd700bb77556183837246

<br />
<br />
<p>Development progress of Gra Typu Hunter</p>
<div role="progressbar" class="error">
<div style="width: 20%"></div>
</div>
<p>Development halted</p>
<br />
<br />
<p>Development progress of Gra Typu PreHunter</p>
<div role="progressbar" class="marquee"></div>
<p>Development scope not specified</p>
</article>

<article role="tabpanel" hidden id="logo">
<img
style="width: 100%"
src="https://raw.githubusercontent.com/GTN-Main/GTN-branding/refs/heads/main/GTN-logo-pride.png"
/>
</article>

<article role="tabpanel" hidden id="filmik">
<p>
You create the content for each tab by using an
<code>article</code> tag.
</p>
<iframe
width="100%"
height="200"
src="https://www.youtube-nocookie.com/embed/UgPdGWyvk1c"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</article>
<section class="field-row" style="justify-content: flex-end">
<button class="default">OK</button>
<button>Cancel</button>
</section>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const tabs = document.querySelectorAll('[role="tab"]');
const tabPanels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach((tab) => {
tab.addEventListener("click", () => {
tabs.forEach((t) => t.setAttribute("aria-selected", "false"));
tabPanels.forEach((panel) => (panel.hidden = true));

tab.setAttribute("aria-selected", "true");
const tabId = tab.getAttribute("aria-controls");
const targetPanel = document.getElementById(tabId);
if (targetPanel) {
targetPanel.hidden = false;
}
});
});
});
</script>
</body>
</html>