commit 34c0b905e97250e27a4d461bc07965870853e691
Author: rizir01 <themurrayms@seznam.cz>
Date:   Wed Apr 15 12:40:44 2020 +0200

    Issue #7850 @10h
    
    Vytvoreni stranky kategorii podle navrhu rozlozeni dle umelecke specifikace. Stranka po jejimz nacteni zobrazi bubliny reprezentujici konkretni kategorie artefaktu. Kazda bublina ma tri velikosti, dle rozzareni do tri kategorii podle poctu artefaktu v konkretni kategorii. Bubliny jsou nahodne rozhazene po strance, pricemz by se zadne nemely krizit. Co se tyce fontu Avenir Black, je to momentalne reseno primem nainstalovanim fontu do PC a nactenim pres "font-family".

diff --git a/app/Http/Controllers/CategoriesController.php b/app/Http/Controllers/CategoriesController.php
new file mode 100644
index 0000000..463809c
--- /dev/null
+++ b/app/Http/Controllers/CategoriesController.php
@@ -0,0 +1,108 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\ArtefactCategory;
+use App\Category;
+use Illuminate\Support\Facades\Auth;
+use App\User;
+
+class CategoriesController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    public function calculateClusters($categoriesCount)
+    {
+        if(isset($categoriesCount))
+        {
+            $min = PHP_INT_MAX;
+            $max = PHP_INT_MIN;
+            foreach($categoriesCount as $category)
+            {
+                $c = count($category);
+                if($c < $min)
+                {
+                    $min = $c;
+                }
+
+                if($c > $max)
+                {
+                    $max = $c;
+                }
+            }
+            $center = $min + (($max - $min)/2);
+            return array($min, $center, $max);
+        }
+        else
+        {
+            return null;
+        }
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        if(isset(Auth::user()->id))
+        {
+            $userId = Auth::user()->id;
+
+            $categoryNames = Category::all();
+            $countCategory = count($categoryNames);
+            $categories = array();
+            for($i = 1; $i <= $countCategory;$i++)
+            {
+                array_push($categories, ArtefactCategory::where('category_id', $i)->get());
+            }
+            $clusters = $this->calculateClusters($categories);
+
+            $categorySizes = array();
+            if(isset($clusters))
+            {
+                foreach($categories as $category)
+                {
+                    $c = count($category);
+                    $type1 = abs($clusters['0'] - $c);
+                    $type2 = abs($clusters['1'] - $c);
+                    $type3 = abs($clusters['2'] - $c);
+
+                    if($type1 <= $type2 && $type1 <= $type3)
+                    {
+                        array_push($categorySizes, 1);
+                    }
+                    else if($type2 <= $type1 && $type2 <= $type3)
+                    {
+                        array_push($categorySizes, 2);
+                    }
+                    else
+                    {
+                        array_push($categorySizes, 3);
+                    }
+                }
+            }
+
+            $data = array(
+                'title' => 'Categories',
+                'user' => User::find($userId),
+                'count' => $countCategory,
+                'categories' => $categories,
+                'categorySizes' => $categorySizes,
+                'categoryNames' => $categoryNames
+            );
+            return view('categories.index') -> with($data);
+        }
+        else
+        {
+            $data = array(
+                'title' => 'Welcome to the MERLOT page',
+            );
+            return view('pages.index') -> with($data);
+        }
+    }
+}
diff --git a/public/images/Button_Arrow.png b/public/images/Button_Arrow.png
new file mode 100644
index 0000000..162dcc3
Binary files /dev/null and b/public/images/Button_Arrow.png differ
diff --git a/resources/images/Button_Arrow.png b/resources/images/Button_Arrow.png
new file mode 100644
index 0000000..162dcc3
Binary files /dev/null and b/resources/images/Button_Arrow.png differ
diff --git a/resources/images/Button_Arrow_Small.png b/resources/images/Button_Arrow_Small.png
new file mode 100644
index 0000000..0870281
Binary files /dev/null and b/resources/images/Button_Arrow_Small.png differ
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index c55b298..cda6f28 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -1 +1,168 @@
 // Ready for custom styling
+
+body
+{
+    background-color: $cusBlack;
+}
+
+.head-title.text-center h1
+{
+    color: $cusWhite;
+    font-family: Avenir;
+    font-size: 60pt;
+    font-weight: bold;
+    letter-spacing: 3px;
+}
+
+.bouton-image:before
+{
+    content: "";
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: text-top;
+    background-color: transparent;
+    background-position : center center;
+    background-repeat:no-repeat;
+}
+
+.bouton-image
+{
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.monBouton:before
+{
+    background-image : url(../images/Button_Arrow_Small.png);
+}
+
+.monBouton:hover
+{
+    background-color: transparent;
+    border-color: $cusBrown3;
+}
+
+.monBouton:focus
+{
+    background-color: transparent;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.monBouton:active
+{
+    background-color: transparent !important;
+    border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.content {
+    position: relative;
+}
+
+//Circle style button
+.btn-circle.rounded-circle.btn-sm
+{
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    font-size: 16px;
+    text-align: center;
+    background-color: $cusBlack;
+    border-color: $cusBrown3;
+    border-width: 5px;
+    color:$cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.btn-circle.rounded-circle.btn-sm:active
+{
+    background-color: $cusBrown2;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+    color:$cusBlack;
+}
+
+.btn-circle.rounded-circle.btn-dm
+{
+    position: absolute;
+    width: 240px;
+    height: 240px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    font-size: 16px;
+    text-align: center;
+    background-color: $cusBlack;
+    border-color: $cusBrown3;
+    color:$cusBrown3;
+    border-width: 5px;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.btn-circle.rounded-circle.btn-dm:active
+{
+    background-color: $cusBrown2;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+    color:$cusBlack;
+}
+
+.btn-circle.rounded-circle.btn-xl
+{
+    position: absolute;
+    width: 360px;
+    height: 360px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    font-size: 16px;
+    text-align: center;
+    background-color: $cusBlack;
+    border-color: $cusBrown3;
+    color:$cusBrown3;
+    border-width: 5px;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.btn-circle.rounded-circle.btn-xl:active
+{
+    background-color: $cusBrown2;
+    border-color: $cusBrown3;
+    outline: none !important;
+    box-shadow: none !important;
+    color:$cusBlack;
+}
+
+@media only screen and (max-width: 540px)
+{
+    .head-title.text-center h1
+    {
+        font-size: 45pt;
+    }
+
+    .btn-circle.rounded-circle.btn-sm
+    {
+        width: 90px;
+        height: 90px;
+    }
+
+    .btn-circle.rounded-circle.btn-dm
+    {
+        width: 130px;
+        height: 130px;
+    }
+
+    .btn-circle.rounded-circle.btn-xl
+    {
+        width: 180px;
+        height: 180px;
+    }
+}
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 0407ab5..9d4b848 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -17,3 +17,11 @@ $yellow: #ffed4a;
 $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
+
+// Custom colors
+$cusWhite: #ffffff;
+$cusBrown1: #ddd1b9;
+$cusBrown2: #efdab3;
+$cusBrown3: #ead4b0;
+$cusBlack: #272727;
+
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 3193ffa..3575c01 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -6,3 +6,5 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+@import 'custom';
diff --git a/resources/views/categories/index.blade.php b/resources/views/categories/index.blade.php
new file mode 100644
index 0000000..dbf2adb
--- /dev/null
+++ b/resources/views/categories/index.blade.php
@@ -0,0 +1,153 @@
+@extends('layouts.art')
+
+@section('title', 'Categories')
+
+@section('content')
+    @if(isset($user))
+        {{--<p><?php dd($categories); ?></p>--}}
+        <div>
+            <button type="button" class="btn btn-primary bouton-image monBouton"></button>
+        </div>
+        <div class="head-title text-center">
+            <h1>choose a few topics</h1>
+        </div>
+        <div class="content" id="canvas">
+            {{--@for($k = 1; $k <= count($categories);$k++)--}}
+            @for($k = 1; $k <= 10;$k++)
+                @if($categorySizes[$k-1] == 1)
+                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @elseif($categorySizes[$k-1] == 2)
+                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @else
+                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @endif
+            @endfor
+        </div>
+        <script>
+            function randomCategoryPos(name, countButtons)
+            {
+                var DISTANCE = 360;
+                var MAX_DISTANCE = 3.5 * DISTANCE;
+                var sWidth = screen.width;
+                var positionsX = [];
+                var positionsY = [];
+                var types = [];
+                var offset = 50;
+
+                if(sWidth <= 540)
+                {
+                    sWidth -= 100;
+                    DISTANCE = 190;
+                    MAX_DISTANCE = 3.5 * DISTANCE;
+                    offset = 25;
+                }
+                else
+                {
+                    if(sWidth > 720)
+                    {
+                        sWidth = 720;
+                    }
+                }
+                console.log(DISTANCE+ "dis\n");
+                console.log(MAX_DISTANCE+ "max_dis\n");
+                for(var i = 0; i < countButtons; i++)
+                {
+                    var size = document.getElementById(name + (i+1)).className;
+                    var type;
+                    if(size.includes("btn-sm"))
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 45;
+                        }
+                        else
+                        {
+                            type = 60;
+                        }
+                    }
+                    else if(size.includes("btn-dm"))
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 65;
+                        }
+                        else
+                        {
+                            type = 120;
+                        }
+                    }
+                    else
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 90;
+                        }
+                        else
+                        {
+                            type = 180;
+                        }
+                    }
+                    console.log(type + "<br>");
+                    //document.write(type + "<br>");
+
+                    var done = true;
+                    var topS;
+                    var rightS;
+                    while(done)
+                    {
+                        if(i == 0)
+                        {
+                            topS = offset + type;
+                        }
+                        else
+                        {
+                            topS = (Math.floor(Math.random() * 2048) + offset) + type;
+                        }
+                        rightS = (Math.floor(Math.random() * sWidth) + 1) + type;
+                        console.log(topS + " " + rightS + "nn<br>");
+
+                        //Check distancing from other circles
+                        var okay = true;
+                        for(var k = 0; k < positionsX.length; k++)
+                        {
+                            var powX = Math.abs(positionsX[k] - topS);
+                            var powY = Math.abs(positionsY[k] - rightS);
+                            var tmp = Math.sqrt((powX*powX) + (powY*powY));
+                            console.log(tmp+ "tmp<br>");
+                            if(tmp < DISTANCE)
+                            {
+                                okay = false;
+                                break;
+                            }
+                        }
+
+                        if(okay)
+                        {
+                            done = false;
+                        }
+                    }
+
+                    //document.write("<br>");
+                    positionsX.push(topS);
+                    positionsY.push(rightS);
+                    types.push(type);
+                }
+
+                for(var i = 1; i <= countButtons; i++)
+                {
+                    document.getElementById(name + i).style.top = (positionsX[i-1] - types[i-1]) + "px";
+                    document.getElementById(name + i).style.right = (positionsY[i-1] - types[i-1]) + "px";
+                }
+            }
+
+            var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
+            randomCategoryPos("cat-", countButtons);
+        </script>
+    @else
+        <ul class="list-group">
+            <li class="list-group-item">
+                <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+            </li>
+        </ul>
+    @endif
+@endsection
