redesign the site
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
c36e6b1947
commit
5a72d919d0
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
|
|
@ -1,72 +1,91 @@
|
|||
{{define "title" -}}
|
||||
{{define "title"}}
|
||||
<title>Serverlist :: {{.Region}}</title>
|
||||
{{- end}}
|
||||
{{end}}
|
||||
|
||||
{{define "content" -}}
|
||||
{{define "content"}}
|
||||
{{ $gamemodes := .Gamemodes}}
|
||||
{{ $servers := .Servers}}
|
||||
{{ $flags := .Flags}}
|
||||
<div class="container mx-auto px-4 sm:px-8">
|
||||
<div class="py-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold leading-tight text-white">{{.Region}}</h2>
|
||||
{{range $gamemode := $gamemodes -}}
|
||||
<div class="content-item-inner2 d-none d-md-block">
|
||||
<div class="content-item-inner3">
|
||||
<div class="content-item-inner4">
|
||||
<h2>{{$gamemode.Name}}</h2>
|
||||
</div>
|
||||
{{range $gamemode := $gamemodes -}}
|
||||
<div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
|
||||
<div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
|
||||
<table class="min-w-full leading-normal">
|
||||
<thead>
|
||||
<tr>
|
||||
<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">
|
||||
|
||||
</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 -}}
|
||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||
{{if ne $server.Map "Server didn't reply." -}}
|
||||
<tr id="content">
|
||||
<td class="px-5 border-b border-gray-200 bg-white" id="flag">
|
||||
{{range $flag := $flags -}}
|
||||
{{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">
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="content-item-inner5">
|
||||
<h2>Map</h2>
|
||||
</div>
|
||||
<div class="content-item-inner6">
|
||||
<h2>Players</h2>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
{{range $server := $servers -}}
|
||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||
{{if ne $server.Map "Server didn't reply." -}}
|
||||
<li>
|
||||
<div class="text-truncate">
|
||||
<a href="steam://connect/{{$server.ServerIP}}">
|
||||
{{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}}
|
||||
{{$server.Name}}</a>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{$server.Map}}</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>
|
||||
{{range $server := $servers -}}
|
||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||
{{if ne $server.Map "Server didn't reply." -}}
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<a href="steam://connect/{{$server.ServerIP}}">
|
||||
{{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}}
|
||||
{{$server.Name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
{{- end}}
|
||||
<div>
|
||||
<a href="">{{$server.Map}}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{- end}}
|
||||
{{end}}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,103 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="bg-gray-800" lang="en"><head>
|
||||
{{block "title" . -}}{{- end}}
|
||||
<meta http-equiv="content-Type" content="text/html; utf-8" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta name="robots" content="INDEX,FOLLOW" />
|
||||
<meta http-equiv="content-Language" content="en" />
|
||||
<meta name="description" content="Serverlist for competitive Team Fortress 2 players" />
|
||||
<meta name="keywords" content="tf2, tf, serverlist, team, fortress, 2" />
|
||||
<meta name="page-type" content="Game" />
|
||||
<meta name="page-topic" content="Team Fortress 2" />
|
||||
<meta http-equiv="Reply-to" content="" />
|
||||
<meta name="expires" content="" />
|
||||
<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 defer data-domain="serverlist.tf" src="https://t.v0v.de/js/t.js"></script>
|
||||
<style>
|
||||
tr#content {
|
||||
line-height: 0;
|
||||
}
|
||||
td#flag {
|
||||
padding-right: 0;
|
||||
}
|
||||
td#name {
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<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">
|
||||
<div class="p-2 md:w-40">
|
||||
<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">
|
||||
<div>
|
||||
<p class=" text-xs font-medium ">All Regions</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-2 md:w-40">
|
||||
<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">
|
||||
<div>
|
||||
<p class=" text-xs font-medium ">North America</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-2 md:w-40">
|
||||
<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">
|
||||
<div>
|
||||
<p class=" text-xs font-medium ">Europe</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-2 md:w-40">
|
||||
<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">
|
||||
<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>
|
||||
{{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 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 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 class="px-5 py-2">
|
||||
<a href="https://www.teamfortress.tv/60348" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
teamfortress.tv
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<p class="mt-8 text-base leading-6 text-center text-gray-400">
|
||||
© 2021 Serverlist.tf
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<!-- Meta setup -->
|
||||
{{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 name="robots" content="INDEX,FOLLOW" />
|
||||
<meta http-equiv="content-Language" content="en" />
|
||||
<meta name="description" content="Serverlist for competitive Team Fortress 2 players" />
|
||||
<meta name="keywords" content="tf2, tf, serverlist, team, fortress, 2" />
|
||||
<meta name="page-type" content="Game" />
|
||||
<meta name="page-topic" content="Team Fortress 2" />
|
||||
<meta http-equiv="Reply-to" content="" />
|
||||
<meta name="expires" content="" />
|
||||
<meta name="revisit-after" content="2 days" />
|
||||
<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>
|
||||
|
||||
{{block "title" . -}}{{- end}}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
|
||||
<link rel="stylesheet" href="css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--[if lte IE 9]>
|
||||
<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>
|
||||
<![endif]-->
|
||||
|
||||
<main class="main-wrapper">
|
||||
<!-- header-area start -->
|
||||
<header class="header-area">
|
||||
<div class="container">
|
||||
<div class="header-item">
|
||||
<a href="//serverlist.tf">Serverlist.tf</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- header-area end -->
|
||||
|
||||
<!-- content-area start -->
|
||||
<div class="content-area">
|
||||
<div class="container">
|
||||
<div class="content-item">
|
||||
<div class="content-item-inner">
|
||||
<select onchange="location = this.value;">
|
||||
<option>{{.Region}}</option>
|
||||
<option value="/">All Regions</option>
|
||||
<option value="/america">North America</option>
|
||||
<option value="/europe">Europe</option>
|
||||
<option value="/asia">Asia</option>
|
||||
<option value="/australia">Australia</option>
|
||||
</select>
|
||||
</div>
|
||||
{{block "content" . -}}{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- content-area end -->
|
||||
|
||||
<!-- footer-area start -->
|
||||
<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>
|
||||
</footer>
|
||||
<!-- footer-area end -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,71 +7,90 @@
|
|||
{{ $gamemodesCount := .GamemodeCount}}
|
||||
{{ $servers := .Servers}}
|
||||
{{ $flags := .Flags}}
|
||||
<div class="container mx-auto px-4 sm:px-8">
|
||||
<div class="py-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold leading-tight text-white">{{.Region}}</h2>
|
||||
{{range $gamemode := $gamemodes -}}
|
||||
{{range $gamemodeCount := $gamemodesCount -}}
|
||||
{{if eq $gamemode.ID $gamemodeCount.ID -}}
|
||||
<div class="content-item-inner2 d-none d-md-block">
|
||||
<div class="content-item-inner3">
|
||||
<div class="content-item-inner4">
|
||||
<h2>{{$gamemode.Name}}</h2>
|
||||
</div>
|
||||
{{range $gamemode := $gamemodes -}}
|
||||
{{range $gamemodeCount := $gamemodesCount -}}
|
||||
{{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="inline-block min-w-full shadow rounded-lg overflow-hidden">
|
||||
<table class="min-w-full leading-normal">
|
||||
<thead>
|
||||
<tr>
|
||||
<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">
|
||||
|
||||
</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 -}}
|
||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||
{{if ne $server.Map "Server didn't reply." -}}
|
||||
<tr id="content">
|
||||
<td class="px-5 border-b border-gray-200 bg-white" id="flag">
|
||||
{{range $flag := $flags -}}
|
||||
{{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">
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="content-item-inner5">
|
||||
<h2>Map</h2>
|
||||
</div>
|
||||
<div class="content-item-inner6">
|
||||
<h2>Players</h2>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
{{range $server := $servers -}}
|
||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||
{{if ne $server.Map "Server didn't reply." -}}
|
||||
<li>
|
||||
<div class="text-truncate">
|
||||
<a href="steam://connect/{{$server.ServerIP}}">
|
||||
{{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}}
|
||||
{{$server.Name}}</a>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{$server.Map}}</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>
|
||||
{{range $server := $servers -}}
|
||||
{{if eq $gamemode.ID $server.GamemodeID -}}
|
||||
{{if ne $server.Map "Server didn't reply." -}}
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<a href="steam://connect/{{$server.ServerIP}}">
|
||||
{{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}}
|
||||
{{$server.Name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
<div>
|
||||
<a href="">{{$server.Map}}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{- end}}
|
||||
{{end}}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ func NewHandler(store steamServer.Store) *Handler {
|
|||
h.Use(middleware.Logger)
|
||||
|
||||
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("/europe", h.Europe())
|
||||
h.Get("/america", h.America())
|
||||
|
|
@ -37,6 +41,18 @@ func faviconHandler(w http.ResponseWriter, r *http.Request) {
|
|||
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 {
|
||||
type data struct {
|
||||
Region string
|
||||
|
|
|
|||
Loading…
Reference in New Issue