Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbarbine-cdw
mbarbine-cdw committed Mar 28, 2024
1 parent cfa229b commit b6acf40
Show file tree
Hide file tree
Showing 8 changed files with 479 additions and 118 deletions.
2 changes: 1 addition & 1 deletion models/User.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,4 @@ userSchema.methods.gravatar = function gravatar(size) {

const User = mongoose.model('User', userSchema);

module.exports = User;
module.exports = User;
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,4 @@
"engines": {
"node": ">=18"
}
}
}
127 changes: 115 additions & 12 deletions public/about-us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,116 @@
<title>Get Started - Arcade Mania</title>
<link rel="stylesheet" href="arcade.css">
<style>
/* Additional CSS styles specific to this page */
/* Example styling; customize as needed */
body {
font-family: 'Arial', sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #fff;
}

header {
background-color: #222;
color: #ff6600;
padding: 20px 0;
text-align: center;
}

.game-info {
text-align: center;
margin: 20px 0;
}

.game-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 0 20px;
}

.game {
border: 1px solid #ccc;
border: 2px solid #ff6600;
padding: 10px;
width: calc(50% - 20px);
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: calc(33% - 20px);
background: #333;
transition: transform 0.2s, box-shadow 0.2s;
position: relative; /* For absolute positioning of the play button */
}

.game:hover {
transform: scale(1.03);
box-shadow: 0 5px 15px rgba(255, 102, 0, 0.5);
}

.game h4, .game p {
margin: 10px 0;
}

.play-button {
display: inline-block;
background-color: #ff6600;
color: #000;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
position: absolute;
bottom: 10px;
right: 10px;
cursor: pointer;
}

iframe {
width: 100%;
height: 400px;
height: 90vh;
border: none;
}

@media (max-width: 900px) {
.game {
width: calc(50% - 20px); /* Adjust for tablets */
}
}

@media (max-width: 600px) {
.game {
width: 100%;
width: 100%; /* Full width for small devices */
}
}

.game-overlay {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.95);
justify-content: center;
align-items: center;
overflow: auto;
}

.overlay-content {
width: 80%;
max-width: 960px;
margin: auto;
}

.close-btn {
color: #fff;
font-size: 30px;
position: fixed;
top: 20px;
right: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Arcade Mania</h1>
<!-- Consider adding navigation here -->
</header>

<main>
Expand All @@ -45,23 +125,46 @@ <h2>Get Started</h2>
</section>

<section class="game-list">
<h3>Choose Your Game</h3>
<h3 style="color: #ff6600; text-align: center; width: 100%;">Choose Your Game</h3>
<div class="game">
<h4>Pac-Man</h4>
<p>Join Pac-Man in his quest to munch on those pesky ghosts.</p>
<!-- Embedded iframe for Pac-Man; ensure the website allows embedding -->
<iframe src="https://pacman.js.org/" title="Pac-Man"></iframe>
<div class="play-button" onclick="openGame('https://pacman.js.org/')">Play Now</div>
</div>
<div class="game">
<h4>Space Invaders</h4>
<p>Defend Earth from the alien invasion. Shoot 'em up!</p>
<a class="button" href="play-space-invaders.html">Play Now</a>
<div class="play-button" onclick="openGame('https://z-space-invaders.netlify.app/#game')">Play Now</div>
</div>
<div class="game">
<h4>Quake</h4>
<p>Experience the classic FPS in your browser.</p>
<div class="play-button" onclick="openGame('http://www.quakejs.com/')">Play Now</div>
</div>
</section>

<div id="gameOverlay" class="game-overlay">
<div class="overlay-content">
<iframe id="gameFrame" title="Game Frame"></iframe>
</div>
<span class="close-btn" onclick="closeGame()">&times;</span>
</div>
</main>

<footer>
<p>&copy; 2023 Arcade Mania</p>
</footer>

<script>
function openGame(url) {
document.getElementById('gameFrame').src = url;
document.getElementById('gameOverlay').style.display = 'flex';
}

function closeGame() {
document.getElementById('gameOverlay').style.display = 'none';
document.getElementById('gameFrame').src = '';
}
</script>
</body>
</html>
50 changes: 25 additions & 25 deletions public/css/arcade.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,90 +4,90 @@ body, h1, h2, h3, h4, p {
padding: 0;
}

/* Set a background image for a nostalgic arcade look */
/* Set a background image for a nostalgic arcade look, with more green and orange */
body {
background-image: url('arcade-style.png'); /* Replace with the path to your own arcade-themed background image */
background-image: url('arcade-style.png'); /* Adjust the image to include more green and orange tones */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fixed background image */
}

/* Style the header with an arcade font and color */
/* Style the header with an arcade font and enhanced color contrast */
header {
text-align: center;
padding: 20px;
font-family: 'Press Start 2P', cursive;
color: #ff6600; /* Orange color for the header text */
color: #00ff00; /* Bright green color for the header text to contrast against possibly dark backgrounds */
}

/* Style the game info section with a translucent background */
/* Style the game info section with a greenish translucent background for a fresh look */
.game-info {
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
background-color: rgba(0, 255, 0, 0.5); /* Semi-transparent green background */
padding: 20px;
border-radius: 10px;
margin: 20px;
}

/* Style game options with a box shadow and arcade font */
/* Style game options with a greenish box shadow and arcade font */
.game {
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
background-color: rgba(0, 255, 0, 0.5); /* Semi-transparent green background */
padding: 20px;
border-radius: 10px;
margin: 20px;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); /* White box shadow */
box-shadow: 0px 0px 10px rgba(255, 165, 0, 0.5); /* Orange box shadow for contrast */
transition: transform 0.2s ease-in-out;
}

/* Add hover effect for game options */
/* Add hover effect for game options, enhancing the sense of interaction */
.game:hover {
transform: scale(1.05); /* Slightly scale up on hover */
}

/* Style game titles with a nostalgic neon glow */
/* Style game titles with a nostalgic neon glow, using green for a fresh look */
h4 {
font-size: 24px;
color: #ff6600; /* Orange color for game titles */
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); /* White text shadow */
color: #00ff00; /* Bright green color for game titles */
text-shadow: 2px 2px 4px rgba(255, 165, 0, 0.5); /* Orange text shadow for a glowing effect */
}

/* Style the "Play Now" button with a retro orange color */
/* Style the "Play Now" button with a vibrant green color, ensuring visibility */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #ff6600; /* Orange color for buttons */
color: black;
background-color: #00ff00; /* Bright green color for buttons */
color: black; /* Ensure text visibility */
text-decoration: none;
font-size: 20px;
border-radius: 5px;
margin: 10px;
transition: background-color 0.2s ease-in-out;
}

/* Add hover effect for buttons */
/* Add hover effect for buttons, making them lighter green on hover for interactivity */
.button:hover {
background-color: #ff9900; /* Slightly lighter orange on hover */
background-color: #66ff66; /* Lighter green on hover */
}

/* Style the footer with an arcade font and color */
/* Style the footer with an arcade font and color, adding a green touch */
footer {
text-align: center;
padding: 10px;
font-family: 'Press Start 2P', cursive;
color: #ff6600; /* Orange color for the footer text */
color: #00ff00; /* Bright green color for the footer text */
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
border-top: 1px solid #ff6600; /* Orange border on top */
border-top: 1px solid #00ff00; /* Green border on top */
clear: both;
}

/* Style links with a nostalgic neon glow */
/* Style links with a nostalgic neon glow, ensuring they stand out */
a {
color: #ff6600; /* Orange color for links */
color: #ff6600; /* Orange color for links, maintaining the theme */
text-decoration: none;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7); /* White text shadow for links */
text-shadow: 1px 1px 2px rgba(0, 255, 0, 0.7); /* Green text shadow for links, ensuring visibility */
}

/* Add hover effect for links */
/* Add hover effect for links, shifting to a lighter orange on hover */
a:hover {
color: #ff9900; /* Slightly lighter orange on hover */
}
56 changes: 37 additions & 19 deletions public/css/bbs-style.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,43 @@
extends .arcade.css
/* Extend the arcade theme to form elements */

block content
.bbs-signup-wrapper.pb-2.mt-2.mb-4
h3.bbs-signup-title Sign up
.bbs-signup-wrapper {
background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
padding: 20px;
border-radius: 10px;
margin: 20px auto; /* Center the form */
width: 80%; /* Adjust width as needed */
box-shadow: 0 0 10px rgba(255, 165, 0, 0.5); /* Orange glow to match arcade theme */
}

form#signup-form.bbs-form(method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.bbs-form-group {
margin-bottom: 15px; /* Space out form groups */
}

.bbs-form-group.mb-3
label.bbs-label(for='email') Email
input.bbs-input(type='email', name='email', id='email', placeholder='Email', autofocus, autocomplete='email', required)
.bbs-label {
display: block; /* Ensure labels are block-level for proper spacing */
color: #ff6600; /* Orange color to match arcade theme */
margin-bottom: 5px; /* Space between label and input */
}

.bbs-form-group.mb-3
label.bbs-label(for='password') Password
input.bbs-input(type='password', name='password', id='password', placeholder='Password', autocomplete='new-password', minlength='8', required)
.bbs-input {
width: 100%; /* Full width of the form group */
padding: 10px;
border-radius: 5px;
border: 1px solid #ff6600; /* Orange border */
background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white for readability */
}

.bbs-form-group.mb-3
label.bbs-label(for='confirmPassword') Confirm Password
input.bbs-input(type='password', name='confirmPassword', id='confirmPassword', placeholder='Confirm Password', autocomplete='new-password', minlength='8', required)
.bbs-btn {
background-color: #00ff00; /* Bright green for visibility and to match theme */
color: black; /* Ensure text is visible */
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
display: inline-block; /* Allows for proper spacing and alignment */
border: none; /* Remove default border */
transition: background-color 0.2s ease-in-out; /* Smooth transition for hover effect */
}

.bbs-form-group
button.bbs-btn(type='submit')
i.fas.fa-user-plus.fa-sm
| Signup
.bbs-btn:hover {
background-color: #66ff66; /* Lighter green on hover for interaction feedback */
}
Loading

0 comments on commit b6acf40

Please sign in to comment.