Importation des concours

.env.example

@@ -0,0 +1,59 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=laravel
+DB_USERNAME=root
+DB_PASSWORD=
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=mailpit
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_HOST=
+PUSHER_PORT=443
+PUSHER_SCHEME=https
+PUSHER_APP_CLUSTER=mt1
+
+VITE_APP_NAME="${APP_NAME}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_HOST="${PUSHER_HOST}"
+VITE_PUSHER_PORT="${PUSHER_PORT}"
+VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

app/Http/Controllers/AccountController.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class AccountController extends Controller
+{
+    //
+}

app/Http/Controllers/BotController.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class BotController extends Controller
+{
+    //
+}

app/Http/Controllers/ContestController.php

@@ -0,0 +1,644 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Symfony\Component\BrowserKit\HttpBrowser;
+use Symfony\Component\HttpClient\HttpClient;
+
+class ContestController extends Controller
+{
+    public function twitterlist()
+    {
+        $client = new HttpBrowser(HttpClient::create(['verify_peer' => false, 'verify_host' => false, 'timeout' => '60']));
+
+        // Création des informations d'authentification
+        $username = 'autokdo';
+        $password = '@Gaudin95';
+        $credentials = base64_encode("$username:$password");
+
+        // Ajout des informations d'authentification à l'en-tête de la demande HTTP
+        $client->setServerParameter('HTTP_AUTHORIZATION', 'Basic ' . $credentials);
+        $client->setServerParameter('HTTP_USER_AGENT', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36');
+        $crawler = $client->request('GET', 'https://nitter.lucabased.xyz/i/lists/1686126753205387264');
+
+        $i = 1;
+
+        while ($i < 10){
+            $results = $crawler->filterXPath('//div[@class="timeline-item "]')->each(function ($node) {
+                $id = ($node->filterXPath('//*[@class="tweet-link"]'))->attr('href');
+                $created_at = ($node->filterXPath('//span[@class="tweet-date"]/a'))->attr('title');
+                $text = ($node->filterXPath('//*[@class="tweet-content media-body"]'))->text();
+                $screen = ($node->filterXPath('//a[@class="username"]'))->text();
+                $picture = ($node->filterXPath('//a[@class="still-image"]'))->attr('href');
+                $nbretweet = ($node->filterXPath('//*[@class="tweet-stat"][2]'))->text();
+                $nbretweet = str_replace(',', '', $nbretweet);
+                $nblike = ($node->filterXPath('//*[@class="tweet-stat"][4]'))->text();
+                $nblike = str_replace(',', '', $nblike);
+                $nbreply = ($node->filterXPath('//*[@class="tweet-stat"][1]'))->text();
+                $nbreply = str_replace(',', '', $nbreply);
+
+                //Modifications
+                $picture = urldecode($picture);
+                $picture = str_replace('/pic/orig/', 'https://pbs.twimg.com/', $picture);
+                $screen = str_replace('@', '', $screen);
+                $id = str_replace('/'.$screen.'/status/', '', $id);
+                $id = str_replace('#m', '', $id);
+
+                $contest = Contest::where('tweetid', $id)->first();
+
+                if(empty($contest) && $nbretweet > 100) {
+                    $regex_detect_rts =
+                        [
+                            "/\bRT\b/",
+                            "/RETWEET/i",
+                            "/REPUBL/i",
+                            "/REPOST/i",
+                        ];
+                    foreach ($regex_detect_rts as $regex_detect_rt) {
+                        //if (strstr($string, $url)) { // mine version
+                        preg_match($regex_detect_rt, $text, $invites);
+                        if (isset($invites[0])) {
+                            $rt = true;
+                        }
+                    }
+
+                    //On verifie que si RT
+                    if (isset($rt)) {
+                        $inputs = array();
+                        //On recherche la date de fin du concours
+                        $date = $this->getDate($text);
+                        if ($date != null) {
+                            $fin = $date;
+                        } else {
+                            $fin = $this->getTwitterDate($created_at);
+                        }
+                        //On recherche la date de fin du concours
+                        if ($fin >= Carbon::now()->format('Y-m-d')) {
+
+                            $categorie = $this->getCategorie($text);
+
+                            $organizer = $this->getOrganizer($screen);
+
+                            $concours = Contest::create([
+                                'category_id' => $categorie,
+                                'organizer_id' => $organizer,
+                                'description' => $text,
+                                'url' => 'https://twitter.com/'.$screen.'/status/'.$id,
+                                'tweetid' => $id,
+                                'fin' => $fin,
+                                'nbretweet' => $nbretweet,
+                                'nblike' => $nblike,
+                                'nbreply' => $nbreply,
+                            ]);
+
+                            //On recherche un tag
+                            $regex_detect_tags =
+                                [
+                                    "/INVIT/i",
+                                    "/IDENTIFI/i",
+                                    "/TAG/i",
+                                    "/HASHTAG/i",
+                                    "/RT AVEC/i",
+                                    "/MENTIONN/i",
+                                    "/COMMENT/i",
+                                    "/RETWEET AVEC/i",
+                                    "/TWEET AVEC/i",
+                                ];
+
+                            foreach ($regex_detect_tags as $regex_detect_tag) {
+                                //if (strstr($string, $url)) { // mine version
+                                preg_match($regex_detect_tag, $text, $invites);
+                                if (isset($invites[0])) {
+                                    $tweet = true;
+                                }
+                            }
+
+                            //On verifie s'il demande un tag ou un hashtag
+                            if (isset($tweet)) {
+
+                                $tag = 'Je veux gagner ce concours @ActuFoot_ @Mediavenir';
+
+                                preg_match_all("/#[a-zA-Z0-9]+/", $text, $hashtag);
+
+                                if (isset($hashtag[0])) {
+                                    $hashtags = implode(" ", $hashtag[0]);
+                                    $tag = $tag . ' ' . $hashtags;
+                                }
+
+                                $tag = urlencode($tag);
+
+                                //On tweet avec un le tag
+                                Action::create([
+                                    'contest_id' => $concours->id,
+                                    'type' => 'reply',
+                                    'value' => $tag,
+                                ]);
+
+                                //On follow les autres
+                                preg_match_all("/\s@([\w_-]+)/", $text, $matches);
+                                $mentions = $matches[1];
+                                $mentions[] = $screen;
+                                $mentions = array_unique($mentions);
+                                foreach ($mentions as $mention) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'follow',
+                                        'value' => $mention,
+                                    ]);
+                                }
+
+                                //On like si besoin
+                                preg_match("/LIKE/i", $text, $like);
+                                if (isset($like[0])) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'like',
+                                        'value' => $id,
+                                    ]);
+                                }
+                            } //Sinon on retweet tout simplement
+                            else {
+                                //On follow les autres
+                                preg_match_all("/\s@([\w_-]+)/", $text, $matches);
+                                $mentions = $matches[1];
+                                $mentions[] = $screen;
+                                $mentions = array_unique($mentions);
+                                foreach ($mentions as $mention) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'follow',
+                                        'value' => $mention,
+                                    ]);
+                                }
+
+                                //On like si besoin
+                                preg_match("/LIKE/i", $text, $like);
+                                if (isset($like[0])) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'like',
+                                        'value' => $id,
+                                    ]);
+                                }
+
+                            }
+                        }
+                    }
+
+                }
+
+            });
+            $nextPageButton = $crawler->filterXPath('//div[@class="show-more"]/a')->link();
+            $url = $nextPageButton->getUri();
+            $crawler = $client->request('GET', $url);
+            $i++;
+        }
+
+        $reponse = $client->getResponse();
+        var_dump($reponse);
+
+        Cache::flush();
+
+        echo 'Fait !';
+
+    }
+
+    public function searchcontest()
+    {
+        $search = [
+            "#concours",
+            "concours like",
+            "concours rt",
+            "concours follow",
+            "#JeuConcours",
+            "JeuConcours",
+            "giveaway",
+            "concours pour gagner",
+            "gagner rt",
+            "Gagnez rt + follow",
+            "offre follow gagnant",
+            "RT & follow",
+            "rt follow",
+            //"rt suivre t.a.s",
+            "concours tas le",
+            "concours résultats le rt",
+            "concours rt like",
+            "concours rt fav",
+            "RT tweet Follow",
+            "concours rt follow",
+            "rt follow tas",
+            "rt follow tirage au sort",
+            //"rt follow t.a.s",
+            "rt follow gagner",
+            "rt follow commente",
+            "rt suivre concours",
+            "rt suivez concours",
+            "rt suivre tirage au sort",
+            "rt suivre tas",
+            "concours remporter",
+            "remporter rt",
+            //"concours t.a.s le",
+            "tirage au sort concours",
+            "concours",
+            "concours résultat le rt"
+        ];
+
+        $k = array_rand($search);
+        $phrase = $search[$k];
+
+        $date = Carbon::now()->subDays(2)->format('Y-m-d');
+
+        $url = 'https://nitter-autokdo.fly.dev/search?f=tweets&q='.urlencode('min_replies:500 lang:fr -filter:replies '.$phrase).'&since='.$date;
+
+        $client = new HttpBrowser(HttpClient::create(['verify_peer' => false, 'verify_host' => false, 'timeout' => '60']));
+
+        // Création des informations d'authentification
+        $username = 'autokdo';
+        $password = '@Gaudin95';
+        $credentials = base64_encode("$username:$password");
+
+        // Ajout des informations d'authentification à l'en-tête de la demande HTTP
+        $client->setServerParameter('HTTP_AUTHORIZATION', 'Basic ' . $credentials);
+        $client->setServerParameter('HTTP_USER_AGENT', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36');
+        $crawler = $client->request('GET', $url);
+
+        $reponse = $client->getResponse();
+        var_dump($reponse);
+
+        try{
+            $results = $crawler->filterXPath('//div[@class="timeline-item "]')->each(function ($node) {
+                $id = ($node->filterXPath('//*[@class="tweet-link"]'))->attr('href');
+                $created_at = ($node->filterXPath('//span[@class="tweet-date"]/a'))->attr('title');
+                $text = ($node->filterXPath('//*[@class="tweet-content media-body"]'))->text();
+                $screen = ($node->filterXPath('//a[@class="username"]'))->text();
+                $nbretweet = ($node->filterXPath('//*[@class="tweet-stat"][2]'))->text();
+                $nbretweet = str_replace(',', '', $nbretweet);
+                $nblike = ($node->filterXPath('//*[@class="tweet-stat"][4]'))->text();
+                $nblike = str_replace(',', '', $nblike);
+                $nbreply = ($node->filterXPath('//*[@class="tweet-stat"][1]'))->text();
+                $nbreply = str_replace(',', '', $nbreply);
+
+                //Modifications
+                $screen = str_replace('@', '', $screen);
+                $id = str_replace('/'.$screen.'/status/', '', $id);
+                $id = str_replace('#m', '', $id);
+
+                $contest = Contest::where('tweetid', $id)->first();
+                $fake = Fake::where('screen_name', $screen)->first();
+
+                if(!$contest && !$fake && $nbretweet > 100) {
+                    $regex_detect_rts =
+                        [
+                            "/RT/",
+                            "/RETWEET/i",
+                        ];
+                    foreach ($regex_detect_rts as $regex_detect_rt) {
+                        //if (strstr($string, $url)) { // mine version
+                        preg_match($regex_detect_rt, $text, $invites);
+                        if (isset($invites[0])) {
+                            $rt = true;
+                        }
+                    }
+
+                    //On verifie que si RT
+                    if (isset($rt)) {
+                        $inputs = array();
+                        //On recherche la date de fin du concours
+                        $date = $this->getDate($text);
+                        if ($date != null) {
+                            $fin = $date;
+                        } else {
+                            $fin = $this->getTwitterDate($created_at);
+                        }
+                        //On recherche la date de fin du concours
+                        if ($fin >= Carbon::now()->format('Y-m-d')) {
+
+                            $categorie = $this->getCategorie($text);
+
+                            $organizer = $this->getOrganizer($screen);
+
+                            $concours = Contest::create([
+                                'category_id' => $categorie,
+                                'organizer_id' => $organizer,
+                                'description' => $text,
+                                'url' => 'https://twitter.com/'.$screen.'/status/'.$id,
+                                'tweetid' => $id,
+                                'fin' => $fin,
+                                'nbretweet' => $nbretweet,
+                                'nblike' => $nblike,
+                                'nbreply' => $nbreply,
+                            ]);
+
+                            //On recherche un tag
+                            $regex_detect_tags =
+                                [
+                                    "/INVIT/i",
+                                    "/IDENTIFI/i",
+                                    "/TAG/i",
+                                    "/HASHTAG/i",
+                                    "/RT AVEC/i",
+                                    "/MENTIONN/i",
+                                    "/COMMENT/i",
+                                    "/RETWEET AVEC/i",
+                                    "/TWEET AVEC/i",
+                                ];
+
+                            foreach ($regex_detect_tags as $regex_detect_tag) {
+                                //if (strstr($string, $url)) { // mine version
+                                preg_match($regex_detect_tag, $text, $invites);
+                                if (isset($invites[0])) {
+                                    $tweet = true;
+                                }
+                            }
+
+                            //On verifie s'il demande un tag ou un hashtag
+                            if (isset($tweet)) {
+
+                                $tag = 'Je veux gagner ce concours @ActuFoot_ @Mediavenir';
+
+                                preg_match_all("/#[a-zA-Z0-9]+/", $text, $hashtag);
+
+                                if (isset($hashtag[0])) {
+                                    $hashtags = implode(" ", $hashtag[0]);
+                                    $tag = $tag . ' ' . $hashtags;
+                                }
+
+                                $tag = urlencode($tag);
+
+                                //On tweet avec un le tag
+                                Action::create([
+                                    'contest_id' => $concours->id,
+                                    'type' => 'reply',
+                                    'value' => $tag,
+                                ]);
+
+                                //On follow les autres
+                                preg_match_all("/\s@([\w_-]+)/", $text, $matches);
+                                $mentions = $matches[1];
+                                $mentions[] = $screen;
+                                $mentions = array_unique($mentions);
+                                foreach ($mentions as $mention) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'follow',
+                                        'value' => $mention,
+                                    ]);
+                                }
+
+                                //On like si besoin
+                                preg_match("/LIKE/i", $text, $like);
+                                if (isset($like[0])) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'like',
+                                        'value' => $id,
+                                    ]);
+                                }
+                            } //Sinon on retweet tout simplement
+                            else {
+                                //On follow les autres
+                                preg_match_all("/\s@([\w_-]+)/", $text, $matches);
+                                $mentions = $matches[1];
+                                $mentions[] = $screen;
+                                $mentions = array_unique($mentions);
+                                foreach ($mentions as $mention) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'follow',
+                                        'value' => $mention,
+                                    ]);
+                                }
+
+                                //On like si besoin
+                                preg_match("/LIKE/i", $text, $like);
+                                if (isset($like[0])) {
+                                    Action::create([
+                                        'contest_id' => $concours->id,
+                                        'type' => 'like',
+                                        'value' => $id,
+                                    ]);
+                                }
+
+                            }
+                        }
+                    }
+
+                }
+
+            });
+
+        } catch (\Exception  $e) {
+
+        }
+
+        Cache::flush();
+
+        echo 'Fait !';
+
+    }
+
+    public function getOrganizer($screen)
+    {
+        $organiser = Organizer::where('screen_name', $screen)->first();
+
+        if ($organiser){
+            return $organiser->id;
+        }else
+        {
+            $client = new HttpBrowser(HttpClient::create(['verify_peer' => false, 'verify_host' => false, 'timeout' => '60']));
+            // Création des informations d'authentification
+            $username = 'autokdo';
+            $password = '@Gaudin95';
+            $credentials = base64_encode("$username:$password");
+
+            // Ajout des informations d'authentification à l'en-tête de la demande HTTP
+            $client->setServerParameter('HTTP_AUTHORIZATION', 'Basic ' . $credentials);
+            $client->setServerParameter('HTTP_USER_AGENT', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36');
+            $crawler = $client->request('GET', 'https://nitter-autokdo.fly.dev/'.$screen);
+            try{
+                $name = $crawler->filterXPath('//*[@class="profile-card-fullname"]')->text();
+                $description = $crawler->filterXPath('//*[@class="profile-bio"]')->text();
+                $profileUrl = $crawler->getUri();
+                $parsedUrl = parse_url($profileUrl);
+                $baseTwitterUrl = $parsedUrl['scheme'] . '://' . $parsedUrl['host'];
+
+
+                $image = $crawler->filterXPath('//meta[@property="og:image"]')->attr('content');
+                $url = str_replace("http://nitter-autokdo.fly.dev/pic/", "", $image);
+                $url = urldecode($url);
+                $url = 'https://'.$url;
+                $response = Http::get($url);
+                $contents = $response->body();
+
+                // Utilisation de getimagesize pour obtenir les informations sur l'image
+                $imageInfo = getimagesizefromstring($contents);
+
+                if ($imageInfo === false) {
+                    $filename = 'icon-96x96.png';
+                }
+
+                $format = image_type_to_extension($imageInfo[2], false);
+                $filename = uniqid() . '.' . $format;
+
+                // Stocker l'image dans le répertoire 'ads' du stockage
+                Storage::put('/public/logo/'.$filename, $contents);
+
+                $organiser = Organizer::create([
+                    'name' => $name,
+                    'screen_name' => $screen,
+                    'description' => $description,
+                    'logo' => $filename,
+                    'url' => 'https://twitter.com/'.$screen,
+                ]);
+
+                return $organiser->id;
+
+            } catch (\Exception $e) {
+                dd($e);
+            }
+        }
+
+
+
+    }
+
+    private function getCategorie($data)
+    {
+        $client = new HttpBrowser(HttpClient::create(['verify_peer' => false, 'verify_host' => false, 'timeout' => '60']));
+        $client->request('GET', 'https://api.uclassify.com/v1/twittercontests/categories/classify/?readKey=c7ivTcoN2ycU&text='.$data);
+
+        $json = $client->getResponse()->getContent();
+
+        $array = json_decode($json,true);
+
+        $laravelArray = collect($array);
+
+        $laravelArray = $laravelArray->sortDesc();
+
+        $value = $laravelArray->first();
+
+        if($value < '0.5'){
+            $categorie = '20';
+        }
+        else{
+
+            $cat = $laravelArray->keys()->first();
+
+            if($cat == 'argent'){
+                $categorie = '1';
+            }elseif($cat == 'beaute'){
+                $categorie = '2';
+            }elseif($cat == 'console'){
+                $categorie = '3';
+            }elseif($cat == 'cuisine'){
+                $categorie = '4';
+            }elseif($cat == 'dvd'){
+                $categorie = '5';
+            }elseif($cat == 'enfant'){
+                $categorie = '6';
+            }elseif($cat == 'goodies'){
+                $categorie = '7';
+            }elseif($cat == 'invitation'){
+                $categorie = '8';
+            }elseif($cat == 'livre'){
+                $categorie = '9';
+            }elseif($cat == 'maison'){
+                $categorie = '10';
+            }elseif($cat == 'mode'){
+                $categorie = '11';
+            }elseif($cat == 'pc'){
+                $categorie = '12';
+            }elseif($cat == 'sport'){
+                $categorie = '13';
+            }elseif($cat == 'telephone'){
+                $categorie = '14';
+            }elseif($cat == 'voiture'){
+                $categorie = '15';
+            }elseif($cat == 'voyage'){
+                $categorie = '16';
+            }else{
+                $categorie = '20';
+            }
+
+        }
+
+        return $categorie;
+
+    }
+
+    private function getDate($string) {
+        // Pattern pour détecter les dates au format JJ/MM ou JJ.MM
+        $pattern_jjmm = '/\b(\d{1,2})(\/|\.)\d{1,2}\b/';
+
+        // Pattern pour détecter les dates du style "1 août" (ou autre mois en français)
+        $mois_fr = array(
+            'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+            'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
+        );
+        $pattern_jj_mois_fr = '/\b(\d{1,2}) (' . implode('|', $mois_fr) . ')\b/i';
+
+        // Stocker les correspondances dans un tableau
+        $correspondances = array();
+
+        // Chercher les dates au format JJ/MM ou JJ.MM
+        if (preg_match_all($pattern_jjmm, $string, $matches)) {
+            $correspondances = array_merge($correspondances, $matches[0]);
+        }
+
+        // Chercher les dates du style "1 août" (ou autre mois en français)
+        if (preg_match_all($pattern_jj_mois_fr, $string, $matches)) {
+            // Convertir le mois en format numérique (1 pour janvier, 2 pour février, etc.)
+            $mois_numerique = array_flip($mois_fr);
+            foreach ($matches[2] as $index => $mois) {
+                $matches[0][$index] = $matches[1][$index] . '/' . str_pad($mois_numerique[strtolower($mois)] + 1, 2, '0', STR_PAD_LEFT);
+            }
+            $correspondances = array_merge($correspondances, $matches[0]);
+        }
+
+        // Vérifier s'il y a des dates détectées
+        if (empty($correspondances)) {
+            // Afficher une erreur si aucune date n'est détectée
+            return "";
+        }
+
+        // Récupérer la dernière date détectée
+        $derniere_date = end($correspondances);
+
+        // Convertir la dernière date au format "Y-m-d" (année-mois-jour)
+        if (strpos($derniere_date, '/') !== false) {
+            // Format JJ/MM
+            list($jour, $mois) = explode('/', $derniere_date);
+            $annee = date('Y');
+        } else {
+            // Format JJ.MM
+            list($jour, $mois) = explode('.', $derniere_date);
+            $annee = date('Y');
+        }
+
+        $date_convertie = date('Y-m-d', strtotime("$annee-$mois-$jour"));
+
+        return $date_convertie;
+    }
+
+    private function getTwitterDate($text){
+        // Utilisez une expression régulière pour extraire la date
+        $pattern = '/(\w{3} \d{1,2}, \d{4})/';
+        preg_match($pattern, $text, $matches);
+
+        if (count($matches) >= 2) {
+            // Format de date extrait
+            $dateString = $matches[1];
+
+            // Analyse de la date
+            $date = Carbon::createFromFormat('M d, Y', $dateString);
+
+            // Obtenez la date au format Y-m-d
+            $formattedDate = $date->addDays(1)->format('Y-m-d');
+
+            return $formattedDate;
+        } else {
+            return Carbon::now()->addDays(1)->format('Y-m-d');
+        }
+    }
+}

app/Http/Controllers/HomeController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    public function index()
+    {
+
+        return view('home');
+    }
+}

composer.json

@@ -6,12 +6,16 @@
     "license": "MIT",
     "require": {
         "php": "^8.1",
+        "artesaos/seotools": "^1.3",
         "guzzlehttp/guzzle": "^7.2",
         "kamona/fortify-bootstrap": "^1.0",
         "laravel/framework": "^10.10",
         "laravel/sanctum": "^3.3",
         "laravel/tinker": "^2.8",
+        "revolution/laravel-google-sheets": "^6.4",
         "silviolleite/laravelpwa": "^2.0",
+        "symfony/browser-kit": "^6.4",
+        "symfony/http-client": "^6.4",
         "yoeunes/toastr": "^2.3"
     },
     "require-dev": {

public/assets/css/inc/splide/splide.min.css

@@ -0,0 +1 @@
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{visibility:hidden}.splide,.splide__slide{position:relative;outline:none}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}.splide__arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:2em;height:2em;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;padding:0;opacity:.7;background:#ccc}.splide__arrow svg{width:1.2em;height:1.2em}.splide__arrow:hover{cursor:pointer;opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{position:absolute;z-index:1;bottom:.5em;left:50%;transform:translateX(-50%);padding:0}.splide__pagination__page{display:inline-block;width:8px;height:8px;background:#ccc;border-radius:50%;margin:3px;padding:0;transition:transform .2s linear;border:none;opacity:.7}.splide__pagination__page.is-active{transform:scale(1.4);background:#fff}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{width:0;height:3px;background:#ccc}.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent}.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border-color:#000}.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{right:1em;left:auto}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{top:auto;bottom:1em}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination{display:flex;flex-direction:column;bottom:50%;left:auto;right:.5em;transform:translateY(50%)}

public/assets/sass/_body.scss

@@ -0,0 +1,50 @@
+body {
+  font-family: $fontFamily;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  letter-spacing: $letterSpacing;
+  color: $colorText;
+  background: $colorBackground;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// close all the scroll bars
+::-webkit-scrollbar {
+  width: 0;
+}
+
+// Selection color
+::selection {
+  background: rgba($colorPrimary, 0.3);
+}
+
+// default link options
+a {
+  transition: none;
+  color: $colorPrimary;
+  outline: 0 !important;
+  text-decoration: none;
+  &:hover,
+  &:active,
+  &:focus {
+    outline: 0 !important;
+    color: $colorPrimary;
+    text-decoration: none;
+  }
+}
+button {
+  outline: 0 !important;
+  &:hover,
+  &:active,
+  &:focus {
+    outline: 0 !important;
+  }
+}
+
+// Safearea
+$safeBottom: env(safe-area-inset-bottom);
+$safeTop: env(safe-area-inset-top);

public/assets/sass/_rtl.scss

@@ -0,0 +1,730 @@
+html[dir="rtl"],
+body.rtl-mode {
+    direction: rtl;
+
+    .ms-0 {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .ms-05 {
+        margin-left: 0 !important;
+        margin-right: 5px !important;
+    }
+    .ms-1 {
+        margin-left: 0 !important;
+        margin-right: 8px !important;
+    }
+    .ms-2 {
+        margin-left: 0 !important;
+        margin-right: 16px !important;
+    }
+    .ms-3 {
+        margin-left: 0 !important;
+        margin-right: 24px !important;
+    }
+    .ms-4 {
+        margin-left: 0 !important;
+        margin-right: 32px !important;
+    }
+    .ms-5 {
+        margin-left: 0 !important;
+        margin-right: 40px !important;
+    }
+
+    .me-0 {
+        margin-right: 0 !important;
+        margin-left: 0px !important;
+    }
+    .me-05 {
+        margin-right: 0 !important;
+        margin-left: 5px !important;
+    }
+    .me-1 {
+        margin-right: 0 !important;
+        margin-left: 8px !important;
+    }
+    .me-2 {
+        margin-right: 0 !important;
+        margin-left: 16px !important;
+    }
+    .me-3 {
+        margin-right: 0 !important;
+        margin-left: 24px !important;
+    }
+    .me-4 {
+        margin-right: 0 !important;
+        margin-left: 32px !important;
+    }
+    .me-5 {
+        margin-right: 0 !important;
+        margin-left: 40px !important;
+    }
+
+    .ps-0 {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+    }
+    .ps-05 {
+        padding-left: 0px !important;
+        padding-right: 5px !important;
+    }
+    .ps-1 {
+        padding-left: 0px !important;
+        padding-right: 8px !important;
+    }
+    .ps-2 {
+        padding-left: 0px !important;
+        padding-right: 16px !important;
+    }
+    .ps-3 {
+        padding-left: 0px !important;
+        padding-right: 24px !important;
+    }
+    .ps-4 {
+        padding-left: 0px !important;
+        padding-right: 32px !important;
+    }
+    .ps-5 {
+        padding-left: 0px !important;
+        padding-right: 40px !important;
+    }
+
+    .pe-0 {
+        padding-right: 0px !important;
+        padding-left: 0px !important;
+    }
+    .pe-05 {
+        padding-right: 0px !important;
+        padding-left: 5px !important;
+    }
+    .pe-1 {
+        padding-right: 0px !important;
+        padding-left: 8px !important;
+    }
+    .pe-2 {
+        padding-right: 0px !important;
+        padding-left: 16px !important;
+    }
+    .pe-3 {
+        padding-right: 0px !important;
+        padding-left: 24px !important;
+    }
+    .pe-4 {
+        padding-right: 0px !important;
+        padding-left: 32px !important;
+    }
+    .pe-5 {
+        padding-right: 0px !important;
+        padding-left: 40px !important;
+    }
+
+    .appHeader {
+        .left {
+            right: 10px;
+            left: auto;
+        }
+        .right {
+            right: auto;
+            left: 10px;
+        }
+    }
+
+    .link-listview,
+    .image-listview {
+        > li {
+            a {
+                padding: 11px 16px 11px 36px;
+                &:after {
+                    right: auto;
+                    left: 16px;
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        &.text {
+            > li:after {
+                left: 0;
+                right: 16px;
+            }
+        }
+        &.media {
+            > li {
+                .imageWrapper {
+                    margin-right: 0;
+                    margin-left: 16px;
+                }
+            }
+        }
+    }
+    .image-listview {
+        > li {
+            &:after {
+                left: 0;
+                right: 68px;
+            }
+            .item {
+                .image,
+                .icon-box {
+                    margin-right: 0;
+                    margin-left: 16px;
+                }
+            }
+        }
+    }
+
+    .accordion {
+        .accordion-header {
+            .btn,
+            .accordion-button {
+                padding: 8px 16px 8px 50px;
+                &:after {
+                    left: 10px;
+                    right: auto;
+                }
+                &:before {
+                    left: 0;
+                    right: 16px;
+                }
+                i.bi,
+                i.icon,
+                ion-icon {
+                    margin-right: 0;
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+
+    .action-button-list {
+        > li {
+            .btn {
+                .icon,
+                ion-icon {
+                    margin-right: -5px;
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+
+    .alert {
+        &.alert-dismissible {
+            padding-right: 14px;
+            padding-left: 56px;
+        }
+        .btn-close {
+            left: 0;
+            right: auto;
+        }
+        .img-wrap,
+        .icon-wrap {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+
+    .btn-group {
+        .btn:last-child {
+            border-radius: $borderRadius 0 0 $borderRadius !important;
+        }
+        input[type="radio"],
+        input[type="checkbox"] {
+            &:first-child {
+                & + .btn {
+                    border-radius: 0 $borderRadius $borderRadius 0;
+                }
+            }
+        }
+    }
+
+    .carousel-single,
+    .carousel-multiple {
+        .splide__slide {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+            padding-right: 0 !important;
+            padding-left: 16px !important;
+        }
+    }
+    .carousel-small {
+        .splide__slide {
+            margin-right: 8px !important;
+            margin-left: 0 !important;
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+        }
+    }
+
+    .form-check {
+        .form-check-label {
+            padding: 0 32px 0 0;
+            &:after,
+            &:before {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+    .input-list {
+        .form-check {
+            &:after {
+                margin-left: auto;
+                margin-right: 54px;
+            }
+            .form-check-label {
+                padding: 6px 54px 6px 16px;
+                &:after,
+                &:before {
+                    right: 16px;
+                    left: auto;
+                }
+            }
+        }
+    }
+
+    .chip {
+        &.chip-media {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+        .chip-icon,
+        img {
+            left: auto;
+            right: 0;
+        }
+        .chip-delete {
+            margin-left: 0;
+            margin-right: -10px;
+        }
+    }
+
+    .dialogbox {
+        .modal-dialog {
+            .modal-content {
+                .btn-inline {
+                    .btn {
+                        border-radius: 0 !important;
+                        margin-left: 0;
+                        margin-right: 1px;
+                        &:last-child {
+                            margin-right: 1px;
+                        }
+                        &:first-child {
+                            margin-right: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .btn {
+        i.icon,
+        ion-icon {
+            margin-right: 0;
+            margin-left: 7px;
+        }
+        .spinner-border,
+        .spinner-grow {
+            margin-right: 5px;
+            margin-left: 5px;
+        }
+    }
+    .dropdown-toggle {
+        &:after {
+            margin-left: 0;
+            margin-right: 7px;
+        }
+    }
+    .dropdown,
+    .dropup {
+        .dropdown-menu {
+            .icon,
+            ion-icon {
+                margin-right: 0;
+                margin-left: 6px;
+            }
+        }
+    }
+    .form-group {
+        .form-label {
+            text-align: start;
+        }
+        .form-control {
+            padding-right: 0;
+            padding-left: 40px;
+        }
+        select.form-control {
+            padding-left: 0;
+        }
+        .clear-input {
+            left: -10px;
+        }
+        &.boxed {
+            .clear-input {
+                left: 0;
+                right: auto;
+            }
+            .form-control {
+                padding-right: 16px;
+            }
+        }
+        &.basic {
+            .clear-input {
+                left: -10px;
+                right: auto;
+            }
+        }
+    }
+    .message-item {
+        direction: ltr;
+    }
+
+    .notification-dialog.android-style {
+        .notification-header {
+            .imaged {
+                margin-right: 0;
+                margin-left: 8px;
+            }
+            span {
+                margin-left: 0;
+                margin-right: 6px;
+                &:before {
+                    margin-right: 0;
+                    margin-left: 6px;
+                }
+            }
+        }
+        .notification-content {
+            .in {
+                padding-right: 0;
+                padding-left: 16px;
+            }
+        }
+        .notification-footer {
+            .notification-button {
+                border-left: 1px solid $colorLine;
+                border-right: 0 !important;
+                &:last-child {
+                    border-left: 0;
+                }
+                .icon,
+                ion-icon {
+                    margin-right: 0;
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
+
+    .notification-dialog.ios-style {
+        .notification-header {
+            .imaged {
+                margin-right: 0;
+                margin-left: 8px;
+            }
+            span {
+                margin-left: 6px;
+                margin-right: 0;
+            }
+        }
+        .notification-content {
+            .in {
+                padding-right: 0;
+                padding-left: 16px;
+            }
+        }
+        .notification-footer {
+            .notification-button {
+                border-right: 0;
+                border-left: 1px solid rgba(255, 255, 255, 0.1);
+                &:last-child {
+                    border-left: 0;
+                }
+                .icon,
+                ion-icon {
+                    margin-right: 0;
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
+
+    .searchbox {
+        .input-icon {
+            left: auto;
+            right: 0;
+        }
+        .form-control {
+            padding: 0 36px 0 16px;
+        }
+    }
+
+    .nav-tabs.capsuled,
+    .nav-tabs.lined {
+        padding: 0;
+        margin: 0;
+    }
+
+    .timeline {
+        &:before {
+            left: auto;
+            right: 0;
+        }
+        .content {
+            padding-left: 0;
+            padding-right: 20px;
+            .text {
+                padding-right: 0;
+                padding-left: 30px;
+            }
+        }
+        .dot {
+            left: auto;
+            right: -5px;
+        }
+        &.timed {
+            padding-left: 0;
+            padding-right: 80px;
+            &:before {
+                right: 80px;
+            }
+            .time {
+                left: auto;
+                right: -80px;
+                text-align: left;
+                padding-right: 4px;
+            }
+        }
+    }
+
+    .toast-box {
+        .in {
+            padding-right: 0;
+            padding-left: 20px;
+            .icon,
+            ion-icon {
+                margin-right: 0;
+                margin-left: 8px;
+            }
+        }
+        &.toast-center {
+            .in {
+                padding-left: 0;
+            }
+        }
+    }
+
+    .form-switch {
+        .form-check-label {
+            &:before {
+                left: 4px;
+                top: 3px;
+                right: auto;
+            }
+        }
+    }
+
+    .panelbox-left,
+    .panelbox-right {
+        .link-listview {
+            > li {
+                a {
+                    padding: 10px 16px 10px 36px;
+                }
+            }
+        }
+        .image-listview {
+            > li {
+                a.item {
+                    padding-right: 16px;
+                    padding-left: 36px;
+                }
+            }
+        }
+    }
+
+    .text-end {
+        text-align: left !important;
+    }
+    .text-start {
+        text-align: right !important;
+    }
+
+    #sidebarPanel {
+        .profileBox {
+            left: auto;
+            right: 0;
+            &:before{
+                left: auto;
+                right: 0;
+            }
+            .image-wrapper {
+                margin-right: 0;
+                margin-left: 16px;
+            }
+            .in {
+                padding-right: 0;
+                padding-left: 25px;
+            }
+            .close-sidebar-button {
+                right: auto;
+                left: 10px;
+            }
+        }
+    }
+
+    .image-listview .multi-level,
+    .multi-level {
+        > ul {
+            > li {
+                a,
+                .item {
+                    padding-left: 36px !important;
+                }
+            }
+        }
+    }
+
+    .comment-block {
+        .item {
+            .avatar {
+                margin-right: 0;
+                margin-left: 14px;
+            }
+            .comment-header {
+                .title {
+                    padding-right: 0;
+                    padding-left: 10px;
+                }
+            }
+            .comment-footer {
+                .comment-button {
+                    margin-right: 0;
+                    margin-left: 14px;
+                    i.bi,
+                    i.icon,
+                    ion-icon {
+                        margin-left: 5px;
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .stepper {
+        .stepper-button {
+            border-radius: 0;
+        }
+    }
+
+    @mixin stepperOutlineColorRTL($color) {
+        .stepper-button {
+            &:first-child {
+                border-right: 2px solid $color;
+                border-left: 0;
+                border-radius: 0 $borderRadius $borderRadius 0;
+            }
+            &:last-child {
+                border-left: 2px solid $color;
+                border-right: 0;
+                border-radius: $borderRadius 0 0 $borderRadius;
+            }
+        }
+    }
+
+    .stepper-outline-primary {
+        @include stepperOutlineColorRTL($colorPrimary);
+    }
+    .stepper-outline-secondary {
+        @include stepperOutlineColorRTL($colorSecondary);
+    }
+    .stepper-outline-danger {
+        @include stepperOutlineColorRTL($colorDanger);
+    }
+    .stepper-outline-success {
+        @include stepperOutlineColorRTL($colorSuccess);
+    }
+    .stepper-outline-warning {
+        @include stepperOutlineColorRTL($colorWarning);
+    }
+    .stepper-outline-info {
+        @include stepperOutlineColorRTL($colorInfo);
+    }
+    .stepper-outline-dark {
+        @include stepperOutlineColorRTL(#333);
+    }
+
+    #search {
+        .searchbox {
+            .close {
+                left: 8px;
+                right: auto !important;
+            }
+        }
+    }
+    .profile-head {
+        .avatar {
+            margin-left: 16px;
+            margin-right: 0;
+        }
+    }
+    .profile-stats {
+        padding-right: 16px !important;
+    }
+    .rate-block {
+        i.bi,
+        ion-icon,
+        i.icon {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+
+    .cart-item {
+        .in {
+            .text {
+                margin-left: 0;
+                margin-right: 16px;
+            }
+        }
+    }
+
+    .invoice {
+        .invoice-person {
+            .invoice-to,
+            .i {
+                padding-left: 12px;
+                padding-right: 0;
+            }
+            .invoice-from {
+                padding-right: 12px;
+                padding-left: 0;
+            }
+        }
+    }
+
+
+    .story-block {
+        .splide__slide {
+            padding-right: 0 !important;
+            margin-right: 0 !important;
+            padding-left: 26px !important;
+            margin-left: -10px !important;
+        }
+    }
+
+    .form-group.boxed,
+    .form-group.basic {
+        .form-control.form-select {
+            background-position: left center !important;
+        }
+    }
+    .form-group.boxed {
+        .form-control.form-select {
+            background-position: left 12px center !important;
+        }
+    }
+
+}

public/assets/sass/_theme-settings.scss

@@ -0,0 +1,55 @@
+//--------------------------------------------------
+// ------ C O L O R S ------------------------------
+//--------------------------------------------------
+// Theme Colors
+$colorPrimary:         #1E74FD;
+$colorSecondary:       #6C7C94;
+$colorSuccess:         #34C759;
+$colorDanger:          #EC4433;
+$colorWarning:         #FE9500;
+$colorInfo:            #592BCA;
+// Background
+$colorBackground:      #F9F9F9;
+// Line Colors
+$colorLine:            #E1E1E1;
+// Text Colors
+$colorHeading:         #141515;
+$colorText:            #4F5050;
+$colorLight:           #A1A1A2;
+
+// Dark Mode Colors
+$darkModeBackground:        #0c1624;
+$darkModeContentBackground: #0F1C2F;
+$darkModeColorHeading:      #FFFFFF;
+$darkModeColorText:         #8195a6;
+$darkModeColorLight:        #586d7f;
+$darkModeColorLine:         #1B283B;
+
+//--------------------------------------------------
+// ------ FONT ------------------------------
+//--------------------------------------------------
+// Google font
+@import url('https://fonts.googleapis.com/css?family=Inter:400,500,700&display=swap');
+
+// Font Family
+$fontFamily:             'Inter', sans-serif;
+// Define font weight
+$regular :               400; // font regular
+$medium :                500; // font medium (if font does not support medium, define the semibold)
+$bold :                  700; // font bold or black
+// Typography
+$lineHeight:             1.55rem;
+$letterSpacing:          -0.015rem;
+// Sizes
+$fontSizeHeadingXLarge:  34px;
+$fontSizeHeadingLarge:   24px;
+$fontSizeHeading:        17px;
+$fontSize:               15px;
+$fontSizeSub:            13px;
+$fontSizeCaption:        11px;
+
+//--------------------------------------------------
+// ------ OTHERS -----------------------------------
+//--------------------------------------------------
+$borderRadius:           6px;
+$boxShadow :             0 3px 6px 0 rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.08);

public/assets/sass/_ui-framework.scss

@@ -0,0 +1,49 @@
+@import 'framework/grid';
+@import 'framework/typography';
+@import 'framework/icon';
+@import 'framework/image';
+@import 'framework/loader';
+@import 'framework/badge';
+@import 'framework/listview';
+@import 'framework/card';
+@import 'framework/button';
+@import 'framework/accordion';
+@import 'framework/actionsheet';
+@import 'framework/dialog';
+@import 'framework/modal';
+@import 'framework/offcanvas';
+@import 'framework/tooltip';
+@import 'framework/dropdown';
+@import 'framework/color-class';
+@import 'framework/alert';
+@import 'framework/table';
+@import 'framework/inputs';
+@import 'framework/tabs';
+@import 'framework/checkbox-radio-toggle';
+@import 'framework/messages';
+@import 'framework/progressbar';
+@import 'framework/chips';
+@import 'framework/search';
+@import 'framework/carousel';
+@import 'framework/login';
+@import 'framework/timeline';
+@import 'framework/form-wizard';
+@import 'framework/adbox';
+@import 'framework/os-detection';
+@import 'framework/fab-button';
+@import 'framework/notification';
+@import 'framework/toast';
+@import 'framework/divider';
+@import 'framework/comment';
+@import 'framework/pagination';
+@import 'framework/error-page';
+@import 'framework/online-detection';
+@import 'framework/add-to-home';
+@import 'framework/go-to-top';
+@import 'framework/form-validation';
+@import 'framework/blog';
+@import 'framework/profile';
+@import 'framework/stepper';
+@import 'framework/e-commerce';
+@import 'framework/invoice';
+@import 'framework/stories';

public/assets/sass/framework/_accordion.scss

@@ -0,0 +1,119 @@
+@function svg-bg-color($color) {
+  @return "%23" + str-slice("#{$color}", 2, -1);
+}
+
+.accordion {
+  border-top: 1px solid $colorLine;
+  border-bottom: 1px solid $colorLine;
+  background: #fff;
+  &.accordion-flush {
+    background: transparent;
+  }
+  .accordion-collapse {
+    border: 0;
+  }
+  .accordion-item {
+    border: 0;
+  }
+  .accordion-body {
+    padding: 8px 16px 20px 16px;
+  }
+  .accordion-content {
+    padding: 0;
+  }
+  .accordion-header {
+    position: relative;
+    .btn,
+    .accordion-button {
+      box-shadow: none !important;
+      justify-content: flex-start !important;
+      border-radius: 0 !important;
+      width: 100%;
+      text-align: left !important;
+      font-weight: $regular;
+      background: transparent !important;
+      font-size: $fontSize;
+      padding: 8px 50px 8px 16px;
+      border: 0 !important;
+      min-height: 50px;
+      color: $colorHeading;
+      &:active {
+        background: rgba($colorLine, 0.3) !important;
+      }
+      &:after {
+        background: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='#{svg-bg-color($colorLight)}' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
+          no-repeat center center !important;
+        content: "";
+        width: 20px;
+        height: 20px;
+        font-weight: 700;
+        position: absolute;
+        right: 10px;
+        color: $colorLight;
+        line-height: 1em;
+        transition: 0s all;
+        height: 18px;
+        top: 50%;
+        opacity: 0.5;
+        margin-top: -9px;
+        transform: rotate(-90deg);
+      }
+      &:before {
+        content: "";
+        display: block;
+        height: 1px;
+        background: transparent;
+        position: absolute;
+        left: 16px;
+        bottom: 1px;
+        right: 0;
+      }
+      &.collapsed {
+        &:after {
+          transform: rotate(90deg);
+        }
+        &:before {
+          background: $colorLine;
+        }
+      }
+      i.bi,
+      i.icon,
+      ion-icon {
+        width: 24px;
+        font-size: 24px;
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+  .accordion-item:first-child {
+    border-radius: $borderRadius $borderRadius 0 0;
+  }
+  .accordion-item:last-child {
+    border-radius: 0 0 $borderRadius $borderRadius;
+    .accordion-header .accordion-button:before {
+      display: none;
+    }
+  }
+}
+
+.inset {
+  .accordion {
+    border-radius: $borderRadius;
+    border: 1px solid $colorLine;
+    .accordion-item {
+      &:first-child {
+        .btn {
+          border-radius: $borderRadius $borderRadius 0 0 !important;
+        }
+      }
+      &:last-child {
+        .btn {
+          border-radius: 0 0 $borderRadius $borderRadius !important;
+        }
+      }
+    }
+  }
+}

public/assets/sass/framework/_actionsheet.scss

@@ -0,0 +1,133 @@
+.offcanvas.action-sheet {
+    border: 0;
+    height: auto;
+    z-index: 9999;
+    .offcanvas-body {
+        padding: 0;
+        .action-sheet-content{
+            padding: 20px 16px;
+            max-height: 460px;
+            overflow: auto;
+        }
+    }
+    .offcanvas-header {
+        padding: 2px 20px;
+        display: block;
+        min-height: auto;
+        box-shadow: none;
+        border-bottom: 1px solid $colorLine;
+        .offcanvas-title {
+            padding: 0;
+            margin: 0;
+            text-align: center;
+            display: block;
+            font-size: $fontSizeSub;
+            padding: 6px 0;
+            color: $colorHeading;
+            font-weight: $medium;
+        }
+        .close-button{
+            font-size: 20px;
+            color: $colorLight;
+            position: absolute;
+            right: 0;
+            top: 2px;
+            width: 48px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &:hover,
+            &:active{
+                opacity: .7;
+            }
+        }
+    }
+}
+.offcanvas.action-sheet.inset {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    bottom: 16px;
+    border-radius: 16px;
+    padding-bottom: 0;
+    margin-bottom: $safeBottom;
+    .action-button-list {
+        > li:last-child {
+            .btn {
+                border-radius: 0 0 16px 16px !important;
+            }
+        }
+    }
+}
+
+.action-button-list {
+    padding: 0;
+    margin: 0;
+    > li {
+        display: block;
+        .btn {
+            padding: 0;
+            display: flex;
+            width: 100%;
+            min-height: 50px;
+            font-size: $fontSize;
+            color: $colorHeading;
+            line-height: 1.1em;
+            justify-content: space-between;
+            font-weight: $regular;
+            border-radius: 0 !important;
+            padding: 10px 16px;
+            &:active,
+            &.active {
+                background: rgba($colorLine, 0.3);
+            }
+            &.text-primary {
+                color: $colorPrimary !important;
+            }
+            &.text-secondary {
+                color: $colorSecondary !important;
+            }
+            &.text-danger {
+                color: $colorDanger !important;
+            }
+            &.text-success {
+                color: $colorSuccess !important;
+            }
+            &.text-warning {
+                color: $colorWarning !important;
+            }
+            &.text-info {
+                color: $colorInfo !important;
+            }
+            &.text-light {
+                color: #fff !important;
+            }
+            &.text-dark {
+                color: $colorHeading !important;
+            }
+            > span {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+            }
+            i.bi,
+            i.icon,
+            ion-icon {
+                width: 24px !important;
+                height: 24px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 10px;
+                margin-left: -5px;
+                font-size: 24px;
+                line-height: 1em;
+            }
+        }
+        &.action-divider {
+            height: 1px;
+            background: $colorLine;
+        }
+    }
+}

public/assets/sass/framework/_adbox.scss

@@ -0,0 +1,42 @@
+.adbox{
+    text-align: center;
+    &.fixed{
+        position: fixed;
+        bottom: 56px;
+        left: 50%;
+        margin-left: -150px;
+        width: 300px;
+        z-index: 100;
+        padding-bottom: $safeBottom;
+        .closebutton{
+            width: 24px;
+            height: 24px;
+            font-size: 22px;
+            background: rgba(0,0,0,.4);
+            color: rgba(255,255,255,.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+    &.hide{
+        &.fixed{
+            bottom: -100%;
+        }
+    }
+}
+.adbox-300-50{
+    img{
+        width: 300px;
+        height: 50px;
+    }
+}
+.adbox-300-250{
+    img{
+        width: 300px;
+        height: 250px;
+    }
+}

public/assets/sass/framework/_add-to-home.scss

@@ -0,0 +1,119 @@
+.ios-add-to-home {
+  .action-sheet-content {
+    position: relative;
+    font-size: $fontSizeSub;
+    color: $colorHeading;
+    line-height: 1.5em;
+    i.bi,
+    i.icon,
+    ion-icon {
+      font-size: 22px;
+      margin-bottom: -4px;
+    }
+  }
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-top: 10px solid #fff;
+    position: absolute;
+    bottom: -7px;
+    z-index: 10;
+    left: 50%;
+    margin-left: -16px;
+  }
+}
+
+.android-add-to-home{
+  bottom: auto !important;
+  padding-top: 0;
+  margin-top: $safeTop;
+  top: 16px;
+  left: 6px !important;
+  right: 6px !important;
+  z-index: 99999;
+  border-radius: 6px !important;
+  .action-sheet-content {
+    font-size: $fontSizeSub;
+    color: $colorHeading;
+    line-height: 1.5em;
+    h4 {
+      font-size: $fontSize;
+      margin-bottom: 10px;
+    }
+    i.bi,
+    i.icon,
+    ion-icon {
+      font-size: 20px;
+      margin-bottom: -5px;
+    }
+  }
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-top: 10px solid #fff;
+    position: absolute;
+    top: -7px;
+    z-index: 10;
+    right: 8px;
+    transform: rotate(180deg);
+    margin-left: -16px;
+  }
+}
+
+.android-add-to-home2 {
+  z-index: 200000;
+  .modal-dialog {
+    top: 0;
+    bottom: auto;
+    padding: 6px !important;
+    transform: translate(0, -100%) !important;
+    transition: 0.5s all !important;
+  }
+  &.show .modal-dialog {
+    transform: translate(0, 0) !important;
+    top: 10px;
+  }
+  .modal-content {
+    position: relative;
+    z-index: 1;
+    border-radius: 4px !important;
+    &:before {
+      content: "";
+      display: block;
+      width: 0;
+      height: 0;
+      border-left: 14px solid transparent;
+      border-right: 14px solid transparent;
+      border-top: 10px solid #fff;
+      position: absolute;
+      top: -7px;
+      z-index: 10;
+      right: 9px;
+      transform: rotate(180deg);
+      margin-left: -16px;
+    }
+    .action-sheet-content {
+      font-size: $fontSizeSub;
+      color: $colorHeading;
+      line-height: 1.5em;
+      h4 {
+        font-size: $fontSize;
+        margin-bottom: 10px;
+      }
+      i.bi,
+      i.icon,
+      ion-icon {
+        font-size: 20px;
+        margin-bottom: -5px;
+      }
+    }
+  }
+}

public/assets/sass/framework/_alert.scss

@@ -0,0 +1,142 @@
+.alert {
+  margin: 0;
+  padding: 6px 16px;
+  border: 0;
+  font-size: $fontSizeSub;
+  border-radius: $borderRadius;
+  .btn-close {
+    text-shadow: none !important;
+    width: 40px;
+    padding: 0;
+    opacity: 1;
+    line-height: 1em;
+    height: 36px !important;
+    outline: 0 !important;
+    box-shadow: none !important;
+    background: none;
+    &:hover,
+    &:active,
+    &:focus{
+      outline: 0 !important;
+    }
+    &:hover{
+      opacity: .7;
+    }
+    &:before,
+    &:after{
+      position: absolute;
+      width: 16px;
+      height: 2px;
+      left: 12px;
+      top: 16px;
+      content: '';
+      display: block;
+      background: #FFF;
+      border-radius: 20px;
+    }
+    &:before{
+      transform: rotate(45deg);
+    }
+    &:after{
+      transform: rotate(-45deg);
+    }
+  }
+  .alert-title{
+    margin: 4px 0;
+    font-size: $fontSize;
+    font-weight: $medium;
+  }
+  &.alert-dismissible{
+      padding-right: 56px;
+  }
+}
+
+@mixin alertStyle($color) {
+  background: $color;
+  color: #fff;
+  border: 1px solid $color;
+  a{
+      color: #fff !important;
+      text-decoration: underline;
+  }
+  .alert-title{
+    color: #FFF;
+  }
+  .close{
+      color: #FFF;
+  }
+}
+@mixin alertOutlineStyle($color) {
+  background: transparent;
+  color: $color;
+  border: 1px solid $color;
+  a{
+      color: $color !important;
+      text-decoration: underline !important;
+  }
+  .alert-title{
+    color: $color;
+  }
+  .btn-close {
+    color: $color;
+    opacity: 1;
+    &:before,
+    &:after{
+      background: $color;
+    }
+  }
+}
+
+.alert-primary {
+  @include alertStyle($colorPrimary);
+}
+.alert-outline-primary {
+  @include alertOutlineStyle($colorPrimary);
+}
+.alert-secondary {
+  @include alertStyle($colorSecondary);
+}
+.alert-outline-secondary {
+  @include alertOutlineStyle($colorSecondary);
+}
+.alert-success {
+  @include alertStyle($colorSuccess);
+}
+.alert-outline-success {
+  @include alertOutlineStyle($colorSuccess);
+}
+.alert-danger {
+  @include alertStyle($colorDanger);
+}
+.alert-outline-danger {
+  @include alertOutlineStyle($colorDanger);
+}
+.alert-warning {
+  @include alertStyle($colorWarning);
+}
+.alert-outline-warning {
+  @include alertOutlineStyle($colorWarning);
+}
+.alert-info {
+  @include alertStyle($colorInfo);
+}
+.alert-outline-info {
+  @include alertOutlineStyle($colorInfo);
+}
+.alert-light {
+  background: #FFF;
+  color: $colorHeading;
+}
+.alert-dark {
+  background: #333;
+  color: #FFF;
+  a{
+      color: #FFF !important;
+      text-decoration: underline !important;
+  }
+}
+.alert-outline-dark {
+    background: transparent;
+    color: #333;
+    border: 1px solid #333;
+  }

public/assets/sass/framework/_badge.scss

@@ -0,0 +1,87 @@
+.badge{
+    font-size: 12px;
+    line-height: 1em;
+    border-radius: 100px;
+    letter-spacing: 0;
+    height: 22px;
+    min-width: 22px;
+    padding: 0 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: $regular;
+}
+.badge-primary,
+a.badge-primary{
+    background: $colorPrimary !important;
+}
+.badge-secondary,
+a.badge-secondary{
+    background: $colorSecondary !important;
+}
+.badge-success,
+a.badge-success{
+    background: $colorSuccess !important;
+}
+.badge-danger,
+a.badge-danger{
+    background: $colorDanger !important;
+}
+.badge-warning,
+a.badge-warning{
+    background: $colorWarning !important;
+    color: #FFF;
+}
+.badge-info,
+a.badge-info{
+    background: $colorInfo !important;
+}
+.badge-light,
+a.badge-light{
+    background: rgba(255,255,255,.6) !important;
+    color: $colorHeading;
+}
+.badge-dark,
+a.badge-dark{
+    background: #222 !important;
+}
+.badge-empty{
+    display: block !important;
+    min-width: 8px !important;
+    width: 8px !important; 
+    height: 8px !important;
+    padding: 0 !important;
+    font-size: 0px;
+}
+.appHeader{
+    .badge{
+        min-width: 16px;
+        height: 16px;
+        line-height: 9px !important;
+        font-size: 10px;
+        padding: 0 4px !important;
+        position: absolute;
+        right: 2px;
+        top: 10px;
+    }
+    .badge-empty{
+        top: 14px;
+    }
+}
+.appBottomMenu{
+    .badge{
+        min-width: 16px;
+        height: 16px;
+        line-height: 9px !important;
+        font-size: 10px;
+        padding: 0 4px !important;
+        position: absolute;
+        right: 50%;
+        transform: translateX(120%);
+        top: 10px;
+    }
+    .badge-empty{
+        transform: translateX(200%);
+        top: 10px;
+    }
+}

public/assets/sass/framework/_blog.scss

@@ -0,0 +1,30 @@
+.blog-post{
+    .title{
+        padding: 0px 16px;
+        margin: 0 0 10px 0;
+    }
+    .post-header{
+        font-size: $fontSizeCaption;
+        padding: 10px 0;
+        margin: 16px 16px;
+        color: $colorLight;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 1px solid $colorLine;
+        border-bottom: 1px solid $colorLine;
+        a{
+            color: $colorHeading;
+            font-weight: $bold;
+        }
+    }
+    .post-body{
+        padding: 0 16px;
+        img{
+            width: calc(100% + 32px);
+            height: auto;
+            margin: 0px -16px;
+            margin-bottom: 16px;
+        }
+    }
+}

public/assets/sass/framework/_button.scss

@@ -0,0 +1,497 @@
+.btn {
+  height: 40px;
+  padding: 3px 18px;
+  font-size: $fontSizeSub;
+  line-height: 1.2em;
+  font-weight: $medium;
+  box-shadow: none !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: none;
+  text-decoration: none !important;
+  border-radius: $borderRadius;
+  border-width: 2px;
+  i.bi,
+  i.icon,
+  ion-icon {
+    font-size: 22px;
+    margin-right: 10px;
+    margin-top: -2px;
+    font-weight: 700;
+  }
+  &.rounded {
+    border-radius: 100px !important;
+  }
+  &.square {
+    border-radius: 0 !important;
+  }
+  &.shadowed {
+    box-shadow: $boxShadow !important;
+  }
+}
+.btn-lg {
+  height: 48px;
+  padding: 3px 24px;
+  font-size: 18px;
+  i.bi,
+  i.icon,
+  ion-icon {
+    font-size: 26px;
+  }
+}
+.btn-sm {
+  height: 30px;
+  padding: 0px 12px;
+  font-size: 12px;
+  i.bi,
+  i.icon,
+  ion-icon {
+    font-size: 20px;
+    margin-right: 6px;
+  }
+}
+.btn-block {
+  width: 100%;
+}
+.btn-group {
+  .btn {
+    &:active {
+      transform: none;
+    }
+  }
+}
+.btn-icon {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  i.bi,
+  i.icon,
+  ion-icon {
+    text-align: center;
+    margin: 0 !important;
+  }
+  &.btn-lg {
+    width: 48px;
+    height: 48px;
+    i.bi,
+    i.icon,
+    ion-icon {
+      font-size: 32px;
+    }
+  }
+  &.btn-sm {
+    width: 30px;
+    height: 30px;
+    i.bi,
+    i.icon,
+    ion-icon {
+      font-size: 18px;
+    }
+  }
+}
+
+@mixin buttonStyle($color) {
+  background: $color !important;
+  border-color: $color !important;
+  color: #ffffff !important;
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    background: darken($color, 5%) !important;
+    border-color: darken($color, 5%) !important;
+  }
+  &.disabled,
+  &:disabled {
+    background: $color;
+    border-color: $color;
+    opacity: 0.5;
+  }
+}
+.btn-primary {
+  @include buttonStyle($colorPrimary);
+}
+.btn-secondary {
+  @include buttonStyle($colorSecondary);
+}
+.btn-success {
+  @include buttonStyle($colorSuccess);
+}
+.btn-danger {
+  @include buttonStyle($colorDanger);
+}
+.btn-warning {
+  color: #fff !important;
+  @include buttonStyle($colorWarning);
+}
+.btn-link {
+  color: $colorPrimary !important;
+}
+.btn-info {
+  @include buttonStyle($colorInfo);
+}
+.btn-dark {
+  @include buttonStyle(#333);
+}
+.btn-light {
+  @include buttonStyle(rgba(255, 255, 255, 0.5));
+  color: $colorHeading !important;
+}
+@mixin buttonOutlineStyle($color) {
+  background: transparent;
+  border-color: $color;
+  border-width: 1px !important;
+  color: $color;
+  transition: none;
+  &:hover,
+  &:active {
+    background: rgba($color, 0.15) !important;
+    border-color: $color !important;
+    color: $color !important;
+  }
+  &.active {
+    background: $color !important;
+    color: #fff !important;
+    border-color: $color !important;
+  }
+  &.disabled,
+  &:disabled {
+    color: $color !important;
+    border-color: $color !important;
+    background: transparent !important;
+    opacity: 0.5;
+  }
+}
+.btn-outline-primary {
+  @include buttonOutlineStyle($colorPrimary);
+}
+.btn-outline-secondary {
+  @include buttonOutlineStyle($colorSecondary);
+}
+.btn-outline-success {
+  @include buttonOutlineStyle($colorSuccess);
+}
+.btn-outline-danger {
+  @include buttonOutlineStyle($colorDanger);
+}
+.btn-outline-warning {
+  @include buttonOutlineStyle($colorWarning);
+}
+.btn-outline-info {
+  @include buttonOutlineStyle($colorInfo);
+}
+.btn-outline-light {
+  @include buttonOutlineStyle(#fff);
+  &:active {
+    color: $colorHeading !important;
+  }
+}
+.btn-outline-dark {
+  border-width: 1px;
+}
+@mixin buttonTextStyle($color) {
+  background: transparent;
+  border-color: transparent;
+  color: $color !important;
+  transition: none;
+  &:hover {
+    background: transparent;
+  }
+  &:active,
+  &.active {
+    background: rgba($color, 0.15) !important;
+    border-color: transparent !important;
+    color: $color !important;
+  }
+  &.disabled,
+  &:disabled {
+    color: $color !important;
+    border-color: $color !important;
+    background: transparent !important;
+    opacity: 0.5;
+  }
+}
+.btn-text-primary {
+  @include buttonTextStyle($colorPrimary);
+}
+.btn-text-secondary {
+  @include buttonTextStyle($colorSecondary);
+}
+.btn-text-success {
+  @include buttonTextStyle($colorSuccess);
+}
+.btn-text-danger {
+  @include buttonTextStyle($colorDanger);
+}
+.btn-text-warning {
+  @include buttonTextStyle($colorWarning);
+}
+.btn-text-info {
+  @include buttonTextStyle($colorInfo);
+}
+.btn-text-light {
+  background: transparent;
+  color: #fff;
+  &:hover,
+  &:active,
+  &.active {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+.btn-text-dark {
+  @include buttonTextStyle($colorHeading);
+}
+.btn-group {
+  .btn {
+    margin-left: -1px !important;
+  }
+}
+
+.btn-facebook {
+  color: #fff !important;
+  background: #39579b;
+  &:hover,
+  &:active {
+    background: darken(#39579b, 5%);
+  }
+}
+.bg-facebook {
+  background: #39579b;
+  color: #fff !important;
+}
+
+.btn-twitter {
+  color: #fff !important;
+  background: #049ff6;
+  &:hover,
+  &:active {
+    background: darken(#049ff6, 5%);
+  }
+}
+.bg-twitter {
+  background: #049ff6;
+  color: #fff !important;
+}
+
+.btn-instagram {
+  color: #fff !important;
+  background: #df237b;
+  &:hover,
+  &:active {
+    background: darken(#df237b, 5%);
+  }
+}
+.bg-instagram {
+  background: #de0067;
+  color: #fff !important;
+}
+
+.btn-linkedin {
+  color: #fff !important;
+  background: #0075aa;
+  &:hover,
+  &:active {
+    background: darken(#0075aa, 5%);
+  }
+}
+.bg-linkedin {
+  background: #0075aa;
+  color: #fff !important;
+}
+
+.btn-twitch {
+  color: #fff !important;
+  background: #923cff;
+  &:hover,
+  &:active {
+    background: darken(#923cff, 5%);
+  }
+}
+.bg-twitch {
+  background: #923cff;
+  color: #fff !important;
+}
+
+.btn-whatsapp {
+  color: #fff !important;
+  background: #0ad561;
+  &:hover,
+  &:active {
+    background: darken(#0ad561, 5%);
+  }
+}
+.bg-whatsapp {
+  background: #0ad561;
+  color: #fff !important;
+}
+
+.btn-youtube {
+  color: #fff !important;
+  background: #ff0000;
+  &:hover,
+  &:active {
+    background: darken(#ff0000, 5%);
+  }
+}
+.bg-youtube {
+  background: #ff0000;
+  color: #fff !important;
+}
+
+.btn-amazon {
+  color: #fff !important;
+  background: #292929;
+  &:hover,
+  &:active {
+    background: darken(#292929, 5%);
+  }
+}
+.bg-amazon {
+  background: #292929;
+  color: #fff !important;
+}
+
+.btn-android {
+  color: #fff !important;
+  background: #7dd159;
+  &:hover,
+  &:active {
+    background: darken(#7dd159, 5%);
+  }
+}
+.bg-android {
+  background: #7dd159;
+  color: #fff !important;
+}
+
+.btn-apple {
+  color: #fff !important;
+  background: #000;
+  &:hover,
+  &:active {
+    background: #222;
+  }
+}
+.bg-apple {
+  background: #000;
+  color: #fff !important;
+}
+
+.btn-dribbble {
+  color: #fff !important;
+  background: #ec4989;
+  &:hover,
+  &:active {
+    background: darken(#ec4989, 5%);
+  }
+}
+.bg-dribbble {
+  background: #ec4989;
+  color: #fff !important;
+}
+
+.btn-skype {
+  color: #fff !important;
+  background: #00a8f3;
+  &:hover,
+  &:active {
+    background: darken(#00a8f3, 5%);
+  }
+}
+.bg-skype {
+  background: #00a8f3;
+  color: #fff !important;
+}
+
+.btn-pinterest {
+  color: #fff !important;
+  background: #f12a2c;
+  &:hover,
+  &:active {
+    background: darken(#f12a2c, 5%);
+  }
+}
+.bg-pinterest {
+  background: #f12a2c;
+  color: #fff !important;
+}
+
+.btn-dropbox {
+  color: #fff !important;
+  background: #005cff;
+  &:hover,
+  &:active {
+    background: darken(#005cff, 5%);
+  }
+}
+.bg-dropbox {
+  background: #005cff;
+  color: #fff !important;
+}
+
+.btn-bitcoin {
+  color: #fff !important;
+  background: #f99400;
+  &:hover,
+  &:active {
+    background: darken(#f99400, 5%);
+  }
+}
+.bg-bitcoin {
+  background: #f99400;
+  color: #fff !important;
+}
+
+.btn-github {
+  color: #fff !important;
+  background: #323131;
+  &:hover,
+  &:active {
+    background: darken(#323131, 5%);
+  }
+}
+.bg-github {
+  background: #323131;
+  color: #fff !important;
+}
+
+@mixin radiobuttons($color) {
+  background: $color !important;
+  border-color: $color !important;
+}
+.btn-check:checked + .btn-outline-primary,
+.btn-check:checked + .btn-outline-secondary,
+.btn-check:checked + .btn-outline-danger,
+.btn-check:checked + .btn-outline-warning,
+.btn-check:checked + .btn-outline-success,
+.btn-check:checked + .btn-outline-info,
+.btn-check:checked + .btn-outline-dark{
+  color: #fff !important;
+  transition: none;
+}
+
+.btn-check:checked + .btn-outline-primary {
+  @include radiobuttons($colorPrimary);
+}
+.btn-check:checked + .btn-outline-secondary {
+  @include radiobuttons($colorSecondary);
+}
+.btn-check:checked + .btn-outline-warning {
+  @include radiobuttons($colorWarning);
+}
+.btn-check:checked + .btn-outline-danger {
+  @include radiobuttons($colorDanger);
+}
+.btn-check:checked + .btn-outline-success {
+  @include radiobuttons($colorSuccess);
+}
+.btn-check:checked + .btn-outline-info {
+  @include radiobuttons($colorInfo);
+}
+.btn-check:checked + .btn-outline-dark {
+  @include radiobuttons(#222);
+}
+
+

public/assets/sass/framework/_card.scss

@@ -0,0 +1,117 @@
+.card {
+  background: #ffffff;
+  border-radius: $borderRadius;
+  border: 0;
+  box-shadow: $boxShadow;
+  .card-body {
+    padding: 24px 16px;
+    line-height: 1.4em;
+  }
+  .card-title {
+    color: $colorHeading;
+    font-size: $fontSizeHeadingLarge;
+    font-weight: $bold;
+  }
+  .card-subtitle {
+    color: $colorText;
+    font-weight: $medium;
+    letter-spacing: .01em;
+    font-size: $fontSizeCaption;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+    margin-top: -4px;
+  }
+  .listview {
+    > li:first-child {
+      .item {
+        border-radius: $borderRadius $borderRadius 0 0;
+      }
+    }
+    > li:last-child {
+      .item {
+        border-radius: 0 0 $borderRadius $borderRadius;
+      }
+    }
+  }
+  .card-header {
+    background: transparent;
+    color: $colorHeading;
+    font-weight: $medium;
+    padding: 12px 16px;
+    border-bottom: 1px solid $colorLine;
+  }
+  .card-footer {
+    background: transparent;
+    border-top: 1px solid $colorLine;
+    color: $colorText;
+    padding: 12px 16px;
+  }
+  .card-img-top {
+    border-radius: $borderRadius $borderRadius 0 0;
+  }
+  .overlay-img {
+    border-radius: $borderRadius;
+  }
+  .card-img-overlay {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: $borderRadius;
+    .card-title {
+      color: #fff;
+    }
+    .card-text {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+  &.bg-primary,
+  &.bg-secondary,
+  &.bg-danger,
+  &.bg-success,
+  &.bg-warning,
+  &.bg-info,
+  &.bg-dark {
+    border: 0;
+    .card-title {
+      color: #fff;
+    }
+    .card-text {
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .card-header {
+      color: #fff;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+    }
+  }
+  &.bg-light {
+    background: #fff;
+  }
+}
+
+.card.product-card{
+  .card-body{
+    padding: 8px;
+  }
+  .image{
+    width: 100%;
+    border-radius: $borderRadius;
+  }
+  .title{
+    font-size: $fontSize;
+    margin: 10px 0 0 0;
+    padding: 0 4px;
+    font-weight: $medium;
+  }
+  .text{
+    font-size: $fontSizeCaption;
+    color: $colorLight;
+    margin: 0;
+    padding: 0 4px 10px 4px;
+  }
+  .price{
+    margin: 0 0 10px 0;
+    padding: 0px 4px;
+    display: block;
+    font-size: $fontSize;
+    font-weight: $medium;
+    color: $colorPrimary;
+  }
+}

public/assets/sass/framework/_carousel.scss

@@ -0,0 +1,64 @@
+.splide {
+    margin-bottom: -20px !important;
+    &:active{
+        cursor: grab;
+    }
+    .splide__list {
+        padding-bottom: 20px !important;
+    }
+}
+.carousel-single,
+.carousel-small {
+    .splide__slide {
+        margin-left: -16px !important;
+        padding-right: 16px !important;
+    }
+}
+.carousel-multiple{
+    .splide__slide {
+        margin-left: -8px !important;
+        padding-right: 8px !important;
+    }
+}
+.carousel-slider {
+    text-align: center;
+    .splide__list {
+        padding-bottom: 100px !important;
+    }
+    .imaged.w-100 {
+        max-width: 400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .splide__pagination {
+        position: fixed;
+        width: 100%;
+        bottom: 120px;
+        button {
+            background: $colorLine;
+            margin: 0 5px !important;
+            &.is-active {
+                background: $colorLight;
+                transform: scale(1);
+            }
+        }
+    }
+}
+.carousel-button-footer {
+    min-height: 84px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-bottom: $safeBottom;
+    width: 100%;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 990;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    > div {
+        width: 100%;
+    }
+}

public/assets/sass/framework/_checkbox-radio-toggle.scss

@@ -0,0 +1,128 @@
+// Form check
+.form-check {
+  padding: 0;
+  margin: 0;
+  min-height: auto;
+  height: auto;
+  .form-check-input {
+    display: none;
+  }
+  .form-check-label {
+    cursor: pointer;
+    position: relative;
+    min-height: 20px;
+    padding: 0px 0 0 32px;
+    line-height: 1.7em;
+    color: $colorHeading;
+    &:after {
+      position: absolute;
+      left: 0;
+      top: 0;
+      content: "";
+      display: block;
+      width: 22px;
+      height: 22px;
+      background: transparent;
+      border-radius: 100px;
+      border: 1px solid $colorLine;
+    }
+    &:before {
+      content: "";
+      display: block;
+      width: 22px;
+      height: 22px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 3;
+      opacity: 0;
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+    }
+  }
+}
+.form-check-input[type="radio"] ~ .form-check-label:before {
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='8px' height='8px' viewBox='0 0 8 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Ccircle id='Oval' fill='%23FFFFFF' cx='4' cy='4' r='4'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.form-check-input:checked ~ .form-check-label {
+  &:after {
+    background-color: $colorPrimary;
+    border-color: $colorPrimary !important;
+  }
+  &:before {
+    opacity: 1;
+  }
+}
+.form-check-inline {
+  margin-right: 0;
+  .form-check-label {
+    margin-bottom: -3px;
+    padding-left: 24px;
+  }
+}
+
+.input-list {
+  .form-check {
+    &:after {
+      content: "";
+      height: 1px;
+      background: $colorLine;
+      display: block;
+      margin-left: 54px;
+    }
+    .form-check-label {
+      min-height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: 0.1s all;
+      padding: 6px 16px 6px 54px;
+      &:before,
+      &:after {
+        left: 16px;
+        top: 14px;
+      }
+      &:active {
+        background: rgba($colorLine, 0.3);
+      }
+    }
+    &:last-child {
+      &:after {
+        height: 0;
+      }
+    }
+  }
+}
+.form-switch {
+  height: 30px;
+  .form-check-label {
+    width: 56px;
+    height: 30px;
+    padding: 0;
+    margin: 0;
+    &:after {
+      height: 30px;
+      width: 56px;
+      background: $colorLine;
+      border: 1px solid darken($colorLine, 5%);
+      transition: .1s linear;
+    }
+    &:before {
+      opacity: 1;
+      border-radius: 100px;
+      width: 24px;
+      height: 24px;
+      top: 3px;
+      left: 4px;
+      background: #ffffff;
+      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+      transition: .15s ease-in-out;
+    }
+  }
+  .form-check-input:checked ~ .form-check-label {
+    &:before {
+      left: 28px;
+    }
+  }
+}

public/assets/sass/framework/_chips.scss

@@ -0,0 +1,146 @@
+.chip {
+  background: $colorLine;
+  font-size: 13px;
+  color: $colorHeading;
+  line-height: 1em;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  border-radius: 100px;
+  .chip-label {
+    padding: 0 12px;
+  }
+  &.chip-outline {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px $colorLine;
+  }
+  &.chip-media {
+    position: relative;
+    padding-left: 20px;
+    img {
+      width: 26px;
+      height: 26px;
+      border-radius: 100px;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+  .chip-icon {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 26px;
+    height: 26px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    background: $colorText;
+    color: #fff;
+    font-size: 14px;
+  }
+  .chip-delete {
+    width: 26px;
+    margin-left: -10px;
+    height: 26px;
+    display: inline-flex;
+    color: $colorHeading;
+    opacity: 0.7;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 100px;
+    &:hover,
+    &:active {
+      opacity: 1;
+    }
+  }
+}
+.chip-primary {
+  background: $colorPrimary !important;
+  color: #fff !important;
+  .chip-delete {
+    color: #fff !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: $colorPrimary !important;
+    box-shadow: inset 0 0 0 1px $colorPrimary !important;
+  }
+}
+.chip-danger {
+  background: $colorDanger !important;
+  color: #fff !important;
+  .chip-delete {
+    color: #fff !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: $colorDanger !important;
+    box-shadow: inset 0 0 0 1px $colorDanger !important;
+  }
+}
+.chip-success {
+  background: $colorSuccess !important;
+  color: #fff !important;
+  .chip-delete {
+    color: #fff !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: $colorSuccess !important;
+    box-shadow: inset 0 0 0 1px $colorSuccess !important;
+  }
+}
+.chip-warning {
+  background: $colorWarning !important;
+  color: #fff !important;
+  .chip-delete {
+    color: #fff !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: $colorWarning !important;
+    box-shadow: inset 0 0 0 1px $colorWarning !important;
+  }
+}
+.chip-info {
+  background: $colorInfo !important;
+  color: #fff !important;
+  .chip-delete {
+    color: #fff !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: $colorInfo !important;
+    box-shadow: inset 0 0 0 1px $colorInfo !important;
+  }
+}
+.chip-light {
+  background: #fff !important;
+  color: #000 !important;
+  .chip-delete {
+    color: #000 !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: #fff !important;
+    box-shadow: inset 0 0 0 1px #fff !important;
+  }
+}
+.chip-dark {
+  background: #000 !important;
+  color: #fff !important;
+  .chip-delete {
+    color: #fff !important;
+  }
+  &.chip-outline {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: inset 0 0 0 1px #000 !important;
+  }
+}

public/assets/sass/framework/_color-class.scss

@@ -0,0 +1,153 @@
+.bg-primary{
+    background: $colorPrimary !important;
+    color: #FFF;
+}
+.bg-secondary{
+    background: $colorSecondary !important;
+    color: #FFF;
+}
+.bg-success{
+    background: $colorSuccess !important;
+    color: #FFF;
+}
+.bg-danger{
+    background: $colorDanger !important;
+    color: #FFF;
+}
+.bg-warning{
+    background: $colorWarning !important;
+    color: #FFF;
+}
+.bg-info{
+    background: $colorInfo !important;
+    color: #FFF;
+}
+.bg-light{
+    background: rgba(255,255,255,.5) !important;
+}
+.bg-dark{
+    background: #222 !important;
+    color: #FFF;
+}
+
+a.bg-primary{
+    background: $colorPrimary !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken($colorPrimary, 5%) !important;
+    }
+}
+a.bg-secondary{
+    background: $colorSecondary !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken($colorSecondary, 5%) !important;
+    }
+}
+a.bg-success{
+    background: $colorSuccess !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken($colorSuccess, 5%) !important;
+    }
+}
+a.bg-danger{
+    background: $colorDanger !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken($colorDanger, 5%) !important;
+    }
+}
+a.bg-warning{
+    background: $colorWarning !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken($colorWarning, 5%) !important;
+    }
+}
+a.bg-info{
+    background: $colorInfo !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken($colorInfo, 5%) !important;
+    }
+}
+a.bg-light{
+    background: rgba(255,255,255,.5) !important;
+    &:hover,
+    &:active{
+        background:darken(rgba(255,255,255,.5), 5%) !important;
+    }
+}
+a.bg-dark{
+    background: #222 !important;
+    color: #FFF !important;
+    &:hover,
+    &:active{
+        background:darken(#222, 5%) !important;
+    }
+}
+
+.text-primary,
+a.text-primary{
+    color: $colorPrimary !important;
+}
+.text-secondary,
+a.text-secondary{
+    color: $colorSecondary !important;
+}
+.text-success,
+a.text-success{
+    color: $colorSuccess !important;
+}
+.text-danger,
+a.text-danger{
+    color: $colorDanger !important;
+}
+.text-warning,
+a.text-warning{
+    color: $colorWarning !important;
+}
+.text-info,
+a.text-info{
+    color: $colorInfo !important;
+}
+.text-light,
+a.text-light{
+    color: #FFF !important;
+}
+.text-dark,
+a.text-dark{
+    color: $colorHeading !important;
+}
+
+.border-primary{
+    border-color: $colorPrimary !important;
+}
+.border-secondary{
+    border-color: $colorSecondary !important;
+}
+.border-success{
+    border-color: $colorSuccess !important;
+}
+.border-danger{
+    border-color: $colorDanger !important;
+}
+.border-warning{
+    border-color: $colorWarning !important;
+}
+.border-info{
+    border-color: $colorInfo !important;
+}
+.border-light{
+    border-color: #FFF !important;
+}
+.border-dark{
+    border-color: $colorHeading !important;
+}

public/assets/sass/framework/_comment.scss

@@ -0,0 +1,77 @@
+.comment-block{
+    font-size: $fontSizeSub;
+    line-height: 1.6em;
+    .item{
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 30px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        .avatar{
+            margin-right: 14px;
+        }
+        .in{
+            width: 100%;
+        }
+        .text{
+            color: $colorText;
+        }
+        .comment-header{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+            .title{
+                margin: 0;
+                padding-right: 10px;
+                color: $colorHeading;
+                font-size: $fontSize;
+            }
+            .time{
+                font-size: $fontSizeCaption;
+                color: $colorLight;
+            }
+        }
+        .comment-footer{
+            margin-top: 10px;
+            display: flex;
+            align-content: flex-start;
+            font-size: $fontSizeCaption;
+            .comment-button{
+                font-weight: $medium;
+                display: flex;
+                align-content: center;
+                margin-right: 14px;
+                color: $colorText !important;
+                i.bi,
+                i.icon,
+                ion-icon{
+                    margin-right: 5px;
+                    font-size: 18px;
+                    line-height: 1em;
+                }
+            }
+        }
+    }
+}
+
+.comment-box{
+    padding: 24px 16px;
+    text-align: center;
+    .imaged{
+        margin: 0 auto 10px auto;
+        box-shadow: $boxShadow;
+    }
+    .card-title{
+        margin: 0;
+        font-size: $fontSizeHeading;
+        font-weight: $medium;
+    }
+    .card-text{
+        font-size: $fontSizeCaption;
+    }
+    .text{
+        margin-top: 6px;
+    }
+}

public/assets/sass/framework/_dialog.scss

@@ -0,0 +1,112 @@
+.dialogbox {
+  .modal-dialog {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 12000;
+    display: flex;
+    overflow: auto;
+    align-items: center;
+    justify-content: center;
+    transform: translate(0, 0) !important;
+    transform: scale(0.8) !important;
+    .form-group{
+      text-align: left;
+    }
+    .modal-content {
+      max-width: 300px;
+      margin: auto;
+      max-height: 560px;
+      overflow: auto;
+      border: 0;
+      border-radius: 16px;
+      .btn-list {
+        margin: 0;
+        .btn {
+          padding: 0px 10px;
+          min-height: 58px;
+          border-radius: 0;
+          margin: 0;
+          border: 0;
+          border-bottom: 1px solid $colorLine !important;
+          font-size: $fontSize;
+          &:hover,
+          &:focus,
+          &:active,
+          &.active {
+            background: rgba($colorLine,.3) !important;
+          }
+        }
+        .btn:last-child{
+          border-radius: 0 0 16px 16px;
+          border-bottom: 0 !important;
+        }
+      }
+      .btn-inline{
+        display: flex;
+        margin: 0;
+        background: $colorLine;
+        .btn{
+          width: 100%;
+          border-radius: 0;
+          min-height: 58px;
+          border: 0 !important;
+          font-size: $fontSize;
+          margin-right: 1px;
+          background: #FFF;
+          &:hover,
+          &:focus,
+          &:active,
+          &.active {
+            background: rgba(255,255,255,.8) !important;
+          }
+          &:last-child{
+            margin-right: 0;
+            border-radius: 0 0 16px 0 !important;
+          }
+          &:first-child{
+            border-radius: 0 0 0 16px !important;
+          }
+        }
+      }
+      .modal-header {
+        border: 0;
+        padding: 20px 20px 10px 20px;
+        .modal-title {
+          color: $colorHeading;
+          text-align: center;
+          margin: 0 auto;
+          font-size: $fontSizeHeading;
+        }
+      }
+      .modal-body {
+        padding: 0 20px;
+        margin-bottom: 30px;
+        text-align: center;
+        font-size: $fontSize;
+      }
+      .modal-footer {
+        border: 0;
+        border-top: 1px solid $colorLine;
+        padding: 0;
+        display: block;
+        text-align: right;
+      }
+    }
+  }
+  &.show .modal-dialog {
+    transform: translate(0, 0) !important;
+    transform: scale(1) !important;
+  }
+}
+
+.modal-icon{
+  font-size: 60px;
+  line-height: 1em;
+  margin-top: 30px;
+  margin-bottom: -10px;
+  color: $colorPrimary;
+  text-align: center;
+}

public/assets/sass/framework/_divider.scss

@@ -0,0 +1,22 @@
+.divider{
+    height: 1px;
+    background: $colorLine;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon-box{
+        background: $colorLine;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+        border-radius: 100%;
+        width: 28px;
+        height: 28px;
+        font-size: 18px;
+    }
+    &.inset{
+        margin-left: 16px;
+        margin-right: 16px;
+    }
+}

public/assets/sass/framework/_dropdown.scss

@@ -0,0 +1,62 @@
+.dropdown,
+.dropup{
+  .dropdown-menu {
+    border: 1px solid transparent;
+    min-width: 120px;
+    padding: 8px 0;
+    border-radius: $borderRadius;
+    box-shadow: $boxShadow;
+    margin-top: 3px !important;
+    .dropdown-item {
+      padding: 12px 16px;
+      line-height: 1.2em;
+      color: $colorHeading;
+      font-size: $fontSize;
+      display: flex;
+      align-items: center;
+      &:hover,
+      &:active {
+        background: rgba($colorLine, .5);
+        color: $colorHeading;
+      }
+    }
+    .dropdown-divider {
+      border-top: 1px solid $colorLine;
+    }
+    .dropdown-header{
+      padding: 9px 16px;
+      color: $colorText;
+      font-weight: $regular;
+      font-size: $fontSizeCaption;
+    }
+    .text{
+      padding: 9px 16px;
+      color: $colorText;
+    }
+    i.bi,
+    i.icon,
+    ion-icon{
+      margin-right: 10px;
+      width: 22px;
+      height: 22px;
+      font-size: 22px;
+      justify-content: center;
+      align-items: center;
+      line-height: 1em;
+      display: inline-flex;
+      color: $colorHeading
+    }
+  }
+}
+.appHeader{
+  .dropdown-menu{
+    margin-top: -10px !important;
+  }
+}
+
+.dropdown-toggle{
+  &:after{
+    border-radius: 4px;
+    margin-left: 7px;
+  }
+}

public/assets/sass/framework/_e-commerce.scss

@@ -0,0 +1,91 @@
+.rate-block{
+  font-size: 18px;
+  display: flex;
+  color: $colorLight;
+  i.bi,
+  ion-icon,
+  i.icon{
+    margin-right: 3px;
+    &.active{
+      color: $colorWarning;
+    }
+  }
+}
+.comment-block{
+  .rate-block{
+    font-size: 14px;
+  }
+}
+.product-detail-header{
+  .title{
+    margin: 0 0 2px 0;
+    font-weight: $medium;
+    font-size: $fontSizeHeading;
+    color: $colorHeading;
+  }
+  .text{
+    font-size: $fontSizeSub;
+    color: $colorText;
+  }
+  .detail-footer{
+    margin: 16px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .price{
+      .old-price{
+        font-size: $fontSize;
+        color: $colorText;
+        text-decoration: line-through;
+        margin-bottom: 4px;
+      }
+      .current-price{
+        font-size: $fontSizeHeadingLarge;
+        color: $colorPrimary;
+        font-weight: $medium;
+      }
+    }
+  }
+}
+
+.cart-item{
+  .card-body{
+    padding: 16px;
+  }
+  .imaged{
+    width: 80px;
+    height: auto;
+  }
+  .in{
+    display: flex;
+    align-items: center;
+    .text{
+      margin-left: 16px;
+      .title{
+        font-weight: $medium;
+        font-size: $fontSize;
+        line-height: 1.2em;
+        margin: 0 0 6px 0;
+      }
+      .detail{
+        line-height: 1.2em;
+        margin: 0 0 4px 0;
+        font-size: $fontSizeCaption;
+        color: $colorLight;
+      }
+      .price{
+        font-weight: $medium;
+        font-size: $fontSize;
+        color: $colorPrimary;
+      }
+    }
+  }
+  .cart-item-footer{
+    border-top: 1px solid $colorLine;
+    padding: 16px 0 0 0;
+    margin: 16px 0 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

public/assets/sass/framework/_error-page.scss

@@ -0,0 +1,44 @@
+.error-page{
+    text-align: center;
+    padding: 40px 16px;
+    max-width: 300px;
+    margin: auto;
+    .icon-box{
+        font-size: 86px;
+        margin-bottom: 20px;
+    }
+    .title{
+        font-size: $fontSizeHeadingLarge;
+        margin-bottom: 20px;
+    }
+}
+#countDown{
+    font-size: 20px;
+    font-weight: $bold;
+    text-transform: uppercase;
+    color: $colorHeading;
+    margin: 0 -40px;
+    .alert{
+        width: 100%;
+        margin: 0;
+        text-transform: none;
+    }
+    > div{
+        display: inline-block;
+        width: 70px;
+        border: 1px solid $colorLine;
+        margin: 5px;
+        text-align: center;
+        border-radius: $borderRadius;
+        padding: 10px 5px;
+        p{
+            margin: 0;
+        }
+        span{
+            display: block;
+            font-weight: $regular;
+            color: $colorLight;
+            font-size: 10px;
+        }
+    }
+}

public/assets/sass/framework/_fab-button.scss

@@ -0,0 +1,161 @@
+.fab-button {
+  .fab {
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $colorPrimary;
+    border-radius: 100%;
+    color: #fff !important;
+    > i.bi,
+    > i.icon,
+    > ion-icon {
+        font-size: 26px;
+        transition: .2s all;
+      --ionicon-stroke-width: 42px;
+    }
+    &:hover,
+    &:active {
+      background: $colorPrimary;
+    }
+  }
+  &.text{
+      .fab{
+        > i.bi,
+        > i.icon,
+        > ion-icon {
+            margin-right: 6px;
+        }
+          width: auto;
+          border-radius: 300px;
+          font-size: $fontSizeHeading;
+          padding: 0px 24px;
+      }
+  }
+  &.animate {
+    .fab.show {
+      ion-icon[name=add],
+      ion-icon[name=add-sharp],
+      ion-icon[name=add-outline]{
+          transform: rotate(45deg) !important;
+      }
+    }
+  }
+  &.dropdown.show{
+    .fab{
+      background: darken($colorPrimary, 5%);
+    }
+  }
+  .dropdown-menu {
+    margin: 0;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    padding: 0px 7px;
+    width: 56px;
+    min-width: 56px;
+    max-width: 56px;
+    text-align: center;
+    .dropdown-item {
+      padding: 0;
+      background: $colorPrimary;
+      width: 42px;
+      height: 42px;
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      margin: 14px 0;
+      border-radius: 100%;
+      box-shadow: $boxShadow;
+      position: relative;
+      &:hover,
+      &:active {
+        background: $colorPrimary;
+      }
+      i.bi,
+      i.icon,
+      ion-icon {
+        --ionicon-stroke-width: 32px;
+        line-height: 1em;
+        margin-right: 0;
+        color: #fff !important;
+        width: 24px !important;
+        height: 24px !important;
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+        line-height: 1em;
+        display: inline-flex;
+      }
+      p{
+          background: #FFF;
+          position: absolute;
+          left: 58px;
+          top: 7px;
+          color: $colorHeading;
+          font-size: $fontSizeSub;
+          padding: 4px 12px;
+          line-height: 1.5em;
+          border-radius: $borderRadius;
+          box-shadow: $boxShadow;
+      }
+    }
+  }
+  &.bottom-right {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    z-index: 100;
+    margin-bottom: $safeBottom;
+  }
+  &.bottom-left {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    z-index: 100;
+    margin-bottom: $safeBottom;
+  }
+  &.bottom-center{
+      position: fixed;
+      bottom: 16px;
+      left: 50%;
+      transform: translate(-50%,0%);
+      margin-bottom: $safeBottom;
+  }
+  &.top-center{
+    position: fixed;
+    top: 72px;
+    left: 50%;
+    transform: translate(-50%,0%);
+    margin-top: $safeTop;
+  }
+  &.top-left {
+    position: fixed;
+    top: 72px;
+    left: 16px;
+    z-index: 100;
+    margin-top: $safeTop;
+  }
+  &.top-right {
+    position: fixed;
+    top: 72px;
+    right: 16px;
+    z-index: 100;
+    margin-top: $safeTop;
+  }
+
+  &.top-right,
+  &.bottom-right{
+      .dropdown-menu{
+          .dropdown-item{
+              p{
+                  left: auto;
+                  right: 58px;
+              }
+          }
+      }
+  }
+}

public/assets/sass/framework/_form-validation.scss

@@ -0,0 +1,129 @@
+.needs-validation.was-validated {
+  .form-group.basic,
+  .form-group.boxed {
+    .invalid-feedback,
+    .valid-feedback {
+      height: 16px;
+      font-size: 11px;
+      line-height: 1.4em;
+      margin-top: 4px;
+    }
+    .invalid-feedback {
+      color: $colorDanger;
+    }
+    .valid-feedback {
+      color: $colorSuccess;
+    }
+    .clear-input {
+      bottom: 20px;
+    }
+  }
+}
+.form-control.is-valid,
+.was-validated .form-control:valid {
+  border-color: $colorSuccess;
+  box-shadow: 0 !important;
+  background-image: none !important;
+}
+.form-control.is-valid:focus,
+.was-validated .form-control:valid:focus {
+  border-color: $colorSuccess;
+  box-shadow: none !important;
+}
+.custom-select.is-valid,
+.was-validated .custom-select:valid {
+  border-color: $colorSuccess;
+}
+.custom-select.is-valid:focus,
+.was-validated .custom-select:valid:focus {
+  border-color: $colorSuccess;
+  box-shadow: none !important;
+}
+.form-check-input.is-valid ~ .form-check-label,
+.was-validated .form-check-input:valid ~ .form-check-label {
+  color: $colorSuccess;
+}
+.custom-control-input.is-valid ~ .custom-control-label,
+.was-validated .custom-control-input:valid ~ .custom-control-label {
+  color: $colorSuccess;
+}
+.custom-control-input.is-valid ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid ~ .custom-control-label::before {
+  border-color: $colorSuccess;
+}
+.custom-control-input.is-valid:checked ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
+  border-color: $colorSuccess;
+  background-color: $colorSuccess;
+}
+
+.custom-control-input.is-valid:focus ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before {
+  box-shadow: none !important;
+}
+
+.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $colorSuccess;
+}
+
+.custom-file-input.is-valid ~ .custom-file-label,
+.was-validated .custom-file-input:valid ~ .custom-file-label {
+  border-color: $colorSuccess;
+}
+
+.custom-file-input.is-valid:focus ~ .custom-file-label,
+.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
+  border-color: $colorSuccess;
+  box-shadow: none !important;
+}
+
+.form-control.is-invalid,
+.was-validated .form-control:invalid {
+  border-color: $colorDanger;
+  background-image: none !important;
+}
+.form-control.is-invalid:focus,
+.was-validated .form-control:invalid:focus {
+  border-color: $colorDanger;
+  box-shadow: none !important;
+}
+.custom-select.is-invalid,
+.was-validated .custom-select:invalid {
+  border-color: $colorDanger;
+}
+.custom-select.is-invalid:focus,
+.was-validated .custom-select:invalid:focus {
+  border-color: $colorDanger;
+  box-shadow: none !important;
+}
+.form-check-input.is-invalid ~ .form-check-label,
+.was-validated .form-check-input:invalid ~ .form-check-label {
+  color: $colorDanger;
+}
+.custom-control-input.is-invalid ~ .custom-control-label,
+.was-validated .custom-control-input:invalid ~ .custom-control-label {
+  color: $colorDanger;
+}
+.custom-control-input.is-invalid ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
+  border-color: $colorDanger;
+}
+.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before {
+  border-color: $colorDanger;
+  background-color: $colorDanger;
+}
+.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $colorDanger;
+}
+.custom-file-input.is-invalid ~ .custom-file-label,
+.was-validated .custom-file-input:invalid ~ .custom-file-label {
+  border-color: $colorDanger;
+}
+.custom-file-input.is-invalid:focus ~ .custom-file-label,
+.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
+  border-color: $colorDanger;
+  box-shadow: none !important;
+}

public/assets/sass/framework/_form-wizard.scss

@@ -0,0 +1,89 @@
+.form-wizard-section {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding: 4px 0 0 0;
+  position: relative;
+  &:before {
+    content: "";
+    height: 1px;
+    background: $colorLine;
+    width: 100%;
+    position: absolute;
+    top: 16px;
+  }
+  .button-item {
+    flex: 1;
+    text-align: center;
+    padding: 0 6px;
+    position: relative;
+    strong {
+      background: $colorLine;
+      width: 22px;
+      height: 22px;
+      border-radius: 100%;
+      color: $colorLight;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      line-height: 1em;
+      position: relative;
+      z-index: 2;
+      i.bi,
+      i.icon,
+      ion-icon {
+        font-size: 16px;
+      }
+    }
+    p {
+      font-size: 10px;
+      line-height: 1em;
+      color: $colorLight;
+      margin: 4px 0 0 0;
+    }
+    &.active {
+      strong {
+        background: $colorPrimary;
+        color: #fff;
+      }
+      p {
+        color: $colorHeading;
+      }
+    }
+  }
+}
+
+.extraHeader {
+  &.bg-primary,
+  &.bg-secondary,
+  &.bg-success,
+  &.bg-danger,
+  &.bg-warning,
+  &.bg-dark{
+    .form-wizard-section {
+      &:before {
+        background: transparent;
+      }
+      .button-item {
+        strong {
+          background: rgba(255,255,255,.4);
+          color: #FFF;
+        }
+        p {
+          color: rgba(255,255,255,.7);
+        }
+        &.active {
+          strong {
+            background: rgba(0,0,0, .5);
+            color: #fff;
+          }
+          p {
+            color: #FFF;
+          }
+        }
+      }
+    }
+  }
+}