mirror of
https://github.com/MapMakersAndProgrammers/MapMakersAndProgrammers.github.io.git
synced 2025-10-26 01:49:06 -07:00
remake
no longer trying to make it look like the tanki main menu
This commit is contained in:
Currency
193
archives.html
193
archives.html
@@ -3,124 +3,89 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Archives</title>
|
<title>Archives - Map Makers & Programmers</title>
|
||||||
<style>
|
<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">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<main class="archives-content">
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-xml-maps" class="box" style="background-image: url('assets/xml.png');">
|
<div class="archives-grid">
|
||||||
<div class="title">XML format maps</div>
|
<a href="https://github.com/MapMakersAndProgrammers/tanki-xml-maps" class="archive-box" target="_blank" style="background-image: url('assets/xml.png');">
|
||||||
</a>
|
<div class="archive-overlay">
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-json-maps" class="box" style="background-image: url('assets/json.png');">
|
<h2>XML Format Maps</h2>
|
||||||
<div class="title">JSON format maps</div>
|
<p>Archive of XML format maps</p>
|
||||||
</a>
|
<span class="github-link">View on GitHub</span>
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-bin-maps" class="box" style="background-image: url('assets/bin.png');">
|
</div>
|
||||||
<div class="title">BIN format maps</div>
|
</a>
|
||||||
</a>
|
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-prop-libraries" class="box" style="background-image: url('assets/proplibrary.png');">
|
<a href="https://github.com/MapMakersAndProgrammers/tanki-json-maps" class="archive-box" target="_blank" style="background-image: url('assets/json.png');">
|
||||||
<div class="title">Prop Libraries</div>
|
<div class="archive-overlay">
|
||||||
</a>
|
<h2>JSON Format Maps</h2>
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-model-archive" class="box" style="background-image: url('assets/tankimodels.png');">
|
<p>Archive of JSON format maps</p>
|
||||||
<div class="title">Tanki models</div>
|
<span class="github-link">View on GitHub</span>
|
||||||
</a>
|
</div>
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa3d-archive" class="box" style="background-image: url('assets/a3d.png');">
|
</a>
|
||||||
<div class="title">Alternativa3D versions</div>
|
|
||||||
</a>
|
<a href="https://github.com/MapMakersAndProgrammers/tanki-bin-maps" class="archive-box" target="_blank" style="background-image: url('assets/bin.png');">
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/alternativaphysics-archive" class="box" style="background-image: url('assets/ap.png');">
|
<div class="archive-overlay">
|
||||||
<div class="title">AlternativaPhysics versions</div>
|
<h2>BIN Format Maps</h2>
|
||||||
</a>
|
<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="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="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="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="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>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
381
css/styles.css
381
css/styles.css
@@ -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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Body Styling */
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
height: 100vh;
|
background-color: var(--secondary-color);
|
||||||
overflow: hidden;
|
color: var(--text-color);
|
||||||
display: flex;
|
line-height: 1.6;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: #101820; /* Fallback for non-video support */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Background Video Styling */
|
|
||||||
#background-video {
|
#background-video {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -25,175 +28,269 @@ body {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
filter: brightness(0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Overlay Content */
|
|
||||||
.overlay {
|
.overlay {
|
||||||
width: 100%;
|
position: relative;
|
||||||
height: 100%;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #ffffff;
|
flex-grow: 1;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header Bar Styling */
|
.centered-navigation {
|
||||||
.header-bar {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
justify-content: space-between;
|
margin: 50px 0;
|
||||||
padding: 0 20px;
|
|
||||||
border-bottom: 1px solid #333333;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.main-navigation {
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.star-icon {
|
.nav-button {
|
||||||
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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 300px;
|
align-items: center;
|
||||||
padding-left: 50px;
|
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 */
|
.nav-button:hover {
|
||||||
.discord-button {
|
background-color: rgba(75, 93, 103, 0.3);
|
||||||
display: block;
|
transform: scale(1.05);
|
||||||
width: 100%;
|
}
|
||||||
padding: 15px;
|
|
||||||
background-color: #00ff00;
|
.button-icon {
|
||||||
color: #000000;
|
width: 60px;
|
||||||
font-size: 18px;
|
height: 60px;
|
||||||
font-weight: bold;
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
text-align: center;
|
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;
|
text-decoration: none;
|
||||||
border-radius: 5px;
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
margin-bottom: 20px;
|
font-weight: bold;
|
||||||
transition: background-color 0.3s;
|
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 {
|
.discord-button:hover {
|
||||||
background-color: #32ff32;
|
background-color: #32ff32;
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Menu Styling */
|
.site-footer {
|
||||||
.menu {
|
margin-top: auto;
|
||||||
list-style: none;
|
padding: 20px;
|
||||||
width: 100%;
|
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 {
|
.footer-content {
|
||||||
margin: 15px 0;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 15px;
|
padding: 20px 5%;
|
||||||
background-color: #1b1e22;
|
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.5));
|
||||||
color: #ffffff;
|
}
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
.back-button {
|
||||||
text-align: left;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--text-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-left: 6px solid #4b5d67;
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
transition: background-color 0.3s;
|
gap: 10px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu a:hover {
|
.back-button:hover {
|
||||||
background-color: #2c3137;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-icon {
|
.back-button svg {
|
||||||
width: 40px;
|
stroke: currentColor;
|
||||||
height: 40px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
83
index.html
83
index.html
@@ -3,60 +3,49 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Map Makers and Programmers</title>
|
<title>Map Makers & Programmers</title>
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Background Video -->
|
<div class="noise-overlay"></div>
|
||||||
<video autoplay muted loop id="background-video">
|
<video id="background-video" autoplay loop muted>
|
||||||
<source src="assets/background.mp4" type="video/mp4">
|
<source src="./assets/background.mp4" type="video/mp4">
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<!-- Overlay Content -->
|
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<!-- Header Section -->
|
<main class="content-wrapper">
|
||||||
<div class="header-bar">
|
<h1 class="main-title">Map makers & Programmers</h1>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main Content Area -->
|
<div class="centered-navigation">
|
||||||
<div class="content">
|
<nav class="main-navigation">
|
||||||
<div class="menu-container">
|
<a href="archives.html" class="nav-button">
|
||||||
<a href="https://discord.gg/EPqvgcPNHx" class="discord-button" target="_blank">Discord</a>
|
<img src="assets/archives-icon.svg" alt="Archives" class="button-icon">
|
||||||
<ul class="menu">
|
ARCHIVES
|
||||||
<li><a href="archives.html"><img src="assets/archives-icon.svg" class="button-icon" alt="Archives Icon">ARCHIVES</a></li>
|
</a>
|
||||||
<li><a href="tools.html"><img src="assets/tools-icon.svg" class="button-icon" alt="Tools Icon">TOOLS</a></li>
|
<a href="tools.html" class="nav-button">
|
||||||
<li><a href="misc.html"><img src="assets/misc-icon.svg" class="button-icon" alt="Misc Icon">MISC</a></li>
|
<img src="assets/tools-icon.svg" alt="Tools" class="button-icon">
|
||||||
</ul>
|
TOOLS
|
||||||
|
</a>
|
||||||
|
<a href="misc.html" class="nav-button">
|
||||||
|
<img src="assets/misc-icon.svg" alt="Misc" class="button-icon">
|
||||||
|
MISC
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<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>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</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
137
misc.html
@@ -3,109 +3,48 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Archive</title>
|
<title>Miscellaneous - Map Makers & Programmers</title>
|
||||||
<style>
|
<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">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="noise-overlay"></div>
|
||||||
|
|
||||||
<div class="title">Misc</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">Miscellaneous</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button class="back-button" onclick="window.location.href='index.html'">Back</button>
|
<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>
|
||||||
|
|
||||||
<div class="container">
|
<a href="https://github.com/MapMakersAndProgrammers/alternativa-editor" class="misc-box" target="_blank" style="background-image: url('assets/editor.png');">
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa-demos" class="box" style="background-image: url('assets/demo.png');">
|
<div class="misc-overlay">
|
||||||
<div class="title">Alternativa Games' flash demos</div>
|
<h2>Alternativa Editor Source Code</h2>
|
||||||
</a>
|
<p>AlternativaEditor source code</p>
|
||||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa-editor" class="box" style="background-image: url('assets/editor.png');">
|
<span class="github-link">View on GitHub</span>
|
||||||
<div class="title">Alternativa Editor source code</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="footer-content">
|
||||||
|
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
148
tools.html
148
tools.html
@@ -3,112 +3,56 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Archive</title>
|
<title>Tools - Map Makers & Programmers</title>
|
||||||
<style>
|
<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">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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://github.com/davidejones/alternativa3d_tools" class="tool-box" target="_blank" style="background-image: url('assets/a3d1.png');">
|
||||||
<a href="https://example.com/showcase" class="box" style="background-image: url('assets/tools.png');">
|
<div class="tool-overlay">
|
||||||
<div class="title">Alternativa Games' tools</div>
|
<h2>Blender A3D 1.x and 2.x Plugin</h2>
|
||||||
</a>
|
<p>Blender plugin to import a3d models versions 1.x and 2.x</p>
|
||||||
<a href="https://example.com/keys" class="box" style="background-image: url('assets/a3d1.png');">
|
<span class="github-link">View on GitHub</span>
|
||||||
<div class="title">Blender plugin to import A3D 1.x and 2.x models</div>
|
</div>
|
||||||
</a>
|
</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');">
|
||||||
</a>
|
<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>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user