From 8d8226a5fa756bccddea9d73a9f90e7ae645cdbe Mon Sep 17 00:00:00 2001 From: Alex Vanin Date: Thu, 23 Dec 2021 18:11:13 +0300 Subject: [PATCH] Refresh website design - adaptive 4-wide grid for stream, - bootstrap elements - better wording --- web/fl.html | 140 ++++++++++++++++++++++-------------- web/fl_template_lang.html | 25 ++++--- web/fl_template_main.html | 136 +++++++++++++++++++++-------------- web/fl_template_stream.html | 4 +- web/style.css | 99 ------------------------- 5 files changed, 186 insertions(+), 218 deletions(-) delete mode 100644 web/style.css diff --git a/web/fl.html b/web/fl.html index e554367..0f1026b 100644 --- a/web/fl.html +++ b/web/fl.html @@ -3,64 +3,100 @@ FLeast - + - - -
-
-

Usage:

-

- Write the name of the game and select the language.
- The name must _exactly_ match the name of the game on twitch.tv - i.e. csgo must be "Counter-Strike: Global Offensive".

- IRL is back! Sort of.
- You can type IRL in game field and it will output streams from - Just Chatting, Travel & Outdoors, etc... -

-
- - - - - - - - - - - - -
- - - -
- - - - - -
-
-
+ + + +
+
+

Fleast — find new favourite small streamer

+

- Developed by Alex Vanin | twitter | - github
- Version: {_version_} + Search streams by specifying category from twitch.tv and the + language of the stream.
Streams will be sorted by ascending order.

- +

+ The category must be specified by exact name.
For example, + if you are looking for Counter-Strike, then you should write + Counter-Strike: Global Offensive. +

+

+ You can use IRL like in good old days.
The output will + combine Just Chatting, Travel & Outdoors, and other categories. +

+
+ + + + + + + + + + +
+ Category + + Language +
+ + + + + +
+
+
+
+
+ Developed by Alexey Vanin | twitter | + github
+ Version: {_version_} +

+
+
+
diff --git a/web/fl_template_lang.html b/web/fl_template_lang.html index 609810a..9142703 100644 --- a/web/fl_template_lang.html +++ b/web/fl_template_lang.html @@ -1,13 +1,12 @@ - - - - - - - - - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/web/fl_template_main.html b/web/fl_template_main.html index df7fd10..a72eb86 100644 --- a/web/fl_template_main.html +++ b/web/fl_template_main.html @@ -3,66 +3,98 @@ FLeast - + + + - -
-
-

Usage:

-

- Write the name of the game and select the language.
- The name must _exactly_ match the name of the game on twitch.tv - i.e. csgo must be "Counter-Strike: Global Offensive".

- You can type IRL in game field and it will output streams from - Just Chatting, Travel & Outdoors, etc... -

-
- - - - - - - - -
- - - -
- - - + + + + + + + - - - + + + +
+ Category + + Language +
+ + + - - -
+ +
- - -
-

Found {_stream_num_} streams:


-
+ +
+

Found {_stream_num_} streams:

+
{_stream_list_} +
+
+
+
+ Developed by Alexey Vanin | twitter | + github
+ Version: {_version_} +

-
- -
-

- Developed by Alex Vanin | twitter | - github
- Version: {_version_} -

-
+ + + diff --git a/web/fl_template_stream.html b/web/fl_template_stream.html index 6712182..dca3a08 100644 --- a/web/fl_template_stream.html +++ b/web/fl_template_stream.html @@ -1,5 +1,5 @@ -
-
+
+
{2}
{3} :{4} diff --git a/web/style.css b/web/style.css deleted file mode 100644 index 203b276..0000000 --- a/web/style.css +++ /dev/null @@ -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 -} -