121 lines
5.6 KiB
HTML
121 lines
5.6 KiB
HTML
<html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://unpkg.com/tailwindcss@1.0.4/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
tr#content {
|
|
line-height: 0;
|
|
}
|
|
td#flag {
|
|
padding-right: 0;
|
|
}
|
|
td#name {
|
|
padding-left: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center" style="background: #edf2f7;">
|
|
<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="#" 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="#" 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>
|
|
|
|
{{ $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">{{.Region}}</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}}
|
|
<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">
|
|
{{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}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|