- signIn(provider.id)}>Sign in with {provider.name}
+ if (data.error) {
+ return "You're not an admin!";
+ }
+
+ return (
+ Admin - SSBM EU Tournaments
-
-
- {session ? Admin - SSBM EU Tournaments
+
+
+ {session ? (
+
+
+ Unmanaged Tournaments
+
+
+
+ );
+};
+
+const LoginContainer = (props) => (
+
+
+
+
+ Current Tournaments
+
+
+
+ {data.unmanaged.length === 0 ? (
+
+ No new tournaments submitted yet
+
+ ) : (
+ <>
+ {data.unmanaged.map((value, index) => {
+ var d = new Date(Number(value.datetime));
+ d.setUTCHours(d.getUTCHours() + 1);
+ var tournamentId = value._id;
+ return (
+
- ))}
+
+ Name: {value.name}, Datetime:{" "}
+ {d.toDateString()} {twoDigitFix(d.getUTCHours())}:
+ {twoDigitFix(d.getMinutes())} CET Time
+
+ );
+ })}
+
+ )}
+ Author name: {value.authorName}
+
+ {value.discord && (
+
+ Discord: {value.discord}
+
+ )}
+ {value.smashgg && (
+
+ SmashGG: {value.smashgg}
+
+ )}
+ {value.challonge && (
+
+ Challonge: {value.challonge}
+
+ )}
+ {
+ fetch("/api/admin", {
+ method: "POST",
+ body: JSON.stringify({
+ tournamentId: tournamentId,
+ authorId: value.authorId,
+ action: "ACCEPT",
+ }),
+ }).then((res) => mutate("/api/admin"));
+ }}
+ >
+ Accept
+
+ {
+ fetch("/api/admin", {
+ method: "POST",
+ body: JSON.stringify({
+ tournamentId: tournamentId,
+ authorId: value.authorId,
+ action: "DECLINE",
+ }),
+ }).then((res) => mutate("/api/admin"));
+ }}
+ >
+ Decline
+
+ {
+ fetch("/api/removetournament", {
+ method: "POST",
+ body: JSON.stringify({
+ tournamentId: tournamentId,
+ authorId: value.authorId,
+ }),
+ }).then((res) => mutate("/api/admin"));
+ }}
+ >
+ Click here to delete the tournament permanently
+
+
+
+ {data.all.length === 0 ? (
+
+ No tournaments at the moment
+
+ ) : (
+ <>
+ {data.all.map((value, index) => {
+ var d = new Date(Number(value.datetime));
+ d.setUTCHours(d.getUTCHours() + 1);
+ var tournamentId = value._id;
+ return (
+
+
+ Name: {value.name}, Datetime:{" "}
+ {d.toDateString()} {twoDigitFix(d.getUTCHours())}:
+ {twoDigitFix(d.getMinutes())} CET Time
+
+ );
+ })}
+
+ )}
+
+ Author name: {value.authorName}
+
+ {value.discord && (
+
+ Discord: {value.discord}
+
+ )}
+ {value.smashgg && (
+
+ SmashGG: {value.smashgg}
+
+ )}
+ {value.challonge && (
+
+ Challonge: {value.challonge}
+
+ )}
+ {
+ fetch("/api/removetournament", {
+ method: "POST",
+ body: JSON.stringify({
+ tournamentId: tournamentId,
+ authorId: value.authorId,
+ }),
+ }).then((res) => mutate("/api/admin"));
+ }}
+ >
+ Click here to delete the tournament permanently
+
+
+ Log in
+
+ {Object.values(props.providers).map((provider) => (
+
+ ))}
+
);
-export default function Admin({providers}) {
- const [ session, loading ] = useSession()
+export default function Admin({ providers }) {
+ const [session, loading] = useSession();
- if (loading)
- return
+ if (loading) return ;
- return (<>
-
-
+
+ );
+}
const TournamentProviderLink = (props) => (
- {props.name}
+
+ {props.name}
+
);
const Logo = () => {
- const [ showInfo, setShowInfo ] = useState(false);
+ const [showInfo, setShowInfo] = useState(false);
+ return (
+
+ {" "}
+ {" "}
+
+
+
+
+
+
+
+
+
+ setShowInfo(false)}
+ >
+
+
+ );
+};
+/*
return (
- setShowInfo(false)}>
+
setShowInfo(false)} style={{visibility: 'hidden'}}>
setShowInfo(true)} />
@@ -32,78 +116,467 @@ const Logo = () => {
);
};
+*/
+
+function Arrows() {
+ let translateX = 0;
+ let dflt = window.matchMedia("(max-width: 419px)");
+ let x = window.matchMedia("(min-width: 420px)");
+ let x1 = window.matchMedia("(min-width: 500px)");
+ let x2 = window.matchMedia("(min-width: 600px)");
+ let x3 = window.matchMedia("(min-width: 740px)");
+ let x4 = window.matchMedia("(min-width: 900px)");
+ let x5 = window.matchMedia("(min-width: 1160px)");
+ let x6 = window.matchMedia("(min-width: 1500px)");
+ let x7 = window.matchMedia("(min-width: 1740px)");
+ let x8 = window.matchMedia("(min-width: 2100px)");
+
+ let count = 0;
+
+ function scrollLeft() {
+ count--;
+
+ if (count == 0) {
+ document.querySelector("#left").style.opacity = 0.2;
+ document.querySelector("#left").style.pointerEvents = "none";
+ } else {
+ document.querySelector("#left").style.opacity = 1;
+ document.querySelector("#left").style.pointerEvents = "auto";
+ }
+
+ if (x7.matches || x8.matches) {
+ translateX += 97;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "%";
+ } else if (x5.matches || x6.matches || x4.matches) {
+ translateX += 95;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "%";
+ } else if (x3.matches) {
+ translateX += 101;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "%";
+ } else if (x.matches || x1.matches || x2.matches) {
+ translateX += 730;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "px";
+ } else {
+ translateX += 550;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "px";
+ }
+ }
+
+ function scrollRight() {
+ count++;
+ document.querySelector("#left").style.opacity = 1;
+ document.querySelector("#left").style.pointerEvents = "auto";
+ if (x7.matches || x8.matches) {
+ translateX -= 97;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "%";
+ } else if (x5.matches || x6.matches || x4.matches) {
+ translateX -= 95;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "%";
+ } else if (x3.matches) {
+ translateX -= 101;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "%";
+ } else if (x.matches || x1.matches || x2.matches) {
+ translateX -= 730;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "px";
+ } else {
+ translateX -= 550;
+ document.querySelector("#column").style.top = "00px";
+ document.querySelector("#column").style.left = translateX + "px";
+ }
+ }
+
+ return (
+
+
+ );
+}
+
+const Title = () => {
+ return (
+ {
+ scrollLeft();
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+function Filters(props) {
+ return (
+
+ Upcoming Tournaments
+
+ Filters
+
+
+
+
+
+
+
+ );
+}
+
+function Img(props) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+
+
const TournamentDay = (props) => (
+
+ Characters
+ Stages
+
+
+
+
+
+
+
- (
+
+
setShow(false)} submit={() => {
- if (error)
- return;
- fetch('/api/submittournament', {method: 'POST', body: JSON.stringify({
- "name": tournamentName,
- "datetime": new Date(datetime).getTime(),
- "challonge": challongeURL,
- "smashgg": smashggURL,
- "discord": discordURL
- })}).then(res => res.json()).then(data => {
- if (data.error) {
- alert(data.error);
- } else {
- mutate('/api/yourtournaments');
- }
- });
- setShow(false);
- }}>
-
- setTournamentName(event.target.value)} value={tournamentName} style={{width: "30%"}} maxLength={30} placeholder="x weekly #1" />
- Not more than 30 characters!
-
- setSmashGGURL(event.target.value)} value={smashggURL} style={{width: "100%"}} placeholder="smashgg.com/tournament/..." />
- setChallongeURL(event.target.value)} value={challongeURL} placeholder="challonge.com/..." />
- setDiscordURL(event.target.value)} value={discordURL} placeholder="discord.gg/..." />
-
- setDatetime(event.target.value)} value={datetime} style={{backgroundColor: 'white', color: 'black'}} />
- Your time will be converted into CET! CET time right now is
-
- );
+ const [show, setShow] = useState(false);
+ var error = "";
+
+ const [tournamentName, setTournamentName] = useState("");
+ const [smashggURL, setSmashGGURL] = useState("");
+ const [challongeURL, setChallongeURL] = useState("");
+ const [discordURL, setDiscordURL] = useState("");
+ const [datetime, setDatetime] = useState(0);
+
+ if (!tournamentName) {
+ error = "Tournament name is missing!";
+ } else if (!smashggURL && !challongeURL && !discordURL) {
+ error =
+ "You have to specify at least one smashgg url, challonge url or a discord server!";
+ } else if (!datetime) {
+ error = "Time is invalid!";
+ } else if (new Date(datetime).getTime() < CETDate().getTime()) {
+ error =
+ "The date and time you have specified is before the current CET time!";
+ } else {
+ error = "";
+ }
+
+ return (
+ <>
+ setShow(!show)}>
+ Add new tournament
+
+ setShow(false)}
+ submit={() => {
+ if (error) return;
+ fetch("/api/submittournament", {
+ method: "POST",
+ body: JSON.stringify({
+ name: tournamentName,
+ datetime: new Date(datetime).getTime(),
+ challonge: challongeURL,
+ smashgg: smashggURL,
+ discord: discordURL,
+ }),
+ })
+ .then((res) => res.json())
+ .then((data) => {
+ if (data.error) {
+ alert(data.error);
+ } else {
+ mutate("/api/yourtournaments");
+ }
+ });
+ setShow(false);
+ }}
+ >
+
+
+
+ setTournamentName(event.target.value)}
+ value={tournamentName}
+ className={styles.nameIn}
+ maxLength={30}
+ placeholder="Name"
+ />
+
+
+
+
+
+
+ setDatetime(event.target.value)}
+ value={datetime}
+ className={styles.dateIn}
+ />
+
+
+ setSmashGGURL(event.target.value)}
+ value={smashggURL}
+ className={styles.smashggIn}
+ placeholder="Links"
+ />
+
+
+ setChallongeURL(event.target.value)}
+ style={{ top: "5px" }}
+ className={styles.challongeIn}
+ value={challongeURL}
+ placeholder="Links"
+ />
+
+
+ setDiscordURL(event.target.value)}
+ style={{ top: "-90px" }}
+ className={styles.discordIn}
+ value={discordURL}
+ placeholder="Links"
+ />
+
+
+
+
+ );
};
-const fetcher = (url) => fetch(url).then((res) => res.json())
+function Measure() {
+ return ;
+}
+
+const Nav = (props) => (
+
{props.day}
-
-
- {props.tournaments}
+
);
-const TournamentContainer = (props) => (<>
-
+ {props.day}
+
+
+
+
+ {props.tournaments}
- {props.name}
- {props.time && <>
-
-
-);
+function AddIt(props) {
+ return (
+ {props.time}
- }
-
- {props.challonge &&
+ 
+
+ );
+}
+
+function TournamentContainer(props) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function Calendar(props) {
+ return (
+
+
+
+
+ {props.time && (
+ <>
+
+
+
+
+
+
+ {props.time && (
+ <>
+
+
+ {props.time}
+
+ )}
+
+ {props.challonge && (
+
+
+ {" "}
+ {props.name}{" "}
+
+
+
+ );
+}
-const fetcher = (url) => fetch(url).then((res) => res.json())
+const fetcher = (url) => fetch(url).then((res) => res.json());
export default function Home() {
- const { data, error } = useSwr('/api/tournaments', fetcher, {refreshInterval: 1000 * 60 * 20})
+ const { data, error } = useSwr("/api/tournaments", fetcher, {
+ refreshInterval: 1000 * 60 * 20,
+ });
+
+ let [info, setSidebar] = useState(false);
+ let showIt = () => setSidebar((info = true));
+ let showOff = () => setSidebar((info = false));
+ let [imgStage, setImgStage] = useState(false);
+ let [clickOff, setClickOff] = useState(false);
+ let showImgContain = () => setClickOff((clickOff = true));
+ let showImg = () => setImgStage((imgStage = true));
+ let imgOff = () => setImgStage((imgStage = false));
if (error) return <>{error};
- if (!data) return ;
+ if (!data)
+ return (
+
+ );
const items = [];
var currentDay = new Date().getDay();
- if (currentDay == 0)
- currentDay = 7;
+ if (currentDay == 0) currentDay = 7;
currentDay--;
const lastDayToIterate = currentDay === 0 ? 6 : currentDay - 1;
var i = currentDay;
var increment = 0;
- while(true) {
- items.push(Mar, 2021
+
+
+
+
+ MON
+TUE
+WED
+THU
+FRI
+SAT
+SUN
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+
+
+ 8
+ 9
+ 10
+ 11
+ 12
+ 13
+ 14
+
+
+ 15
+ 16
+ 17
+ 18
+ 19
+ 20
+ 21
+
+
+ 22
+ 23
+ 24
+ 25
+ 26
+ 27
+ 28
+
-
- SSBM EU Tournaments
-
-
- {items}
-
-
- )
-}
\ No newline at end of file
+
+ ![]()
+
+
+
+ SSBM EU Tournaments
+
+
+
+ My page title
+
+
+
+
+ {items}
+
+
+
+
- {text}
-
- );
+ var text;
+ var text1;
+ var text2;
+ var color;
+
+ switch (props.state) {
+ case 0:
+ text = "Not verified";
+ color = "white";
+ break;
+ case 1:
+ text1 = "Declined";
+ color = "white";
+ break;
+ case 2:
+ text2 = "Accepted";
+ color = "white";
+ break;
+ }
+
+ return (
+
+ {text}
+ {text1}
+ {text2}
+
+ );
};
const CETTime = () => {
- var d = CETDate();
- return twoDigitFix(d.getHours()) + ":" + twoDigitFix(d.getMinutes());
+ var d = CETDate();
+ return twoDigitFix(d.getHours()) + ":" + twoDigitFix(d.getMinutes());
};
const TournamentFormContainer = (props) => (
- <>
- {props.header}
- {props.children}
-
+ <>
+ {props.header}
+ {props.children}
+
);
const DashboardTournamentCreationContainer = () => {
- const [ show, setShow ] = useState(false);
- var error = "";
-
- const [ tournamentName, setTournamentName ] = useState("");
- const [ smashggURL, setSmashGGURL] = useState("");
- const [ challongeURL, setChallongeURL ] = useState("");
- const [ discordURL, setDiscordURL ] = useState("");
- const [ datetime, setDatetime ] = useState(0);
-
- if (!tournamentName) {
- error = "Tournament name is missing!";
- } else if (!smashggURL && !challongeURL && !discordURL) {
- error = "You have to specify at least one smashgg url, challonge url or a discord server!"
- } else if (!datetime) {
- error = "Time is invalid!";
- } else if (new Date(datetime).getTime() < CETDate().getTime()) {
- error = "The date and time you have specified is before the current CET time!";
- } else {
- error = "";
- }
-
- return (<>
- setShow(!show)}>Add new tournament
-
- {error}
-
- Add Tournament
+
+ {error}
+
+
+
+
+);
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
const DashboardContainer = (props) => {
- const { data, error } = useSwr('/api/yourtournaments', fetcher, {refreshInterval: 10000})
-
- if (error) {
- return "Error!";
- }
- if (!data) {
- return
- }
-
- return (
-
+
+
+
+
+
+
+
+
+
+
+
- Your Tournaments
-
-
);
- };
+ const { data, error } = useSwr("/api/yourtournaments", fetcher, {
+ refreshInterval: 10000,
+ });
-const LoginContainer = (props) => (
-
-
-
-
- {
- data.data.length === 0 ? No tournaments submitted yet :
- <>
- {data.data.map((value, index) => {
- var d = new Date(Number(value.datetime));
- d.setUTCHours(d.getUTCHours() + 1);
- var tournamentId = value._id;
- return (
-
-
- Name: {value.name}, Datetime: {d.toDateString()} {twoDigitFix(d.getUTCHours())}:{twoDigitFix(d.getMinutes())} CET Time
- {value.discord && (
- );
- })}
-
- }
- Discord: {value.discord}
)}
- {value.smashgg && (SmashGG: {value.smashgg}
)}
- {value.challonge && (Challonge: {value.challonge}
)}
-
- Log in
-
- {Object.values(props.providers).map(provider => (
-
- signIn(provider.id)}>Sign in with {provider.name}
+ if (error) {
+ return "Error!";
+ }
+ if (!data) {
+ return ;
+ }
+
+ return (
+ Publish - SSBM EU Tournaments
+
- return (<>
-
- Publish - SSBM EU Tournaments
-
-
- {session ?
+
+ );
+};
+
+const LoginContainer = (props) => (
+
+
+
+ {data.data.length === 0 ? (
+
+ No tournaments submitted yet
+
+ ) : (
+ <>
+ {data.data.map((value, index) => {
+ var d = new Date(Number(value.datetime));
+ d.setUTCHours(d.getUTCHours() + 1);
+ var tournamentId = value._id;
+ return (
+
+ );
+ })}
+
+ )}
- ))}
+
+ Log in
+
+ {Object.values(props.providers).map((provider) => (
+
+ ))}
+
);
-export default function Publish({providers}) {
- const [ session, loading ] = useSession()
+export default function Publish({ providers }) {
+ const [session, loading] = useSession();
- if (loading)
- return
+ if (loading) return ;
+
+ return (
+ <>
+
+
+
+
- )
+ );
}
Publish.getInitialProps = async (context) => {
- return {
- providers: await providers(context)
- }
-}
\ No newline at end of file
+ return {
+ providers: await providers(context),
+ };
+};
+
+/*
+Datetime: {d.toDateString()} {twoDigitFix(d.getUTCHours())}:{twoDigitFix(d.getMinutes())} CET Time
+ {value.discord && (Discord: {value.discord}
)}
+ {value.smashgg && (SmashGG: {value.smashgg}
)}
+ {value.challonge && (Challonge: {value.challonge}
)}*/
diff --git a/pages/settings.js b/pages/settings.js
new file mode 100644
index 0000000..abb39e9
--- /dev/null
+++ b/pages/settings.js
@@ -0,0 +1,92 @@
+
+import styles from "../styles/Settings.module.css";
+
+
+function Nav() {
+ function linkPub(e) {
+ window.location.href = "/publish";
+ }
+
+ function linkSet(e) {
+ window.location.href = "/settings";
+ }
+
+
+ return (
+
+
+ );
+ }
+
+function Settings(props) {
+ return (
+
+ {" "}
+ {" "}
+
+
+
+
+
+
+
+
+
+
+ Settings
+
+ );
+ }
+
+export default function (){
+ return (
+ Region
+ +
+
+ )
+}
\ No newline at end of file
diff --git a/public/fox.png b/public/fox.png
new file mode 100644
index 0000000..02dd6a1
Binary files /dev/null and b/public/fox.png differ
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 9091143..a033000 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,18 +1,318 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");
+
+.navbar {
+ height: 70px;
+ width: 100%;
+ position: fixed;
+ left: 0%;
+ bottom: 0;
+ background: #f8f9fa;
+}
+
+.navhome {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 22.5%;
+ transform: translate(-50%, -50%);
+ top: 50%;
+}
+
+.house {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 40%;
+}
+
+.navtournaments {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 50%;
+}
+
+.person {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 45%;
+}
+
+.navsettings {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 77.5%;
+ transform: translate(-50%, -50%);
+ top: 50%;
+}
+
+.cogs {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 45%;
+}
+
+.homeTitle {
+ margin-top: -25px;
+ top: 58px;
+ font-weight: 700;
+ font-size: 26px;
+ margin-left: 25px;
+ position: relative;
+ white-space: nowrap;
+ font-family: Lato;
+}
+
+.filterBtn {
+ position: relative;
+ height: 42px;
+ width: 42px;
+ background: #171717;
+ margin-top: 25px;
+ margin-left: 25px;
+ z-index: +1;
+ top: 65px;
+ border-radius: 16px;
+}
+.imgselectContainer {
+ position: absolute;
+ height: 400px;
+ width: 100%;
+ background: #F8F9FA;
+ right: 0;
+ bottom: 0;
+ box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
+ border-radius: 50px;
+ z-index: +1;
+
+ border-radius: 50px;
+}
+.charAndStages{
+ position: absolute;
+ width: 300px;
+ height: 60px;
+ background: #F1F5F6;
+ top: calc(50% - 125px);
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 200px;
+}
+.char{
+ position: absolute;
+ left: 2.5px;
+ top: 2.5px;
+ width: 150px;
+ height: calc(100% - 5px);
+ background: black;
+ border-radius: 200px;
+ color: white;
+ text-align: center;
+ padding: 15px;
+ font-family: Poppins;
+}
+
+.charOff{
+ position: absolute;
+ left: 2.5px;
+ top: 2.5px;
+ width: 150px;
+ height: calc(100% - 5px);
+ background: none;
+ border-radius: 200px;
+ color: rgb(0, 0, 0);
+ text-align: center;
+ padding: 15px;
+ font-family: Poppins;
+}
+.stages{
+ position: absolute;
+ left: 150px;
+ top: 2.5px;
+ width: 150px;
+ height: calc(100% - 5px);
+ background: none;
+ border-radius: 200px;
+ color: black;
+ text-align: center;
+ padding: 15px;
+ font-family: Poppins;
+}
+.stagesOn{
+ position: absolute;
+ left: 150px;
+ top: 2.5px;
+ width: 150px;
+ height: calc(100% - 5px);
+ background: black;
+ border-radius: 200px;
+ color: rgb(255, 255, 255);
+ text-align: center;
+ padding: 15px;
+ font-family: Poppins;
+}
+.imgContainer{
+ position: absolute;
+ left: 50%;
+ top: calc(50% + 50px);
+ transform: translate(-50%, -50%);
+ border-radius: 30px;
+ border: 2px solid black;
+ width: 85%;
+ height: 240px
+}
+.imgContainerOff{
+ display: none;
+}
+
+.showImgOff{
+ display: none
+}
+.stageContainer{
+ display: none;
+}
+.stageContainerOn{
+ position: absolute;
+ left: 50%;
+ top: calc(50% + 50px);
+ transform: translate(-50%, -50%);
+ border-radius: 30px;
+ border: 2px solid blue;
+ width: 85%;
+ height: 240px
+}
+
+
+.stage{
+ left: 15px;
+ top: 15px;
+ position: absolute;
+ border: 2px solid blue;
+ width: 55px;
+ height: 55px;
+ border-radius: 50%;
+}
+.img{
+ left: 15px;
+ top: 15px;
+ position: absolute;
+ border: 2px solid grey;
+ width: 55px;
+ height: 55px;
+ border-radius: 50%;
+}
+.filterContainer {
+ width: 0;
+ height: 0;
+ left: 0;
+z-index: +2;
+ margin: 0;
+ position: absolute;
+}
+.filterHeader {
+ display: none;
+}
+.filter {
+ width: 95px;
+ height: 40px;
+ background: black;
+ border-radius: 50px;
+ position: absolute;
+ z-index: +100000;
+ left: 100px;
+ top: 25px;
+}
+.removefilter {
+ position: absolute;
+ transform: translate(-50%, -50%);
+ top: 50%;
+ left: 20px;
+ width: 35px;
+ height: 35px;
+ background: white;
+ border-radius: 100%;
+}
+
+.filterSvg {
+ position: relative;
+ top: 7.5px;
+ left: 7px;
+}
.container {
display: flex;
- font-family: 'Roboto';
- padding: 50px;
- padding-top: 120px;
- cursor: grab;
- max-height: 100vh;
+ font-family: "Roboto";
+ background-color: none;
+ z-index: +300;
+ position: relative;
}
-@media screen and (min-width: 1920px) {
- .container {
- cursor: default;
- }
+.arrows {
+ width: 35px;
+ position: absolute;
+ height: 100px;
+ z-index: +2000;
+ right: calc(0% + 40px);
+ top: 128px;
+}
+
+.arrowLeft {
+ position: absolute;
+ left: 0%;
+ top: 50%;
+ background: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+ opacity: 0.2;
+}
+.arrowRight {
+ position: absolute;
+ left: 100%;
+ top: 50%;
+ background: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ transform: translate(-50%, -50%);
+}
+
+.righticon {
+ position: absolute;
+ left: 32%;
+ top: 30%;
+ fill: black;
+}
+.lefticon {
+ position: absolute;
+ left: 26%;
+ top: 30%;
+ fill: black;
+}
+
+.scrollContain {
+ position: relative;
+ overflow: visible;
+}
+
+.container {
+}
+
+.allTournaments {
+ position: absolute;
+ display: flex;
+ flex-direction: row;
+ margin-left: 0px;
+ width: 100px;
+
+ height: 100px;
}
.container > :last-child {
@@ -20,30 +320,376 @@
}
.column {
- flex-direction: column;
- justify-content: center;
+ flex-direction: row;
text-align: center;
- margin-right: 20px;
- min-width: 230px;
+ width: 400px;
+ transform: translate(-50%, 50%);
+ margin: -50px;
+ margin-left: 200px;
+ height: 60px;
+}
+
+.logo {
+ display: none;
+}
+
+.days {
+ font-family: Lato;
+ font-weight: 700;
+ position: relative;
+ left: 29px;
+ top: 40px;
+ font-size: 26px;
+ margin-top: 70px;
+}
+
+.dayContainer {
+ position: relative;
+ width: 100%;
+ left: -88px;
+ height: 20px;
}
.column > :last-child {
margin-bottom: 0;
}
+.column div {
+ display: flex;
+ flex-direction: row;
+}
+
+.tournaments {
+ overflow-y: visible;
+}
+
+.tourneyDiv {
+ overflow: hidden;
+ width: 312px;
+ height: 187px;
+ background-color: #171717;
+ position: relative;
+ left: 375px;
+ transform: translate(-50%, -50%);
+ border-radius: 40px;
+}
+
+.fox {
+ position: relative;
+ left: 168px;
+ width: 141px;
+ height: 265.6px;
+ top: 19px;
+ pointer-events: none;
+}
+
.tournament_container {
- border: 3px solid #d9d9d9;
- border-radius: 30px;
- font-size: 28px;
- color: #d9d9d9;
- padding: 25px;
- margin-bottom: 25px;
+ left: 105px;
+ opacity: 1;
+ margin-left: -40px;
+ transform: translate(-50%, -50%);
+ width: 375px;
+ margin-top: 130px;
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ transition: 0.3s;
+}
+
+.backButton {
+ display: none;
+}
+
+.backIcon {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 73%;
+ transform: translate(-50%, -50%);
+ top: 75%;
+}
+
+.foxadd {
+ display: none;
+}
+
+.infoOff {
+ width: 0px;
+ height: 00px;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+ background: rgb(0, 0, 0);
+}
+
+.infoOn {
+ position: absolute;
+ background: rgb(0, 0, 0);
+ width: 100%;
+ height: 100%;
+ left: 50%;
+ top: 50%;
+ z-index: +2;
+ transform: translate(-50%, -50%);
+ transition: 0.3s;
+ overflow: hidden;
+
+}
+
+.backButtonOn {
+ top: -30px;
+ left: -30px;
+ position: relative;
+ background: white;
+ width: 220px;
+ height: 220px;
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.foxaddOn {
+ position: absolute;
+ left: calc(100% - 290px);
+
+ width: 401px;
+ height: 775.6px;
+ top: 25%;
+ opacity: 0.8;
+}
+
+.scrollOn {
+ width: 500px;
+ scrollbar-width: none;
+ left: calc(50% - 30px);
+ overflow: visible;
+ overflow-x: scroll;
+ top: 260px;
+ height: 400px;
+ padding-top: 10px;
+ transform: translate(-50%, -50%);
+ position: relative;
+}
+
+.tournament_containerOn {
+ left: 190px;
+ opacity: 1;
+ margin-left: -205px;
+ transform: translate(-50%, -50%);
+ width: 375px;
+ margin-top: 360px;
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ z-index: +2000;
+ transition: 0.3s;
+ scrollbar-width: none;
+ transition: 0.3s;
+}
+
+.tourneyDivOn {
+ overflow: hidden;
+ width: 157px;
+ height: 66px;
+ background-color: #ffffff;
+ position: relative;
+ left: 375px;
+ transform: translate(-50%, -50%);
+ border-radius: 22px;
+}
+
+.calendarOn {
+ position: relative;
+ margin-top: 700px;
+ height: 00px;
+ white-space: nowrap;
+ font-family: Poppins;
+ font-size: 23px;
+ width: 100%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
-.tournament_container > :last-child {
+.namess {
+ position: absolute;
+ z-index: +3000;
+
+ width: 500px;
+ height: 500px;
+ left: 0px;
+ top: 100px;
+ font-size: 50px;
+ color: rgb(255, 255, 255);
+}
+
+.tourneament_nameOn {
+ position: absolute;
+ color: rgb(0, 0, 0);
+ top: 50%;
+ left: 50%;
+ font-family: Poppins;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 20px;
+ line-height: 20px;
+ transform: translate(-50%, -50%);
+}
+
+.tourneament_name {
+ position: absolute;
+ color: white;
+ top: 65px;
+ left: 30px;
+ font-family: Poppins;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 34px;
+ line-height: 20px;
+}
+
+.cet_time {
+ position: absolute;
+ color: rgb(180, 180, 180);
+ top: 100px;
+ left: 30px;
+ font-family: Poppins;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 20px;
+}
+
+.links {
+ margin-top: -40px;
+}
+
+.tournament_container > :first-child {
margin-bottom: 0;
}
+.scroll {
+ width: 500px;
+ scrollbar-width: none;
+ left: calc(50% - 30px);
+ overflow: visible;
+ overflow-x: scroll;
+ top: 160px;
+ padding-top: 10px;
+ transform: translate(-50%, -50%);
+ position: relative;
+ height: 220px;
+}
+
+.calendarContainer {
+ position: relative;
+ margin-top: 570px;
+ height: 280px;
+ white-space: nowrap;
+ font-family: Poppins;
+ font-size: 23px;
+ width: 100%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.month {
+ position: relative;
+ margin-left: 30px;
+ margin-top: -70px;
+ font-weight: 700;
+ font-size: 26px;
+ font-family: Lato;
+}
+
+.calendarDiv {
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: relative;
+ background: white;
+ margin-top: 155px;
+ width: 332px;
+ height: 259px;
+ border-radius: 40px;
+ display: grid;
+ box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.15);
+ grid-template-columns: 12% 12% 12% 12% 12% 12% 12%;
+ grid-template-rows: 17% 17% 17% 17%;
+ overflow: hidden;
+}
+
+.num {
+ color: black;
+ font-size: 20px;
+ position: relative;
+ font-family: poppins;
+ width: 20px;
+ height: 20px;
+ left: 35px;
+ top: 75px;
+ transform: translate(-50%, -50%);
+ padding: 10px;
+ display: flex;
+ flex-direction: row;
+ margin: 0 auto;
+}
+
+.row1 {
+ display: flex;
+ position: absolute;
+ left: -15px;
+}
+
+.row2 {
+ display: flex;
+ margin-top: 40px;
+ position: absolute;
+ left: -16px;
+}
+
+.row3 {
+ display: flex;
+ margin-top: 80px;
+ position: absolute;
+ left: -16px;
+}
+
+.row4 {
+ display: flex;
+ margin-top: 120px;
+ position: absolute;
+ left: -17px;
+}
+
+.row1 div {
+ margin-left: 20px;
+}
+
+.row2 div {
+ margin-left: 20px;
+}
+
+.row3 div {
+ margin-left: 20px;
+}
+
+.row4 div {
+ margin-left: 20px;
+}
+
+.day {
+ display: flex;
+ flex-direction: row;
+ position: absolute;
+ font-size: 12px;
+ top: 24px;
+ color: #a9a9a9;
+ left: 15px;
+}
+
+.day h3 {
+ margin-left: 14px;
+}
+
.link_button {
display: block;
border-radius: 3px;
@@ -51,7 +697,7 @@
color: white;
font-size: 18px;
margin-bottom: 8px;
- margin-left: 4px;
+ display: none;
margin-right: 4px;
cursor: pointer;
user-select: none;
@@ -61,6 +707,7 @@
transition: 0.1s ease-in-out;
font-size: 16px;
color: #d9d9d9;
+ display: none;
}
.add_button:hover {
@@ -68,30 +715,582 @@
color: black;
}
-.scroll::-webkit-scrollbar-track
-{
- border-radius: 3px;
- box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+.scroll::-webkit-scrollbar {
+ width: 0px;
+ /* Remove scrollbar space */
+ background: transparent;
+ /* Optional: just make scrollbar invisible */
}
-.scroll::-webkit-scrollbar
-{
- border-radius: 3px;
- width: 8px;
- background-color: #c9938c;
+/* Optional: show position indicator in red */
+
+.scroll::-webkit-scrollbar-thumb {
+ background: none;
}
-.scroll::-webkit-scrollbar-thumb
-{
- border-radius: 3px;
- background-color: #C7493A;
- background-image: -webkit-linear-gradient(45deg,
- rgba(255, 255, 255, .2) 25%,
- transparent 25%,
- transparent 50%,
- 0b0b0e 50%,
- rgba(255, 255, 255, .2) 75%,
- transparent 75%,
- transparent)
-}
\ No newline at end of file
+@media screen and (min-width: 420px) {
+ .scroll {
+ left: calc(50% + 50px);
+ }
+
+ .tournament_container {
+ left: 25px;
+ }
+ .column {
+ margin-left: 380px;
+ overflow: visible;
+ }
+
+ .container {
+ display: flex;
+ font-family: "Roboto";
+ max-height: 100vh;
+ left: -180px;
+ position: relative;
+ background-color: none;
+ }
+}
+
+@media screen and (min-width: 500px) {
+ .scroll {
+ width: 600px;
+ left: calc(50% + 100px);
+ }
+}
+
+@media screen and (min-width: 600px) {
+ .scroll {
+ width: 700px;
+ left: calc(50% + 150px);
+ }
+}
+
+@media only screen and (min-width: 740px) {
+.imgselectContainer{
+ right: 0;
+ bottom: 0;
+ width: 400px;
+}
+
+ .column div {
+ padding: 20px;
+ }
+ .allTournaments {
+ margin-left: 150px;
+ width: 500px;
+ height: 500px;
+ }
+
+ .container {
+ overflow-x: hidden;
+ padding-bottom: 550px;
+ top: 238px;
+ overflow-y: hidden;
+ left: calc(48% + 180px);
+ margin: 0;
+ height: 500px;
+ width: 280px;
+ transform: translate(-50%, -50%);
+ }
+
+ .filterBtn {
+ z-index: +100000;
+ position: absolute;
+ top: calc(100% - 480px);
+ }
+
+ .filterContainer {
+ width: 300px;
+ height: 70px;
+ background: white;
+ border-radius: 25px;
+ left: calc(0% + 10px);
+ bottom: calc(0% + 400px);
+
+ z-index: +10000;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ .filterHeader {
+ position: absolute;
+ font-family: lato;
+ z-index: +1000;
+ font-size: 26px;
+ display: block;
+ left: 30px;
+ top: calc(100% - 530px);
+ }
+ .filter {
+ top: 18px;
+ left: 80px;
+ }
+
+ .arrows {
+ width: 75px;
+ left: calc(0% + 120px);
+ margin-top: -70px;
+
+ position: absolute;
+ }
+
+ .arrowLeft {
+ opacity: 0.2;
+ background: black;
+ width: 60px;
+ height: 60px;
+ }
+ .arrowRight {
+ background: black;
+ width: 60px;
+ height: 60px;
+ }
+ .righticon {
+ fill: white;
+ }
+ .lefticon {
+ fill: white;
+ }
+ .container div {
+ position: relative;
+ top: 55%;
+ transform: translate(-50%, -50%);
+ left: 45%;
+ }
+ .homeTitle {
+ z-index: +70;
+ top: 0;
+ left: calc(48% - 25px);
+ margin-top: 80px;
+ padding: 0;
+ font-size: 33px;
+ }
+
+ .sideBar {
+ left: 0;
+ top: 0;
+ width: 320px;
+ height: 100%;
+ z-index: +100;
+ background: #edeff1;
+ position: fixed;
+ }
+ .navbar {
+ width: 320px;
+ background: none;
+ }
+ .calendarContainer {
+ bottom: 0;
+ position: absolute;
+ }
+ .calendarDiv {
+ position: absolute;
+ margin-top: 250px;
+ width: 85%;
+ height: 210px;
+ border-radius: 30px;
+ box-shadow: none;
+ }
+
+ .month {
+ position: relative;
+ margin-left: 30px;
+ margin-top: -50px;
+ top: 110px;
+ }
+ .column div {
+ display: flex;
+ flex-direction: column;
+ }
+ .scroll {
+ overflow-y: visible;
+ top: 280px;
+ height: 660px;
+ margin-top: 70px;
+ z-index: +10;
+ width: 500px;
+ margin-left: 160px;
+ }
+ .tournament_container {
+ left: 200px;
+ margin-left: 0;
+ top: 190px;
+ margin-top: 65px;
+ flex-direction: column;
+ }
+
+ .tourneyDiv {
+ width: 264px;
+ height: 146px;
+ margin-top: -172px;
+ left: 375px;
+ border-radius: 20px;
+ top: 140px;
+ transition: 0.2s;
+ }
+
+ .days {
+ top: 0;
+ font-weight: 400;
+ margin-top: 130px;
+ margin-left: 95px;
+ font-size: 30px;
+ font-family: poppins;
+ }
+ .num {
+ font-size: 16px;
+ left: 28px;
+ top: 60px;
+ }
+
+ .row1 {
+ display: flex;
+ position: absolute;
+ left: -15px;
+ }
+ .row2 {
+ display: flex;
+ margin-top: 35px;
+ position: absolute;
+ left: -16px;
+ }
+ .row3 {
+ display: flex;
+ margin-top: 70px;
+ position: absolute;
+ left: -16px;
+ }
+ .row4 {
+ display: flex;
+ margin-top: 105px;
+ position: absolute;
+ left: -17px;
+ }
+ .row1 div {
+ margin-left: 15px;
+ }
+ .row2 div {
+ margin-left: 15px;
+ }
+ .row3 div {
+ margin-left: 15px;
+ }
+ .row4 div {
+ margin-left: 15px;
+ }
+ .day {
+ display: flex;
+ flex-direction: row;
+ position: absolute;
+ font-size: 10px;
+ top: 18px;
+ color: #a9a9a9;
+ left: 9px;
+ }
+ .day h3 {
+ margin-left: 12px;
+ }
+ .tourneament_name {
+ margin-top: -90px;
+ margin-left: 0px;
+ font-size: 28px;
+ text-align: left;
+ transition: 0.3s;
+ }
+
+ .cet_time {
+ position: absolute;
+ color: rgb(180, 180, 180);
+ top: 30px;
+ margin-top: -305px;
+ left: 30px;
+ margin-left: 0px;
+ font-family: Poppins;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ transition: 0.3s;
+ }
+ .tourneyDiv:hover {
+ width: 304px;
+ height: 166px;
+ cursor: pointer;
+ }
+ .tourneyDiv:hover .fox {
+ left: 150px;
+ }
+ .tourneyDiv:active {
+ pointer-events: none;
+ }
+ .tourneyDiv:target {
+ pointer-events: none;
+ }
+ .tourneyDiv:hover .tourneament_name {
+ margin-left: 10px;
+ }
+ .tourneyDiv:hover .cet_time {
+ margin-top: -335px;
+ margin-left: 10px;
+ }
+ .column {
+ flex-direction: row;
+ text-align: center;
+ width: 400px;
+ transform: translate(-50%, 50%);
+ margin-left: -65px;
+ overflow: visible;
+ height: 60px;
+ }
+ .fox {
+ position: relative;
+ left: 118px;
+ width: 121px;
+ height: 235.6px;
+ top: -9px;
+ transition: 0.2s;
+ }
+}
+
+@media only screen and (min-width: 900px) {
+ .container {
+ overflow-x: hidden;
+ padding-bottom: 550px;
+ top: 238px;
+ overflow-y: hidden;
+ left: calc(48% + 160px);
+ margin: 0;
+ height: 500px;
+ width: 600px;
+ transform: translate(-50%, -50%);
+ position: relative;
+ }
+ .homeTitle {
+ z-index: +70;
+ top: 0;
+ left: calc(48% - 120px);
+ margin-top: 80px;
+ padding: 0;
+ position: relative;
+ font-size: 40px;
+ white-space: nowrap;
+ }
+
+ .days {
+ margin-left: -20px;
+ }
+ .scroll {
+ overflow-y: visible;
+ top: 280px;
+ height: 660px;
+ margin-top: 70px;
+ z-index: +10;
+ width: 500px;
+ margin-left: 45px;
+ transform: translate(-50%, -50%);
+ position: relative;
+ }
+ .allTournaments {
+ margin-left: 300px;
+ }
+}
+
+@media only screen and (min-width: 1160px) {
+ .homeTitle {
+ z-index: +70;
+ left: calc(48% - 250px);
+ padding: 0;
+ font-size: 40px;
+ white-space: nowrap;
+ }
+ .allTournaments {
+ margin-left: 420px;
+ }
+ .container {
+ overflow-x: hidden;
+ padding-bottom: 550px;
+ overflow-y: hidden;
+ left: calc(48% + 160px);
+ margin: 0;
+ height: 500px;
+ width: 900px;
+ transform: translate(-50%, -50%);
+ }
+ .arrows {
+ width: 75px;
+ position: absolute;
+ height: 100px;
+ z-index: +2000;
+ left: calc(48% + 270px);
+ top: 60px;
+ margin-top: -3px;
+ }
+ .scroll {
+ overflow-y: visible;
+ top: 280px;
+ height: 660px;
+ margin-top: 70px;
+ z-index: +10;
+ width: 500px;
+ margin-left: -65px;
+ transform: translate(-50%, -50%);
+ position: relative;
+ }
+ .days {
+ font-family: Poppins;
+ position: relative;
+ top: 0;
+
+ margin-left: -130px;
+ font-size: 30px;
+ }
+}
+
+@media only screen and (min-width: 1500px) {
+ .container {
+ left: calc(48% + 200px);
+ width: 1180px;
+ }
+ .container div {
+ }
+ .homeTitle {
+ font-size: 40px;
+ left: calc(48% - 390px);
+ }
+ .days {
+ font-size: 30px;
+ }
+ .allTournaments {
+ margin-left: -70px;
+ }
+ .arrows {
+ left: calc(48% + 120px);
+ }
+ .allTournaments {
+ margin-left: 385px;
+ }
+}
+
+@media only screen and (min-width: 1700px) {
+ .days {
+ font-size: 30px;
+ }
+}
+
+@media only screen and (min-width: 1740px) {
+ .container {
+ left: calc(43% + 320px);
+ width: 1450px;
+ }
+ .homeTitle {
+ font-size: 40px;
+ left: calc(43% - 390px);
+ }
+ .allTournaments {
+ margin-left: -180px;
+ }
+ .arrows {
+ left: calc(43% + 120px);
+ }
+ .allTournaments {
+ margin-left: 385px;
+ }
+}
+
+@media only screen and (min-width: 2100px) {
+ .container {
+ left: calc(37.5% + 470px);
+ width: 1750px;
+ }
+ .homeTitle {
+ font-size: 40px;
+ left: calc(37.5% - 390px);
+ }
+ .allTournaments {
+ margin-left: -320px;
+ }
+ .arrows {
+ left: calc(37.5% + 120px);
+ }
+ .allTournaments {
+ margin-left: 385px;
+ }
+}
+
+@media screen and (min-width: 1920px) {
+ .container {
+ cursor: default;
+ }
+}
+
+@media only screen and (min-height: 800px) and (min-width: 740px) {
+ .container {
+ top: 60%;
+ position: absolute;
+ }
+ .homeTitle {
+ z-index: +70;
+ top: calc(60% - 480px);
+ margin-top: 80px;
+ padding: 0;
+ position: absolute;
+ font-size: 33px;
+ white-space: nowrap;
+ }
+ .arrows {
+ top: calc(60% - 420px);
+ margin-top: -5px;
+ }
+ .days {
+ margin-top: 35px;
+ }
+}
+
+@media only screen and (min-height: 800px) and (min-width: 900px) {
+ .container {
+ top: 60%;
+ position: absolute;
+ }
+ .homeTitle {
+ z-index: +70;
+ top: calc(60% - 480px);
+ margin-top: 80px;
+ padding: 0;
+ position: absolute;
+ font-size: 40px;
+ white-space: nowrap;
+ }
+}
+
+@media only screen and (min-height: 1200px) and (min-width: 740px) {
+ .container {
+ top: 50%;
+ position: absolute;
+ }
+ .homeTitle {
+ z-index: +70;
+ top: calc(50% - 480px);
+ margin-top: 80px;
+ padding: 0;
+ position: absolute;
+ font-size: 33px;
+ white-space: nowrap;
+ }
+}
+
+@media only screen and (min-height: 1200px) and (min-width: 900px) {
+ .container {
+ top: 50%;
+ position: absolute;
+ }
+ .homeTitle {
+ z-index: +70;
+ top: calc(50% - 480px);
+ margin-top: 80px;
+ padding: 0;
+ position: absolute;
+ font-size: 40px;
+ white-space: nowrap;
+ }
+}
diff --git a/styles/Publish.module.css b/styles/Publish.module.css
index eda76e9..b63969a 100644
--- a/styles/Publish.module.css
+++ b/styles/Publish.module.css
@@ -1,37 +1,322 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
+.navbar {
+ height: 70px;
+ width: 100%;
+ position: fixed;
+ left: 0%;
+ bottom: 0;
+
+ background: #f8f9fa;
+}
+
+.measure {
+ background: grey;
+ position: absolute;
+ left: 20px;
+ top: 149px;
+ height: 30px;
+ width: 80px;
+ z-index: +1000;
+ display: none;
+}
+
+.tourneyTitle {
+ position: relative;
+ width: 230px;
+ height: 38px;
+ left: -16px;
+ top: 101px;
+ z-index: +20;
+ font-family: Lato;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 26px;
+ line-height: 37px;
+ /* identical to box height */
+ color: #030303;
+}
+
+.form {
+ color: black;
+ width: 400px;
+ background: black;
+}
+
+.navhome {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 22.5%;
+ transform: translate(-50%, -50%);
+ top: 50%;
+}
+
+.nameIn {
+ left: -120px;
+ position: relative;
+ width: -50px;
+}
+
+.smashggIn {
+ position: relative;
+}
+
+.dateIn ::placeholder {
+ top: 20px;
+ position: relative;
+ color: black;
+}
+
+.house {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 40%;
+}
+
+.navtournaments {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 50%;
+}
+
+.add {
+ color: black;
+ top: 65px;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ width: 275px;
+ white-space: nowrap;
+ margin-top: 30px;
+ font-family: Lato;
+ font-size: 26px;
+ position: relative;
+}
+
+.person {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 45%;
+}
+
+.navsettings {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 77.5%;
+ transform: translate(-50%, -50%);
+ top: 50%;
+}
+
+.cogs {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 45%;
+}
.container {
display: flex;
flex-direction: column;
- font-family: 'Roboto';
+ font-family: "Roboto";
align-items: center;
justify-content: center;
min-height: 100vh;
- background-color: #0b0b0e;
+ background-color: #f8f9fa;
color: white;
}
.dashboard_container {
- display: flex;
- flex-direction: column;
- font-family: 'Roboto';
+ font-family: "Roboto";
align-items: center;
- min-height: 100vh;
- background-color: #0b0b0e;
+ justify-content: center;
+ height: 140%;
+ background-color: #f8f9fa;
color: white;
padding: 50px;
+ width: 100%;
+ top: -30px;
+
+ position: absolute;
+ overflow-y: scroll;
+}
+
+.tourneyContainer {
+ position: relative;
+ overflow-x: scroll;
+ height: 325px;
+ width: 500px;
+ top: -49px;
+ left: -110px;
+}
+
+.tourney {
+}
+
+.remove {
+ height: 38px;
+ width: 38px;
+ border-radius: 15px;
+ position: absolute;
+ left: 255px;
+ top: 18px;
+}
+
+.name {
+ position: relative;
+ color: white;
+ top: 65px;
+ left: 30px;
+ font-family: Poppins;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 34px;
+ line-height: 20px;
+}
+
+.tourneyDiv {
+ box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.25);
+ width: 312px;
+ height: 187px;
+ background-color: #171717;
+ border-radius: 40px;
+ left: 10px;
+ top: 40px;
+ position: relative;
+}
+
+/*
+.acceptInfo{
+
+ width: 120px;
+ height: 38px;
+ margin-top: 115px;
+ background-color: white;
+ border-radius: 15px;
+ left: -50px;
+ font-size: 16px;
+ display: block;
+
+ overflow: visible;
+ color: black;
+ padding-left: 24px;
+ padding-top: 8px;
+}
+*/
+
+.dashboard_container div {
+ display: flex;
+ flex-direction: row;
+ margin-left: 10px;
+}
+
+.container div {
+ display: flex;
+ flex-direction: row;
}
.button {
- cursor: pointer;
- user-select: none;
- border: 3px solid #d9d9d9;
- padding: 20px;
- color: #d9d9d9
-}
-
-.button:hover {
- transition: 0.2s ease-in-out;
- color: #C7493A;
- border: 3px solid #C7493A;
-}
\ No newline at end of file
+ position: absolute;
+ width: 342px;
+ height: 65px;
+ left: 50%;
+ top: 90px;
+ transform: translate(-50%, -50%);
+ background: #171717;
+ white-space: nowrap;
+ box-sizing: border-box;
+ border-radius: 20px;
+ text-align: center;
+ line-height: 65px;
+ font-family: Poppins;
+ font-size: 16px;
+}
+
+@media screen and (min-width: 740px) {
+ .dashboard_container div {
+ flex-direction: column;
+ }
+
+ .container div {
+ flex-direction: column;
+ }
+
+ .tourneyContainer {
+ position: relative;
+ overflow-x: scroll;
+ height: 550px;
+ width: 500px;
+ top: 200px;
+ left: 220px;
+ left: calc(50% + 160px);
+ transform: translate(-50%, -50%);
+ }
+ .tourneyContainer::-webkit-scrollbar {
+ display: none;
+ }
+
+ .sideBar {
+ left: 0;
+ top: 0;
+ width: 320px;
+ height: 100%;
+
+ background: #edeff1;
+ position: fixed;
+ }
+ .navbar {
+ width: 320px;
+ background: none;
+ }
+
+ .button {
+ position: fixed;
+ width: 300px;
+ height: 65px;
+ left: 160px;
+
+ top: 100px;
+ z-index: +20;
+ transform: translate(-50%, -50%);
+ background: #171717;
+ white-space: nowrap;
+ box-sizing: border-box;
+ border-radius: 20px;
+ text-align: center;
+ line-height: 65px;
+ font-family: Poppins;
+ font-size: 16px;
+ bottom: 20px;
+ }
+ .tourneyTitle {
+ font-size: 33px;
+ left: 50%;
+ top: 30px;
+ }
+
+ .tourneyDiv {
+ box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.25);
+ width: 264px;
+ height: 146px;
+ background-color: #171717;
+ border-radius: 40px;
+ left: 30px;
+ top: 40px;
+ position: relative;
+ border-radius: 20px;
+ }
+ .remove {
+ height: 38px;
+ width: 38px;
+ border-radius: 15px;
+ position: absolute;
+ left: 215px;
+ top: 12px;
+ }
+}
diff --git a/styles/Settings.module.css b/styles/Settings.module.css
new file mode 100644
index 0000000..7ac7b41
--- /dev/null
+++ b/styles/Settings.module.css
@@ -0,0 +1,101 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
+
+
+.settingsContainer{
+ position: absolute;
+
+ background: #F8F9FA;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding-top: 60px;
+ padding-left: 30px;
+ color: black;
+ font-family: Poppins;
+ font-size: 25px
+ }
+
+ .inputSettings{
+ position: absolute;
+ background: black;
+ border: none;
+ color: white;
+ -webkit-appearance: none;
+ font-family: Poppins;
+ width: 300px;
+ height: 70px;
+ left: 30px;
+ top: 220px;
+ border-radius: 20px;
+ font-size: 18px;
+ padding-left: 80px;
+
+ }
+ .inputSettings:focus{
+ outline: none;
+ }
+
+ .region{
+ font-size: 20px;
+ margin-top: 60px;
+ left: 30px;
+ }
+
+ .navbar {
+ height: 70px;
+ width: 100%;
+ position: fixed;
+ left: 0%;
+ bottom: 0;
+ background: #f8f9fa;
+ }
+
+ .navhome {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 22.5%;
+ transform: translate(-50%, -50%);
+ top: 40%;
+ }
+
+ .house {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 20%;
+ fill: white;
+ }
+
+ .navtournaments {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 40%;
+ }
+
+ .person {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 25%;
+ }
+
+ .navsettings {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: 77.5%;
+ transform: translate(-50%, -50%);
+ top: 40%;
+ }
+
+ .cogs {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ top: 25%;
+ }
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index f4d01ab..8ccba9f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,7 @@ body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ background: #f8f9fa;
}
a {
@@ -13,4 +14,10 @@ a {
* {
box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+@media only screen and (min-width: 740px) {
+ body {
+ overflow: hidden;
+ }
+}