Tetardtek/ClickerZ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial import — ClickerZ formation project (Express + React/Vite)

Browse Source
This commit is contained in:
Tetardtek
2026-03-15 14:29:33 +01:00
commit 4e93753250
118 changed files with 71039 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Frontend/src/scss/App.scss Executable file
View File

@@ -0,0 +1,3 @@
a {
text-decoration: none;
}

19
Frontend/src/scss/Cookie.scss Executable file
View File

@@ -0,0 +1,19 @@
.container {
width: 100%;
margin: 0 auto;
max-width: 1280px;
font-family: var(--font);
display: flex;
flex-direction: column;
gap: 3rem;
padding: 15rem 1rem 4rem;
}
h2 {
font-family: var(--font);
font-size: 2rem;
font-weight: 600;
color: var(--color-grey);
}

19
Frontend/src/scss/Legal.scss Executable file
View File

@@ -0,0 +1,19 @@
.mentionslegales {
width: 100%;
margin: 0 auto;
max-width: 1280px;
font-family: var(--font);
display: flex;
flex-direction: column;
gap: 3rem;
padding: 15rem 1rem 4rem;
}
h2 {
font-family: var(--font);
font-size: 2rem;
font-weight: 600;
color: var(--color-grey);
}

31
Frontend/src/scss/achievements.scss Executable file
View File

@@ -0,0 +1,31 @@
.fullachieve {
display: flex;
flex-direction: column;
padding-top: 10rem;
background-color: var(--color-blue-light);
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.achievementscontainer {
margin: auto;
display: flex;
align-items: center;
}
h1 {
text-align: center;
font-family: var(--font);
font-size: 3rem;
color: var(--color-grey);
margin-bottom: 3rem;
}
.achievementscardcontainer {
display: flex;
justify-content: center;
flex-wrap: wrap;
min-height: 300px;
gap: 3rem;
}

73
Frontend/src/scss/components/CardContact.scss Executable file
View File

@@ -0,0 +1,73 @@
.Btn {
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
transition-duration: .4s;
cursor: pointer;
position: relative;
background-color: rgb(31, 31, 31);
overflow: hidden;
}
.svgIcon {
transition-duration: .3s;
}
.svgIcon path {
fill: var(--color-white)
}
.text {
position: absolute;
font-family: var(--font);
color: var(--color-white);
width: 120px;
font-weight: 600;
opacity: 0;
transition-duration: .4s;
}
.Btn:hover {
width: 110px;
transition-duration: .4s;
border-radius: 30px;
}
.Btn:hover .text {
opacity: 1;
transition-duration: .4s;
}
.Btn:hover .svgIcon {
opacity: 0;
transition-duration: .3s;
}
.cardContact {
display: flex;
min-width: 100px ;
align-items: center;
flex-direction: column;
}
.cardContactContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 5rem;
margin-bottom: 1rem;
}
.cardContact p {
font-family: var(--font);
color: var(--color-grey);
}

102
Frontend/src/scss/components/Hud.scss Executable file
View File

@@ -0,0 +1,102 @@
.hudContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
min-width: 260px;
width: fit-content;
max-width: 1280px;
height: fit-content;
gap: 1rem;
padding: 1rem;
border-radius: 8px;
box-sizing: border-box;
background-color: var(--color-grey);
color: var(--color-white);
font-family: var(--font);
color: aliceblue;
font-size: 1rem;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%);
z-index: 2;
.hudStats {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
.section {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
}
.hudBooster {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
gap: 1rem;
min-width: 280px;
width: auto;
max-width: 1280px;
height: fit-content;
color: var(--color-white);
font-family: var(--font);
color: aliceblue;
font-size: 1rem;
text-align: center;
border-radius: 8px;
box-sizing: border-box;
.boosterItem {
display: flex;
flex-wrap: wrap;
width: 30px;
height: 30px;
gap: 0.6rem;
.boosterIcon {
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.countbox {
position: absolute;
margin-top: 20px;
margin-left: 15px;
border: solid 1px var(--color-white);
background-color: var(--color-white);
border-radius: 20%;
padding: 0.1rem;
color: var(--color-grey);
min-width: 20px;
width: fit-content;
height: 20px;
box-shadow: -1px -1px 7px 0px var(--color-grey);
}
.boosterCount {
font-family: var(--font);
font-size: 0.7rem;
text-align: center;
font-weight: 900;
}
}
}
}

33
Frontend/src/scss/components/achievementscard.scss Executable file
View File

@@ -0,0 +1,33 @@
.achievCardcontainer {
display: flex;
flex-direction: column;
align-items: center;
border: solid 0.05rem;
max-width: 250px;
border-radius: 1rem;
background-color: rgb(255, 255, 255);
margin-bottom: 1rem;
box-shadow: 1px 1px 10px 2px var(--color-grey);
}
.achievecardpicture {
width: 100%;
border-radius: 1rem 1rem 0 0;
}
.achievname {
font-size: 1.2rem;
margin-top: 0.2rem;
font-family: var(--font);
text-align: center;
color:rgb(29, 30, 30);
}
.achievdescription {
font-size: 1rem;
font-weight: 400;
color: var(--color-grey);
font-family: var(--font);
color:rgb(25, 25, 26);
padding: 1rem;
}

76
Frontend/src/scss/components/boutiquecard.scss Executable file
View File

@@ -0,0 +1,76 @@
.shopcardcontainer {
display: flex;
flex-direction: column;
width: 300px;
min-height: 520px;
padding: 1rem;
border-radius: 1rem;
align-items: center;
box-sizing: border-box;
background-color: var(--color-white);
font-family: var(--font);
.shopcontainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
.cardpicture {
width: 100%;
height: 300px;
padding: 3rem;
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
border-radius: 10px;
background-color: var(--color-purple-light);
box-sizing: border-box;
}
.titlesection {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 1rem;
.itemname {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-grey);
}
.price {
display: flex;
gap: 0.2rem;
font-size: 1rem;
font-weight: 400;
color: var(--color-grey);
.itemprice {
font-weight: 600;
color: var(--color-red-light);
}
.priceicon {
width: 22px;
height: 22px;
background-image: url("/png/w-coin.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
}
.description {
font-size: 1rem;
font-weight: 400;
color: var(--color-grey);
}
}
.buttoncard {
width: 100%;
}
}

46
Frontend/src/scss/components/buttons.scss Executable file
View File

@@ -0,0 +1,46 @@
.primary-button {
display: flex;
padding: 0.6rem 1rem;
height: fit-content;
background-color: var(--color-red-light);
border-radius: 0.6rem;
justify-content: center;
text-decoration: none;
font-family: var(--font);
color: var(--color-white) !important;
text-align: center;
font-size: 1rem;
font-weight: 400;
transition: transform 0.1s ease-in-out;
border: none;
&:hover {
transform: scale(0.95);
background-color: var(--color-red-light);
}
}
.secondary-button {
display: flex;
padding: 1rem 1rem;
background-color: var(--color-white);
border-radius: 0.6rem;
justify-content: center;
width: fit-content;
height: fit-content;
text-decoration: none;
font-family: var(--font);
color: var(--color-grey)!important;
text-align: center;
font-size: 1rem;
transition: transform 0.1s ease-in-out;
border: none;
&:hover {
transform: scale(0.95);
background-color: var(--color-grey-hover);
}
}

92
Frontend/src/scss/components/footer.scss Executable file
View File

@@ -0,0 +1,92 @@
.footer {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--bg-color);
border-top: solid 1px var(--color-grey);
padding: 2rem 0;
gap: 2rem;
.footer-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
gap: 2rem;
}
.footer-logo {
background-image: url(/svg/logo.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 250px;
height: 100px;
transition: all 0.15s ease-in-out;
&:hover {
transform: scale(0.9);
}
}
.section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1.4rem;
.section-title {
font-family: var(--font);
font-size: 1.2rem;
color: var(--color-grey);
text-decoration-line: underline;
text-underline-offset: 0.5rem;
}
.section-text {
max-width: 26ch;
font-family: var(--font);
font-size: 1rem;
color: var(--color-grey);
}
.section-list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
.section-item,
a {
width: fit-content;
font-family: var(--font);
font-size: 1rem;
color: var(--color-grey);
transition: all 0.15s ease-in-out;
&:hover {
transform: scale(0.9);
}
}
}
}
.spacing {
min-width: 150px;
width: 10%;
}
.copyright {
font-family: var(--font);
font-size: 0.8rem;
font-weight: 300;
color: var(--color-grey);
text-align: center;
}
}

284
Frontend/src/scss/components/navbar.scss Executable file
View File

@@ -0,0 +1,284 @@
.header-main {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
height: 80px;
padding: 0rem 2rem;
top: 0;
background-color: var(--bg-color);
background-blend-mode: darken;
background-size: cover;
z-index: 99;
box-sizing: border-box;
@media (max-width: 999px) {
padding: 0rem 0.4rem;
box-sizing: border-box;
}
}
.logo {
width: 5rem;
content: url(/svg/logo.svg);
transition: 0.2s;
&:hover {
width: 5rem;
transition: 0.2s;
transform: scale(0.9);
}
}
.navbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
box-sizing: border-box;
cursor: pointer;
.nav-list {
display: flex;
justify-content: space-between;
gap: 1.6rem;
align-items: center;
@media screen and (max-width: 999px) {
display: none;
}
li {
list-style: none;
font-family: var(--font);
font-weight: 300;
font-size: 1rem;
color: var(--color-white);
height: 100%;
.mainLink {
text-decoration: none;
color: var(--color-grey);
font-weight: 500;
padding: 30px 0;
&:hover {
color: var(--color-red-light);
font-weight: 500;
}
}
.dropLink {
text-decoration: none;
color: var(--color-white);
font-weight: 400;
&:hover {
color: var(--color-red-light);
font-weight: 400;
}
}
}
}
ul {
list-style-type: none;
@media screen and (max-width: 999px) {
color: var(--color-white) !important;
}
li {
float: left;
width: fit-content;
.dropdown-content {
display: none;
position: absolute;
background: var(--color-black);
transform: translateY(30px);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(10, 10, 10, 0.2);
z-index: 1;
}
li.dropdown {
display: inline-block;
}
a {
color: var(--color-white);
width: fit-content;
}
a:hover,
.dropdown:hover {
color: var(--color-red-light);
font-weight: 400;
}
}
}
.dropdown-content a {
color: var(--color-black);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
&:hover {
background-color: var(--color-black);
color: var(--color-gold);
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}
@media screen and (min-width: 1000px) {
.menuToggle {
display: none;
}
}
@media screen and (max-width: 999px) {
.menuToggle {
float: left;
position: relative;
box-sizing: border-box;
top: 2px;
left: -10px;
z-index: 99;
-webkit-user-select: none;
user-select: none;
}
.menuToggle a {
text-decoration: none;
color: var(--color-grey);
transition: color 0.3s ease;
}
.menuToggle a:hover {
color: var(--color-red-light);
}
.menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
.menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: var(--color-grey);
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menuToggle span:first-child {
transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: var(--color-white);
}
.menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.menu {
position: absolute;
display: flex;
flex-direction: column;
width: 280px;
height: 110vh;
margin: -100px 0 0 -231px;
padding: 1.2rem;
padding-top: 100px;
background: var(--color-grey);
list-style-type: none;
transform-origin: 0% 0%;
overflow: hidden !important;
visibility: hidden;
opacity: 0%;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.menu li {
padding: 10px 0;
font-size: 1.2rem;
font-family: var(--font);
font-weight: 500;
color: var(--color-white);
}
.menuToggle input:checked ~ ul {
visibility: visible;
opacity: 100;
}
.sousmenu {
display: flex;
flex-direction: column;
margin-left: 1.2rem;
color: var(--color-white);
font-size: 1.2rem;
font-family: var(--font);
font-weight: 500;
padding-bottom: 1rem;
}
.empty {
line-height: 20rem;
}
}
.wildCoin {
display: flex;
align-items: center;
font-family: var(--font);
font-size: 1rem;
font-weight: 600;
color: var(--color-grey);
}

58
Frontend/src/scss/home.scss Executable file
View File

@@ -0,0 +1,58 @@
.bghomecover {
background-image: url("/webp/bg-cover.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
width: 100%;
filter: blur(0px);
transition: filter 1s ease-in-out;
}
.santaposition {
display: flex;
justify-content: center;
align-items: end;
.santaclaus {
display: block;
position: absolute;
bottom: 5vh;
min-width: 320px;
width: 320px;
min-height: 320px;
height: 320px;
z-index: 1;
background: url("/svg/SantaClause-bag.svg");
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
&:active {
transform: rotate(2deg);
}
}
.pieces-particle {
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
pointer-events: none;
animation: pieces-up 1.5s linear forwards;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
@keyframes pieces-up {
0% {
opacity: 1;
}
100% {
transform: rotate3d(0, 1, 0, 180deg);
opacity: 0;
bottom: 100%;
}
}

171
Frontend/src/scss/pages.scss Executable file
View File

@@ -0,0 +1,171 @@
.container {
display: flex;
flex-direction: column;
max-width: 132ch;
width: 80%;
gap: 3rem;
margin: 150px auto 50px;
h1 {
font-family: var(--font);
color: var(--color-black);
font-size: 1.8rem;
text-align: center;
width: fit-content;
}
.separator {
border: solid 1px var(--color-gold-hover);
}
.massageinfo {
display: flex;
flex-direction: column;
gap: 0.4rem;
.info {
font-family: var(--font);
color: var(--color-grey);
font-size: 1rem;
font-weight: 400;
}
}
.subtitle {
font-family: var(--font);
color: var(--color-black);
font-size: 1.2rem;
font-weight: 600;
text-align: left;
margin-bottom: 0.8rem;
}
.content {
display: flex;
flex-direction: column;
gap: 0.6rem;
.subtitle {
font-family: var(--font);
color: var(--color-black);
font-size: 1.2rem;
font-weight: 600;
text-align: left;
margin-bottom: 0.5rem;
}
.paragraphe {
font-family: var(--font);
color: var(--color-grey);
font-size: 1rem;
font-weight: 400;
margin-bottom: 0.5rem;
list-style: inside;
a {
font-family: var(--font);
color: var(--color-gold-link);
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
list-style: inside;
text-decoration: none;
&:hover {
color: var(--color-gold-hover);
}
}
}
.picture-container {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
@media (max-width: 449px) {
flex-direction: column;
}
.picture {
background-position: center;
background-size: cover;
width: 100%;
height: 300px;
}
}
}
//Massages pages
.listing-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3rem;
.listcontent {
display: flex;
flex-direction: column;
.listdetail {
font-family: var(--font);
color: var(--color-grey);
font-size: 0.95rem;
font-weight: 400;
margin-bottom: 0.5rem;
list-style-type: none;
padding-left: 1rem;
}
}
}
}
//error pages
section {
display: flex;
flex-direction: column;
height: 90vh;
justify-content: center;
width: 100%;
.containererror {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
h1 {
font-family: var(--font);
color: var(--color-black);
font-size: 2rem;
text-align: center;
width: fit-content;
}
.message {
font-family: var(--font);
color: var(--color-grey);
font-size: 1rem;
font-weight: 300;
text-align: center;
}
.btn-return {
display: flex;
justify-content: center;
width: fit-content;
margin: auto;
padding: 0.5rem 1rem;
background-color: var(--color-grey);
border: none;
border-radius: 0.6rem;
font-family: var(--font);
color: var(--color-white);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
&:hover {
background-color: var(--color-grey);
transform: scale(0.9);
}
}
}
}

31
Frontend/src/scss/root.scss Executable file
View File

@@ -0,0 +1,31 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
:root {
--color-blue-light: #dcecf3;
--color-purple-light: #e4e3f3;
--color-red-light: #c33636;
--color-white: #ffffff;
--color-light: #eaeaea;
--color-grey: #202020;
--color-grey-hover: #606060;
--bg-color: var(--color-blue-light);
--font: "Hanken Grotesk", sans-serif;
}
a {
text-decoration: none;
}
main {
min-height: 92vh;
margin-top: 80px;
padding: 0 0 2rem;
background-color: var(--bg-color);
}

26
Frontend/src/scss/shop.scss Executable file
View File

@@ -0,0 +1,26 @@
.shoppagecontainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 12rem 0 4rem;
h1 {
font-family: var(--font);
font-size: 2rem;
font-weight: 600;
color: var(--color-grey);
}
.cardcontainer {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
max-width: 1280px;
}
}