From 81fef18a84c5107c6457cac82ca3b2455bbca642 Mon Sep 17 00:00:00 2001
From: Parsa Yazdani <parsa@yazdani.au>
Date: Fri, 14 Jun 2024 15:42:38 +1000
Subject: [PATCH] Create stream.html

---
 stream.html | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 stream.html

diff --git a/stream.html b/stream.html
new file mode 100644
index 0000000..3e3ad7c
--- /dev/null
+++ b/stream.html
@@ -0,0 +1,81 @@
+<style>
+html, body {
+    background: black;
+    color: white;
+    margin: 0;
+    padding: 0
+}
+#banner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem
+}
+#banner > button {
+    background: white;
+    border: none;
+    color: black;
+    height: fit-content;
+    font-size: 1.5rem;
+}
+#main {
+    display: flex;
+    justify-content: center;
+}
+#odds {
+    width: calc(100% - 4rem);
+    height: 1.5rem;
+    display: flex;
+    gap: 0.5rem;
+    margin: auto;
+    margin-bottom: 1rem
+}
+#odds > div {
+    height: 100%;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    transition: width 0.5s ease;
+    padding: 0 1rem;
+    border-radius: 0.5rem
+}
+#team1 {
+    background: blue;
+}
+#team2 {
+    background: red;
+}
+#stream {
+    width: calc(100vw - 4rem);
+    background: red;
+    height: 60vh
+}
+</style>
+<div id="banner">
+    <h1>Instinct</h1>
+    <button>Profile</button>
+</div>
+<div id="odds">
+    <div id="team1" style="width: 50%">Team 1</div>
+    <div id="team2" style="width: 50%">Team 2</div>
+</div>
+<div id="main">
+    <div id="stream"></div>
+</div>
+<div style="display: flex; justify-content: space-between; margin: 2rem">
+    <button onclick="bet('team1')">Team 1</button>
+    <button onclick="bet('team2')">Team 2</button>
+</div>
+<script>
+var team1bets = 1;
+var team2bets = 1;
+function bet(team){
+    if(team == 'team1')
+        team1bets += 1;
+    else
+        team2bets += 1;
+    const totalBets = team1bets + team2bets;
+    document.getElementById('team1').style.width = 100*team1bets/totalBets+"%"
+    document.getElementById('team2').style.width = 100*team2bets/totalBets+"%"
+}
+</script>