From aa5778c037c1793d0c096a3d0d31009b901a708e Mon Sep 17 00:00:00 2001
From: Ab30657 <amar_ronaldo30657@yahoo.com>
Date: Sun, 11 Apr 2021 15:32:57 +0545
Subject: connected with api

---
 src/web/src/app/film/film.component.html | 11 ++++++---
 src/web/src/app/film/film.component.ts   | 38 +++++++++++++-------------------
 src/web/src/app/home/home.component.html |  5 ++++-
 src/web/src/app/scrape.service.ts        |  2 +-
 src/web/src/assets/movies pic.svg        |  1 +
 src/web/src/assets/movies.svg            |  1 -
 src/web/src/styles.css                   |  8 ++-----
 7 files changed, 31 insertions(+), 35 deletions(-)
 create mode 100644 src/web/src/assets/movies pic.svg
 delete mode 100644 src/web/src/assets/movies.svg

diff --git a/src/web/src/app/film/film.component.html b/src/web/src/app/film/film.component.html
index 7e18536..273dab1 100644
--- a/src/web/src/app/film/film.component.html
+++ b/src/web/src/app/film/film.component.html
@@ -36,14 +36,19 @@
                         Watch It Here
                     </h1>
                     <div class="cards-list pt-4">
-                        <div class="card">
+                        <div
+                            class="card"
+                            *ngFor="let item of providers; let i = index"
+                        >
                             <div class="card-img">
                                 <img
                                     class="p-3"
-                                    src="https://iconape.com/wp-content/png_logo_vector/google-play-movies-tv.png"
+                                    src=" '../../assets/'+'movies pic' "
                                 />
                             </div>
-                            <div class="card_title"></div>
+                            <div class="card_title title-white">
+                                {{ getPrice(i) }}
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/web/src/app/film/film.component.ts b/src/web/src/app/film/film.component.ts
index 7d2f6cc..6dac982 100644
--- a/src/web/src/app/film/film.component.ts
+++ b/src/web/src/app/film/film.component.ts
@@ -11,12 +11,13 @@ import { ScrapeService } from '../scrape.service';
     styleUrls: ['./film.component.css'],
 })
 export class FilmComponent implements OnInit {
-    providers = ['Netflix'];
+    providers;
     model: any;
     loading: boolean = true;
     img: string;
     type: string;
     id: string;
+    prices;
     constructor(
         private route: ActivatedRoute,
         private service: MovieTVService,
@@ -26,33 +27,21 @@ export class FilmComponent implements OnInit {
         this.route.paramMap.subscribe((x) => {
             this.type = x.get('type');
             this.id = x.get('id');
-            //Start Scraping and loading the spinner
-
-            //this.data.getUsers().subscribe((data) => {
-            // this.users = data;
-            //});
-            ///
         });
         this.service.searchById(this.type, +this.id).subscribe((x: any) => {
+            let a;
             this.model = x;
-            console.log(this.model);
-        });
-        this.scraper
-            .performCheck(this.id, this.model, this.type)
-            .subscribe((x) => {
+            if (this.type === 'tv') {
+                a = this.model.name;
+            } else {
+                a = this.model.original_title;
+            }
+            this.scraper.performCheck(this.id, a, this.type).subscribe((x) => {
+                this.providers = x[0];
+                this.prices = x[1];
                 this.loading = false;
             });
-        //
-        //Get Providers List
-        /*this.service
-            .getProviderList(this.model.media_type, this.model.id)
-            .pipe(
-                map((x: any) => {
-                    x.results.US.flatrate;
-                })
-            )
-            .subscribe((x) => (this.model.watch_providers = x));
-        console.log(this.model.watch_providers);*/
+        });
     }
 
     getImage() {
@@ -60,4 +49,7 @@ export class FilmComponent implements OnInit {
             ? 'https://image.tmdb.org/t/p/original' + this.model.poster_path
             : '';
     }
+    getPrice(i: number) {
+        return this.prices[i];
+    }
 }
diff --git a/src/web/src/app/home/home.component.html b/src/web/src/app/home/home.component.html
index 7e59fe0..88dd292 100644
--- a/src/web/src/app/home/home.component.html
+++ b/src/web/src/app/home/home.component.html
@@ -2,7 +2,10 @@
     <div class="row h-100">
         <div class="offset-lg-1 offset-xs-2 mt-5 col-lg-10 col-xs-8">
             <app-search-bar></app-search-bar>
-            <img src="../../assets/movies.svg" class="cover-img img-fluid" />
+            <img
+                src="../../assets/movies pic.svg"
+                class="cover-img img-fluid"
+            />
         </div>
     </div>
 </div>
diff --git a/src/web/src/app/scrape.service.ts b/src/web/src/app/scrape.service.ts
index 85eed58..fa25601 100644
--- a/src/web/src/app/scrape.service.ts
+++ b/src/web/src/app/scrape.service.ts
@@ -10,7 +10,7 @@ export class ScrapeService {
     constructor(private service: HttpClient) {}
 
     performCheck(id, query, type) {
-        return this.service.get(this.apiURL, {
+        return this.service.get(this.apiURL + 'performCheck', {
             params: { id: id, query: query, type: type },
         });
     }
diff --git a/src/web/src/assets/movies pic.svg b/src/web/src/assets/movies pic.svg
new file mode 100644
index 0000000..0f5cc91
--- /dev/null
+++ b/src/web/src/assets/movies pic.svg	
@@ -0,0 +1 @@
+<svg id="f89af28b-111d-4872-814f-cbbc169855b4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="867.10818" height="500.05662" viewBox="0 0 867.10818 500.05662"><defs><clipPath id="a1708186-1525-433e-878d-7c35f03ac629" transform="translate(-166.44591 -199.97169)"><path d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" fill="none"/></clipPath><linearGradient id="feb2277d-7772-4d61-b1af-dc7db61f73e8" x1="916.58831" y1="601.91813" x2="916.58831" y2="667.79812" gradientTransform="matrix(1, 0, 0, -1, -166.44591, 702.02831)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient></defs><title>movie_night</title><path d="M14.95531,192.03591H300.15287a14,14,0,0,1,14,14v22.23774a0,0,0,0,1,0,0H.95533a0,0,0,0,1,0,0V206.0359A14,14,0,0,1,14.95531,192.03591Z" fill="#3f3d56"/><path d="M461.18569,389.41919a12.84166,12.84166,0,0,0-4.13933.70477,7.75132,7.75132,0,0,0-15.27374,1.88364c0,.03871.00964.07457.01043.11312a13.30859,13.30859,0,0,0-2.85556.59165,7.794,7.794,0,0,0-3.83869-4.94648,12.98613,12.98613,0,0,0,5.60148-6.13088c6.33278-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.21489-10.35364-11.64784-10.35364a12.84177,12.84177,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.30949.21533-.59812.4572-.88739.69781a7.34987,7.34987,0,0,0-5.2931-1.76183,12.89142,12.89142,0,0,0-25.06384,4.01374,13.24765,13.24765,0,0,0-3.05478.60918,7.76417,7.76417,0,0,0-.44646-1.27745,9.72676,9.72676,0,0,0,3.2916-7.19254c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.842,12.842,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90859,12.90859,0,0,0-5.53212,10.01508c-.10949.09732-.23493.176-.33872.27932a9.2223,9.2223,0,0,0,.301-2.26344c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90822,12.90822,0,0,0,0,21.23873,7.05915,7.05915,0,0,0,0,4.64536,13.06918,13.06918,0,0,0-3.3115,3.34373,7.71691,7.71691,0,0,0-15.12049,1.30685,12.33158,12.33158,0,0,0-3.32777-1.34445A13.01113,13.01113,0,0,0,306.093,381.635c6.33279-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.2149-10.35364-11.64785-10.35364a12.84171,12.84171,0,0,0-4.13933.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.166.11549-.31565.25135-.476.37426-.4038-.0376-.79639-.10853-1.21126-.10853a12.842,12.842,0,0,0-4.13934.70476c-.049-.19526-.12954-.37647-.19274-.56558a7.6278,7.6278,0,0,0-7.92637-9.23416,12.92962,12.92962,0,1,0-20.32085,14.40561,13.39192,13.39192,0,0,0-2.62095.57095A7.69523,7.69523,0,0,0,237.648,367.8419a12.10286,12.10286,0,0,0-9.41916-4.3068,12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.91366,12.91366,0,0,0-5.56988,10.61936c0,.04013.01153.07694.01185.11691a10.73636,10.73636,0,0,0-5.4454.58786,7.73968,7.73968,0,1,0-14.88066,4.20632,12.889,12.889,0,0,0,10.1868,23.21749,12.89592,12.89592,0,0,0,24.36729,3.31039,12.8992,12.8992,0,0,0,23.50391-.397,12.87909,12.87909,0,0,0,4.45736-.86291,12.8957,12.8957,0,0,0,24.01514.86291,12.66149,12.66149,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,13.04794,13.04794,0,0,0,2.06959-.2166,12.92926,12.92926,0,0,0,23.81451.2166,12.88231,12.88231,0,0,0,3.0077-.44362,12.61784,12.61784,0,0,0,14.01507-5.35218,12.93614,12.93614,0,0,0,24.39178,8.38421,12.66152,12.66152,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,12.66149,12.66149,0,0,0,5.429-1.34334,12.8073,12.8073,0,0,0,19.18652,3.71879,12.887,12.887,0,0,0,23.0527,5.3457,12.85359,12.85359,0,0,0,19.63046-5.13274c6.33279-.103,11.436-4.68107,11.436-10.33468C472.83354,394.0546,467.61864,389.41919,461.18569,389.41919ZM229.8384,384.07712c-.01359.06241-.02307.12639-.03587.18927-.09447-.00348-.184-.024-.27947-.024a7.70783,7.70783,0,0,0-1.15328.11628c.021-.04661.05055-.08831.07093-.13523A12.88755,12.88755,0,0,0,229.8384,384.07712Zm108.14113-4.3068c-.03776-.15072-.10238-.28927-.14867-.43635a13.00467,13.00467,0,0,0,4.49986-5.46419,12.1173,12.1173,0,0,0,8.9994-4.075,7.78885,7.78885,0,0,0-.15182,1.50559,7.68,7.68,0,0,0,.39306,2.32268,12.98976,12.98976,0,0,0-4.81156,6.30782,12.70178,12.70178,0,0,0-8.78027-.16051Zm77.52384.96513c-.00522-.15862.01453-.32213.0041-.47964a7.72736,7.72736,0,0,0,.98646-.067,12.82884,12.82884,0,0,0,2.46581,4.56779c-.2444.06857-.5016.1098-.73952.19053A7.80593,7.80593,0,0,0,415.50337,380.73545Z" transform="translate(-166.44591 -199.97169)" fill="#f9a825"/><path d="M193.47491,404.94965a27.02565,27.02565,0,0,0-26.98872,28.47756l17.52738,241.02034a27.02449,27.02449,0,0,0,26.98871,25.58076H436.99772a27.02449,27.02449,0,0,0,26.98871-25.58076l17.52738-241.02034a27.02565,27.02565,0,0,0-26.98872-28.47756Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><rect x="39.78147" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="83.78442" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="127.78738" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="171.79034" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="215.7933" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="259.79626" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><path id="a971f948-84ae-4583-a462-a09341ab7c50" data-name="2572ddba-42e8-4159-9036-35cbff74dfb7" d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><g clip-path="url(#a1708186-1525-433e-878d-7c35f03ac629)"><rect x="497.66242" y="49.59661" width="19.44" height="61.56999" fill="#6c63ff"/><rect x="466.88239" y="62.55662" width="19.44" height="61.57001" fill="#6c63ff"/><polygon points="456.342 115.217 442.572 119.267 436.902 53.647 456.342 53.647 456.342 115.217" fill="#6c63ff"/><rect x="406.1124" y="122.50663" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.12238" y="149.24662" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.1124" y="175.98661" width="61.57001" height="19.44" fill="#6c63ff"/></g><polygon points="497.662 500.057 378.572 500.057 349.402 208.387 523.592 208.387 497.662 500.057" fill="#3f3d56"/><rect x="337.25239" y="203.52662" width="199.29999" height="19.44" fill="#3f3d56"/><circle cx="739.31239" cy="67.17019" r="66.97999" fill="#3ad29f"/><polygon points="783.662 67.17 716.622 100.11 716.622 67.17 716.622 34.23 783.662 67.17" fill="url(#feb2277d-7772-4d61-b1af-dc7db61f73e8)"/><polygon points="779.632 67.17 720.642 96.16 720.642 67.17 720.642 38.18 779.632 67.17" fill="#fff"/><path d="M844.2583,274.83188a67,67,0,0,1,118.62-42.66,67,67,0,1,0-108.77,77.64A66.65991,66.65991,0,0,1,844.2583,274.83188Z" transform="translate(-166.44591 -199.97169)" fill="#fff" opacity="0.2" style="isolation:isolate"/><path d="M893.994,614.78026a2.94921,2.94921,0,0,0-2.94653,2.944v79.36a2.94921,2.94921,0,0,0,2.94653,2.944h136.61352a2.94921,2.94921,0,0,0,2.94653-2.944v-79.36a2.94921,2.94921,0,0,0-2.94653-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M909.26082,621.77888a5.49446,5.49446,0,0,0-5.48809,5.48809v60.27462a5.49447,5.49447,0,0,0,5.48809,5.4881h106.08a5.49447,5.49447,0,0,0,5.4881-5.4881V627.267a5.49447,5.49447,0,0,0-5.4881-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#ff6584"/><rect x="657.92175" y="440.94978" width="71.16175" height="16.48258" fill="#3f3d56"/><path d="M700.53937,614.78026a2.94869,2.94869,0,0,0-2.944,2.944v79.36a2.94869,2.94869,0,0,0,2.944,2.944h136.616a2.94869,2.94869,0,0,0,2.944-2.944v-79.36a2.94869,2.94869,0,0,0-2.944-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M715.80864,621.77888a5.495,5.495,0,0,0-5.49058,5.48809v60.27462a5.495,5.495,0,0,0,5.49058,5.4881H821.88611a5.495,5.495,0,0,0,5.49057-5.4881V627.267a5.495,5.495,0,0,0-5.49057-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#6c63ff"/></svg>
\ No newline at end of file
diff --git a/src/web/src/assets/movies.svg b/src/web/src/assets/movies.svg
deleted file mode 100644
index 0f5cc91..0000000
--- a/src/web/src/assets/movies.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="f89af28b-111d-4872-814f-cbbc169855b4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="867.10818" height="500.05662" viewBox="0 0 867.10818 500.05662"><defs><clipPath id="a1708186-1525-433e-878d-7c35f03ac629" transform="translate(-166.44591 -199.97169)"><path d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" fill="none"/></clipPath><linearGradient id="feb2277d-7772-4d61-b1af-dc7db61f73e8" x1="916.58831" y1="601.91813" x2="916.58831" y2="667.79812" gradientTransform="matrix(1, 0, 0, -1, -166.44591, 702.02831)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient></defs><title>movie_night</title><path d="M14.95531,192.03591H300.15287a14,14,0,0,1,14,14v22.23774a0,0,0,0,1,0,0H.95533a0,0,0,0,1,0,0V206.0359A14,14,0,0,1,14.95531,192.03591Z" fill="#3f3d56"/><path d="M461.18569,389.41919a12.84166,12.84166,0,0,0-4.13933.70477,7.75132,7.75132,0,0,0-15.27374,1.88364c0,.03871.00964.07457.01043.11312a13.30859,13.30859,0,0,0-2.85556.59165,7.794,7.794,0,0,0-3.83869-4.94648,12.98613,12.98613,0,0,0,5.60148-6.13088c6.33278-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.21489-10.35364-11.64784-10.35364a12.84177,12.84177,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.30949.21533-.59812.4572-.88739.69781a7.34987,7.34987,0,0,0-5.2931-1.76183,12.89142,12.89142,0,0,0-25.06384,4.01374,13.24765,13.24765,0,0,0-3.05478.60918,7.76417,7.76417,0,0,0-.44646-1.27745,9.72676,9.72676,0,0,0,3.2916-7.19254c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.842,12.842,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90859,12.90859,0,0,0-5.53212,10.01508c-.10949.09732-.23493.176-.33872.27932a9.2223,9.2223,0,0,0,.301-2.26344c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90822,12.90822,0,0,0,0,21.23873,7.05915,7.05915,0,0,0,0,4.64536,13.06918,13.06918,0,0,0-3.3115,3.34373,7.71691,7.71691,0,0,0-15.12049,1.30685,12.33158,12.33158,0,0,0-3.32777-1.34445A13.01113,13.01113,0,0,0,306.093,381.635c6.33279-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.2149-10.35364-11.64785-10.35364a12.84171,12.84171,0,0,0-4.13933.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.166.11549-.31565.25135-.476.37426-.4038-.0376-.79639-.10853-1.21126-.10853a12.842,12.842,0,0,0-4.13934.70476c-.049-.19526-.12954-.37647-.19274-.56558a7.6278,7.6278,0,0,0-7.92637-9.23416,12.92962,12.92962,0,1,0-20.32085,14.40561,13.39192,13.39192,0,0,0-2.62095.57095A7.69523,7.69523,0,0,0,237.648,367.8419a12.10286,12.10286,0,0,0-9.41916-4.3068,12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.91366,12.91366,0,0,0-5.56988,10.61936c0,.04013.01153.07694.01185.11691a10.73636,10.73636,0,0,0-5.4454.58786,7.73968,7.73968,0,1,0-14.88066,4.20632,12.889,12.889,0,0,0,10.1868,23.21749,12.89592,12.89592,0,0,0,24.36729,3.31039,12.8992,12.8992,0,0,0,23.50391-.397,12.87909,12.87909,0,0,0,4.45736-.86291,12.8957,12.8957,0,0,0,24.01514.86291,12.66149,12.66149,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,13.04794,13.04794,0,0,0,2.06959-.2166,12.92926,12.92926,0,0,0,23.81451.2166,12.88231,12.88231,0,0,0,3.0077-.44362,12.61784,12.61784,0,0,0,14.01507-5.35218,12.93614,12.93614,0,0,0,24.39178,8.38421,12.66152,12.66152,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,12.66149,12.66149,0,0,0,5.429-1.34334,12.8073,12.8073,0,0,0,19.18652,3.71879,12.887,12.887,0,0,0,23.0527,5.3457,12.85359,12.85359,0,0,0,19.63046-5.13274c6.33279-.103,11.436-4.68107,11.436-10.33468C472.83354,394.0546,467.61864,389.41919,461.18569,389.41919ZM229.8384,384.07712c-.01359.06241-.02307.12639-.03587.18927-.09447-.00348-.184-.024-.27947-.024a7.70783,7.70783,0,0,0-1.15328.11628c.021-.04661.05055-.08831.07093-.13523A12.88755,12.88755,0,0,0,229.8384,384.07712Zm108.14113-4.3068c-.03776-.15072-.10238-.28927-.14867-.43635a13.00467,13.00467,0,0,0,4.49986-5.46419,12.1173,12.1173,0,0,0,8.9994-4.075,7.78885,7.78885,0,0,0-.15182,1.50559,7.68,7.68,0,0,0,.39306,2.32268,12.98976,12.98976,0,0,0-4.81156,6.30782,12.70178,12.70178,0,0,0-8.78027-.16051Zm77.52384.96513c-.00522-.15862.01453-.32213.0041-.47964a7.72736,7.72736,0,0,0,.98646-.067,12.82884,12.82884,0,0,0,2.46581,4.56779c-.2444.06857-.5016.1098-.73952.19053A7.80593,7.80593,0,0,0,415.50337,380.73545Z" transform="translate(-166.44591 -199.97169)" fill="#f9a825"/><path d="M193.47491,404.94965a27.02565,27.02565,0,0,0-26.98872,28.47756l17.52738,241.02034a27.02449,27.02449,0,0,0,26.98871,25.58076H436.99772a27.02449,27.02449,0,0,0,26.98871-25.58076l17.52738-241.02034a27.02565,27.02565,0,0,0-26.98872-28.47756Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><rect x="39.78147" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="83.78442" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="127.78738" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="171.79034" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="215.7933" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="259.79626" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><path id="a971f948-84ae-4583-a462-a09341ab7c50" data-name="2572ddba-42e8-4159-9036-35cbff74dfb7" d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><g clip-path="url(#a1708186-1525-433e-878d-7c35f03ac629)"><rect x="497.66242" y="49.59661" width="19.44" height="61.56999" fill="#6c63ff"/><rect x="466.88239" y="62.55662" width="19.44" height="61.57001" fill="#6c63ff"/><polygon points="456.342 115.217 442.572 119.267 436.902 53.647 456.342 53.647 456.342 115.217" fill="#6c63ff"/><rect x="406.1124" y="122.50663" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.12238" y="149.24662" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.1124" y="175.98661" width="61.57001" height="19.44" fill="#6c63ff"/></g><polygon points="497.662 500.057 378.572 500.057 349.402 208.387 523.592 208.387 497.662 500.057" fill="#3f3d56"/><rect x="337.25239" y="203.52662" width="199.29999" height="19.44" fill="#3f3d56"/><circle cx="739.31239" cy="67.17019" r="66.97999" fill="#3ad29f"/><polygon points="783.662 67.17 716.622 100.11 716.622 67.17 716.622 34.23 783.662 67.17" fill="url(#feb2277d-7772-4d61-b1af-dc7db61f73e8)"/><polygon points="779.632 67.17 720.642 96.16 720.642 67.17 720.642 38.18 779.632 67.17" fill="#fff"/><path d="M844.2583,274.83188a67,67,0,0,1,118.62-42.66,67,67,0,1,0-108.77,77.64A66.65991,66.65991,0,0,1,844.2583,274.83188Z" transform="translate(-166.44591 -199.97169)" fill="#fff" opacity="0.2" style="isolation:isolate"/><path d="M893.994,614.78026a2.94921,2.94921,0,0,0-2.94653,2.944v79.36a2.94921,2.94921,0,0,0,2.94653,2.944h136.61352a2.94921,2.94921,0,0,0,2.94653-2.944v-79.36a2.94921,2.94921,0,0,0-2.94653-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M909.26082,621.77888a5.49446,5.49446,0,0,0-5.48809,5.48809v60.27462a5.49447,5.49447,0,0,0,5.48809,5.4881h106.08a5.49447,5.49447,0,0,0,5.4881-5.4881V627.267a5.49447,5.49447,0,0,0-5.4881-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#ff6584"/><rect x="657.92175" y="440.94978" width="71.16175" height="16.48258" fill="#3f3d56"/><path d="M700.53937,614.78026a2.94869,2.94869,0,0,0-2.944,2.944v79.36a2.94869,2.94869,0,0,0,2.944,2.944h136.616a2.94869,2.94869,0,0,0,2.944-2.944v-79.36a2.94869,2.94869,0,0,0-2.944-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M715.80864,621.77888a5.495,5.495,0,0,0-5.49058,5.48809v60.27462a5.495,5.495,0,0,0,5.49058,5.4881H821.88611a5.495,5.495,0,0,0,5.49057-5.4881V627.267a5.495,5.495,0,0,0-5.49057-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#6c63ff"/></svg>
\ No newline at end of file
diff --git a/src/web/src/styles.css b/src/web/src/styles.css
index 8c0c651..b1664ee 100644
--- a/src/web/src/styles.css
+++ b/src/web/src/styles.css
@@ -97,6 +97,7 @@ body {
     height: 120px;
     box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3);
     transition: 0.3s;
+    margin: 20px auto;
 }
 
 .card .card-img {
@@ -117,8 +118,7 @@ body {
     border-radius: 0px 0px 40px 40px;
     font-family: sans-serif;
     font-weight: bold;
-    font-size: 30px;
-    margin-top: -80px;
+    font-size: 20px;
     height: 40px;
 }
 
@@ -131,10 +131,6 @@ body {
     color: white;
 }
 
-.title-black {
-    color: black;
-}
-
 @media all and (max-width: 500px) {
     .card-list {
         /* On small screens, we are no longer using row direction but column */
-- 
cgit v1.2.3