From 40586e3d6a1c9d7321749b613bf88b0a52f71355 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] 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 + + + +
+

Collaborative Pixel Art

+
+
+

Collaborative Pixel Art

+
En cours de chargement...
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + 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