Update with up to date data

Source/Data/lines.json

@@ -1,203 +1,203 @@
-{   
-    "2":[
-        49,
-        40.5,
-        47,
-        45.5,
-        47,
-        39.5,
-        51.5,
-        41,
-        45,
-        40,
-        44.5,
-        39,
-        37.5,
-        47,
-        39.5,
-        39
-    ],
-    "3":[
-        44.5,
-        43,
-        38,
-        47,
-        41.5,
-        43.5,
-        47.5,
-        54.5,
-        35,
-        43,
-        42.5,
-        44,
-        48.8,
-        43.5,
-        45,
-        43.5
-    ],
-    "4":[
-        45.5,
-        42.5,
-        53.5,
-        46,
-        47,
-        39,
-        42,
-        45.5,
-        40,
-        43.0,
-        41.5,
-        48,
-        43.5,
-        43.5,
-        41.5,
-        47
-    ],
-    "5":[
-        45,
-        48,
-        41.5,
-        44,
-        43,
-        47.5,
-        39.5,
-        38,
-        44.5,
-        50,
-        43,
-        53,
-        45.5,
-        45
-    ],
-    "6":[
-        46.5,
-        42.5,
-        42.5,
-        43.5,
-        44.5,
-        36,
-        42.5,
-        43.5,
-        47,
-        41.5,
-        42.5,
-        48,
-        42.5,
-        43.5,
-        51
-    ],
-    "7":[
-        40.5,
-        43,
-        37.5,
-        41,
-        40,
-        37,
-        37,
-        44,
-        44,
-        45,
-        47.5,
-        51,
-        44
-    ],
-    "8":[
-        43.5,
-        44,
-        46,
-        41.5,
-        43.5,
-        46.5,
-        35.5,
-        40.5,
-        35.5,
-        43,
-        37.5,
-        44.5,
-        45.5,
-        43.5,
-        46.5,
-        46.5
-    ],
-    "9":[
-        37,
-        50,
-        37.5,
-        44,
-        38.5,
-        38,
-        40,
-        41,
-        41,
-        44,
-        38,
-        47,
-        50.5,
-        40
-    ],
-    "10":[
-        38,
-        42,
-        38,
-        46.5,
-        45,
-        41,
-        38,
-        39.5,
-        44,
-        48,
-        38.5,
-        44.5, 
-        36.5,
-        46
-    ],
-    "11":[
-        46.5,
-        43.5,
-        34.5,
-        47.5,
-        43.5,
-        48,
-        40,
-        44.5,
-        38.5,
-        41.5,
-        39.5,
-        45.5, 
-        42.5,
-        45.5
-    ],
-    "12":[
-        48,
-        48.5,
-        44.5,
-        40.5,
-        42,
-        35.5,
-        48,
-        44.5,
-        33.5,
-        36.5,
-        44.5,
-        36,
-        42.5,
-        48.5,
-        48,
-        43
-    ],
-    "13":[
-        47.5,
-        39,
-        47.5,
-        33,
-        41,
-        42,
-        49.5,
-        47,
-        37,
-        47,
-        40,
-        43,
-        39
-    ]
+{   
+    "2":[
+        49,
+        40.5,
+        47,
+        45.5,
+        47,
+        39.5,
+        51.5,
+        41,
+        45,
+        40,
+        44.5,
+        39,
+        37.5,
+        47,
+        39.5,
+        39
+    ],
+    "3":[
+        44.5,
+        43,
+        38,
+        47,
+        41.5,
+        43.5,
+        47.5,
+        54.5,
+        35,
+        43,
+        42.5,
+        44,
+        48.8,
+        43.5,
+        45,
+        43.5
+    ],
+    "4":[
+        45.5,
+        42.5,
+        53.5,
+        46,
+        47,
+        39,
+        42,
+        45.5,
+        40,
+        43.0,
+        41.5,
+        48,
+        43.5,
+        43.5,
+        41.5,
+        47
+    ],
+    "5":[
+        45,
+        48,
+        41.5,
+        44,
+        43,
+        47.5,
+        39.5,
+        38,
+        44.5,
+        50,
+        43,
+        53,
+        45.5,
+        45
+    ],
+    "6":[
+        46.5,
+        42.5,
+        42.5,
+        43.5,
+        44.5,
+        36,
+        42.5,
+        43.5,
+        47,
+        41.5,
+        42.5,
+        48,
+        42.5,
+        43.5,
+        51
+    ],
+    "7":[
+        40.5,
+        43,
+        37.5,
+        41,
+        40,
+        37,
+        37,
+        44,
+        44,
+        45,
+        47.5,
+        51,
+        44
+    ],
+    "8":[
+        43.5,
+        44,
+        46,
+        41.5,
+        43.5,
+        46.5,
+        35.5,
+        40.5,
+        35.5,
+        43,
+        37.5,
+        44.5,
+        45.5,
+        43.5,
+        46.5,
+        46.5
+    ],
+    "9":[
+        37,
+        50,
+        37.5,
+        44,
+        38.5,
+        38,
+        40,
+        41,
+        41,
+        44,
+        38,
+        47,
+        50.5,
+        40
+    ],
+    "10":[
+        38,
+        42,
+        38,
+        46.5,
+        45,
+        41,
+        38,
+        39.5,
+        44,
+        48,
+        38.5,
+        44.5, 
+        36.5,
+        46
+    ],
+    "11":[
+        46.5,
+        43.5,
+        34.5,
+        47.5,
+        43.5,
+        48,
+        40,
+        44.5,
+        38.5,
+        41.5,
+        39.5,
+        45.5, 
+        42.5,
+        45.5
+    ],
+    "12":[
+        48,
+        48.5,
+        44.5,
+        40.5,
+        42,
+        35.5,
+        48,
+        44.5,
+        33.5,
+        36.5,
+        44.5,
+        36,
+        42.5,
+        48.5,
+        48,
+        43
+    ],
+    "13":[
+        47.5,
+        39,
+        47.5,
+        33,
+        41,
+        42,
+        49.5,
+        47,
+        37,
+        47,
+        40,
+        43,
+        39
+    ]
 }  

Source/Data/results.csv

@@ -1,3 +1,193 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:dba9bb6b4464d0923fccdd8ed42b883ce14a923ee66cddbaa30e5ac21f317848
-size 6731
+game_id,total,winner
+2023_01_ARI_WAS,36,Washington Commanders
+2023_01_BUF_NYJ,38,New York Jets
+2023_01_CAR_ATL,34,Atlanta Falcons
+2023_01_CIN_CLE,27,Cleveland Browns
+2023_01_DAL_NYG,40,Dallas Cowboys
+2023_01_DET_KC,41,Detroit Lions
+2023_01_GB_CHI,58,Green Bay Packers
+2023_01_HOU_BAL,34,Baltimore Ravens
+2023_01_JAX_IND,52,Jacksonville Jaguars
+2023_01_LA_SEA,43,Los Angeles Rams
+2023_01_LV_DEN,33,Las Vegas Raiders
+2023_01_MIA_LAC,70,Miami Dolphins
+2023_01_PHI_NE,45,Philadelphia Eagles
+2023_01_SF_PIT,37,San Francisco 49ers
+2023_01_TB_MIN,37,Tampa Bay Buccaneers
+2023_01_TEN_NO,31,New Orleans Saints
+2023_02_BAL_CIN,51,Baltimore Ravens
+2023_02_CHI_TB,44,Tampa Bay Buccaneers
+2023_02_CLE_PIT,48,Pittsburgh Steelers
+2023_02_GB_ATL,49,Atlanta Falcons
+2023_02_IND_HOU,51,Indianapolis Colts
+2023_02_KC_JAX,26,Kansas City Chiefs
+2023_02_LAC_TEN,51,Tennessee Titans
+2023_02_LV_BUF,48,Buffalo Bills
+2023_02_MIA_NE,41,Miami Dolphins
+2023_02_MIN_PHI,62,Philadelphia Eagles
+2023_02_NO_CAR,37,New Orleans Saints
+2023_02_NYG_ARI,59,New York Giants
+2023_02_NYJ_DAL,40,Dallas Cowboys
+2023_02_SEA_DET,68,Seattle Seahawks
+2023_02_SF_LA,53,San Francisco 49ers
+2023_02_WAS_DEN,68,Washington Commanders
+2023_03_ATL_DET,26,Detroit Lions
+2023_03_BUF_WAS,40,Buffalo Bills
+2023_03_CAR_SEA,64,Seattle Seahawks
+2023_03_CHI_KC,51,Kansas City Chiefs
+2023_03_DAL_ARI,44,Arizona Cardinals
+2023_03_DEN_MIA,90,Miami Dolphins
+2023_03_HOU_JAX,54,Houston Texans
+2023_03_IND_BAL,41,Indianapolis Colts
+2023_03_LAC_MIN,52,Los Angeles Chargers
+2023_03_LA_CIN,35,Cincinnati Bengals
+2023_03_NE_NYJ,25,New England Patriots
+2023_03_NO_GB,35,Green Bay Packers
+2023_03_NYG_SF,42,San Francisco 49ers
+2023_03_PHI_TB,36,Philadelphia Eagles
+2023_03_PIT_LV,41,Pittsburgh Steelers
+2023_03_TEN_CLE,30,Cleveland Browns
+2023_04_ARI_SF,51,San Francisco 49ers
+2023_04_ATL_JAX,30,Jacksonville Jaguars
+2023_04_BAL_CLE,31,Baltimore Ravens
+2023_04_CIN_TEN,30,Tennessee Titans
+2023_04_DEN_CHI,59,Denver Broncos
+2023_04_DET_GB,54,Detroit Lions
+2023_04_KC_NYJ,43,Kansas City Chiefs
+2023_04_LA_IND,52,Los Angeles Rams
+2023_04_LV_LAC,41,Los Angeles Chargers
+2023_04_MIA_BUF,68,Buffalo Bills
+2023_04_MIN_CAR,34,Minnesota Vikings
+2023_04_NE_DAL,41,Dallas Cowboys
+2023_04_PIT_HOU,36,Houston Texans
+2023_04_SEA_NYG,27,Seattle Seahawks
+2023_04_TB_NO,35,Tampa Bay Buccaneers
+2023_04_WAS_PHI,65,Philadelphia Eagles
+2023_05_BAL_PIT,27,Pittsburgh Steelers
+2023_05_CAR_DET,66,Detroit Lions
+2023_05_CHI_WAS,60,Chicago Bears
+2023_05_CIN_ARI,54,Cincinnati Bengals
+2023_05_DAL_SF,52,San Francisco 49ers
+2023_05_GB_LV,30,Las Vegas Raiders
+2023_05_HOU_ATL,40,Atlanta Falcons
+2023_05_JAX_BUF,45,Jacksonville Jaguars
+2023_05_KC_MIN,47,Kansas City Chiefs
+2023_05_NO_NE,34,New Orleans Saints
+2023_05_NYG_MIA,47,Miami Dolphins
+2023_05_NYJ_DEN,52,New York Jets
+2023_05_PHI_LA,37,Philadelphia Eagles
+2023_05_TEN_IND,39,Indianapolis Colts
+2023_06_ARI_LA,35,Los Angeles Rams
+2023_06_BAL_TEN,40,Baltimore Ravens
+2023_06_CAR_MIA,63,Miami Dolphins
+2023_06_DAL_LAC,37,Dallas Cowboys
+2023_06_DEN_KC,27,Kansas City Chiefs
+2023_06_DET_TB,26,Detroit Lions
+2023_06_IND_JAX,57,Jacksonville Jaguars
+2023_06_MIN_CHI,32,Minnesota Vikings
+2023_06_NE_LV,38,Las Vegas Raiders
+2023_06_NO_HOU,33,Houston Texans
+2023_06_NYG_BUF,23,Buffalo Bills
+2023_06_PHI_NYJ,34,New York Jets
+2023_06_SEA_CIN,30,Cincinnati Bengals
+2023_06_SF_CLE,36,Cleveland Browns
+2023_06_WAS_ATL,40,Washington Commanders
+2023_07_ARI_SEA,30,Seattle Seahawks
+2023_07_ATL_TB,29,Atlanta Falcons
+2023_07_BUF_NE,54,New England Patriots
+2023_07_CLE_IND,77,Cleveland Browns
+2023_07_DET_BAL,44,Baltimore Ravens
+2023_07_GB_DEN,36,Denver Broncos
+2023_07_JAX_NO,55,Jacksonville Jaguars
+2023_07_LAC_KC,48,Kansas City Chiefs
+2023_07_LV_CHI,42,Chicago Bears
+2023_07_MIA_PHI,48,Philadelphia Eagles
+2023_07_PIT_LA,41,Pittsburgh Steelers
+2023_07_SF_MIN,39,Minnesota Vikings
+2023_07_WAS_NYG,21,New York Giants
+2023_08_ATL_TEN,51,Tennessee Titans
+2023_08_BAL_ARI,55,Baltimore Ravens
+2023_08_CHI_LAC,43,Los Angeles Chargers
+2023_08_CIN_SF,48,Cincinnati Bengals
+2023_08_CLE_SEA,44,Seattle Seahawks
+2023_08_HOU_CAR,28,Carolina Panthers
+2023_08_JAX_PIT,30,Jacksonville Jaguars
+2023_08_KC_DEN,33,Denver Broncos
+2023_08_LA_DAL,63,Dallas Cowboys
+2023_08_LV_DET,40,Detroit Lions
+2023_08_MIN_GB,34,Minnesota Vikings
+2023_08_NE_MIA,48,Miami Dolphins
+2023_08_NO_IND,65,New Orleans Saints
+2023_08_NYJ_NYG,23,New York Jets
+2023_08_PHI_WAS,69,Philadelphia Eagles
+2023_08_TB_BUF,42,Buffalo Bills
+2023_09_ARI_CLE,27,Cleveland Browns
+2023_09_BUF_CIN,42,Cincinnati Bengals
+2023_09_CHI_NO,41,New Orleans Saints
+2023_09_DAL_PHI,51,Philadelphia Eagles
+2023_09_IND_CAR,40,Indianapolis Colts
+2023_09_LAC_NYJ,33,Los Angeles Chargers
+2023_09_LA_GB,23,Green Bay Packers
+2023_09_MIA_KC,35,Kansas City Chiefs
+2023_09_MIN_ATL,59,Minnesota Vikings
+2023_09_NYG_LV,36,Las Vegas Raiders
+2023_09_SEA_BAL,40,Baltimore Ravens
+2023_09_TB_HOU,76,Houston Texans
+2023_09_TEN_PIT,36,Pittsburgh Steelers
+2023_09_WAS_NE,37,Washington Commanders
+2023_10_ATL_ARI,48,Arizona Cardinals
+2023_10_CAR_CHI,29,Chicago Bears
+2023_10_CLE_BAL,64,Cleveland Browns
+2023_10_DEN_BUF,46,Denver Broncos
+2023_10_DET_LAC,79,Detroit Lions
+2023_10_GB_PIT,42,Pittsburgh Steelers
+2023_10_HOU_CIN,57,Houston Texans
+2023_10_IND_NE,16,Indianapolis Colts
+2023_10_NO_MIN,46,Minnesota Vikings
+2023_10_NYG_DAL,66,Dallas Cowboys
+2023_10_NYJ_LV,28,Las Vegas Raiders
+2023_10_SF_JAX,37,San Francisco 49ers
+2023_10_TEN_TB,26,Tampa Bay Buccaneers
+2023_10_WAS_SEA,55,Seattle Seahawks
+2023_11_ARI_HOU,37,Houston Texans
+2023_11_CHI_DET,57,Detroit Lions
+2023_11_CIN_BAL,54,Baltimore Ravens
+2023_11_DAL_CAR,43,Dallas Cowboys
+2023_11_LAC_GB,43,Green Bay Packers
+2023_11_LV_MIA,33,Miami Dolphins
+2023_11_MIN_DEN,41,Denver Broncos
+2023_11_NYG_WAS,50,New York Giants
+2023_11_NYJ_BUF,38,Buffalo Bills
+2023_11_PHI_KC,38,Philadelphia Eagles
+2023_11_PIT_CLE,23,Cleveland Browns
+2023_11_SEA_LA,33,Los Angeles Rams
+2023_11_TB_SF,41,San Francisco 49ers
+2023_11_TEN_JAX,48,Jacksonville Jaguars
+2023_12_BAL_LAC,30,Baltimore Ravens
+2023_12_BUF_PHI,71,Philadelphia Eagles
+2023_12_CAR_TEN,27,Tennessee Titans
+2023_12_CHI_MIN,22,Chicago Bears
+2023_12_CLE_DEN,41,Denver Broncos
+2023_12_GB_DET,51,Green Bay Packers
+2023_12_JAX_HOU,45,Jacksonville Jaguars
+2023_12_KC_LV,48,Kansas City Chiefs
+2023_12_LA_ARI,51,Los Angeles Rams
+2023_12_MIA_NYJ,47,Miami Dolphins
+2023_12_NE_NYG,17,New York Giants
+2023_12_NO_ATL,39,Atlanta Falcons
+2023_12_PIT_CIN,26,Pittsburgh Steelers
+2023_12_SF_SEA,44,San Francisco 49ers
+2023_12_TB_IND,47,Indianapolis Colts
+2023_12_WAS_DAL,55,Dallas Cowboys
+2023_13_ARI_PIT,34,Arizona Cardinals
+2023_13_ATL_NYJ,21,Atlanta Falcons
+2023_13_CAR_TB,39,Tampa Bay Buccaneers
+2023_13_CLE_LA,55,Los Angeles Rams
+2023_13_DEN_HOU,39,Houston Texans
+2023_13_DET_NO,61,Detroit Lions
+2023_13_IND_TEN,59,Indianapolis Colts
+2023_13_KC_GB,46,Green Bay Packers
+2023_13_LAC_NE,6,Los Angeles Chargers
+2023_13_MIA_WAS,60,Miami Dolphins
+2023_13_SEA_DAL,76,Dallas Cowboys
+2023_13_SF_PHI,61,San Francisco 49ers

Templates/index.html

@@ -1,724 +1,724 @@
-<!DOCTYPE html>
-<html>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<head>
-    <link rel="shortcut icon" type="image/x-icon" href="https://images.squarespace-cdn.com/content/v1/64790f5777b5d772678cce83/6d71eaee-f825-4324-be9b-2def32469eac/favicon.ico?format=100w">
-    <title>MARCI - NFL Betting</title>
-</head>
-<style>
-    body {
-        max-width: 90vw;
-        margin: auto;
-        background-color: black;
-        font-family: 'Helvetica';
-        justify-content: center;
-        text-align: center;
-        padding-top: 2%;
-        padding-bottom: 5%;
-    }
-    p {
-        color: #f2f2f2;
-    }
-    h1 {
-        color: #f2f2f2;
-        margin-top: 40px;
-        margin-bottom: 10px;
-        font-size: xxx-large;
-    }
-    h2 {
-        margin-top: 0px;
-        color: #f2f2f2;
-    }
-    h3 {
-        color: #f2f2f2;
-        margin: 0px;
-    }
-
-    table {
-        transition: 0.3s ease;
-        margin-top: 20px;
-        width: 80%;
-        border-collapse: collapse;
-        text-align: center;
-    }
-    .table-div {
-        display: flex;
-        justify-content: center;
-    }
-    th, td {
-        color: #f2f2f2;
-        border: 1px solid black;
-        text-align: center;
-        padding: 8px;
-    }
-    th {
-        background-color: black;
-    }
-    tr {
-        background-color: black;
-    }
-    tr:nth-child(even) {
-        background-color: rgb(10, 10, 5);
-    }
-    td img {
-        display: block;
-        margin: auto;
-    }
-    input[type="text"] {
-        font-size: 12pt;
-        width: 45px;
-        height: 30px;
-        text-align: center;
-        background-color: transparent;
-        border-radius: 5px;
-        transition: 0.3s ease;
-        color: #f2f2f2;
-        border: none;
-    }    
-    
-    input[type="text"]:hover {
-        background-color:rgb(30, 30, 30);    
-    }
-    button {
-        font-size: 12pt;
-        background-color: rgb(30, 30, 30);
-        color: #ffffff; 
-        padding: 10px 20px; 
-        border: none;
-        border-radius: 5px; 
-        margin-top: 40px;
-        width: 80%;
-        transition: all 0.3s ease;  
-    }
-    button:hover {
-        color: rgb(0, 0, 0);
-        background-color: rgb(255, 255, 255);
-        cursor: pointer;
-    }
-    .winner-wrapper {
-        cursor: default;
-        position: relative;
-        width: 100%;  
-        text-align: center; 
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: 0.3s ease;
-    }
-    .winner-image {
-        height: auto;
-        margin: 0;
-        transition: 0.3s ease;
-    }
-
-    .over-under-wrapper {
-        cursor: default;
-        position: relative;
-        width: 100%;
-        height: 50px; 
-        display: flex;
-        align-items: center;  
-        justify-content: center; 
-        transition: 0.3s ease;
-    }
-    .over-under-text {
-        display: inline-block;
-        margin: 0;
-        margin-right: 2px;
-        font-weight: bold;
-    }
-    .over {
-        color: rgb(255, 255, 255);
-    }
-    .under {
-        color: rgb(255, 255, 255);
-    }
-    .na {
-        color: white;
-    }
-
-    .highlight {
-        background: rgb(30, 30, 30) !important;
-        border: 2px solid rgb(30, 30, 30)  !important;
-        border-radius: 10px  !important;
-    }
-
-    .force-repaint { transform: translateZ(0); }
-
-    .hidden {
-        opacity: 0;
-    }
-
-    .section-container {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .section {
-        padding: 30px;
-        text-align: left;
-        border-style: solid;
-        border-width: 1px;
-        border-color: rgb(61, 61, 61);
-        width: 48%; 
-    }
-
-    .content {
-        width: 100%;
-    }
-
-    .content img {
-        width: 100%;
-        height: auto;
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
-
-    .divider {
-        border: 0;
-        height: 1px;
-        background: rgb(61, 61, 61);
-        margin-top: 50px;
-        margin-bottom: 50px;
-        width: 80%;
-    }
-
-    .label {
-        color: rgb(114, 114, 114);
-    }
-
-    .info {
-        color: white;
-    }
-
-    a {
-      color: white;
-    }
-
-    .scroll-banner {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 999;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        height: 30px;
-        background-color: green;
-        overflow: hidden;
-        visibility: hidden;
-    }
-
-    .scroll-text {
-        font-family: 'Helvetica';
-        color: white;
-        display: inline-block;
-        animation: scrolling 10s linear infinite;
-        white-space: nowrap;
-    }
-
-    @keyframes scrolling {
-        0% { transform: translateX(100vw); }
-        100% { transform: translateX(-100%); }
-    }
-
-    .emoji {
-        margin-left: 5px;
-        color: rgb(255, 255, 255);
-        transition: 0.3s ease;
-    }
-
-    .spinner {
-        margin: auto;
-        display: block;
-        border: 2px solid transparent;
-        border-radius: 50%;
-        border-top: 2px solid #6a6a6a;
-        width: 16px;
-        height: 16px;
-        animation: spin 1s linear infinite;
-    }
-    
-    #gradient {
-        background: red;
-        background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
-        background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
-        background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
-        background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        font-weight: bold;
-    }
-
-    .modelDetails {
-        width: 80%;
-        display: inline-block;
-        margin-bottom: 40px;
-    }
-
-    #weekSelector {
-        transition: 0.3s ease;
-        border-radius: 10px;
-        padding: 5px;
-        color: white;
-        background: rgb(30, 30, 30) !important;
-        font-family: Arial, Helvetica, sans-serif;
-    }
-    #weekSelector:hover {
-        opacity: 0.5;
-    }
-
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
-    @media screen and (max-width: 768px) {
-        .table-div {
-            display: block;
-            justify-content: center;
-        }
-        .winner-image {
-            margin: 0;
-        }
-        .emoji {
-            margin: 0;
-        }
-        .table-div{
-            overflow-x: scroll;
-        }
-        .divider {
-            width: 90%;
-        }
-        #modelDetails {
-            width: 90%;
-        }
-        .button {
-            width: 90%;
-        }
-        .section-container {
-            display: inline;
-        }
-        .section {
-            padding: 15px;
-            width: auto;
-        }
-    }
-
-</style>
-
-<div class="scroll-banner">
-    <div class="scroll-text">
-      Predictions will begin at the conclusion of Week 1. Bet at your own risk. Know your limits. And most importantly, have fun!
-    </div>
-</div>
-
-<body>
-    <h1>M A R C I</h1>
-    <div class="info">
-        <span class="label"><i>Moore's Algorithm for Risky Capital Investments</i></span><br><br>
-
-        <span id="gradient">Remember to have fun!</span><br><br>
-
-        <span class="label"><b>Record through {{ latest_game }}</b></span><br>
-        <span class="label">Winners:</span> {{ winners_correct }}-{{winners_incorrect}}{{winners_tie}}<span class="label"> ({{ winners_return }})</span><br>
-        <span class="label">Over/Unders:</span> {{over_unders_correct}}-{{over_unders_incorrect}}{{over_unders_push}}<span class="label"> ({{over_unders_return}})</span><br><br>
-    </div>
-
-    <select id="weekSelector">
-    </select>
-
-    <div class="table-div">
-        <table id="gameTable">
-            <tr>
-                <th>Date</th>
-                <th>Away</th>
-                <th>Home</th>
-                <th>O/U</th>
-                <th>Predicted Winner</th>
-                <th>Predicted O/U</th>
-            </tr>
-        </table>
-    </div>
-    <button id="submitButton">
-        Predict
-    </button>
-
-    <hr class="divider"> 
-
-    <div class="modelDetails">
-        <h2>Model Train/Test Details</h2>
-        <div class="section-container">
-            <div class="section">
-                <h3>Moneyline</h3>
-                <div class="info"></h3><span class="label">Test Accuracy:</span> 71.4%<br></div>
-                <div class="content">
-                    <img src="/Static/xgboost_ML_no_odds_71.4%25_dark.png" alt="Moneyline Model">
-                    <div class="info">
-                        <span class="label">Model:</span> XGBoost<br>
-                        <span class="label">Train/Test Split:</span> 1782/199<br>
-                        <span class="label">Max Depth:</span> 2<br>
-                        <span class="label">Learning Rate:</span> 0.01<br>
-                        <span class="label">Epochs:</span> 500
-                    </div>
-                </div>
-            </div>
-            <div class="section">
-                <h3>Over/Under</h3>
-                <div class="content">
-                    <div class="info"></h3><span class="label">Test Accuracy:</span> 59.8%<br></div>
-                    <img src="/Static/xgboost_OU_no_odds_59.8%25_dark.png" alt="Over/Under Model">
-                    <div class="info">
-                        <span class="label">Model:</span> XGBoost<br>
-                        <span class="label">Train/Test Split:</span> 1782/199<br>
-                        <span class="label">Max Depth:</span> 6<br>
-                        <span class="label">Learning Rate:</span> 0.05<br>
-                        <span class="label">Epochs:</span> 300
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="modelDetails">
-        <h2>Predictive Accuracy This Year</h2>
-        <div class="section-container">
-            <div class="section">
-                <h3>Moneyline</h3>
-                <div class="info">{{ winners_return }}.</div>
-                <div class="content">
-                    <img src="/Static/Winner_Predictions_dark.png" alt="Moneyline Accuracy">
-                </div>
-                <div class="info"><span class="label">{{ winners_binom }}</span><br></div>
-
-            </div>
-            <div class="section">
-                <h3>Over/Under</h3>
-                <div class="info">{{ over_unders_return }}.</div>
-                <div class="content">
-                    <img src="/Static/Over_Under_Predictions_dark.png" alt="Over/Under Model">
-                </div>
-                <div class="info"><span class="label">{{ over_unders_binom }}</span><br></div>
-            </div>
-        </div>
-    </div>
-
-    <p>🤗<a href="https://huggingface.co/spaces/BraydenMoore/MARCI-NFL-Betting/tree/main">See the Code</a></p>
-
-
-    
-
-    <script>
-    async function fetchGames(selectedWeek) {
-        const response = await fetch(`/get_games?week=${selectedWeek}`);
-        const pulled_games = await response.json();
-        const table = document.getElementById('gameTable');
-        
-        for(let i = table.rows.length - 1; i > 0; i--) {
-            table.deleteRow(i);
-        }
-
-        const columns = ['Date','Away Team', 'Home Team']; 
-        let lines;
-        try {
-            const lines_response = await fetch('/get_lines');
-            if (!lines_response.ok) {
-                throw new Error(`HTTP error! status: ${lines_response.status}`);
-            }
-            lines = await lines_response.json();
-        } 
-        catch (error) {
-            lines = new Array(20).fill(0);
-        }
-
-        pulled_games.forEach((game, index) => {
-            const row = table.insertRow(-1);
-            
-            columns.forEach((column) => {
-                const cell = row.insertCell(-1);
-                if (column === 'Away Team' || column === 'Home Team') {
-                    const img = document.createElement('img');
-                    img.src = `/Static/${game[column]}.webp`;
-                    img.alt = game[column];
-                    img.width = 50; 
-                    cell.appendChild(img);
-                } else {
-                    cell.textContent = game[column];
-                    cell.style.color = "rgb(114, 114, 114)";
-                }
-            });
-            
-            for (let i = 0; i < 3; i++) {
-                const cell = row.insertCell(-1);
-                if (i<1) {
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.value = lines[index];
-                    cell.appendChild(input);
-                }
-            }
-            });
-    }
-
-
-    function submitData() {
-        const predictButton = document.getElementById('submitButton');
-
-        const table = document.getElementById('gameTable');
-        const rows = table.querySelectorAll('tr');
-        const games = [];
-
-        rows.forEach((row, index) => {
-            if (index === 0) return;
-            
-            const winnerCell = row.cells[row.cells.length - 2];
-            const overUnderCell = row.cells[row.cells.length - 1];
-            const spinnerDiv = document.createElement('div');
-            spinnerDiv.className = 'spinner';
-            winnerCell.innerHTML = ''; 
-            overUnderCell.innerHTML = ''; 
-            winnerCell.appendChild(spinnerDiv);
-            overUnderCell.appendChild(spinnerDiv.cloneNode(true));
-
-            const cells = row.querySelectorAll('td');
-            const game = {};
-
-            game.Date = cells[0].textContent;
-            game.AwayTeam = cells[1].querySelector('img').alt;
-            game.HomeTeam = cells[2].querySelector('img').alt;
-            game.OverUnderLine = cells[3].querySelector('input').value;
-            game.rowIndex = index - 1;  
-            games.push(game);
-        });
-
-
-        fetch('/submit_games', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(games),
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.moneylines && data.over_unders) {
-                const table = document.getElementById('gameTable');
-                const rows = table.querySelectorAll('tr');
-
-                data.moneylines.forEach((moneyline, index) => {
-                    const row = rows[parseInt(moneyline.rowIndex) + 1];
-
-                    const winnerCell = row.cells[row.cells.length - 2];
-                    winnerCell.removeChild(winnerCell.querySelector('.spinner'));
-                    winnerCell.innerHTML = ''; 
-
-                    const wrapperDiv = document.createElement('div');
-                    wrapperDiv.className = 'winner-wrapper';
-                    if (moneyline.Probabilities[0] > 0.6){
-                        wrapperDiv.classList.add("highlight");
-                    }
-                    else {
-                        wrapperDiv.style.opacity = "0.5";
-                    }
-
-                    const winnerImg = document.createElement('img');
-                    winnerImg.src = `/Static/${moneyline.Winner}.webp`;
-                    winnerImg.alt = moneyline.Winner;
-                    winnerImg.width = 50;  
-                    winnerImg.className = 'winner-image hidden';
-                    wrapperDiv.appendChild(winnerImg);
-
-                    const winnerEmojiDiv = document.createElement('div');
-                    winnerEmojiDiv.className = 'emoji';
-
-                    wrapperDiv.dataset.proba = Math.floor(moneyline.Probabilities[0] * 100).toFixed(0);
-                    if (moneyline.Winner[0] === moneyline.Result) {
-                        winnerEmojiDiv.textContent = '✅';
-                    } 
-                    else if (moneyline.Result === 'Tie') {
-                        winnerEmojiDiv.textContent = '🔵';
-                    }
-                    else {
-                        winnerEmojiDiv.textContent = '❌';
-                    }
-                    if (moneyline.Result === 'N/A') {
-                        winnerEmojiDiv.textContent = `(${wrapperDiv.dataset.proba}%)`;
-                    }
-                    wrapperDiv.appendChild(winnerEmojiDiv);
-
-                    setTimeout(() => {
-                        winnerImg.classList.remove('hidden');
-                    }, 10);
-
-                    winnerCell.appendChild(wrapperDiv);
-
-                    const overUnderCell = row.cells[row.cells.length - 1];
-                    overUnderCell.removeChild(overUnderCell.querySelector('.spinner'));
-                    overUnderCell.innerHTML = ''; 
-
-                    const overUnderDiv = document.createElement('div');
-                    overUnderDiv.className = 'over-under-wrapper hidden';
-                    if (data.over_unders[index]['Probability'][0] > 0.6){
-                        overUnderDiv.classList.add("highlight");
-                    }
-                    else {
-                        overUnderDiv.style.opacity = "0.5";
-                    }
-
-                    const textDiv = document.createElement('div');
-                    textDiv.className = 'over-under-text';
-                    textDiv.textContent = data.over_unders[index]['Over/Under'];
-                    if (textDiv.textContent === 'Over') {
-                        overUnderDiv.className += ' over';
-                    } else if (textDiv.textContent === 'Under') {
-                        overUnderDiv.className += ' under';
-                    } else {
-                        overUnderDiv.className += ' na';
-                    }
-
-                    overUnderDiv.appendChild(textDiv);
-
-                    const overEmojiDiv = document.createElement('div');
-                    overEmojiDiv.className = 'emoji';
-
-                    overUnderDiv.dataset.proba = Math.floor(data.over_unders[index]['Probability'][0] * 100).toFixed(0);
-                    if (data.over_unders[index]['Over/Under'][0] === data.over_unders[index]['Result']) {  
-                        overEmojiDiv.textContent = '✅';
-                    } 
-                    else if (data.over_unders[index]['Result'] === 'Push') {
-                        overEmojiDiv.textContent = '🔵';
-                    }
-                    else {
-                        overEmojiDiv.textContent = '❌';
-                    }
-                    if (data.over_unders[index]['Result'] === 'N/A') {
-                        overEmojiDiv.textContent = `(${overUnderDiv.dataset.proba}%)`;
-                    }
-                    overUnderDiv.appendChild(overEmojiDiv);
-
-                    setTimeout(() => {
-                        overUnderDiv.classList.remove('hidden');
-                    }, 10);
-
-                    overUnderCell.appendChild(overUnderDiv);
-
-                    showProbabilityOnHover(wrapperDiv);
-                    showProbabilityOnHover(overUnderDiv);
-                    
-                });
-            }
-            });
-
-    }
-
-    //Hover listener
-    function showProbabilityOnHover(div) {
-        let previousValue;
-        let divText = div.children[1];
-        let eventProcessed = false;
-
-        function handleEnter() {
-            if (eventProcessed) return;  // Skip if an event has already been processed
-
-            eventProcessed = true;
-
-            if (divText.textContent !== `(${div.dataset.proba}%)`) {
-                divText.style.opacity = 0;
-
-                setTimeout(() => {
-                    previousValue = divText.textContent;
-                    divText.textContent = `(${div.dataset.proba}%)`;
-                    divText.style.opacity = 1;
-                }, 300);
-
-                setTimeout(() => {
-                    divText.style.opacity = 0;
-                    setTimeout(() => {
-                        divText.textContent = previousValue;
-                        divText.style.opacity = 1;
-                        eventProcessed = false;  // Reset the flag
-                    }, 300);
-                }, 1000);
-            }
-        }
-
-        // For desktop
-        div.addEventListener('mouseenter', handleEnter);
-        // For mobile
-        div.addEventListener('touchstart', handleEnter);
-    }
-
-    // Populate dropdown
-    let selectedWeek;
-    async function populateDropdown() {
-        const weekSelector = document.getElementById('weekSelector');
-        weekSelector.innerHTML = "";
-
-        const response = await fetch('/get_weeks');
-        const data = await response.json();
-        
-        data.forEach((week, index) => {
-            const option = document.createElement('option');
-            option.value = week;
-            option.text = `Week ${week}`;
-            weekSelector.appendChild(option);
-
-            if (index === 0) {
-                selectedWeek = week;
-            }
-        });
-    }
-    
-    
-    // Get new games when new week selected
-    document.getElementById('weekSelector').addEventListener('change', function(event) {
-        selectedWeek = event.target.value;
-        getNew();
-    });
-
-
-    // Initial load
-    function loadThings() { 
-        populateDropdown()
-        .then(() => fetchGames(selectedWeek))
-        .then(() => submitData())
-        .catch(error => console.error(error));
-    }
-
-    // Get new
-    async function getNew() {
-        const table = document.getElementById('gameTable');
-        table.style.opacity = "0.5";
-
-        try {
-            await fetchGames(selectedWeek);
-            await submitData();
-            table.style.opacity = "1";
-        } catch (error) {
-            console.error(error);
-        }
-    }
-
-
-    // Submit on click, enter, and pageload
-    loadThings();
-
-    document.getElementById('submitButton').addEventListener('click', submitData);
-
-    document.addEventListener('keydown', function(event) {
-        if (event.keyCode === 13) {  
-            submitData();
-        }
-    });
-
-
-</script>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<head>
+    <link rel="shortcut icon" type="image/x-icon" href="https://images.squarespace-cdn.com/content/v1/64790f5777b5d772678cce83/6d71eaee-f825-4324-be9b-2def32469eac/favicon.ico?format=100w">
+    <title>MARCI - NFL Betting</title>
+</head>
+<style>
+    body {
+        max-width: 90vw;
+        margin: auto;
+        background-color: black;
+        font-family: 'Helvetica';
+        justify-content: center;
+        text-align: center;
+        padding-top: 2%;
+        padding-bottom: 5%;
+    }
+    p {
+        color: #f2f2f2;
+    }
+    h1 {
+        color: #f2f2f2;
+        margin-top: 40px;
+        margin-bottom: 10px;
+        font-size: xxx-large;
+    }
+    h2 {
+        margin-top: 0px;
+        color: #f2f2f2;
+    }
+    h3 {
+        color: #f2f2f2;
+        margin: 0px;
+    }
+
+    table {
+        transition: 0.3s ease;
+        margin-top: 20px;
+        width: 80%;
+        border-collapse: collapse;
+        text-align: center;
+    }
+    .table-div {
+        display: flex;
+        justify-content: center;
+    }
+    th, td {
+        color: #f2f2f2;
+        border: 1px solid black;
+        text-align: center;
+        padding: 8px;
+    }
+    th {
+        background-color: black;
+    }
+    tr {
+        background-color: black;
+    }
+    tr:nth-child(even) {
+        background-color: rgb(10, 10, 5);
+    }
+    td img {
+        display: block;
+        margin: auto;
+    }
+    input[type="text"] {
+        font-size: 12pt;
+        width: 45px;
+        height: 30px;
+        text-align: center;
+        background-color: transparent;
+        border-radius: 5px;
+        transition: 0.3s ease;
+        color: #f2f2f2;
+        border: none;
+    }    
+    
+    input[type="text"]:hover {
+        background-color:rgb(30, 30, 30);    
+    }
+    button {
+        font-size: 12pt;
+        background-color: rgb(30, 30, 30);
+        color: #ffffff; 
+        padding: 10px 20px; 
+        border: none;
+        border-radius: 5px; 
+        margin-top: 40px;
+        width: 80%;
+        transition: all 0.3s ease;  
+    }
+    button:hover {
+        color: rgb(0, 0, 0);
+        background-color: rgb(255, 255, 255);
+        cursor: pointer;
+    }
+    .winner-wrapper {
+        cursor: default;
+        position: relative;
+        width: 100%;  
+        text-align: center; 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: 0.3s ease;
+    }
+    .winner-image {
+        height: auto;
+        margin: 0;
+        transition: 0.3s ease;
+    }
+
+    .over-under-wrapper {
+        cursor: default;
+        position: relative;
+        width: 100%;
+        height: 50px; 
+        display: flex;
+        align-items: center;  
+        justify-content: center; 
+        transition: 0.3s ease;
+    }
+    .over-under-text {
+        display: inline-block;
+        margin: 0;
+        margin-right: 2px;
+        font-weight: bold;
+    }
+    .over {
+        color: rgb(255, 255, 255);
+    }
+    .under {
+        color: rgb(255, 255, 255);
+    }
+    .na {
+        color: white;
+    }
+
+    .highlight {
+        background: rgb(30, 30, 30) !important;
+        border: 2px solid rgb(30, 30, 30)  !important;
+        border-radius: 10px  !important;
+    }
+
+    .force-repaint { transform: translateZ(0); }
+
+    .hidden {
+        opacity: 0;
+    }
+
+    .section-container {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .section {
+        padding: 30px;
+        text-align: left;
+        border-style: solid;
+        border-width: 1px;
+        border-color: rgb(61, 61, 61);
+        width: 48%; 
+    }
+
+    .content {
+        width: 100%;
+    }
+
+    .content img {
+        width: 100%;
+        height: auto;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .divider {
+        border: 0;
+        height: 1px;
+        background: rgb(61, 61, 61);
+        margin-top: 50px;
+        margin-bottom: 50px;
+        width: 80%;
+    }
+
+    .label {
+        color: rgb(114, 114, 114);
+    }
+
+    .info {
+        color: white;
+    }
+
+    a {
+      color: white;
+    }
+
+    .scroll-banner {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 999;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        height: 30px;
+        background-color: green;
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .scroll-text {
+        font-family: 'Helvetica';
+        color: white;
+        display: inline-block;
+        animation: scrolling 10s linear infinite;
+        white-space: nowrap;
+    }
+
+    @keyframes scrolling {
+        0% { transform: translateX(100vw); }
+        100% { transform: translateX(-100%); }
+    }
+
+    .emoji {
+        margin-left: 5px;
+        color: rgb(255, 255, 255);
+        transition: 0.3s ease;
+    }
+
+    .spinner {
+        margin: auto;
+        display: block;
+        border: 2px solid transparent;
+        border-radius: 50%;
+        border-top: 2px solid #6a6a6a;
+        width: 16px;
+        height: 16px;
+        animation: spin 1s linear infinite;
+    }
+    
+    #gradient {
+        background: red;
+        background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
+        background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
+        background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
+        background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: bold;
+    }
+
+    .modelDetails {
+        width: 80%;
+        display: inline-block;
+        margin-bottom: 40px;
+    }
+
+    #weekSelector {
+        transition: 0.3s ease;
+        border-radius: 10px;
+        padding: 5px;
+        color: white;
+        background: rgb(30, 30, 30) !important;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+    #weekSelector:hover {
+        opacity: 0.5;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+        .table-div {
+            display: block;
+            justify-content: center;
+        }
+        .winner-image {
+            margin: 0;
+        }
+        .emoji {
+            margin: 0;
+        }
+        .table-div{
+            overflow-x: scroll;
+        }
+        .divider {
+            width: 90%;
+        }
+        #modelDetails {
+            width: 90%;
+        }
+        .button {
+            width: 90%;
+        }
+        .section-container {
+            display: inline;
+        }
+        .section {
+            padding: 15px;
+            width: auto;
+        }
+    }
+
+</style>
+
+<div class="scroll-banner">
+    <div class="scroll-text">
+      Predictions will begin at the conclusion of Week 1. Bet at your own risk. Know your limits. And most importantly, have fun!
+    </div>
+</div>
+
+<body>
+    <h1>M A R C I</h1>
+    <div class="info">
+        <span class="label"><i>Moore's Algorithm for Risky Capital Investments</i></span><br><br>
+
+        <span id="gradient">Remember to have fun!</span><br><br>
+
+        <span class="label"><b>Record through {{ latest_game }}</b></span><br>
+        <span class="label">Winners:</span> {{ winners_correct }}-{{winners_incorrect}}{{winners_tie}}<span class="label"> ({{ winners_return }})</span><br>
+        <span class="label">Over/Unders:</span> {{over_unders_correct}}-{{over_unders_incorrect}}{{over_unders_push}}<span class="label"> ({{over_unders_return}})</span><br><br>
+    </div>
+
+    <select id="weekSelector">
+    </select>
+
+    <div class="table-div">
+        <table id="gameTable">
+            <tr>
+                <th>Date</th>
+                <th>Away</th>
+                <th>Home</th>
+                <th>O/U</th>
+                <th>Predicted Winner</th>
+                <th>Predicted O/U</th>
+            </tr>
+        </table>
+    </div>
+    <button id="submitButton">
+        Predict
+    </button>
+
+    <hr class="divider"> 
+
+    <div class="modelDetails">
+        <h2>Model Train/Test Details</h2>
+        <div class="section-container">
+            <div class="section">
+                <h3>Moneyline</h3>
+                <div class="info"></h3><span class="label">Test Accuracy:</span> 71.4%<br></div>
+                <div class="content">
+                    <img src="/Static/xgboost_ML_no_odds_71.4%25_dark.png" alt="Moneyline Model">
+                    <div class="info">
+                        <span class="label">Model:</span> XGBoost<br>
+                        <span class="label">Train/Test Split:</span> 1782/199<br>
+                        <span class="label">Max Depth:</span> 2<br>
+                        <span class="label">Learning Rate:</span> 0.01<br>
+                        <span class="label">Epochs:</span> 500
+                    </div>
+                </div>
+            </div>
+            <div class="section">
+                <h3>Over/Under</h3>
+                <div class="content">
+                    <div class="info"></h3><span class="label">Test Accuracy:</span> 59.8%<br></div>
+                    <img src="/Static/xgboost_OU_no_odds_59.8%25_dark.png" alt="Over/Under Model">
+                    <div class="info">
+                        <span class="label">Model:</span> XGBoost<br>
+                        <span class="label">Train/Test Split:</span> 1782/199<br>
+                        <span class="label">Max Depth:</span> 6<br>
+                        <span class="label">Learning Rate:</span> 0.05<br>
+                        <span class="label">Epochs:</span> 300
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modelDetails">
+        <h2>Predictive Accuracy This Year</h2>
+        <div class="section-container">
+            <div class="section">
+                <h3>Moneyline</h3>
+                <div class="info">{{ winners_return }}.</div>
+                <div class="content">
+                    <img src="/Static/Winner_Predictions_dark.png" alt="Moneyline Accuracy">
+                </div>
+                <div class="info"><span class="label">{{ winners_binom }}</span><br></div>
+
+            </div>
+            <div class="section">
+                <h3>Over/Under</h3>
+                <div class="info">{{ over_unders_return }}.</div>
+                <div class="content">
+                    <img src="/Static/Over_Under_Predictions_dark.png" alt="Over/Under Model">
+                </div>
+                <div class="info"><span class="label">{{ over_unders_binom }}</span><br></div>
+            </div>
+        </div>
+    </div>
+
+    <p>🤗<a href="https://huggingface.co/spaces/BraydenMoore/MARCI-NFL-Betting/tree/main">See the Code</a></p>
+
+
+    
+
+    <script>
+    async function fetchGames(selectedWeek) {
+        const response = await fetch(`/get_games?week=${selectedWeek}`);
+        const pulled_games = await response.json();
+        const table = document.getElementById('gameTable');
+        
+        for(let i = table.rows.length - 1; i > 0; i--) {
+            table.deleteRow(i);
+        }
+
+        const columns = ['Date','Away Team', 'Home Team']; 
+        let lines;
+        try {
+            const lines_response = await fetch('/get_lines');
+            if (!lines_response.ok) {
+                throw new Error(`HTTP error! status: ${lines_response.status}`);
+            }
+            lines = await lines_response.json();
+        } 
+        catch (error) {
+            lines = new Array(20).fill(0);
+        }
+
+        pulled_games.forEach((game, index) => {
+            const row = table.insertRow(-1);
+            
+            columns.forEach((column) => {
+                const cell = row.insertCell(-1);
+                if (column === 'Away Team' || column === 'Home Team') {
+                    const img = document.createElement('img');
+                    img.src = `/Static/${game[column]}.webp`;
+                    img.alt = game[column];
+                    img.width = 50; 
+                    cell.appendChild(img);
+                } else {
+                    cell.textContent = game[column];
+                    cell.style.color = "rgb(114, 114, 114)";
+                }
+            });
+            
+            for (let i = 0; i < 3; i++) {
+                const cell = row.insertCell(-1);
+                if (i<1) {
+                    const input = document.createElement('input');
+                    input.type = 'text';
+                    input.value = lines[index];
+                    cell.appendChild(input);
+                }
+            }
+            });
+    }
+
+
+    function submitData() {
+        const predictButton = document.getElementById('submitButton');
+
+        const table = document.getElementById('gameTable');
+        const rows = table.querySelectorAll('tr');
+        const games = [];
+
+        rows.forEach((row, index) => {
+            if (index === 0) return;
+            
+            const winnerCell = row.cells[row.cells.length - 2];
+            const overUnderCell = row.cells[row.cells.length - 1];
+            const spinnerDiv = document.createElement('div');
+            spinnerDiv.className = 'spinner';
+            winnerCell.innerHTML = ''; 
+            overUnderCell.innerHTML = ''; 
+            winnerCell.appendChild(spinnerDiv);
+            overUnderCell.appendChild(spinnerDiv.cloneNode(true));
+
+            const cells = row.querySelectorAll('td');
+            const game = {};
+
+            game.Date = cells[0].textContent;
+            game.AwayTeam = cells[1].querySelector('img').alt;
+            game.HomeTeam = cells[2].querySelector('img').alt;
+            game.OverUnderLine = cells[3].querySelector('input').value;
+            game.rowIndex = index - 1;  
+            games.push(game);
+        });
+
+
+        fetch('/submit_games', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(games),
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.moneylines && data.over_unders) {
+                const table = document.getElementById('gameTable');
+                const rows = table.querySelectorAll('tr');
+
+                data.moneylines.forEach((moneyline, index) => {
+                    const row = rows[parseInt(moneyline.rowIndex) + 1];
+
+                    const winnerCell = row.cells[row.cells.length - 2];
+                    winnerCell.removeChild(winnerCell.querySelector('.spinner'));
+                    winnerCell.innerHTML = ''; 
+
+                    const wrapperDiv = document.createElement('div');
+                    wrapperDiv.className = 'winner-wrapper';
+                    if (moneyline.Probabilities[0] > 0.6){
+                        wrapperDiv.classList.add("highlight");
+                    }
+                    else {
+                        wrapperDiv.style.opacity = "0.5";
+                    }
+
+                    const winnerImg = document.createElement('img');
+                    winnerImg.src = `/Static/${moneyline.Winner}.webp`;
+                    winnerImg.alt = moneyline.Winner;
+                    winnerImg.width = 50;  
+                    winnerImg.className = 'winner-image hidden';
+                    wrapperDiv.appendChild(winnerImg);
+
+                    const winnerEmojiDiv = document.createElement('div');
+                    winnerEmojiDiv.className = 'emoji';
+
+                    wrapperDiv.dataset.proba = Math.floor(moneyline.Probabilities[0] * 100).toFixed(0);
+                    if (moneyline.Winner[0] === moneyline.Result) {
+                        winnerEmojiDiv.textContent = '✅';
+                    } 
+                    else if (moneyline.Result === 'Tie') {
+                        winnerEmojiDiv.textContent = '🔵';
+                    }
+                    else {
+                        winnerEmojiDiv.textContent = '❌';
+                    }
+                    if (moneyline.Result === 'N/A') {
+                        winnerEmojiDiv.textContent = `(${wrapperDiv.dataset.proba}%)`;
+                    }
+                    wrapperDiv.appendChild(winnerEmojiDiv);
+
+                    setTimeout(() => {
+                        winnerImg.classList.remove('hidden');
+                    }, 10);
+
+                    winnerCell.appendChild(wrapperDiv);
+
+                    const overUnderCell = row.cells[row.cells.length - 1];
+                    overUnderCell.removeChild(overUnderCell.querySelector('.spinner'));
+                    overUnderCell.innerHTML = ''; 
+
+                    const overUnderDiv = document.createElement('div');
+                    overUnderDiv.className = 'over-under-wrapper hidden';
+                    if (data.over_unders[index]['Probability'][0] > 0.6){
+                        overUnderDiv.classList.add("highlight");
+                    }
+                    else {
+                        overUnderDiv.style.opacity = "0.5";
+                    }
+
+                    const textDiv = document.createElement('div');
+                    textDiv.className = 'over-under-text';
+                    textDiv.textContent = data.over_unders[index]['Over/Under'];
+                    if (textDiv.textContent === 'Over') {
+                        overUnderDiv.className += ' over';
+                    } else if (textDiv.textContent === 'Under') {
+                        overUnderDiv.className += ' under';
+                    } else {
+                        overUnderDiv.className += ' na';
+                    }
+
+                    overUnderDiv.appendChild(textDiv);
+
+                    const overEmojiDiv = document.createElement('div');
+                    overEmojiDiv.className = 'emoji';
+
+                    overUnderDiv.dataset.proba = Math.floor(data.over_unders[index]['Probability'][0] * 100).toFixed(0);
+                    if (data.over_unders[index]['Over/Under'][0] === data.over_unders[index]['Result']) {  
+                        overEmojiDiv.textContent = '✅';
+                    } 
+                    else if (data.over_unders[index]['Result'] === 'Push') {
+                        overEmojiDiv.textContent = '🔵';
+                    }
+                    else {
+                        overEmojiDiv.textContent = '❌';
+                    }
+                    if (data.over_unders[index]['Result'] === 'N/A') {
+                        overEmojiDiv.textContent = `(${overUnderDiv.dataset.proba}%)`;
+                    }
+                    overUnderDiv.appendChild(overEmojiDiv);
+
+                    setTimeout(() => {
+                        overUnderDiv.classList.remove('hidden');
+                    }, 10);
+
+                    overUnderCell.appendChild(overUnderDiv);
+
+                    showProbabilityOnHover(wrapperDiv);
+                    showProbabilityOnHover(overUnderDiv);
+                    
+                });
+            }
+            });
+
+    }
+
+    //Hover listener
+    function showProbabilityOnHover(div) {
+        let previousValue;
+        let divText = div.children[1];
+        let eventProcessed = false;
+
+        function handleEnter() {
+            if (eventProcessed) return;  // Skip if an event has already been processed
+
+            eventProcessed = true;
+
+            if (divText.textContent !== `(${div.dataset.proba}%)`) {
+                divText.style.opacity = 0;
+
+                setTimeout(() => {
+                    previousValue = divText.textContent;
+                    divText.textContent = `(${div.dataset.proba}%)`;
+                    divText.style.opacity = 1;
+                }, 300);
+
+                setTimeout(() => {
+                    divText.style.opacity = 0;
+                    setTimeout(() => {
+                        divText.textContent = previousValue;
+                        divText.style.opacity = 1;
+                        eventProcessed = false;  // Reset the flag
+                    }, 300);
+                }, 1000);
+            }
+        }
+
+        // For desktop
+        div.addEventListener('mouseenter', handleEnter);
+        // For mobile
+        div.addEventListener('touchstart', handleEnter);
+    }
+
+    // Populate dropdown
+    let selectedWeek;
+    async function populateDropdown() {
+        const weekSelector = document.getElementById('weekSelector');
+        weekSelector.innerHTML = "";
+
+        const response = await fetch('/get_weeks');
+        const data = await response.json();
+        
+        data.forEach((week, index) => {
+            const option = document.createElement('option');
+            option.value = week;
+            option.text = `Week ${week}`;
+            weekSelector.appendChild(option);
+
+            if (index === 0) {
+                selectedWeek = week;
+            }
+        });
+    }
+    
+    
+    // Get new games when new week selected
+    document.getElementById('weekSelector').addEventListener('change', function(event) {
+        selectedWeek = event.target.value;
+        getNew();
+    });
+
+
+    // Initial load
+    function loadThings() { 
+        populateDropdown()
+        .then(() => fetchGames(selectedWeek))
+        .then(() => submitData())
+        .catch(error => console.error(error));
+    }
+
+    // Get new
+    async function getNew() {
+        const table = document.getElementById('gameTable');
+        table.style.opacity = "0.5";
+
+        try {
+            await fetchGames(selectedWeek);
+            await submitData();
+            table.style.opacity = "1";
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+
+    // Submit on click, enter, and pageload
+    loadThings();
+
+    document.getElementById('submitButton').addEventListener('click', submitData);
+
+    document.addEventListener('keydown', function(event) {
+        if (event.keyCode === 13) {  
+            submitData();
+        }
+    });
+
+
+</script>
+
+</body>
+</html>