From b4ecdb98adc2522dc4b8afb250423206266fb0f0 Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Fri, 24 Nov 2023 07:43:27 +0100
Subject: [PATCH 1/8] Add files via upload
---
public/index.html | 82 +++++++------
public/styles.css | 288 ++++++++++++++++++++++++++++------------------
2 files changed, 221 insertions(+), 149 deletions(-)
diff --git a/public/index.html b/public/index.html
index 941aa94..921c5af 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,35 +1,47 @@
-
-
-
-
-
-
- Collaborative Pixel Art
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Collaborative Pixel Art
+
+
+
+
+
Collaborative Pixel Art
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/styles.css b/public/styles.css
index 51a948f..5ee6203 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,114 +1,174 @@
-/* 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;
+ height: 100vh;
+ 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;
+ 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); /* 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;
+ }
+ }
+
\ No newline at end of file
From 42dad1c02a51b17db3e5a2c195f6860f227eda88 Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Fri, 24 Nov 2023 12:06:37 +0100
Subject: [PATCH 2/8] Add files via upload
---
public/styles.css | 29 +++++++++++++++--------------
1 file changed, 15 insertions(+), 14 deletions(-)
diff --git a/public/styles.css b/public/styles.css
index 5ee6203..74b9934 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -6,13 +6,15 @@ body {
flex-direction: column;
justify-content: center;
align-items: center;
- height: 100vh;
+ 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%;
@@ -98,16 +100,20 @@ body {
border-radius: 15px; /* 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 */
- }
+ width: 95%; /* Set a maximum width for the container */
+ height: 1050px;
+ margin-bottom: 10px;
+ }
/* Styling for the canvas where pixels will be placed */
#canvas {
- width: 500px;
- height: 500px;
+ padding: 10px;
+ overflow-x: scroll;
+ width: calc(100% - 100px);
+ height: 1030px;
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 */
+ grid-template-columns: repeat(100, 10px); /* Create 50 columns of 10px each */
+ grid-template-rows: repeat(100, 10px); /* Create 50 rows of 10px each */
gap: 0; /* Remove any gap between pixels */
}
@@ -116,7 +122,7 @@ body {
width: 10px;
height: 10px;
display: inline-block;
- border: 1px solid #ccc; /* Add a 1px border around each pixel */
+ border: .1px solid #ccc; /* Add a 1px border around each pixel */
}
/* Styling for the color selector section */
@@ -155,12 +161,7 @@ body {
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 */
From 29b84fbc890c1017c5346148506038ef863060e1 Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Fri, 24 Nov 2023 12:07:14 +0100
Subject: [PATCH 3/8] Update script.js
---
public/script.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/public/script.js b/public/script.js
index 0dd1b17..55023c1 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 = 100;
+const canvasHeight = 100;
function createCanvas() {
for (let i = 0; i < canvasWidth * canvasHeight; i++) {
From ee9d3b4c48c964ed30d994bacff0d9df1611ca4b Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Sat, 25 Nov 2023 18:47:22 +0100
Subject: [PATCH 4/8] Update server.js
---
server.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
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
From c029bdb44a74ce73ab4d1a29deba518080d4d00b Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Sat, 25 Nov 2023 18:47:52 +0100
Subject: [PATCH 5/8] Update script.js
---
public/script.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/public/script.js b/public/script.js
index 55023c1..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 = 100;
-const canvasHeight = 100;
+const canvasWidth = 200;
+const canvasHeight = 200;
function createCanvas() {
for (let i = 0; i < canvasWidth * canvasHeight; i++) {
From 58feaa68ef16d5f578dab59daa7faa1f420e3461 Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Sat, 25 Nov 2023 18:48:24 +0100
Subject: [PATCH 6/8] Update color picker, css changes
---
public/index.html | 40 +++++++++++++++---------
public/styles.css | 78 ++++++++++++++++++++++-------------------------
2 files changed, 61 insertions(+), 57 deletions(-)
diff --git a/public/index.html b/public/index.html
index 921c5af..15c27ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,22 +25,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Made by Dolez M.