This commit is contained in:
parent
c36e6b1947
commit
5a72d919d0
7 changed files with 10667 additions and 227 deletions
10034
static/css/bootstrap.css
vendored
Normal file
10034
static/css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
372
static/css/style.css
Normal file
372
static/css/style.css
Normal file
|
|
@ -0,0 +1,372 @@
|
||||||
|
/*=== Header area start ===*/
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
background: #1F2E3D;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: white;
|
||||||
|
background: #ff7675;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-selection {
|
||||||
|
color: white;
|
||||||
|
background: #ff7675;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
color: white;
|
||||||
|
background: #ff7675;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrolltotop {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
|
background: rgba(0,0,0,.5);
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #ffffff;
|
||||||
|
position: fixed;
|
||||||
|
right: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
display: none;
|
||||||
|
transition: 0.2s all ease;
|
||||||
|
-webkit-transition: 0.2s all ease;
|
||||||
|
-moz-transition: 0.2s all ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrolltotop:hover {
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0,0,0,.5);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-area {
|
||||||
|
padding: 23px 0 24px;
|
||||||
|
background: #222831;
|
||||||
|
border-bottom: 1px solid #FFD018;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item a {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 26px;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #F7FCFF;
|
||||||
|
display: inline-block;
|
||||||
|
transition: 0.2s all ease;
|
||||||
|
-webkit-transition: 0.2s all ease;
|
||||||
|
-moz-transition: 0.2s all ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item a:hover {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area {
|
||||||
|
padding-top: 20px;
|
||||||
|
background: #1f2e3d;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
min-height: 60vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner select {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
color: #E8E8E8;
|
||||||
|
background: #222831;
|
||||||
|
border: 1px solid #FFD018;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 258px;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url(images/01.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 16px;
|
||||||
|
background-position: calc(100% - 13px) 50%;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 2px solid #ffd018;
|
||||||
|
border-radius: 8px 8px 0px 0px;
|
||||||
|
background: #222831;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner3 h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
color: #FFD018;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner4 {
|
||||||
|
width: 760px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: 10px;
|
||||||
|
border-right: 2px solid #ffd018;
|
||||||
|
height: 60px;
|
||||||
|
padding-left: 86px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner4 div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner5 {
|
||||||
|
width: 320px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-right: 2px solid #ffd018;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner5 div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner6 {
|
||||||
|
width: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 10px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 17px;
|
||||||
|
padding-right: 10px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li a {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li p {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li:nth-child(even) {
|
||||||
|
background: #222831;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li div:nth-of-type(1) {
|
||||||
|
width: 760px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li div:nth-of-type(1) img {
|
||||||
|
max-width: 32px;
|
||||||
|
margin-right: 37px;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li div:nth-of-type(2) {
|
||||||
|
width: 320px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li div:nth-of-type(3) {
|
||||||
|
width: 120px;
|
||||||
|
padding-right: 10px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-area {
|
||||||
|
padding: 20px 0;
|
||||||
|
background: #222831;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item ul li a {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: block;
|
||||||
|
margin-right: 20px;
|
||||||
|
transition: 0.2s all ease;
|
||||||
|
-webkit-transition: 0.2s all ease;
|
||||||
|
-moz-transition: 0.2s all ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item ul li a:hover {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item p {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
====================================
|
||||||
|
Small Screen - Tablate
|
||||||
|
====================================
|
||||||
|
*/
|
||||||
|
@media screen and (min-width: 768px) and (max-width: 991px) {
|
||||||
|
|
||||||
|
|
||||||
|
.content-item-inner4 {
|
||||||
|
padding-left: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li a {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li a:nth-of-type(1) img {
|
||||||
|
margin-right: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item ul li a {
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item p {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
====================================
|
||||||
|
Small Screen - Mobile
|
||||||
|
====================================
|
||||||
|
*/
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 {
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
width: 650px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner4 {
|
||||||
|
width: 267px;
|
||||||
|
padding-left: 77px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li div:nth-of-type(1) {
|
||||||
|
width: 267px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-inner2 ul li div:nth-of-type(1) img {
|
||||||
|
margin-right: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-item {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer-item ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer-item ul li a {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
BIN
static/images/01.png
Normal file
BIN
static/images/01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
|
|
@ -1,72 +1,91 @@
|
||||||
{{define "title" -}}
|
{{define "title"}}
|
||||||
<title>Serverlist :: {{.Region}}</title>
|
<title>Serverlist :: {{.Region}}</title>
|
||||||
{{- end}}
|
{{end}}
|
||||||
|
|
||||||
{{define "content" -}}
|
{{define "content"}}
|
||||||
{{ $gamemodes := .Gamemodes}}
|
{{ $gamemodes := .Gamemodes}}
|
||||||
{{ $servers := .Servers}}
|
{{ $servers := .Servers}}
|
||||||
{{ $flags := .Flags}}
|
{{ $flags := .Flags}}
|
||||||
<div class="container mx-auto px-4 sm:px-8">
|
{{range $gamemode := $gamemodes -}}
|
||||||
<div class="py-8">
|
<div class="content-item-inner2 d-none d-md-block">
|
||||||
<div>
|
<div class="content-item-inner3">
|
||||||
<h2 class="text-2xl font-semibold leading-tight text-white">{{.Region}}</h2>
|
<div class="content-item-inner4">
|
||||||
|
<h2>{{$gamemode.Name}}</h2>
|
||||||
</div>
|
</div>
|
||||||
{{range $gamemode := $gamemodes -}}
|
<div class="content-item-inner5">
|
||||||
<div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
|
<h2>Map</h2>
|
||||||
<div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
|
</div>
|
||||||
<table class="min-w-full leading-normal">
|
<div class="content-item-inner6">
|
||||||
<thead>
|
<h2>Players</h2>
|
||||||
<tr>
|
</div>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
</div>
|
||||||
|
<ul>
|
||||||
</th>
|
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
||||||
{{$gamemode.Name}}
|
|
||||||
</th>
|
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
||||||
Map
|
|
||||||
</th>
|
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
||||||
Players
|
|
||||||
</th>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{{range $server := $servers -}}
|
{{range $server := $servers -}}
|
||||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||||
{{if ne $server.Map "Server didn't reply." -}}
|
{{if ne $server.Map "Server didn't reply." -}}
|
||||||
<tr id="content">
|
<li>
|
||||||
<td class="px-5 border-b border-gray-200 bg-white" id="flag">
|
<div class="text-truncate">
|
||||||
|
<a href="steam://connect/{{$server.ServerIP}}">
|
||||||
{{range $flag := $flags -}}
|
{{range $flag := $flags -}}
|
||||||
{{if eq $server.ServerIP $flag.ServerIP -}}
|
{{if eq $server.ServerIP $flag.ServerIP -}}
|
||||||
<img src="https://flagcdn.com/16x12/{{$flag.Flag}}.png" srcset="https://flagcdn.com/32x24/{{$flag.Flag}}.png 2x, https://flagcdn.com/48x36/{{$flag.Flag}}.png 3x" width="16" height="12">
|
<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
</td>
|
{{$server.Name}}</a>
|
||||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
|
</div>
|
||||||
<div class="flex items-center">
|
<div>
|
||||||
<div class="ml-3">
|
<p>{{$server.Map}}</a>
|
||||||
<a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>{{$server.Players}}/{{$server.MaxPlayers}}</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- for mobile -->
|
||||||
|
<div class="table-responsive">
|
||||||
|
<div class="content-item-inner2 d-md-none">
|
||||||
|
<div class="content-item-inner3">
|
||||||
|
<div class="content-item-inner4">
|
||||||
|
<h2>{{$gamemode.Name}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="content-item-inner5">
|
||||||
|
<h2>Map</h2>
|
||||||
|
</div>
|
||||||
|
<div class="content-item-inner6">
|
||||||
|
<h2>Players</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
{{range $server := $servers -}}
|
||||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
|
{{if ne $server.Map "Server didn't reply." -}}
|
||||||
</td>
|
<ul>
|
||||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
<li>
|
||||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
|
<div>
|
||||||
</td>
|
<a href="steam://connect/{{$server.ServerIP}}">
|
||||||
</tr>
|
{{range $flag := $flags -}}
|
||||||
|
{{if eq $server.ServerIP $flag.ServerIP -}}
|
||||||
|
<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{$server.Name}}</a>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="">{{$server.Map}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
{{- end}}
|
{{- end}}
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,12 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="bg-gray-800" lang="en"><head>
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<!-- Meta setup -->
|
||||||
{{block "title" . -}}{{- end}}
|
{{block "title" . -}}{{- end}}
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta http-equiv="content-Type" content="text/html; utf-8" />
|
<meta http-equiv="content-Type" content="text/html; utf-8" />
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta name="robots" content="INDEX,FOLLOW" />
|
<meta name="robots" content="INDEX,FOLLOW" />
|
||||||
<meta http-equiv="content-Language" content="en" />
|
<meta http-equiv="content-Language" content="en" />
|
||||||
<meta name="description" content="Serverlist for competitive Team Fortress 2 players" />
|
<meta name="description" content="Serverlist for competitive Team Fortress 2 players" />
|
||||||
|
|
@ -12,92 +16,68 @@
|
||||||
<meta http-equiv="Reply-to" content="" />
|
<meta http-equiv="Reply-to" content="" />
|
||||||
<meta name="expires" content="" />
|
<meta name="expires" content="" />
|
||||||
<meta name="revisit-after" content="2 days" />
|
<meta name="revisit-after" content="2 days" />
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
|
|
||||||
<link href="https://unpkg.com/tailwindcss@1.0.4/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<script async defer data-website-id="084ca01d-5337-4f12-8932-3033addbc175" src="https://a.v0v.de/t.js"></script>
|
<script async defer data-website-id="084ca01d-5337-4f12-8932-3033addbc175" src="https://a.v0v.de/t.js"></script>
|
||||||
<script defer data-domain="serverlist.tf" src="https://t.v0v.de/js/t.js"></script>
|
<script defer data-domain="serverlist.tf" src="https://t.v0v.de/js/t.js"></script>
|
||||||
<style>
|
|
||||||
tr#content {
|
{{block "title" . -}}{{- end}}
|
||||||
line-height: 0;
|
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
|
||||||
}
|
<link rel="stylesheet" href="css/bootstrap.css" />
|
||||||
td#flag {
|
<link rel="stylesheet" href="style.css" />
|
||||||
padding-right: 0;
|
</head>
|
||||||
}
|
|
||||||
td#name {
|
<body>
|
||||||
padding-left: 0;
|
|
||||||
}
|
<!--[if lte IE 9]>
|
||||||
</style>
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||||
</head>
|
<![endif]-->
|
||||||
<body class="max-w-screen-xl px-4 py-12 mx-auto space-y-8 sm:px-6 lg:px-8 bg-gray-800">
|
|
||||||
<section class="container mx-auto px-8 my-1 flex flex-wrap -m-4">
|
<main class="main-wrapper">
|
||||||
<div class="p-2 md:w-40">
|
<!-- header-area start -->
|
||||||
<a href="/" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
|
<header class="header-area">
|
||||||
<div>
|
<div class="container">
|
||||||
<p class=" text-xs font-medium ">All Regions</p>
|
<div class="header-item">
|
||||||
|
<a href="//serverlist.tf">Serverlist.tf</a>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 md:w-40">
|
</header>
|
||||||
<a href="/america" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
|
<!-- header-area end -->
|
||||||
<div>
|
|
||||||
<p class=" text-xs font-medium ">North America</p>
|
<!-- content-area start -->
|
||||||
</div>
|
<div class="content-area">
|
||||||
</a>
|
<div class="container">
|
||||||
</div>
|
<div class="content-item">
|
||||||
<div class="p-2 md:w-40">
|
<div class="content-item-inner">
|
||||||
<a href="/europe" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
|
<select onchange="location = this.value;">
|
||||||
<div>
|
<option>{{.Region}}</option>
|
||||||
<p class=" text-xs font-medium ">Europe</p>
|
<option value="/">All Regions</option>
|
||||||
</div>
|
<option value="/america">North America</option>
|
||||||
</a>
|
<option value="/europe">Europe</option>
|
||||||
</div>
|
<option value="/asia">Asia</option>
|
||||||
<div class="p-2 md:w-40">
|
<option value="/australia">Australia</option>
|
||||||
<a href="/australia" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
|
</select>
|
||||||
<div>
|
|
||||||
<p class=" text-xs font-medium ">Australia</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="p-2 md:w-40">
|
|
||||||
<a href="/asia" class="flex items-center p-4 bg-blue-200 rounded-lg shadow-xs cursor-pointer hover:bg-blue-500 hover:text-gray-100">
|
|
||||||
<div>
|
|
||||||
<p class=" text-xs font-medium ">Asia</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
{{block "content" . -}}{{- end}}
|
{{block "content" . -}}{{- end}}
|
||||||
</body>
|
|
||||||
<!-- Foooter -->
|
|
||||||
<section class="bg-white rounded-lg">
|
|
||||||
<div class="max-w-screen-xl px-4 py-12 mx-auto space-y-8 overflow-hidden sm:px-6 lg:px-8">
|
|
||||||
<nav class="flex flex-wrap justify-center -mx-5 -my-2">
|
|
||||||
<div class="px-5 py-2">
|
|
||||||
<a href="https://discord.gg/MfeXJkWg5m" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
|
||||||
Add server
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="px-5 py-2">
|
|
||||||
<a href="https://spenny.tf/discord" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="px-5 py-2">
|
|
||||||
<a href="https://spenny.tf" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
|
||||||
spenny.tf
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="px-5 py-2">
|
<!-- content-area end -->
|
||||||
<a href="https://www.teamfortress.tv/60348" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
|
||||||
teamfortress.tv
|
<!-- footer-area start -->
|
||||||
</a>
|
<footer class="footer-area">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-item">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Imprint</a></li>
|
||||||
|
<li><a href="#">Add Server</a></li>
|
||||||
|
<li><a href="#">Discord</a></li>
|
||||||
|
<li><a href="#">spenny.tf</a></li>
|
||||||
|
<li><a href="#">teamfortress.tv</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>© 2021 Serverlist.tf</p>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
<p class="mt-8 text-base leading-6 text-center text-gray-400">
|
|
||||||
© 2021 Serverlist.tf
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</footer>
|
||||||
|
<!-- footer-area end -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -7,71 +7,90 @@
|
||||||
{{ $gamemodesCount := .GamemodeCount}}
|
{{ $gamemodesCount := .GamemodeCount}}
|
||||||
{{ $servers := .Servers}}
|
{{ $servers := .Servers}}
|
||||||
{{ $flags := .Flags}}
|
{{ $flags := .Flags}}
|
||||||
<div class="container mx-auto px-4 sm:px-8">
|
{{range $gamemode := $gamemodes -}}
|
||||||
<div class="py-8">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-2xl font-semibold leading-tight text-white">{{.Region}}</h2>
|
|
||||||
</div>
|
|
||||||
{{range $gamemode := $gamemodes -}}
|
|
||||||
{{range $gamemodeCount := $gamemodesCount -}}
|
{{range $gamemodeCount := $gamemodesCount -}}
|
||||||
{{if eq $gamemode.ID $gamemodeCount.ID -}}
|
{{if eq $gamemode.ID $gamemodeCount.ID -}}
|
||||||
<div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
|
<div class="content-item-inner2 d-none d-md-block">
|
||||||
<div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
|
<div class="content-item-inner3">
|
||||||
<table class="min-w-full leading-normal">
|
<div class="content-item-inner4">
|
||||||
<thead>
|
<h2>{{$gamemode.Name}}</h2>
|
||||||
<tr>
|
</div>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
<div class="content-item-inner5">
|
||||||
|
<h2>Map</h2>
|
||||||
</th>
|
</div>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
<div class="content-item-inner6">
|
||||||
{{$gamemode.Name}}
|
<h2>Players</h2>
|
||||||
</th>
|
</div>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
</div>
|
||||||
Map
|
<ul>
|
||||||
</th>
|
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
||||||
Players
|
|
||||||
</th>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{{range $server := $servers -}}
|
{{range $server := $servers -}}
|
||||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||||
{{if ne $server.Map "Server didn't reply." -}}
|
{{if ne $server.Map "Server didn't reply." -}}
|
||||||
<tr id="content">
|
<li>
|
||||||
<td class="px-5 border-b border-gray-200 bg-white" id="flag">
|
<div class="text-truncate">
|
||||||
|
<a href="steam://connect/{{$server.ServerIP}}">
|
||||||
{{range $flag := $flags -}}
|
{{range $flag := $flags -}}
|
||||||
{{if eq $server.ServerIP $flag.ServerIP -}}
|
{{if eq $server.ServerIP $flag.ServerIP -}}
|
||||||
<img src="https://flagcdn.com/16x12/{{$flag.Flag}}.png" srcset="https://flagcdn.com/32x24/{{$flag.Flag}}.png 2x, https://flagcdn.com/48x36/{{$flag.Flag}}.png 3x" width="16" height="12">
|
<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
</td>
|
{{$server.Name}}</a>
|
||||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
|
</div>
|
||||||
<div class="flex items-center">
|
<div>
|
||||||
<div class="ml-3">
|
<p>{{$server.Map}}</a>
|
||||||
<a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>{{$server.Players}}/{{$server.MaxPlayers}}</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- for mobile -->
|
||||||
|
<div class="table-responsive">
|
||||||
|
<div class="content-item-inner2 d-md-none">
|
||||||
|
<div class="content-item-inner3">
|
||||||
|
<div class="content-item-inner4">
|
||||||
|
<h2>{{$gamemode.Name}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="content-item-inner5">
|
||||||
|
<h2>Map</h2>
|
||||||
|
</div>
|
||||||
|
<div class="content-item-inner6">
|
||||||
|
<h2>Players</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
{{range $server := $servers -}}
|
||||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
|
{{if ne $server.Map "Server didn't reply." -}}
|
||||||
</td>
|
<ul>
|
||||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
<li>
|
||||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
|
<div>
|
||||||
</td>
|
<a href="steam://connect/{{$server.ServerIP}}">
|
||||||
</tr>
|
{{range $flag := $flags -}}
|
||||||
|
{{if eq $server.ServerIP $flag.ServerIP -}}
|
||||||
|
<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{$server.Name}}</a>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="">{{$server.Map}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
|
{{- end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,10 @@ func NewHandler(store steamServer.Store) *Handler {
|
||||||
h.Use(middleware.Logger)
|
h.Use(middleware.Logger)
|
||||||
|
|
||||||
h.Get("/favicon.ico", faviconHandler)
|
h.Get("/favicon.ico", faviconHandler)
|
||||||
|
h.Get("/style.css", maincssHandler)
|
||||||
|
h.Get("/css/bootstrap.css", bootstrapHandler)
|
||||||
|
h.Get("/images/01.png", arrowHandler)
|
||||||
|
|
||||||
h.Get("/", h.Home())
|
h.Get("/", h.Home())
|
||||||
h.Get("/europe", h.Europe())
|
h.Get("/europe", h.Europe())
|
||||||
h.Get("/america", h.America())
|
h.Get("/america", h.America())
|
||||||
|
|
@ -37,6 +41,18 @@ func faviconHandler(w http.ResponseWriter, r *http.Request) {
|
||||||
http.ServeFile(w, r, "static/favicon.ico")
|
http.ServeFile(w, r, "static/favicon.ico")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func maincssHandler(w http.ResponseWriter, r *http.Request) {
|
||||||
|
http.ServeFile(w, r, "static/css/style.css")
|
||||||
|
}
|
||||||
|
|
||||||
|
func bootstrapHandler(w http.ResponseWriter, r *http.Request) {
|
||||||
|
http.ServeFile(w, r, "static/css/bootstrap.css")
|
||||||
|
}
|
||||||
|
|
||||||
|
func arrowHandler(w http.ResponseWriter, r *http.Request) {
|
||||||
|
http.ServeFile(w, r, "static/images/01.png")
|
||||||
|
}
|
||||||
|
|
||||||
func (h *Handler) Home() http.HandlerFunc {
|
func (h *Handler) Home() http.HandlerFunc {
|
||||||
type data struct {
|
type data struct {
|
||||||
Region string
|
Region string
|
||||||
|
|
|
||||||
Reference in a new issue