diff --git a/app/static/css/style.css b/app/static/css/style.css index c228c2cbcc70907d1603949e0ac023ee394a5c7a..78fd506a3e918a636457b0032045082d63ea30c3 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -46,7 +46,62 @@ /*border: solid black 1px;*/ } +.title +{ + text-align: center; +} +.main1 +{ + margin: auto; + width: 90%; + border: solid 1px; + border-radius: 6px; + padding: 12px; +} +.display +{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} +h3 +{ + border-top: solid 0.5px; + border-bottom: solid 0.5px; +} + +.playerName +{ + text-align: center; + margin-right: 12px; + margin-left: 12px; + border-bottom: solid 0.5px; +} +.marketValue +{ + text-align: center; + margin-right: 12px; + margin-left: 12px; + border-bottom: solid 0.5px; +} +.starValue +{ + text-align: center; + margin-right: 12px; + margin-left: 12px; + border-bottom: solid 0.5px; +} +.salary +{ + text-align: center; + margin-right: 12px; + margin-left: 12px; + border-bottom: solid 0.5px; +} + + + /* use inter font globally */ body { font-family: 'Inter', sans-serif; } + diff --git a/app/templates/home.html b/app/templates/home.html index e351c6760a5e031db1f7c55e8d63453fa8ff4ecc..d49b1f171c6327eaf584d8c5fbc8ca0e4ca99917 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -1,108 +1,51 @@ <!DOCTYPE html> <html> - <head> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link href="../static/css/style.css" rel="stylesheet" /> - <!-- <link rel = "stylesheet" href = ""> --> + <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="homepage.css"> </head> <body> - <div class="title"> + <div class = "title"> <h1>Title</h1> <p>At some point lets figure this out plz</p> </div> - <div class="main1"> + <div class = "main1"> <label for="filter">Filter By</label> <select name="filter"> - <option value="Star Rating">Star Rating</option> - <option value="Market Value">Market Value</option> - <option value="Games Won">Games Won</option> - <option value="Salary">Salary</option> - <option value="Start Of Contract">Start Of Contract</option> + <option value = "Star Rating">Star Rating</option> + <option value = "Market Value">Market Value</option> + <option value = "Salary">Salary</option> </select> - <!--NOTE NOTE NOTE NOTE NOTE--> - <p>I dont know it i agree with all of these being in the table but if we're going to filter by all then it - only makes sense - <p> - <div class="list"> - <table> I dont know it i agree with all of these - <tr> - <th>Player Name </th> - <th>Star Rating</th> - <th>Market Value</th> - <th>Star Rating</th> - <th>Games Won</th> - <th>Salary</th> - <th>Start Of Contract</th> - </tr> - <tr> - <td><a href="playerDetails.html">player 1</a></td> - <td>$</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 2</a></td> - <td>£</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 3</a></td> - <td>$</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 4</a></td> - <td>£</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 5</a></td> - <td>$</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 6</a></td> - <td>£</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 7</a></td> - <td>$</td> - <td>***</td> - </tr> - <tr> - <td><a href="playerDetails.html">player 8</a></td> - <td>£</td> - <td>***</td> - </tr> - - <tr> - <td>import data</td> - <td>import data</td> - <td>import data</td> - </tr> - </table> - <p>So this is the tabular display</p> - <p>Obviously we are importing data from a csv file </p> + <div class = "display"> + <div class = "playerName"> + <h3>Player Name</h3> + <p>{Import Data}</p> + <p>name1</p> + </div> + + <div class = "marketValue"> + <h3>Market Value</h3> + <p>{Back-Process}</p> + <p>£</p> + </div> + + <div class = "starValue"> + <h3>Star Value</h3> + <p>{Back-Process}</p> + <p>*****</p> + </div> + + <div class = "salary"> + <h3>Salary</h3> + <p>{Import Data}</p> + <p>$</p> + </div> </div> - - - + </div> - <footer> - <h3>notes</h3> - <p>1 - css formatting</p> - <p>2 - Need to be able to load specific columns into table </p> - <p>3 - </p> - <p>4 - </p> - <p>5 - </p> - <p>6 - </p> - </footer> - </body> - -</html> +</html> \ No newline at end of file