Made by Dolez M.
+ + + + diff --git a/public/script.js b/public/script.js index 0dd1b17..39d58a2 100644 --- a/public/script.js +++ b/public/script.js @@ -49,8 +49,8 @@ function placePixel(index, color) { // Create the canvas const canvasDiv = document.getElementById('canvas'); -const canvasWidth = 50; -const canvasHeight = 50; +const canvasWidth = 200; +const canvasHeight = 200; function createCanvas() { for (let i = 0; i < canvasWidth * canvasHeight; i++) { diff --git a/public/styles.css b/public/styles.css index 51a948f..6051575 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,114 +1,169 @@ -/* styles.css */ - -/* General styling for the body and page layout */ -body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - font-family: Arial, sans-serif; /* Set font family for the entire page */ - background-color: #f0f0f0; /* Light gray background color */ -} - -/* Styling for the header section */ -.header { - margin-bottom: 20px; /* Add spacing at the bottom of the header */ - color: #333; /* Dark text color */ - font-size: 24px; /* Larger font size for the header */ - font-weight: bold; /* Make the header text bold */ - text-align: center; /* Center-align the text within the header */ -} - -/* Styling for the pixel count display */ -#pixel-count { - font-size: 16px; - color: #666; - text-align: center; - margin-top: 10px; /* Add spacing above the pixel count */ -} - -/* Styling for the main container that wraps canvas and color selector */ -.container { - display: flex; - flex-wrap: wrap; /* Allow the container to wrap on smaller screens */ - justify-content: center; /* Center the content horizontally */ - align-items: center; /* Center the content vertically */ - background-color: #fff; /* White background color */ - border-radius: 8px; /* Rounded corners for the container */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */ - padding: 20px; /* Add padding inside the container */ - max-width: 800px; /* Set a maximum width for the container */ -} - -/* Styling for the canvas where pixels will be placed */ -#canvas { - width: 500px; - height: 500px; - display: grid; - grid-template-columns: repeat(50, 10px); /* Create 50 columns of 10px each */ - grid-template-rows: repeat(50, 10px); /* Create 50 rows of 10px each */ - gap: 0; /* Remove any gap between pixels */ -} - -/* Styling for individual pixels */ -.pixel { - width: 10px; - height: 10px; - display: inline-block; - border: 1px solid #ccc; /* Add a 1px border around each pixel */ -} - -/* Styling for the color selector section */ -.color-selector { - display: flex; - flex-direction: column; /* Color options arranged vertically */ - align-items: center; /* Center color options horizontally */ - margin-left: 20px; /* Add some space to the left of the color selector */ -} - -/* Styling for individual color options */ -.color-option { - width: 30px; - height: 30px; - border-radius: 50%; /* Make the color options circular */ - margin: 5px; /* Add spacing between color options */ - cursor: pointer; /* Show pointer cursor on hover */ - border: 2px solid #ccc; /* Add a 2px border around each color option */ - /* Color options will have their background color set dynamically */ -} - -/* Styling for the currently selected color option */ -.color-option.selected { - border-color: #000; /* Change the border color for the selected color */ -} - -/* Responsive design for phone-friendly UI */ -@media (max-width: 768px) { - .container { - flex-direction: column; /* Stack canvas and color selector vertically */ - } - - #canvas { - width: 90%; /* Adjust canvas width to fit smaller screens */ - height: auto; /* Allow canvas height to adapt based on content */ - margin: 20px 0; /* Add some spacing around the canvas */ - } - - .color-selector { - flex-direction: row; /* Arrange color options horizontally */ - justify-content: center; /* Center color options horizontally */ - margin: 0; /* Remove any margin on smaller screens */ - margin-top: 20px; /* Add some spacing above the color selector */ - } - - .color-option { - margin: 5px 8px; /* Adjust spacing between color options */ - } - - /* Adjust pixel count styles for phone-friendly UI */ - #pixel-count { - font-size: 14px; - } -} +/* styles.css */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); +/* General styling for the body and page layout */ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + width: 100%; + margin: 0; + font-family: 'Poppins', sans-serif; /* Set font family for the entire page */ + background-color: var(--bg); /* Light gray background color */ + } + .intro { + position: absolute; + top: 0; + z-index: 2; + background-color: #000; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.fadeout { + animation-name: fadeout; + animation-duration: 1s; + +} +@keyframes fadeout { + from { + opacity: 1; + } + to { + opacity: 0; + } + } + @keyframes fadeIn { + from { + opacity: 0; + transform: translateX(-50%); + } + to { + opacity: 1; + transform: translateX(0); + } + } + .intro h2{ + font-size: 35px; + font-weight: 600; + text-align: center; + color: #fff; + animation-name: fadeIn; + animation-duration: .8s; + } + + /* Styling for the header section */ + .header { + margin-bottom: 20px; + } + :root { + --bg: #f0f0f0; + --text-color: #333; + --text-color2: #666; + } + /* thème sombre */ + @media (prefers-color-scheme: dark){ + :root { + --bg: #171717; + --text-color: #fff; + --text-color2: #eee; + } + .navbar .time, i, .brandname, .matiere { + filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4)); + } + } + h1 { + color: var(--text-color); + font-size: 30px; + font-weight: 600; + text-align: center; + } + /* Styling for the pixel count display */ + #pixel-count { + font-size: 16px; + color: var(--text-color2); + text-align: center; + margin-top: 10px; /* Add spacing above the pixel count */ + } + + /* Styling for the main container that wraps canvas and color selector */ + .container { + display: flex; + flex-wrap: wrap; /* Allow the container to wrap on smaller screens */ + justify-content: center; /* Center the content horizontally */ + align-items: center; /* Center the content vertically */ + background-color: #fffffff3; /* White background color */ + border-radius: 15px; /* Rounded corners for the container */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 20px; /* Add padding inside the container */ + margin-bottom: 10px; + } + + /* Styling for the canvas where pixels will be placed */ + #canvas { + padding: 10px; + overflow-x: scroll; + width: 95vw; + height: 95vw; + display: grid; + grid-template-columns: repeat(200, 10px); /* Create 50 columns of 10px each */ + grid-template-rows: repeat(200, 10px); /* Create 50 rows of 10px each */ + gap: 0; /* Remove any gap between pixels */ + } + + /* Styling for individual pixels */ + .pixel { + width: 10px; + height: 10px; + display: inline-block; + border: .1px solid #ccc; /* Add a 1px border around each pixel */ + } + + /* Styling for the color selector section */ + .color-selector { + position: fixed; + background-color: #fffffff3; + border-radius: 30px; + padding: 10px; + bottom: 0; + display: flex; + flex-wrap: wrap; + align-items: center; /* Center color options horizontally */ + margin: 20px; /* Add some space to the left of the color selector */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + /* Styling for individual color options */ + .color-option { + width: 28px; + height: 28px; + border-radius: 50%; /* Make the color options circular */ + margin: 5px; /* Add spacing between color options */ + cursor: pointer; /* Show pointer cursor on hover */ + border: 2px solid #ccc; /* Add a 2px border around each color option */ + /* Color options will have their background color set dynamically */ + } + + /* Styling for the currently selected color option */ + .color-option.selected { + border-color: #000; + } + + + p { + margin-bottom: 100px; + } + + @media screen and (max-width: 520px) { + .alt { + display: none; + } + + + } \ No newline at end of file diff --git a/server.js b/server.js index 7b446c9..ea382fb 100644 --- a/server.js +++ b/server.js @@ -6,8 +6,8 @@ const io = require('socket.io')(http); const fs = require('fs'); const initialPixelColor = '#FFFFFF'; // Default color: White -const canvasWidth = 50; -const canvasHeight = 50; +const canvasWidth = 200; +const canvasHeight = 200; let pixels = new Array(canvasWidth * canvasHeight).fill(initialPixelColor); let totalPixelsPlaced = 0; // Counter for total pixels placed by everyone