lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

added home page, commiting to main on accidental

Browse Source
This commit is contained in:
Vishal Vunnam
2024-04-09 16:25:38 -06:00
parent 003b59d6b8
commit 7cae7b841a
7 changed files with 73 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
ProjectSourceCode/src/resources/css/home-screen.css
View File

@@ -1,3 +1,42 @@
.card-container { .banner {
margin-bottom: 35px; width: 500px; /* Set width of the banner to 100% of viewport width */
height: 150px;
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
padding: 10px; /* Adjust padding as needed */
position: relative; /* Needed for absolute positioning */
overflow: hidden; /* Hide the overflowing skewed content */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
cursor: pointer; /* Change cursor to pointer on hover */
}
.banner:hover {
transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */
}
.underlined-header {
font-family: 'Golos Text';
display: inline-block; /* Ensure the width is based on content */
border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
width: 165px; /* Adjust the width as needed, for example, 50% of the header's width */
}
.content {
transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
}
.banner .content {
display: flex;
align-items: center;
}
.banner::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1%; /* Width of the red strip */
background-color: red; /* Red color */
} }

BIN
ProjectSourceCode/src/resources/img/Laliga_Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
ProjectSourceCode/src/resources/img/Laliga_Title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
ProjectSourceCode/src/resources/img/Premier_Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
ProjectSourceCode/src/resources/img/Premier_Title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

8
ProjectSourceCode/src/views/pages/home.hbs
View File

@@ -1,14 +1,14 @@
<body> <body>
<div class="container mt-5"> <div class="container mt-5">
<h1 class="mb-4">Welcome</h1> <h1 class="mb-4 underlined-header">Leagues</h1>
<div class="card-container"> <div class="card-container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-3"> <div class="row g-3">
<!-- 🇬🇧 Premier League --> <!-- 🇬🇧 Premier League -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}} {{> league_table leagueName="Premier League" logo="./img/Premier_Icon.png" title="./img/Premier_Title.png"}}
<!-- 🇪🇸 La Liga --> <!-- 🇪🇸 La Liga -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}} {{> league_table leagueName="La Liga" logo="./img/Laliga_Icon.png" title="./img/Laliga_Title.png"}}
<!-- 🇩🇪 Bundesliga --> <!-- 🇩🇪 Bundesliga -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}} {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}

13
ProjectSourceCode/src/views/partials/league_table.hbs
View File

@@ -1,6 +1,6 @@
<div class="col-md-4 mb-4"> {{!-- <div class="col-md-4 mb-4">
<div class="card"> <div class="card">
<div class="card-body"> <div class="">
<h5 class="card-title">League Name</h5> <!-- Insert Name using Handlesbars and API --> <h5 class="card-title">League Name</h5> <!-- Insert Name using Handlesbars and API -->
<table class="table"> <table class="table">
<thead> <thead>
@@ -29,6 +29,11 @@
<a href="#" class="btn btn-primary">View League</a> <a href="#" class="btn btn-primary">View League</a>
</div> </div>
</div> </div>
</div> --}}
<div class="banner">
<div class="content">
<img src={{logo}} height="120">
<img src={{title}} height="80">
{{flag}}
</div>
</div> </div>