MMPC/MapMakersAndProgrammers.github.io
3
0
Fork 0
mirror of https://github.com/MapMakersAndProgrammers/MapMakersAndProgrammers.github.io.git synced 2025-10-26 01:49:06 -07:00
Code Issues Packages Projects Releases Wiki Activity

remake

Browse Source 
no longer trying to make it look like the tanki main menu
This commit is contained in:
Currency
2024-12-12 13:18:22 +01:00
parent 5668babc44
commit 9e4933aad9
5 changed files with 438 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
archives.html
View File

@@ -3,124 +3,89 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Archives</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #1a1a1a;
font-family: Arial, sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.title {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFD700;
}
.back-button {
font-size: 1em;
color: #fff;
background-color: #444;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s;
}
.back-button:hover {
background-color: #666;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: 300px;
gap: 20px;
padding: 20px;
scroll-snap-type: x mandatory;
width: 100%;
place-items: center; /* Center align incomplete rows */
}
.box {
background-color: #2c2f36;
border-radius: 10px;
display: flex;
align-items: start; /* Align items to the top */
justify-content: center; /* Center text horizontally */
text-align: center;
color: #fff;
scroll-snap-align: start;
padding: 15px;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
background-size: cover;
background-position: center;
width: 100%; /* Makes the box occupy full grid cell */
height: 300px; /* Sets the box height */
}
.box .title {
font-size: 1em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.7); /* Dark overlay for text readability */
padding: 5px 10px;
border-radius: 5px;
position: absolute;
top: 10px; /* Positions title at the top of the box */
left: 50%;
transform: translateX(-50%); /* Centers title horizontally */
}
/* Hover Effect */
.box:hover {
transform: translateY(-10px);
box-shadow: 0 8px 15px rgba(0, 255, 127, 0.5);
background-color: #3a3f4b;
}
</style>
<title>Archives - Map Makers & Programmers</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="noise-overlay"></div>
<div class="title">Archives</div>
<button class="back-button" onclick="window.location.href='index.html'">Back</button>
<div class="overlay">
<div class="page-header">
<a href="index.html" class="back-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6" />
</svg>
Back
</a>
<h1 class="page-title">Archives</h1>
</div>
<div class="container">
<a href="https://github.com/MapMakersAndProgrammers/tanki-xml-maps" class="box" style="background-image: url('assets/xml.png');">
<div class="title">XML format maps</div>
<main class="archives-content">
<div class="archives-grid">
<a href="https://github.com/MapMakersAndProgrammers/tanki-xml-maps" class="archive-box" target="_blank" style="background-image: url('assets/xml.png');">
<div class="archive-overlay">
<h2>XML Format Maps</h2>
<p>Archive of XML format maps</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/tanki-json-maps" class="box" style="background-image: url('assets/json.png');">
<div class="title">JSON format maps</div>
<a href="https://github.com/MapMakersAndProgrammers/tanki-json-maps" class="archive-box" target="_blank" style="background-image: url('assets/json.png');">
<div class="archive-overlay">
<h2>JSON Format Maps</h2>
<p>Archive of JSON format maps</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/tanki-bin-maps" class="box" style="background-image: url('assets/bin.png');">
<div class="title">BIN format maps</div>
<a href="https://github.com/MapMakersAndProgrammers/tanki-bin-maps" class="archive-box" target="_blank" style="background-image: url('assets/bin.png');">
<div class="archive-overlay">
<h2>BIN Format Maps</h2>
<p>Archive of BIN format maps</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/tanki-prop-libraries" class="box" style="background-image: url('assets/proplibrary.png');">
<div class="title">Prop Libraries</div>
<a href="https://github.com/MapMakersAndProgrammers/tanki-prop-libraries" class="archive-box" target="_blank" style="background-image: url('assets/proplibrary.png');">
<div class="archive-overlay">
<h2>Prop Libraries</h2>
<p>Archive of TO prop libraries</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/tanki-model-archive" class="box" style="background-image: url('assets/tankimodels.png');">
<div class="title">Tanki models</div>
<a href="https://github.com/MapMakersAndProgrammers/tanki-model-archive" class="archive-box" target="_blank" style="background-image: url('assets/tankimodels.png');">
<div class="archive-overlay">
<h2>Tanki Models</h2>
<p>Archive of TO models</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/alternativa3d-archive" class="box" style="background-image: url('assets/a3d.png');">
<div class="title">Alternativa3D versions</div>
<a href="https://github.com/MapMakersAndProgrammers/alternativa3d-archive" class="archive-box" target="_blank" style="background-image: url('assets/a3d.png');">
<div class="archive-overlay">
<h2>Alternativa3D Versions</h2>
<p>Archive of various version of Alternativa3D</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/alternativaphysics-archive" class="box" style="background-image: url('assets/ap.png');">
<div class="title">AlternativaPhysics versions</div>
<a href="https://github.com/MapMakersAndProgrammers/alternativaphysics-archive" class="archive-box" target="_blank" style="background-image: url('assets/ap.png');">
<div class="archive-overlay">
<h2>AlternativaPhysics Versions</h2>
<p>Archive of various versions of AlternativaPhysics</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
</div>
</main>
<footer class="site-footer">
<div class="footer-content">
<p>&copy; 2024 Map Makers & Programmers. A few rights reserved...</p>
</div>
</footer>
</div>
</body>
</html>

381
css/styles.css
View File

@@ -1,22 +1,25 @@
/* Reset CSS */
:root {
--primary-color: #00ff00;
--secondary-color: #101820;
--accent-color: #4b5d67;
--text-color: #ffffff;
--gradient-start: rgba(16, 24, 32, 0.9);
--gradient-end: rgba(16, 24, 32, 0.7);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #101820; /* Fallback for non-video support */
font-family: 'Inter', sans-serif;
background-color: var(--secondary-color);
color: var(--text-color);
line-height: 1.6;
}
/* Background Video Styling */
#background-video {
position: fixed;
top: 0;
@@ -25,175 +28,269 @@ body {
height: 100vh;
object-fit: cover;
z-index: -1;
filter: brightness(0.4);
}
/* Overlay Content */
.overlay {
width: 100%;
height: 100%;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
flex-grow: 1;
padding: 20px;
}
/* Header Bar Styling */
.header-bar {
.centered-navigation {
width: 100%;
height: 80px;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
border-bottom: 1px solid #333333;
position: fixed;
top: 0;
z-index: 1;
justify-content: center;
margin: 50px 0;
}
.title {
position: fixed;
top: 20px; /* Adjusts how far from the top you want it */
left: 50%;
transform: translateX(-50%);
font-size: 20px;
font-weight: bold;
color: #00ff00;
text-align: center;
z-index: 2; /* Keeps it above other elements */
}
/* Profile Info Styling */
.profile-info {
.main-navigation {
display: flex;
align-items: center;
gap: 40px;
}
.star-icon {
width: 40px;
height: 40px;
margin-right: 10px;
}
.username {
font-weight: bold;
margin-right: 10px;
color: #00ff00;
cursor: pointer;
}
/* XP Bar Styling */
.xp-bar {
position: relative;
width: 150px;
height: 10px;
background-color: #333333;
border-radius: 5px;
overflow: hidden;
margin-right: 10px;
}
.xp-fill {
height: 100%;
width: 90%; /* Adjusted to represent 903,388 / 1,000,000 */
background-color: #00ff00;
}
.xp-text {
font-size: 12px;
color: #bbbbbb;
}
/* Currency Info Styling */
.currency-info {
display: flex;
align-items: center;
}
.currency {
display: flex;
align-items: center;
margin-left: 20px;
font-size: 14px;
}
.currency-icon {
width: 15px;
height: 15px;
margin-right: 5px;
}
/* Content Styling */
.content {
display: flex;
justify-content: flex-start;
align-items: center;
height: calc(100vh - 80px);
width: 100%;
padding-top: 80px;
}
/* Menu Container Styling */
.menu-container {
.nav-button {
display: flex;
flex-direction: column;
width: 300px;
padding-left: 50px;
align-items: center;
text-decoration: none;
color: var(--text-color);
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
padding: 20px;
border-radius: 12px;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
/* Discord Button Styling */
.discord-button {
display: block;
width: 100%;
padding: 15px;
background-color: #00ff00;
color: #000000;
font-size: 18px;
font-weight: bold;
.nav-button:hover {
background-color: rgba(75, 93, 103, 0.3);
transform: scale(1.05);
}
.button-icon {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.main-title {
font-family: 'Space Grotesk', sans-serif;
text-align: center;
font-size: 3.5rem;
color: var(--primary-color);
margin: 80px 0 50px;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}
.cta-section {
margin-top: 50px;
}
.discord-button {
display: inline-block;
text-decoration: none;
border-radius: 5px;
margin-bottom: 20px;
transition: background-color 0.3s;
font-family: 'Space Grotesk', sans-serif;
font-weight: bold;
color: var(--secondary-color);
background-color: var(--primary-color);
padding: 15px 30px;
border-radius: 10px;
transition: all 0.3s ease;
text-transform: uppercase;
}
.discord-button:hover {
background-color: #32ff32;
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}
/* Menu Styling */
.menu {
list-style: none;
width: 100%;
.site-footer {
margin-top: auto;
padding: 20px;
text-align: center;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
display: flex; /* Enables flexbox */
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
}
.menu li {
margin: 15px 0;
.footer-content {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
margin: 0;
padding: 0;
}
.menu a {
.social-links {
display: flex;
gap: 20px;
}
.social-icon {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
@media (max-width: 1024px) {
.main-navigation {
flex-direction: column;
align-items: center;
gap: 20px;
}
.main-title {
font-size: 2.5rem;
}
}
.page-header {
display: flex;
align-items: center;
padding: 15px;
background-color: #1b1e22;
color: #ffffff;
font-size: 18px;
font-weight: bold;
text-align: left;
padding: 20px 5%;
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.5));
}
.back-button {
display: flex;
align-items: center;
color: var(--text-color);
text-decoration: none;
border-left: 6px solid #4b5d67;
transition: background-color 0.3s;
font-family: 'Space Grotesk', sans-serif;
gap: 10px;
transition: color 0.3s ease;
}
.menu a:hover {
background-color: #2c3137;
.back-button:hover {
color: var(--primary-color);
}
.button-icon {
width: 40px;
height: 40px;
margin-right: 20px;
.back-button svg {
stroke: currentColor;
}
.page-title {
flex-grow: 1;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
.archives-grid,
.tools-grid,
.misc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 50px 5%;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.archive-box,
.tool-box,
.misc-box {
position: relative;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-color: rgba(75, 93, 103, 0.2);
border: 2px solid var(--accent-color);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.archive-box:hover,
.tool-box:hover,
.misc-box:hover {
border-color: var(--primary-color);
box-shadow: 0 10px 30px rgba(0, 255, 0, 0.2);
transform: scale(1.03);
}
.archive-overlay,
.tool-overlay,
.misc-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.3));
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.archive-box:hover .archive-overlay,
.tool-box:hover .tool-overlay,
.misc-box:hover .misc-overlay {
transform: translateY(0);
}
.archive-overlay h2,
.tool-overlay h2,
.misc-overlay h2 {
font-family: 'Space Grotesk', sans-serif;
color: var(--primary-color);
margin-bottom: 10px;
font-size: 1.3rem;
}
.archive-overlay p,
.tool-overlay p,
.misc-overlay p {
color: var(--text-color);
font-size: 0.9rem;
margin-bottom: 15px;
}
.github-link {
color: var(--primary-color);
text-transform: uppercase;
font-weight: bold;
font-size: 0.8rem;
align-self: flex-start;
text-decoration: none;
transition: color 0.3s ease;
}
.github-link:hover {
color: #32ff32;
}
@media (max-width: 1200px) {
.archives-grid,
.tools-grid,
.misc-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 30px 3%;
}
}

79
index.html
View File

@@ -3,60 +3,49 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Makers and Programmers</title>
<link rel="stylesheet" href="css/styles.css">
<title>Map Makers & Programmers</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<!-- Background Video -->
<video autoplay muted loop id="background-video">
<source src="assets/background.mp4" type="video/mp4">
<div class="noise-overlay"></div>
<video id="background-video" autoplay loop muted>
<source src="./assets/background.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Overlay Content -->
<div class="overlay">
<!-- Header Section -->
<div class="header-bar">
<div class="profile-info">
<img src="assets/star-icon.png" alt="Star Icon" class="star-icon">
<span id="username" class="username" onclick="editUsername()">Click to change</span>
<div class="xp-bar">
<div class="xp-fill"></div>
</div>
<span class="xp-text">903 388 / 1 000 000</span>
</div>
<h1 class="title">Map Makers and Programmers</h1>
<div class="currency-info">
<span class="currency">
<img src="assets/diamond-icon.svg" alt="Diamond Icon" class="currency-icon"> 68 800
</span>
<span class="currency">
<img src="assets/ruby-icon.svg" alt="Ruby Icon" class="currency-icon"> 12
</span>
</div>
<main class="content-wrapper">
<h1 class="main-title">Map makers & Programmers</h1>
<div class="centered-navigation">
<nav class="main-navigation">
<a href="archives.html" class="nav-button">
<img src="assets/archives-icon.svg" alt="Archives" class="button-icon">
ARCHIVES
</a>
<a href="tools.html" class="nav-button">
<img src="assets/tools-icon.svg" alt="Tools" class="button-icon">
TOOLS
</a>
<a href="misc.html" class="nav-button">
<img src="assets/misc-icon.svg" alt="Misc" class="button-icon">
MISC
</a>
</nav>
</div>
<!-- Main Content Area -->
<div class="content">
<div class="menu-container">
<a href="https://discord.gg/EPqvgcPNHx" class="discord-button" target="_blank">Discord</a>
<ul class="menu">
<li><a href="archives.html"><img src="assets/archives-icon.svg" class="button-icon" alt="Archives Icon">ARCHIVES</a></li>
<li><a href="tools.html"><img src="assets/tools-icon.svg" class="button-icon" alt="Tools Icon">TOOLS</a></li>
<li><a href="misc.html"><img src="assets/misc-icon.svg" class="button-icon" alt="Misc Icon">MISC</a></li>
</ul>
<div class="cta-section">
<a href="https://discord.gg/EPqvgcPNHx" target="_blank" class="discord-button">
Join The Discord
</a>
</div>
</main>
<footer class="site-footer">
<div class="footer-content">
<p>&copy; 2024 Map Makers & Programmers. A few rights reserved...</p>
</div>
</footer>
</div>
<script>
function editUsername() {
const currentUsername = document.getElementById('username').innerText;
const newUsername = prompt('Enter new username:', currentUsername);
if (newUsername && newUsername.trim() !== '') {
document.getElementById('username').innerText = newUsername;
}
}
</script>
</body>
</html>

137
misc.html
View File

@@ -3,109 +3,48 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Archive</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #1a1a1a;
font-family: Arial, sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.title {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFD700;
}
.back-button {
font-size: 1em;
color: #fff;
background-color: #444;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s;
}
.back-button:hover {
background-color: #666;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: repeat(2, 300px);
gap: 20px;
padding: 20px;
scroll-snap-type: x mandatory;
width: 100%;
place-items: center; /* Center align incomplete rows */
}
.box {
background-color: #2c2f36;
border-radius: 10px;
display: flex;
align-items: start; /* Align items to the top */
justify-content: center; /* Center text horizontally */
text-align: center;
color: #fff;
scroll-snap-align: start;
padding: 15px;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
background-size: cover;
background-position: center;
width: 100%; /* Makes the box occupy full grid cell */
height: 300px; /* Sets the box height */
}
.box .title {
font-size: 1em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.7); /* Dark overlay for text readability */
padding: 5px 10px;
border-radius: 5px;
position: absolute;
top: 10px; /* Positions title at the top of the box */
left: 50%;
transform: translateX(-50%); /* Centers title horizontally */
}
/* Hover Effect */
.box:hover {
transform: translateY(-10px);
box-shadow: 0 8px 15px rgba(0, 255, 127, 0.5);
background-color: #3a3f4b;
}
</style>
<title>Miscellaneous - Map Makers & Programmers</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="noise-overlay"></div>
<div class="title">Misc</div>
<button class="back-button" onclick="window.location.href='index.html'">Back</button>
<div class="container">
<a href="https://github.com/MapMakersAndProgrammers/alternativa-demos" class="box" style="background-image: url('assets/demo.png');">
<div class="title">Alternativa Games' flash demos</div>
<div class="overlay">
<div class="page-header">
<a href="index.html" class="back-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6" />
</svg>
Back
</a>
<a href="https://github.com/MapMakersAndProgrammers/alternativa-editor" class="box" style="background-image: url('assets/editor.png');">
<div class="title">Alternativa Editor source code</div>
<h1 class="page-title">Miscellaneous</h1>
</div>
<main class="misc-content">
<div class="misc-grid">
<a href="https://github.com/MapMakersAndProgrammers/alternativa-demos" class="misc-box" target="_blank" style="background-image: url('assets/demo.png');">
<div class="misc-overlay">
<h2>Alternativa Games' Flash Demos</h2>
<p>Demos built using the Alternativa3D engine</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://github.com/MapMakersAndProgrammers/alternativa-editor" class="misc-box" target="_blank" style="background-image: url('assets/editor.png');">
<div class="misc-overlay">
<h2>Alternativa Editor Source Code</h2>
<p>AlternativaEditor source code</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
</div>
</main>
<footer class="site-footer">
<div class="footer-content">
<p>&copy; 2024 Map Makers & Programmers. A few rights reserved...</p>
</div>
</footer>
</div>
</body>
</html>

144
tools.html
View File

@@ -3,112 +3,56 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Archive</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #1a1a1a;
font-family: Arial, sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.title {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFD700;
}
.back-button {
font-size: 1em;
color: #fff;
background-color: #444;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s;
}
.back-button:hover {
background-color: #666;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: repeat(2, 300px);
gap: 20px;
padding: 20px;
scroll-snap-type: x mandatory;
width: 100%;
place-items: center; /* Center align incomplete rows */
}
.box {
background-color: #2c2f36;
border-radius: 10px;
display: flex;
align-items: start; /* Align items to the top */
justify-content: center; /* Center text horizontally */
text-align: center;
color: #fff;
scroll-snap-align: start;
padding: 15px;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
background-size: cover;
background-position: center;
width: 100%; /* Makes the box occupy full grid cell */
height: 300px; /* Sets the box height */
}
.box .title {
font-size: 1em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.7); /* Dark overlay for text readability */
padding: 5px 10px;
border-radius: 5px;
position: absolute;
top: 10px; /* Positions title at the top of the box */
left: 50%;
transform: translateX(-50%); /* Centers title horizontally */
}
/* Hover Effect */
.box:hover {
transform: translateY(-10px);
box-shadow: 0 8px 15px rgba(0, 255, 127, 0.5);
background-color: #3a3f4b;
}
</style>
<title>Tools - Map Makers & Programmers</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="noise-overlay"></div>
<div class="title">Tools</div>
<div class="overlay">
<div class="page-header">
<a href="index.html" class="back-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6" />
</svg>
Back
</a>
<h1 class="page-title">Tools</h1>
</div>
<button class="back-button" onclick="window.location.href='index.html'">Back</button>
<main class="tools-content">
<div class="tools-grid">
<a href="https://github.com/MapMakersAndProgrammers/alternativa-tools" class="tool-box" target="_blank" style="background-image: url('assets/tools.png');">
<div class="tool-overlay">
<h2>Alternativa Games' Tools</h2>
<p>Various tools made by Alternativa Games</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<div class="container">
<a href="https://example.com/showcase" class="box" style="background-image: url('assets/tools.png');">
<div class="title">Alternativa Games' tools</div>
<a href="https://github.com/davidejones/alternativa3d_tools" class="tool-box" target="_blank" style="background-image: url('assets/a3d1.png');">
<div class="tool-overlay">
<h2>Blender A3D 1.x and 2.x Plugin</h2>
<p>Blender plugin to import a3d models versions 1.x and 2.x</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
<a href="https://example.com/keys" class="box" style="background-image: url('assets/a3d1.png');">
<div class="title">Blender plugin to import A3D 1.x and 2.x models</div>
</a>
<a href="https://example.com/premium" class="box" style="background-image: url('assets/a3d2.png');">
<div class="title">Blender plugin to import A3D 3.x models</div>
<a href="https://github.com/MapMakersAndProgrammers/io_scene_a3d" class="tool-box" target="_blank" style="background-image: url('assets/a3d2.png');">
<div class="tool-overlay">
<h2>Blender A3D 3.x Plugin</h2>
<p>Blender plugin to import a3d models versions 3.x</p>
<span class="github-link">View on GitHub</span>
</div>
</a>
</div>
</main>
<footer class="site-footer">
<div class="footer-content">
<p>&copy; 2024 Map Makers & Programmers. A few rights reserved...</p>
</div>
</footer>
</div>
</body>
</html>