Refresh website design
- adaptive 4-wide grid for stream, - bootstrap elements - better wording
This commit is contained in:
parent
538f50847e
commit
8d8226a5fa
5 changed files with 186 additions and 218 deletions
140
web/fl.html
140
web/fl.html
|
|
@ -3,64 +3,100 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>FLeast</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="header">
|
||||
<strong>
|
||||
<h1>FLeast - your least favourite streamers here</h1>
|
||||
</strong>
|
||||
</section>
|
||||
<section id="pageContent">
|
||||
<article>
|
||||
<h2>Usage:</h2>
|
||||
<p>
|
||||
Write the name of the game and select the language.<br>
|
||||
The name must _exactly_ match the name of the game on twitch.tv
|
||||
i.e. csgo must be "Counter-Strike: Global Offensive".<br><br>
|
||||
<b>IRL is back!</b> Sort of.<br>
|
||||
You can type <b>IRL</b> in game field and it will output streams from
|
||||
<i>Just Chatting</i>, <i>Travel & Outdoors</i>, etc...
|
||||
</p>
|
||||
<form method="get" action="./">
|
||||
<table class="Input">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label>Game </label>
|
||||
</td>
|
||||
<td>
|
||||
<label>Language </label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input name="game" type="text" maxlength="255" value=""/>
|
||||
</td>
|
||||
<td>
|
||||
<select class="element select medium" name="lang">
|
||||
{_opt_langs_}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="submit" value="Search" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</article>
|
||||
<style>
|
||||
.container-sm {{
|
||||
max-width: 1450px;
|
||||
}}
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
body {{
|
||||
background-color: #333333;
|
||||
}}
|
||||
|
||||
footer {{
|
||||
background-color: #AEC6CF;
|
||||
}}
|
||||
|
||||
.strname {{
|
||||
font-weight: bold;
|
||||
}}
|
||||
|
||||
.struser {{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #0f0
|
||||
}}
|
||||
|
||||
.strviews {{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #f00
|
||||
}}
|
||||
|
||||
.grid {{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 340px));
|
||||
justify-content: space-around;
|
||||
row-gap: 30px;
|
||||
}}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="container-sm text-white">
|
||||
<br>
|
||||
<h1>Fleast — find new favourite small streamer</h1>
|
||||
<hr>
|
||||
<p>
|
||||
Developed by Alex Vanin | <a href="https://twitter.com/AlexVanin" target="_blank">twitter</a> |
|
||||
<a href="https://github.com/AlexVanin/fleast" target="_blank">github</a><br>
|
||||
Version: {_version_}
|
||||
Search streams by specifying category from twitch.tv and the
|
||||
language of the stream.<br>Streams will be sorted by <b>ascending</b> order.
|
||||
</p>
|
||||
</footer>
|
||||
<p>
|
||||
The category must be specified by <b>exact name</b>.<br>For example,
|
||||
if you are looking for <i>Counter-Strike</i>, then you should write
|
||||
<i>Counter-Strike: Global Offensive</i>.
|
||||
</p>
|
||||
<p>
|
||||
You can use <b>IRL</b> like in good old days.<br>The output will
|
||||
combine <i>Just Chatting</i>, <i>Travel & Outdoors</i>, and other categories.
|
||||
</p>
|
||||
<form method="get" action="./">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Category
|
||||
</td>
|
||||
<td>
|
||||
Language
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input name="game" type="text" class="form-control-sm" maxlength="255" value="" placeholder="Specify category"/>
|
||||
</td>
|
||||
<td>
|
||||
<select name="lang" class="form-control-sm">
|
||||
{_opt_langs_}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="submit" value="Search" class="btn btn-primary btn-sm"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<hr>
|
||||
<footer>
|
||||
<div class="text-end text-black p-2">
|
||||
Developed by Alexey Vanin | <a href="https://twitter.com/AlexVanin" target="_blank">twitter</a> |
|
||||
<a href="https://github.com/AlexVanin/fleast" target="_blank">github</a><br>
|
||||
Version: {_version_}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<option value="ru" {}>russian</option>
|
||||
<option value="en" {}>english</option>
|
||||
<option value="de" {}>german</option>
|
||||
<option value="zh-tw" {}>chinese (TW)</option>
|
||||
<option value="fi" {}>finnish</option>
|
||||
<option value="fr" {}>french</option>
|
||||
<option value="it" {}>italian</option>
|
||||
<option value="ja" {}>japanese</option>
|
||||
<option value="ko" {}>korean</option>
|
||||
<option value="no" {}>norwegian</option>
|
||||
<option value="pl" {}>polish</option>
|
||||
<option value="es" {}>spanish</option>
|
||||
<option value="sv" {}>swedish</option>
|
||||
<option value="ru" {}>🇷🇺Russian</option>
|
||||
<option value="en" {}>🇬🇧English </option>
|
||||
<option value="de" {}>🇩🇪German </option>
|
||||
<option value="es" {}>🇪🇸Spanish</option>
|
||||
<option value="fr" {}>🇫🇷French</option>
|
||||
<option value="pl" {}>🇵🇱Polish</option>
|
||||
<option value="ja" {}>🇯🇵Japanese</option>
|
||||
<option value="zh-tw" {}>🇨🇳Chinese</option>
|
||||
<option value="ko" {}>🇰🇷Korean</option>
|
||||
<option value="fi" {}>🇫🇮Finnish</option>
|
||||
<option value="no" {}>🇳🇴Norwegian</option>
|
||||
<option value="sv" {}>🇸🇪Swedish</option>
|
||||
|
|
@ -3,66 +3,98 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>FLeast</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/png">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
.container-sm {{
|
||||
max-width: 1450px;
|
||||
}}
|
||||
|
||||
body {{
|
||||
background-color: #333333;
|
||||
}}
|
||||
|
||||
footer {{
|
||||
background-color: #AEC6CF;
|
||||
}}
|
||||
|
||||
.strname {{
|
||||
font-weight: bold;
|
||||
}}
|
||||
|
||||
.struser {{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #0f0
|
||||
}}
|
||||
|
||||
.strviews {{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #f00
|
||||
}}
|
||||
|
||||
.grid {{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 340px));
|
||||
justify-content: space-around;
|
||||
row-gap: 30px;
|
||||
}}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<section id="header">
|
||||
<strong><h1>FLeast - your least favourite streamers here</h1></strong>
|
||||
</section>
|
||||
<section id="pageContent">
|
||||
<article>
|
||||
<h2>Usage:</h2>
|
||||
<p>
|
||||
Write the name of the game and select the language.<br>
|
||||
The name must _exactly_ match the name of the game on twitch.tv
|
||||
i.e. csgo must be "Counter-Strike: Global Offensive".<br><br>
|
||||
You can type <b>IRL</b> in game field and it will output streams from
|
||||
<i>Just Chatting</i>, <i>Travel & Outdoors</i>, etc...
|
||||
</p>
|
||||
<form method="get" action="./">
|
||||
<table class="Input">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label>Game </label>
|
||||
</td>
|
||||
<td>
|
||||
<label>Language </label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input name="game" type="text" maxlength="255" value=""/>
|
||||
</td>
|
||||
<td>
|
||||
<select class="element select medium" name="lang">
|
||||
<div class="container-sm text-white">
|
||||
<br>
|
||||
<h1>Fleast — find new favourite small streamer</h1>
|
||||
<hr>
|
||||
<p>
|
||||
The category must be specified by <b>exact name</b>.<br>Search
|
||||
<b>IRL</b> to find streams from <i>Just Chatting</i>,
|
||||
<i>Travel & Outdoors</i>, and other categories.
|
||||
</p>
|
||||
<form method="get" action="./">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Category
|
||||
</td>
|
||||
<td>
|
||||
Language
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input name="game" type="text" class="form-control-sm" maxlength="255" value="{_game_name_}" placeholder="Specify category"/>
|
||||
</td>
|
||||
<td>
|
||||
<select name="lang" class="form-control-sm">
|
||||
{_opt_langs_}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="submit" value="Search" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="submit" value="Search" class="btn btn-primary btn-sm"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Found {_stream_num_} streams: </h2><br>
|
||||
<div class="container">
|
||||
</form>
|
||||
<hr>
|
||||
<h4> Found {_stream_num_} streams:</h4>
|
||||
<div class="grid">
|
||||
{_stream_list_}
|
||||
</div>
|
||||
<hr>
|
||||
<footer>
|
||||
<div class="text-end text-black p-2">
|
||||
Developed by Alexey Vanin | <a href="https://twitter.com/AlexVanin" target="_blank">twitter</a> |
|
||||
<a href="https://github.com/AlexVanin/fleast" target="_blank">github</a><br>
|
||||
Version: {_version_}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
Developed by Alex Vanin | <a href="https://twitter.com/AlexVanin" target="_blank">twitter</a> |
|
||||
<a href="https://github.com/AlexVanin/fleast" target="_blank">github</a><br>
|
||||
Version: {_version_}
|
||||
</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="inner">
|
||||
<a href="{0}" target="_blank"><img src={1}></a><br>
|
||||
<div>
|
||||
<a href="{0}" target="_blank"><img src={1}></a>
|
||||
<div class="strname">{2}</div>
|
||||
<span class="struser">{3}</span>
|
||||
<span class="strviews"> :{4}</span>
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
body{background: #333333; line-height:1; font-family: arial;}
|
||||
h1{font-size: 25px;}h2{font-size: 21px;}h3{font-size: 18px;}h4{font-size: 16px;}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
|
||||
|
||||
#pageContent {
|
||||
margin:0;padding:0;border:0;outline:0
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding:10px;
|
||||
|
||||
}
|
||||
|
||||
main {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
aside {
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
article {
|
||||
border-bottom: 2px dotted #999;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
article h2 {
|
||||
font-weight: normal;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
article p {
|
||||
|
||||
}
|
||||
main section {
|
||||
|
||||
}
|
||||
footer {
|
||||
background: #AEC6CF;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
clear: both;
|
||||
text-align: right;
|
||||
}
|
||||
footer p {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
aside > div {
|
||||
margin: 10px auto;
|
||||
background: #AEC6CF;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
body > section {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
padding: 30px 0px;
|
||||
border-bottom: 1px solid #999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
table.Input td, table.Input th {
|
||||
border: 0px solid #AAAAAA;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 0px 0px 10px
|
||||
}
|
||||
|
||||
.inner {
|
||||
overflow: auto;
|
||||
word-wrap: break-word;
|
||||
background-color: transparent;
|
||||
width: 330px;
|
||||
padding: 0px 0px 30px 0px
|
||||
}
|
||||
|
||||
.strname {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.struser {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #0f0
|
||||
}
|
||||
.strviews{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #f00
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue