Merge pull request 'Initial commit woupsi' (#25) from sageTheDm/freeftf:pages into pages
Reviewed-on: https://codeberg.org/Patrick_Pluto/freeftf/pulls/25
This commit is contained in:
Patrick
commit
8b21bd92b8
9 changed files with 376 additions and 0 deletions
19
download.html
Normal file
19
download.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="header.js" type="text/javascript" defer></script>
|
||||
<script src="footer.js" type="text/javascript" defer></script>
|
||||
<script src="downloadList.js" type="text/javascript" defer></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>FreeFTF</title>
|
||||
</head>
|
||||
<body>
|
||||
<header-component></header-component>
|
||||
<article>
|
||||
<!-- The download links will be generated here by downloadList.js -->
|
||||
</article>
|
||||
<footer-component></footer-component>
|
||||
</body>
|
||||
</html>
|
||||
50
downloadList.js
Normal file
50
downloadList.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
// Define the download options for different platforms
|
||||
const downloadData = {
|
||||
"Linux": {
|
||||
"arm32": "link-to-linux-arm32-download",
|
||||
"arm64": "link-to-linux-arm64-download",
|
||||
"x86_32": "link-to-linux-x86-32-download",
|
||||
"x86_64": "link-to-linux-x86-64-download"
|
||||
},
|
||||
"Windows": {
|
||||
"x86_64": "link-to-windows-x86-64-download",
|
||||
"arm64": "link-to-windows-arm64-download"
|
||||
},
|
||||
"macOS": {
|
||||
"Universal Binary": "link-to-macos-universal-binary-download"
|
||||
}
|
||||
};
|
||||
|
||||
// Function to create download links
|
||||
function generateDownloadList(downloadData) {
|
||||
const articleElement = document.querySelector('article');
|
||||
|
||||
for (let platform in downloadData) {
|
||||
// Create platform heading
|
||||
const platformHeading = document.createElement('h2');
|
||||
platformHeading.textContent = platform;
|
||||
articleElement.appendChild(platformHeading);
|
||||
|
||||
// Create list for the platform downloads
|
||||
const ulElement = document.createElement('ul');
|
||||
const downloads = downloadData[platform];
|
||||
|
||||
for (let version in downloads) {
|
||||
const liElement = document.createElement('li');
|
||||
const linkElement = document.createElement('a');
|
||||
linkElement.href = downloads[version];
|
||||
linkElement.textContent = version;
|
||||
linkElement.setAttribute('download', version); // Optional: prompts the download
|
||||
|
||||
liElement.appendChild(linkElement);
|
||||
ulElement.appendChild(liElement);
|
||||
}
|
||||
|
||||
articleElement.appendChild(ulElement);
|
||||
}
|
||||
}
|
||||
|
||||
// Run the function to populate the download list on page load
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
generateDownloadList(downloadData);
|
||||
});
|
||||
19
footer.js
Normal file
19
footer.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
class Footer extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<center>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>2024 FreeFTF | Designed by Squadi the Viking</p>
|
||||
</div>
|
||||
</footer>
|
||||
</center>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('footer-component', Footer);
|
||||
16
game.js
Normal file
16
game.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
class Game extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<h1>The Game</h1>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque velit repellat incidunt similique! Error officiis, animi distinctio dolorem at sint. Et assumenda quidem cupiditate aperiam rem dolor autem neque accusantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum voluptatum amet pariatur. Dolore laborum autem obcaecati laboriosam ipsum illum aperiam quibusdam aliquam veniam iure ducimus reprehenderit, quidem exercitationem corrupti iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt architecto voluptatem ut rerum. Perferendis, neque doloremque. Et placeat animi suscipit reiciendis impedit, sit dignissimos numquam distinctio temporibus consectetur minus soluta.
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('game-component', Game);
|
||||
21
header.js
Normal file
21
header.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
class Header extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<div><a href="index.html" class="project-name">FreeFTF</a></div>
|
||||
<ul>
|
||||
<li><a href="license.html">License</a></li>
|
||||
<li><a href="download.html">Download</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('header-component', Header);
|
||||
20
index.html
Normal file
20
index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="header.js" type="text/javascript" defer></script>
|
||||
<script src="footer.js" type="text/javascript" defer></script>
|
||||
<script src="game.js" type="text/javascript" defer></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>FreeFTF</title>
|
||||
</head>
|
||||
<body>
|
||||
<header-component></header-component>
|
||||
<article>
|
||||
<game-component></game-component>
|
||||
</article>
|
||||
<footer-component></footer-component>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
license.html
Normal file
20
license.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="header.js" type="text/javascript" defer></script>
|
||||
<script src="footer.js" type="text/javascript" defer></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>FreeFTF</title>
|
||||
</head>
|
||||
<body>
|
||||
<header-component></header-component>
|
||||
<article>
|
||||
<h1>The License</h1>
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque velit repellat incidunt similique! Error officiis, animi distinctio dolorem at sint. Et assumenda quidem cupiditate aperiam rem dolor autem neque accusantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum voluptatum amet pariatur. Dolore laborum autem obcaecati laboriosam ipsum illum aperiam quibusdam aliquam veniam iure ducimus reprehenderit, quidem exercitationem corrupti iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt architecto voluptatem ut rerum. Perferendis, neque doloremque. Et placeat animi suscipit reiciendis impedit, sit dignissimos numquam distinctio temporibus consectetur minus soluta.</p>
|
||||
</article>
|
||||
<footer-component></footer-component>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
license.js
Normal file
0
license.js
Normal file
211
styles.css
Normal file
211
styles.css
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
/* Browser reset */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Body styling */
|
||||
body {
|
||||
background-color: #353d51;
|
||||
color: #f1f1f1;
|
||||
font-family: 'Arial', sans-serif;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
header {
|
||||
background-color: #222732;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
margin: auto;
|
||||
margin-bottom: 10em;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
text-decoration: none;
|
||||
color: #f1f1f1;
|
||||
font-weight: bold;
|
||||
padding: 5px 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
header ul li a:hover {
|
||||
background-color: #353d51;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 1.5em;
|
||||
color: #f1f1f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-name:hover {
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
/* Article styling */
|
||||
article {
|
||||
max-width: 800px;
|
||||
margin: 6.25em auto;
|
||||
padding: 20px;
|
||||
background-color: #444b5e;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
article p {
|
||||
hyphens: auto;
|
||||
color: #f1f1f1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Download list styling */
|
||||
article h2 {
|
||||
font-size: 1.8em;
|
||||
color: #ffcc00;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style-type: none; /* Remove bullet points */
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
background-color: #353d51;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
article ul li a {
|
||||
text-decoration: none;
|
||||
color: #ffcc00;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article ul li:hover {
|
||||
background-color: #2c3447;
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
background-color: #222732;
|
||||
padding: 10px 20px;
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
/* Header */
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
header ul {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
display: block; /* Ensure list items stack vertically */
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Article */
|
||||
article {
|
||||
margin: 12em 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 1.8em; /* Adjust font size for smaller screens */
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
article ul {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
font-size: 1em;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article ul li a {
|
||||
font-size: 1em; /* Ensure links are readable */
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 10px 15px; /* Adjust padding for smaller screens */
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
font-size: 0.9em; /* Ensure footer text is readable but not oversized */
|
||||
}
|
||||
|
||||
/* Project Name */
|
||||
.project-name {
|
||||
font-size: 1.2em; /* Slightly smaller project name font size for smaller screens */
|
||||
margin-bottom: 10px; /* Adjust spacing below project name */
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue