Skip to content

Commit

Permalink
Moja propozycja
Browse files Browse the repository at this point in the history
  • Loading branch information
@StanislawMalinski
StanislawMalinski committed May 30, 2024
1 parent 60789b8 commit f01c05f
Show file tree
Hide file tree
Showing 7 changed files with 301 additions and 88 deletions.
71 changes: 46 additions & 25 deletions src/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import React, { useRef } from 'react';
import './Home.scss';
import roboImg from './resources/robot3.png';

import pythonLogo from './resources/python-logo.svg';
import javaLogo from './resources/java-logo.svg';
import cppLogo from './resources/C++-logo.svg';

function Home({ isAuthenticated }) {
const getStartedRef = useRef(null);

Expand Down Expand Up @@ -48,33 +52,50 @@ function Home({ isAuthenticated }) {
<p>Join tournaments, compete with players, and climb the leaderboard to become the champion.</p>
</div>
</div>

<div ref={getStartedRef} className="content">
<div className="content-box">
<h2>Getting Started</h2>
<ol>
<li><a href="link-to-signup">Sign Up</a>: Create your account to join the community.</li>
<li><a href="link-to-games">Explore Games</a>: Discover various bot games and tournaments available.</li>
<li><a href="link-to-create-tournament">Create Your Own Tournament</a>: Design and host your tournaments, invite friends, and compete.</li>
</ol>
</div>
<div className="content-box">
<h2>How to Play</h2>
<ul>
<li><h3>Design Your Bot:</h3> <span>Use our intuitive tools to create and program your bot or see the example bots on our <a href="link-to-signup">GitHub</a> page</span></li>
<li><h3>Test Your Bot:</h3> <span>Run simulations to ensure your bot performs well under different scenarios.</span></li>
<li><h3>Join Tournament:</h3> <span>Enter your bot in matches and tournaments to compete against others.</span></li>
<li><h3>Analyze Results:</h3> <span>Review match results to improve your bot's performance.</span></li>
</ul>
<div className="content-box big-component">
<h2>Language Bot support</h2>
<div className="language-box-container">
<div className="python-logo language-box">
<img className="language-logo" src={pythonLogo} alt="Python Logo" />
</div>
<div className="java-logo language-box">
<img className="language-logo" src={javaLogo} alt="Java Logo" />
</div>
<div className="cpp-logo language-box">
<img className="language-logo" src={cppLogo} alt="C++ Logo" />
</div>
</div>
</div>
<div className="content-box">
<h2>Registration Process</h2>
<ol>
<li>Visit the <a href="link-to-signup">Sign-Up Page</a>.</li>
<li>Fill in your details and verify your email.</li>
<li>Complete your profile and set up your first bot.</li>
<li>Start participating in tournaments and duels!</li>
</ol>
<div className="gs-rp-htp-box big-component">
<div className="gs-rp-box">
<div className="getting-started-box content-box">
<h2>Getting Started</h2>
<ol>
<li><a href="link-to-signup">Sign Up</a>: Create your account to join the community.</li>
<li><a href="link-to-games">Explore Games</a>: Discover various bot games and tournaments available.</li>
<li><a href="link-to-create-tournament">Create Your Own Tournament</a>: Design and host your tournaments, invite friends, and compete.</li>
</ol>
</div>
<div className="registration-process content-box">
<h2>Registration Process</h2>
<ol>
<li>Visit the <a href="link-to-signup">Sign-Up Page</a>.</li>
<li>Fill in your details and verify your email.</li>
<li>Complete your profile and set up your first bot.</li>
<li>Start participating in tournaments and duels!</li>
</ol>
</div>
</div>
<div className="how-to-play-box content-box">
<h2>How to Play</h2>
<ul>
<li><h3>Design Your Bot:</h3> <span>Use our intuitive tools to create and program your bot or see the example bots on our <a href="link-to-signup">GitHub</a> page</span></li>
<li><h3>Test Your Bot:</h3> <span>Run simulations to ensure your bot performs well under different scenarios.</span></li>
<li><h3>Join Tournament:</h3> <span>Enter your bot in matches and tournaments to compete against others.</span></li>
<li><h3>Analyze Results:</h3> <span>Review match results to improve your bot's performance.</span></li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
166 changes: 104 additions & 62 deletions src/Home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ $color-secondary-2-2: #291747;
$color-secondary-2-3: #530AD2;
$color-secondary-2-4: #3F05A2;

$python-color-1: #193954;
$python-color-2: #736120;

$java-color-1: #113851;
$java-color-2: #553a07;

$cpp-color-1: #252525;
$cpp-color-2: #132c67;

$small: 300px;
$medium: 900px;

Expand Down Expand Up @@ -82,7 +91,6 @@ $medium: 900px;
.info-boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 2rem;

.info-box {
Expand All @@ -97,8 +105,6 @@ $medium: 900px;

&:hover {
transform: scale(1.08);
cursor: pointer;

h2 {
color: $color-secondary-1-3;
}
Expand Down Expand Up @@ -131,92 +137,128 @@ $medium: 900px;
padding: 2rem;
background-color: #1a1a1a;

.big-component {
width: 100%;
max-width: 1200px;
margin-bottom: 2rem;
}

.gs-rp-htp-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
.gs-rp-box {
gap: 2rem;
display: grid;
grid-template-rows: min-content 1fr;
}
}

.content-box {
background-color: rgba(34, 34, 34, 0.9);
color: #ffffff;
padding: 2rem;
margin: 1rem 0;
padding: 0 2rem 2rem 2rem;
border-radius: 15px;
width: 80%;
max-width: 1200px;
transition: transform 0.3s ease-in-out, background-color 0.3s ease;
display: flex;
justify-content: left;
align-items: center;
flex-direction: column;

.language-box-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;

.language-box {
border-radius: 10px;
margin: 25px 0;
padding: 1rem;
width: 250px;
aspect-ratio: 1;

.language-logo {
width: 200px;
aspect-ratio: 1;
margin: auto;
}

transition: transform 1s ease-in-out, filter 1s ease-in-out, z-index 1s ease-in-out;

&:hover {
transform: scale(1.2);
filter: brightness(1.2);
z-index: 2;
}
}

.python-logo{
background-image: radial-gradient(circle at 30% 107%, $python-color-1, $python-color-1 28%, $python-color-2 28%, $python-color-2 33%, $python-color-1 33%, $python-color-1 40%, $python-color-2 40%, $python-color-2 45%, $python-color-1 45%, $python-color-1 52%, $python-color-2 52%, $python-color-2 57%, $python-color-1 57%, $python-color-1 64%, $python-color-2 64%, $python-color-2 69%, $python-color-1 69%, $python-color-1 76%, $python-color-2 76%, $python-color-2 81%, $python-color-1 81%, $python-color-1 88%, $python-color-2 88%, $python-color-2 93%, $python-color-1 93%);
}

.java-logo {
background-image: radial-gradient(circle at 108% 66%, $java-color-1, $java-color-1 28%, $java-color-2 28%, $java-color-2 33%, $java-color-1 33%, $java-color-1 40%, $java-color-2 40%, $java-color-2 45%, $java-color-1 45%, $java-color-1 52%, $java-color-2 52%, $java-color-2 57%, $java-color-1 57%, $java-color-1 64%, $java-color-2 64%, $java-color-2 69%, $java-color-1 69%, $java-color-1 76%, $java-color-2 76%, $java-color-2 81%, $java-color-1 81%, $java-color-1 88%, $java-color-2 88%, $java-color-2 93%, $java-color-1 93%);
}

.cpp-logo {
background-image: radial-gradient(circle at 33% -20%, $cpp-color-1, $cpp-color-1 28%, $cpp-color-2 28%, $cpp-color-2 33%, $cpp-color-1 33%, $cpp-color-1 40%, $cpp-color-2 40%, $cpp-color-2 45%, $cpp-color-1 45%, $cpp-color-1 52%, $cpp-color-2 52%, $cpp-color-2 57%, $cpp-color-1 57%, $cpp-color-1 64%, $cpp-color-2 64%, $cpp-color-2 69%, $cpp-color-1 69%, $cpp-color-1 76%, $cpp-color-2 76%, $cpp-color-2 81%, $cpp-color-1 81%, $cpp-color-1 88%, $cpp-color-2 88%, $cpp-color-2 93%, $cpp-color-1 93%);
}
}

h2 {
font-size: 2.5rem;
font-size: 3rem;
margin-bottom: 0.5rem;
color: $color-primary-3;
text-shadow: 0cm 0cm 0.05cm #000000;
letter-spacing: 0.2rem;
}

ol,
ul {
padding-left: 2rem;
width: 80%;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1.5rem;
text-shadow: none;

li {
margin-bottom: 1rem;

a {
color: $color-primary-3;
text-decoration: none;

&:hover {
color: darken($color-primary-3, 10%);
text-decoration: underline;
}
ol,
ul {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
text-align: left;
font-size: 1rem;

li {
margin-bottom: 5px;
a {
color: $color-primary-3;
text-decoration: none;

&:hover {
color: darken($color-primary-3, 10%);
text-decoration: underline;
}
}
}
}

ol {
align-items: center;
justify-content: flex-start;
text-align: left;

li {
width: 80%;
}
}
ol {
align-items: center;
justify-content: flex-start;
text-align: left;
}

ul {
align-items: flex-start;
margin-left: 1rem;
padding-left: 3rem;

li {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
text-align: left;

h3 {
margin: 2rem 0 0.8rem 0;
color: $color-primary-1;
}
ul {
align-items: flex-start;

&::marker {
font-size: 3.5rem;
}
li {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
text-align: left;

> span {
display: inline-block;
margin-left: 1.5rem;
padding: 0;
}
h3 {
color: $color-primary-1;
}
}
}

}
}
}

1 change: 0 additions & 1 deletion src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ h1 {

.menu-btns {
background-color: transparent;
border: #393a39 3px solid;
border-radius: 2px;
}

Expand Down
25 changes: 25 additions & 0 deletions src/resources/C++-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/resources/java-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit f01c05f

Please sign in to comment.