diff --git a/ui/src/App.tsx b/ui/src/App.tsx index ce11f18..646dd5e 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,6 +1,7 @@ import { Component, useContext } from "solid-js"; import { Navbar } from "~/components/navbar"; import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx"; +import { Footer } from "~/components/footer.tsx"; const App: Component = (props: any) => { const themeContext: IThemeContext = useContext(ThemeContext); @@ -10,6 +11,7 @@ const App: Component = (props: any) => {
{props.children} +
); diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx index 68c569b..273c3be 100644 --- a/ui/src/components/display-card.tsx +++ b/ui/src/components/display-card.tsx @@ -1,15 +1,9 @@ -import { Component, createSignal, For, Show } from "solid-js"; +import { Component, For, Show } from "solid-js"; import { Game, GameWithPrediction, Period, Team } from "~/interface"; import { FiClock } from "solid-icons/fi"; import { IoLocationOutline } from "solid-icons/io"; import { OcDotfill3 } from "solid-icons/oc"; import { Motion } from "solid-motionone"; -import { - AlertDialog, - AlertDialogContent, - AlertDialogDescription, - AlertDialogTitle -} from "~/components/ui/alert-dialog.tsx"; import { Avatar, AvatarImage } from "~/components/ui/avatar"; import { Badge } from "~/components/ui/badge"; import { Button } from "~/components/ui/button"; @@ -31,7 +25,8 @@ import { } from "~/components/ui/table"; import { isLive, timeUntilGame } from "~/lib/utils.ts"; import { Prediction } from "~/model/prediction.ts"; -import { AnimationDiv } from '~/components/animated-div.tsx'; +import { AnimationDiv } from "~/components/animated-div.tsx"; +import { DialogModal } from "~/components/dialog-modal.tsx"; const logos = import.meta.glob("../assets/teams/*.svg", { eager: true }); @@ -168,14 +163,14 @@ export const TeamInfo: Component = (props: ITeamInfoProps) => { } > - - Projected Winner - + + Projected Winner + @@ -241,7 +236,6 @@ export const AdvancedGameCard: Component = (props: ITeamProps) => { }; export const DemoCard: Component = (props: IDisplayCard) => { - const [injuryReportOpen, setInjuryReportOpen] = createSignal(false); return (
= (props: IDisplayCard) => { {props.game.home_team.name} {props.game.home_team.score.points} -
- @@ -361,54 +354,39 @@ export const DemoCard: Component = (props: IDisplayCard) => { team => team.injuries.length > 0 )} > - - + View Injury Report + + } > - - - Injury Report - - - - - - Team - Player - Status - - - - - {(team, _) => ( - - {(injury, _) => ( - - {team.name} - - {injury.player} - - - {injury.status} - - - )} - +
+ + + Team + Player + Status + + + + + {(team, _) => ( + + {(injury, _) => ( + + {team.name} + {injury.player} + {injury.status} + )} - -
- - - + )} + + + + diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx new file mode 100644 index 0000000..842add5 --- /dev/null +++ b/ui/src/components/footer.tsx @@ -0,0 +1,34 @@ +import { AiFillGithub } from "solid-icons/ai"; + +export function Footer() { + return ( + <> + + + ); +} diff --git a/ui/src/index.css b/ui/src/index.css index 7b8f2d9..7aaa04f 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@700&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx index c5f5406..8582efb 100644 --- a/ui/src/pages/History.tsx +++ b/ui/src/pages/History.tsx @@ -14,22 +14,17 @@ interface IHistory { date: string; } -async function fetchHistoryForModelOnDate( - value: IHistory -): Promise { +async function fetchHistoryForModelOnDate(value: IHistory): Promise { if (value.date === "" || value.model === "") return undefined; const instance = AccuribetAPI.getInstance(); return await instance.getPredictedGames(value.date, value.model); } - - export function History() { const [dates] = createResource(fetchHistory); const [currentData, setCurrentData] = createSignal({ model: "", date: "" } as IHistory); const [historyResource] = createResource(currentData, fetchHistoryForModelOnDate); - const oldestDateForModel = () => { if (!dates.error && dates()) { const datesForModel = dates()?.find(date => date.model_name === currentData().model); @@ -40,76 +35,78 @@ export function History() { }; return ( - - - - - - -

Error fetching dates

- - - - - I would like to see the history of the - - model - - - - - Error! {historyResource.error.message} +
+ + + + + + +

Error fetching dates

+ + + + + I would like to see the history of the + + model - - - { - setCurrentData({ ...currentData(), date: event.target.value }); - }} - max={new Date().toISOString().split("T")[0]} - min={oldestDateForModel()} - /> - + + + Error! {historyResource.error.message} + + + + + { + setCurrentData({ ...currentData(), date: event.target.value }); + }} + max={new Date().toISOString().split("T")[0]} + min={oldestDateForModel()} + /> + - - - - {game => ( - - - {game.home_team_name} vs {game.away_team_name} - - - {game.home_team_score} - {game.away_team_score} - - {game.date} - - )} - - - - - - - + + + + {game => ( + + + {game.home_team_name} vs {game.away_team_name} + + + {game.home_team_score} - {game.away_team_score} + + {game.date} + + )} + + + + + + + +
); } diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx index 6a60c73..f31d334 100644 --- a/ui/src/pages/Home.tsx +++ b/ui/src/pages/Home.tsx @@ -1,140 +1,116 @@ import { Link } from "~/components/link.tsx"; import { Button } from "~/components/ui/button.tsx"; -import { AiFillGithub } from "solid-icons/ai"; import { AnimationDiv } from "~/components/animated-div.tsx"; import { FaSolidBasketball } from "solid-icons/fa"; -import { TbBrain } from 'solid-icons/tb'; +import { TbBrain } from "solid-icons/tb"; -export const Home = () => { +export function Home() { return ( - <> -
-
-
-
-
- -
-

- Predict NBA Game Outcomes with Accuribet -

-

- Accuribet uses machine learning algorithms to predict the outcomes of NBA - games. We use 42-48 unique data points and 10 years of historic data to - predict the outcome. -

-
- - - - - - +
+
+
+
+ +
+

+ Predict NBA Game Outcomes with Accuribet +

+

+ Accuribet uses machine learning algorithms to predict the outcomes of NBA games. + We use 42-48 unique data points and 10 years of historic data to predict the + outcome. +

+ + + + + + +
+
+
+
+
+
+
+
+ Accuracy +
+

+ Unparalleled Prediction Accuracy +

+

+ Accuribet's machine learning models have been trained on over 10 years of historical + NBA data, ensuring accuracy in our predictions. +

-
-
-
-
-
-
- Accuracy +
+
+ +
+
    +
  • +
    +

    60%+ Accuracy

    +

    + Our machine learning models have an average accuracy of over 60% on NBA game + predictions. +

    -

    - Unparalleled Prediction Accuracy -

    -

    - Accuribet's machine learning models have been trained on over 10 years of - historical NBA data, ensuring accuracy in our predictions. -

    -
-
-
- -
-
    -
  • -
    -

    - 60%+ Accuracy -

    -

    - Our machine learning models have an average accuracy of over 60% on NBA - game predictions. -

    -
    -
    • -
  • -
    -

    - Real-Time Updates -

    -

    - Get the latest predictions and updates as soon as new data becomes - available. -

    -
    -
    • -
  • -
    -

    Easy to Use

    -

    - Our intuitive interface makes it simple to access the information you - need. -

    -
    -
    • -
-
-
+ +
  • +
    +

    + Real-Time Updates +

    +

    + Get the latest predictions and updates as soon as new data becomes available. +

    +
    +
    • +
  • +
    +

    Easy to Use

    +

    + Our intuitive interface makes it simple to access the information you need. +

    +
    +
    • +
    -
    -
    -
    -
    -
    -

    - Get Started with Accuribet -

    -

    - Check out our live games page to see the latest predictions and updates. -

    - -
    -
    +
    +
    +
    +
    +
    +
    +
    +

    + Get Started with Accuribet +

    +

    + Check out our live games page to see the latest predictions and updates. +

    +
    -
    -
    - -
    - + + + + ); -}; +} diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts index 30135b6..6ac9907 100644 --- a/ui/tailwind.config.ts +++ b/ui/tailwind.config.ts @@ -5,6 +5,13 @@ export default { darkMode: ["class"], content: ["./src/**/*.{html,js,jsx,md,mdx,ts,tsx}"], presets: [require("./ui.preset.js")], + theme: { + extend: { + fontFamily: { + monserrat: ["Montserrat", "sans-serif"] + } + } + }, plugins: [ createThemes({ light: {