odds-ends-changes #3
35
compose.yaml
35
compose.yaml
@@ -86,23 +86,34 @@ services:
|
|||||||
|
|
||||||
- POSTGRES_PASSWORD=maverickdb
|
- POSTGRES_PASSWORD=maverickdb
|
||||||
|
|
||||||
## volumes:
|
volumes:
|
||||||
##
|
|
||||||
## - /tmp/volume-data-postgres:/var/lib/postgresql/data
|
- /tmp/volume-data-postgres:/var/lib/postgresql/data
|
||||||
|
|
||||||
|
healthcheck:
|
||||||
|
|
||||||
|
test: ["CMD-SHELL", "pg_isready -U maverickdb -d maverickdb"]
|
||||||
|
interval: 5s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
|
||||||
card-players-unite-pgadmin:
|
card-players-unite-pgadmin:
|
||||||
|
user: root # Or your specific UID:GID
|
||||||
container_name: card-players-unite-pgadmin
|
container_name: card-players-unite-pgadmin
|
||||||
|
|
||||||
image: dpage/pgadmin4
|
image: dpage/pgadmin4
|
||||||
|
|
||||||
depends_on:
|
depends_on:
|
||||||
|
card-players-unite-postgres:
|
||||||
- card-players-unite-postgres
|
condition: service_healthy # THIS TELLS DOCKER TO WAIT FOR THE HEALTHCHECK
|
||||||
|
|
||||||
ports:
|
ports:
|
||||||
|
|
||||||
- "5480:80"
|
- 5480:80
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
|
||||||
|
- /tmp/volumes/pgadmin4444:/var/lib/pgadmin
|
||||||
|
|
||||||
environment:
|
environment:
|
||||||
|
|
||||||
@@ -110,10 +121,6 @@ services:
|
|||||||
|
|
||||||
PGADMIN_DEFAULT_PASSWORD: maverickdb
|
PGADMIN_DEFAULT_PASSWORD: maverickdb
|
||||||
|
|
||||||
## volumes:
|
|
||||||
##
|
|
||||||
## - /tmp/volume-data-pgadmin4:/var/lib/pgadmin
|
|
||||||
|
|
||||||
##########################################
|
##########################################
|
||||||
##
|
##
|
||||||
## hosting / relational data
|
## hosting / relational data
|
||||||
@@ -124,7 +131,7 @@ services:
|
|||||||
|
|
||||||
container_name: apis.cardplayersunited.com
|
container_name: apis.cardplayersunited.com
|
||||||
|
|
||||||
image: dpage/pgadmin4
|
image: dpage/apis.cardplayersunited.com
|
||||||
|
|
||||||
build:
|
build:
|
||||||
|
|
||||||
@@ -135,8 +142,8 @@ services:
|
|||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
|
||||||
depends_on:
|
depends_on:
|
||||||
|
card-players-unite-postgres:
|
||||||
- card-players-unite-postgres
|
condition: service_healthy # THIS TELLS DOCKER TO WAIT FOR THE HEALTHCHECK
|
||||||
|
|
||||||
ports:
|
ports:
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
# adsfads
|
# Card Players United
|
||||||
|
|
||||||
|
## pg4 admin
|
||||||
|
|
||||||
|
http://localhost:5480/browser/
|
||||||
|
|
||||||
## view all tourney
|
## view all tourney
|
||||||
|
|
||||||
@@ -6,6 +10,8 @@
|
|||||||
|
|
||||||
## admin home
|
## admin home
|
||||||
|
|
||||||
|
http://localhost:8888/
|
||||||
|
|
||||||
## login
|
## login
|
||||||
|
|
||||||
## how to create new user
|
## how to create new user
|
||||||
|
|||||||
213
templates/listing (copy).html
Normal file
213
templates/listing (copy).html
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
{% load static %}
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>
|
||||||
|
|
||||||
|
(shinobi test) Card Players Unite / card tournaments and events near you
|
||||||
|
|
||||||
|
</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{% static '/listing/listing.css' %}">
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/listing/listing.css">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar">
|
||||||
|
|
||||||
|
<div class="navbar-container">
|
||||||
|
|
||||||
|
<div class="logo-container">
|
||||||
|
|
||||||
|
<h1 class="logo">
|
||||||
|
|
||||||
|
Card Players Unite
|
||||||
|
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-container">
|
||||||
|
|
||||||
|
<ul class="menu-list">
|
||||||
|
|
||||||
|
<li class="menu-list-item active">Home</li>
|
||||||
|
|
||||||
|
<li class="menu-list-item">Tournaments</li>
|
||||||
|
|
||||||
|
<li class="menu-list-item">Teams</li>
|
||||||
|
|
||||||
|
<li class="menu-list-item">Login</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-container">
|
||||||
|
|
||||||
|
<div class="toggle">
|
||||||
|
<i class="fas fa-moon toggle-icon"></i>
|
||||||
|
<i class="fas fa-sun toggle-icon"></i>
|
||||||
|
<div class="toggle-ball"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar">
|
||||||
|
|
||||||
|
<i class="left-menu-icon fas fa-home"></i>
|
||||||
|
|
||||||
|
<i class="left-menu-icon fas fa-users"></i>
|
||||||
|
|
||||||
|
<i class="left-menu-icon fas fa-bookmark"></i>
|
||||||
|
|
||||||
|
<i class="left-menu-icon fas fa-tv"></i>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
|
||||||
|
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/18.jpg' %}');">
|
||||||
|
|
||||||
|
<p class="featured-desc">
|
||||||
|
|
||||||
|
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis minima voluptatibus incidunt. Accusamus, provident.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="featured-button">
|
||||||
|
|
||||||
|
LEARN MORE
|
||||||
|
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="movie-list-container">
|
||||||
|
<h1 class="movie-list-title">Alll Tournaments</h1>
|
||||||
|
<div class="movie-list-wrapper">
|
||||||
|
<div class="movie-list">
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/8.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/9.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/10.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/11.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/12.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/1.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
<div class="movie-list-item">
|
||||||
|
<img class="movie-list-item-img" src="{% static '/listing/imagery/1.jpg' %}" alt="">
|
||||||
|
<span class="movie-list-item-title">Her</span>
|
||||||
|
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
||||||
|
hic fugit similique accusantium.</p>
|
||||||
|
<button class="movie-list-item-button">Watch</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i class="fas fa-chevron-right arrow"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/7.jpg' %}');">
|
||||||
|
|
||||||
|
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
||||||
|
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
||||||
|
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
||||||
|
minima voluptatibus incidunt. Accusamus, provident.</p>
|
||||||
|
<button class="featured-button">111WATCH</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/6.jpg' %}');">
|
||||||
|
|
||||||
|
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
||||||
|
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
||||||
|
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
||||||
|
minima voluptatibus incidunt. Accusamus, provident.</p>
|
||||||
|
<button class="featured-button">WATCH</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/8.jpg' %}');">
|
||||||
|
|
||||||
|
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
||||||
|
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
||||||
|
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
||||||
|
minima voluptatibus incidunt. Accusamus, provident.</p>
|
||||||
|
<button class="featured-button">WATCH</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/9.jpg' %}');">
|
||||||
|
|
||||||
|
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
||||||
|
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
||||||
|
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
||||||
|
minima voluptatibus incidunt. Accusamus, provident.</p>
|
||||||
|
<button class="featured-button">WATCH</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<script src="{% static 'listing/listing.js' %}"></script>
|
||||||
|
|
||||||
|
<script src="{% static 'listing/features.js' %}"></script>
|
||||||
|
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -1,213 +1,240 @@
|
|||||||
{% load static %}
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<title>
|
|
||||||
|
|
||||||
(shinobi test) Card Players Unite / card tournaments and events near you
|
|
||||||
|
|
||||||
</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="{% static '/listing/listing.css' %}">
|
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Card Players Unite | The Lounge</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--aria-gold: #4dbf00; /* Matching your theme brand color [cite: 113] */
|
||||||
|
--aria-dark: #151515; /* [cite: 121] */
|
||||||
|
--aria-surface: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
<link rel="stylesheet" href="/listing/listing.css">
|
body {
|
||||||
|
font-family: 'Sen', sans-serif;
|
||||||
|
background-color: var(--aria-dark);
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 2px solid var(--aria-gold);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
|
.btn-gold {
|
||||||
|
background-color: var(--aria-gold);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-gold:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
background-color: #3e9a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tournament Table Styling */
|
||||||
|
.tournament-grid {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: var(--aria-surface);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 18px;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
color: var(--aria-gold);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal / Popup Box */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: var(--aria-surface);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 400px;
|
||||||
|
border: 1px solid var(--aria-gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group { margin-bottom: 20px; }
|
||||||
|
input, textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #444;
|
||||||
|
color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="navbar">
|
<div class="header">
|
||||||
|
<h1>Card Players Unite <small style="font-size: 0.5em; color: gray;">Tournament Management</small></h1>
|
||||||
<div class="navbar-container">
|
<button class="btn-gold" onclick="toggleModal(true)">
|
||||||
|
<i class="fas fa-plus"></i> NEW TOURNAMENT
|
||||||
<div class="logo-container">
|
|
||||||
|
|
||||||
<h1 class="logo">
|
|
||||||
|
|
||||||
Card Players Unite
|
|
||||||
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="menu-container">
|
|
||||||
|
|
||||||
<ul class="menu-list">
|
|
||||||
|
|
||||||
<li class="menu-list-item active">Home</li>
|
|
||||||
|
|
||||||
<li class="menu-list-item">Tournaments</li>
|
|
||||||
|
|
||||||
<li class="menu-list-item">Teams</li>
|
|
||||||
|
|
||||||
<li class="menu-list-item">Login</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="profile-container">
|
|
||||||
|
|
||||||
<div class="toggle">
|
|
||||||
<i class="fas fa-moon toggle-icon"></i>
|
|
||||||
<i class="fas fa-sun toggle-icon"></i>
|
|
||||||
<div class="toggle-ball"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar">
|
|
||||||
|
|
||||||
<i class="left-menu-icon fas fa-home"></i>
|
|
||||||
|
|
||||||
<i class="left-menu-icon fas fa-users"></i>
|
|
||||||
|
|
||||||
<i class="left-menu-icon fas fa-bookmark"></i>
|
|
||||||
|
|
||||||
<i class="left-menu-icon fas fa-tv"></i>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/18.jpg' %}');">
|
|
||||||
|
|
||||||
<p class="featured-desc">
|
|
||||||
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis minima voluptatibus incidunt. Accusamus, provident.
|
|
||||||
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button class="featured-button">
|
|
||||||
|
|
||||||
LEARN MORE
|
|
||||||
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<table class="tournament-grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Tournament Name</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Buy-in (Price)</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="tournament-list">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<div class="movie-list-container">
|
<div id="createModal" class="modal">
|
||||||
<h1 class="movie-list-title">Alll Tournaments</h1>
|
<div class="modal-content">
|
||||||
<div class="movie-list-wrapper">
|
<h2 style="color: var(--aria-gold);">Host a New Table</h2>
|
||||||
<div class="movie-list">
|
<form id="tournamentForm">
|
||||||
<div class="movie-list-item">
|
<div class="form-group">
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/8.jpg' %}" alt="">
|
<label>Name</label>
|
||||||
<span class="movie-list-item-title">Her</span>
|
<input type="text" id="name" required placeholder="High Roller Hold'em">
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
|
||||||
hic fugit similique accusantium.</p>
|
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="movie-list-item">
|
<div class="form-group">
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/9.jpg' %}" alt="">
|
<label>Description</label>
|
||||||
<span class="movie-list-item-title">Her</span>
|
<textarea id="description" rows="3" placeholder="No-limit stakes..."></textarea>
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
|
||||||
hic fugit similique accusantium.</p>
|
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="movie-list-item">
|
<div class="form-group">
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/10.jpg' %}" alt="">
|
<label>Price</label>
|
||||||
<span class="movie-list-item-title">Her</span>
|
<input type="number" id="rental_price" step="0.01" value="999.99">
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
|
||||||
hic fugit similique accusantium.</p>
|
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="movie-list-item">
|
<input type="hidden" id="rented_user_id" value="0">
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/11.jpg' %}" alt="">
|
|
||||||
<span class="movie-list-item-title">Her</span>
|
<div style="display: flex; gap: 10px;">
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
<button type="submit" class="btn-gold">START EVENT</button>
|
||||||
hic fugit similique accusantium.</p>
|
<button type="button" class="btn-gold" style="background:#444;" onclick="toggleModal(false)">CLOSE</button>
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="movie-list-item">
|
</form>
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/12.jpg' %}" alt="">
|
|
||||||
<span class="movie-list-item-title">Her</span>
|
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
|
||||||
hic fugit similique accusantium.</p>
|
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
|
||||||
<div class="movie-list-item">
|
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/1.jpg' %}" alt="">
|
|
||||||
<span class="movie-list-item-title">Her</span>
|
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
|
||||||
hic fugit similique accusantium.</p>
|
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
|
||||||
<div class="movie-list-item">
|
|
||||||
<img class="movie-list-item-img" src="{% static '/listing/imagery/1.jpg' %}" alt="">
|
|
||||||
<span class="movie-list-item-title">Her</span>
|
|
||||||
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. At
|
|
||||||
hic fugit similique accusantium.</p>
|
|
||||||
<button class="movie-list-item-button">Watch</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<i class="fas fa-chevron-right arrow"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/7.jpg' %}');">
|
<script>
|
||||||
|
// Toggle the popup
|
||||||
|
function toggleModal(show) {
|
||||||
|
document.getElementById('createModal').style.display = show ? 'flex' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
// Fetch and List Tournaments
|
||||||
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
async function fetchTournaments() {
|
||||||
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
const response = await fetch('/tournament/');
|
||||||
minima voluptatibus incidunt. Accusamus, provident.</p>
|
const data = await response.json();
|
||||||
<button class="featured-button">111WATCH</button>
|
const list = document.getElementById('tournament-list');
|
||||||
</div>
|
list.innerHTML = '';
|
||||||
|
|
||||||
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/6.jpg' %}');">
|
data.forEach(t => {
|
||||||
|
const row = `<tr>
|
||||||
|
<td><strong>${t.name}</strong></td>
|
||||||
|
<td>${t.description}</td>
|
||||||
|
<td>$${t.rental_price}</td>
|
||||||
|
<td>${t.rented_user_id === 0 ? 'AVAILABLE' : 'BOOKED'}</td>
|
||||||
|
</tr>`;
|
||||||
|
list.innerHTML += row;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
// Create Tournament [cite: 150, 155]
|
||||||
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
document.getElementById('tournamentForm').addEventListener('submit', async (e) => {
|
||||||
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
e.preventDefault();
|
||||||
minima voluptatibus incidunt. Accusamus, provident.</p>
|
const payload = {
|
||||||
<button class="featured-button">WATCH</button>
|
name: document.getElementById('name').value,
|
||||||
</div>
|
description: document.getElementById('description').value,
|
||||||
|
rental_price: parseFloat(document.getElementById('rental_price').value),
|
||||||
|
rented_user_id: parseInt(document.getElementById('rented_user_id').value)
|
||||||
|
};
|
||||||
|
|
||||||
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/8.jpg' %}');">
|
const response = await fetch('/tournament/create/', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
|
||||||
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
if (response.ok) {
|
||||||
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
toggleModal(false);
|
||||||
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
fetchTournaments();
|
||||||
minima voluptatibus incidunt. Accusamus, provident.</p>
|
document.getElementById('tournamentForm').reset();
|
||||||
<button class="featured-button">WATCH</button>
|
} else {
|
||||||
</div>
|
alert("The house always wins... but this time, your form failed.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
<div class="featured-content" style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('{% static 'listing/imagery/9.jpg' %}');">
|
// This function captures the form data and sends it to the house (the database)
|
||||||
|
async function saveTournament() {
|
||||||
|
// 1. Gather the intel from the form fields
|
||||||
|
const tournamentData = {
|
||||||
|
name: document.getElementById('name').value,
|
||||||
|
description: document.getElementById('description').value,
|
||||||
|
rental_price: parseFloat(document.getElementById('rental_price').value),
|
||||||
|
rented_user_id: 0 // Defaulting to 0 for available tables
|
||||||
|
};
|
||||||
|
|
||||||
<img class="featured-title" src="{% static '/listing/imagery/f-t-2.png" alt="">
|
// 2. Place the bet (The POST request)
|
||||||
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo dolor
|
const response = await fetch('/tournament/create/', {
|
||||||
deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam omnis
|
method: 'POST',
|
||||||
minima voluptatibus incidunt. Accusamus, provident.</p>
|
headers: {
|
||||||
<button class="featured-button">WATCH</button>
|
'Content-Type': 'application/json',
|
||||||
</div>
|
// Ensure you handle CSRF if this is rendered via Django [cite: 95]
|
||||||
</div>
|
},
|
||||||
|
body: JSON.stringify(tournamentData)
|
||||||
|
});
|
||||||
|
|
||||||
</div>
|
if (response.ok) {
|
||||||
|
console.log("Record saved to the vault.");
|
||||||
|
// Refresh the list to show the new table
|
||||||
|
fetchTournaments();
|
||||||
|
} else {
|
||||||
|
console.error("The house declined the transaction.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<!--
|
// This listener waits for the user to hit 'START EVENT'
|
||||||
<script src="{% static 'listing/listing.js' %}"></script>
|
document.getElementById('tournamentForm').addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault(); // Keep the lounge smooth—no page reloads
|
||||||
|
await saveTournament(); // This is the moment the record hits the database
|
||||||
|
});
|
||||||
|
|
||||||
<script src="{% static 'listing/features.js' %}"></script>
|
|
||||||
|
|
||||||
-->
|
// Initialize the floor
|
||||||
|
fetchTournaments();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user