about page redesign, add methodological-approach page, update submodules

This commit is contained in:
Alex Martzios 2022-10-24 13:18:27 +03:00
parent 90ab38e76b
commit 94b6c6f387
11 changed files with 455 additions and 210 deletions

View File

@ -0,0 +1,36 @@
import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {isDevelopmentGuard} from "../openaireLibrary/error/isDevelopmentGuard.guard";
import {HowItWorksComponent} from "./how-it-works.component";
import {FaqsComponent} from "./faqs.component";
import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
import {SliderTabsModule} from "../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
@NgModule({
declarations: [HowItWorksComponent, FaqsComponent],
imports: [CommonModule, RouterModule.forChild([
{
path: '',
redirectTo: 'how-it-works',
canDeactivate: [PreviousRouteRecorder]
},
{
path: 'how-it-works',
component: HowItWorksComponent,
canLoad: [isDevelopmentGuard]
},
{
path: 'faq',
component: FaqsComponent,
canLoad: [isDevelopmentGuard]
},
]), BreadcrumbsModule, SliderTabsModule],
exports: [HowItWorksComponent, FaqsComponent],
providers: [PreviousRouteRecorder, PiwikService]
})
export class AboutModule {
}

View File

@ -0,0 +1,318 @@
import {ChangeDetectorRef, Component} from "@angular/core";
import {Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {Subscriber} from "rxjs";
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../environments/environment";
@Component({
selector: 'how-it-works',
template: `
<div class="uk-position-relative">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk-scrollspy-class>
<h1 class="uk-margin-medium-top" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large" style="max-width: 550px;" uk-scrollspy-class>
Join the OpenAIRE Monitor service and we will create for you a dashboard to track and understand and position your organization's research activities and their impact, discover and evaluate Open Science trends for your organization and make data-driven decisions. Here's how it works.
</div>
<div class="uk-margin-medium-top uk-margin-large-bottom" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
</div>
</div>
</div>
<div class="uk-padding"></div>
<img class="uk-visible@m uk-position-bottom-right" src="assets/monitor-assets/about/hero.svg" loading="lazy">
</div>
<div class="uk-container uk-section uk-section-small uk-margin-large-bottom">
<div class="uk-width-1-1">
<div class="uk-sticky uk-blur-background uk-visible@m" uk-sticky [attr.offset]="offset">
<slider-tabs flexPosition="center" customClass="uk-text-large">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section" [tabId]="section"></slider-tab>
</slider-tabs>
</div>
<div class="uk-sticky uk-blur-background uk-hidden@m" uk-sticky>
<slider-tabs flexPosition="center" customClass="uk-text-large">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section" [tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<ul class="uk-switcher">
<li>
<!-- FUNDER -->
<div>
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">funder?</span></h2>
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match="target: .uk-card">
<div class="uk-flex uk-flex-column uk-flex-middle">
<span class="uk-h3 uk-margin-medium-bottom">You</span>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You provide Information about your funded projects and <a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">join OpenAIRE</a>.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You validate the results and approve for them to be shown on the <a href="https://explore.openaire.eu" target="_blank">Explore</a> portal.</p>
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you see.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of interest to you and the ones you want to publish, to keep private, or to share just with colleagues.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle">
<span class="uk-h3 uk-margin-medium-bottom">We</span>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">We ingest your project metadata and mine the <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the funded research activities.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present to you your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</div>
</div>
</li>
<li>
<!-- RESEARCH INITIATIVE -->
<div>
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">research initiative?</span></h2>
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match="target: .uk-card">
<div class="uk-flex uk-flex-column uk-flex-middle">
<span class="uk-h3 uk-margin-medium-bottom">You</span>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having a research initiative dashboard.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You configure the criteria to identify the research products that you want to be accounted for.</p>
<p>You use the administration dashboard we created for you. If this is not enough, you give us input for the implementation of a customised full-text mining algorithm.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of interest to you and the ones you want to publish, to keep private, or to share just with colleagues.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle">
<span class="uk-h3 uk-margin-medium-bottom">We</span>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">We set up an administration dashboard that you can use to specify which research products of the <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> are relevant for you.</p>
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present to you your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</div>
</div>
</li>
<li>
<!-- RESEARCH INSTITUTION -->
<div>
<h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">research institution?</span></h2>
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match="target: .uk-card">
<div class="uk-flex uk-flex-column uk-flex-middle">
<span class="uk-h3 uk-margin-medium-bottom">You</span>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having an institutional dashboard for your institution.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree on.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You validate and approve the results.</p>
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you see.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of interest to you and the ones you want to publish, to keep private, or to share just with colleagues.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle">
<span class="uk-h3 uk-margin-medium-bottom">We</span>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Starting from the <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> we check for existing data for your institution.</p>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the institutions research activities.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present to you your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-width-1-1">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
`
})
export class HowItWorksComponent {
public url: string = null;
public pageTitle: string = "OpenAIRE - Monitor | How it works";
public description: string = "OpenAIRE - Monitor | How it works";
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About - How it works'}];
public properties: EnvProperties = properties;
public sections: string[] = ['Funders', 'Research Initiatives', 'Research Institutions'];
public offset: number;
subscriptions = [];
constructor(
private _router: Router,
private _meta: Meta,
private _title: Title,
private seoService: SEOService,
private _piwikService: PiwikService,
private helper: HelperService,
private cdr: ChangeDetectorRef) {
}
ngOnInit() {
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
}
this.url = this.properties.domain + this.properties.baseLink + this._router.url;
this.seoService.createLinkForCanonicalURL(this.url);
this.updateUrl(this.url);
this.updateTitle(this.pageTitle);
this.updateDescription(this.description);
}
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.cdr.detectChanges();
}
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
private updateDescription(description: string) {
this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'");
}
private updateTitle(title: string) {
var _title = ((title.length > 50) ? title.substring(0, 50) : title);
this._title.setTitle(_title);
this._meta.updateTag({content: _title}, "property='og:title'");
}
private updateUrl(url: string) {
this._meta.updateTag({content: url}, "property='og:url'");
}
}

View File

@ -30,11 +30,6 @@ const routes: Routes = [
path: 'get-started',
loadChildren: () => import('./get-started/get-started.module').then(m => m.GetStartedModule)
},
{
path: 'faqs',
loadChildren: () => import('./faqs/faqs.module').then(m => m.FaqsModule),
canLoad: [isDevelopmentGuard]
},
{
path: 'my-dashboards',
loadChildren: () => import('./my-stakeholders/my-stakeholders.module').then(m => m.MyStakeholdersModule)},

View File

@ -1,14 +0,0 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {FaqsComponent} from "./faqs.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: FaqsComponent, canDeactivate: [PreviousRouteRecorder] }
])
]
})
export class FaqRoutingModule { }

View File

@ -1,30 +0,0 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {FaqsComponent} from "./faqs.component";
import {FaqRoutingModule} from "./faq-routing.module";
import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
import {BreadcrumbsModule} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.module';
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
@NgModule({
imports: [
CommonModule, RouterModule, FaqRoutingModule, HelperModule,
Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule, IconsModule
],
declarations: [
FaqsComponent
],
exports: [
FaqsComponent
],
providers:[
PreviousRouteRecorder, PiwikService
]
})
export class FaqsModule { }

@ -1 +1 @@
Subproject commit f1618b92e8739b4845955c9c4f02a2e1fc31242a
Subproject commit 256c94946f9cca08b0f160db806c6dbc286e91ec

@ -1 +1 @@
Subproject commit 936fac297322fa252af930cab3c0e69efe57c1a5
Subproject commit fc2e0b805ae3011f0f181983b27905908e528083

View File

@ -0,0 +1,99 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="632.213" height="519.857" viewBox="0 0 632.213 519.857">
<defs>
<filter id="dark" x="312.065" y="348.286" width="171.572" height="171.572" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-2" x="119.861" y="0" width="171.572" height="171.572" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-2"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-3" x="23.937" y="225.984" width="171.572" height="171.572" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-3"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-4" x="266.709" y="50.667" width="171.572" height="171.572" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-4"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-4"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-5" x="407.988" y="122.304" width="171.572" height="171.572" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-5"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-5"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-6" x="166.589" y="286.537" width="171.572" height="171.572" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-6"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-6"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_14281" data-name="Group 14281" transform="matrix(0.985, 0.174, -0.174, 0.985, -733.479, -286.153)">
<g id="Group_12983" data-name="Group 12983" transform="translate(877.932 158.215) rotate(13)">
<path id="Path_104359" data-name="Path 104359" d="M19.757,27.133S166.609,0,290.143,0s305.85,5.749,277.5,40.262S204.069,143.135,204.069,143.135-75.4,210.955,19.757,242.683s547.888,0,547.888,0" transform="translate(0 0)" fill="none" stroke="#dedede" stroke-width="5"/>
<g id="Group_12980" data-name="Group 12980" transform="translate(375.294 219.485)">
<g id="Group_12847" data-name="Group 12847" transform="translate(0 0)">
<g transform="matrix(0.92, -0.39, 0.39, 0.92, -479.34, -199.34)" filter="url(#dark)">
<rect id="dark-7" data-name="dark" width="73.649" height="73.649" rx="36.825" transform="matrix(0.92, 0.39, -0.39, 0.92, 363.34, 370.79)" fill="#f9f9f9"/>
</g>
<rect id="neutral" width="73.649" height="73.649" rx="36.825" fill="#f9f9f9"/>
</g>
</g>
</g>
<g id="Group_12979" data-name="Group 12979" transform="translate(944.471 146.878) rotate(13)">
<g id="Group_12847-2" data-name="Group 12847" transform="translate(0 0)">
<g transform="matrix(0.92, -0.39, 0.39, 0.92, -166.33, 46.16)" filter="url(#dark-2)">
<rect id="dark-8" data-name="dark" width="73.649" height="73.649" rx="36.825" transform="matrix(0.92, 0.39, -0.39, 0.92, 171.14, 22.5)" fill="#f9f9f9"/>
</g>
<rect id="neutral-2" data-name="neutral" width="73.649" height="73.649" rx="36.825" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12982" data-name="Group 12982" transform="translate(889.246 386.086) rotate(13)">
<g id="Group_12847-3" data-name="Group 12847" transform="translate(0 0)">
<g transform="matrix(0.92, -0.39, 0.39, 0.92, -166.33, -199.34)" filter="url(#dark-3)">
<rect id="dark-9" data-name="dark" width="73.649" height="73.649" rx="36.825" transform="matrix(0.92, 0.39, -0.39, 0.92, 75.21, 248.48)" fill="#f9f9f9"/>
</g>
<rect id="neutral-3" data-name="neutral" width="73.649" height="73.649" rx="36.825" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12977" data-name="Group 12977" transform="translate(1097.886 171.275) rotate(13)">
<g id="Group_12847-4" data-name="Group 12847" transform="translate(0 0)">
<g transform="matrix(0.92, -0.39, 0.39, 0.92, -321.3, 56.9)" filter="url(#dark-4)">
<rect id="dark-10" data-name="dark" width="73.649" height="73.649" rx="36.825" transform="matrix(0.92, 0.39, -0.39, 0.92, 317.99, 73.17)" fill="#f9f9f9"/>
</g>
<rect id="neutral-4" data-name="neutral" width="73.649" height="73.649" rx="36.825" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12978" data-name="Group 12978" transform="translate(1249.459 217.291) rotate(13)">
<g id="Group_12847-5" data-name="Group 12847" transform="translate(0 0)">
<g transform="matrix(0.92, -0.39, 0.39, 0.92, -479.34, 46.16)" filter="url(#dark-5)">
<rect id="dark-11" data-name="dark" width="73.649" height="73.649" rx="36.825" transform="matrix(0.92, 0.39, -0.39, 0.92, 459.27, 144.8)" fill="#f9f9f9"/>
</g>
<rect id="neutral-5" data-name="neutral" width="73.649" height="73.649" rx="36.825" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12981" data-name="Group 12981" transform="translate(1040.246 420.948) rotate(13)">
<g id="Group_12847-6" data-name="Group 12847" transform="translate(0 0)">
<g transform="matrix(0.92, -0.39, 0.39, 0.92, -321.3, -199.34)" filter="url(#dark-6)">
<rect id="dark-12" data-name="dark" width="73.649" height="73.649" rx="36.825" transform="matrix(0.92, 0.39, -0.39, 0.92, 217.87, 309.04)" fill="#f9f9f9"/>
</g>
<rect id="neutral-6" data-name="neutral" width="73.649" height="73.649" rx="36.825" fill="#f9f9f9"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@ -1,159 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="418.875" height="364.357" viewBox="0 0 418.875 364.357">
<defs>
<filter id="dark" x="228.772" y="231.79" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="light" x="198.772" y="201.79" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="-15" dy="-15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-2"/>
<feFlood flood-color="#fff"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-2" x="65.992" y="30" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-3"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="light-2" x="35.992" y="0" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="-15" dy="-15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-4"/>
<feFlood flood-color="#fff"/>
<feComposite operator="in" in2="blur-4"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-3" x="30" y="185.9" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-5"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-5"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="light-3" x="0" y="155.9" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="-15" dy="-15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-6"/>
<feFlood flood-color="#fff"/>
<feComposite operator="in" in2="blur-6"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-4" x="165.979" y="45.9" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-7"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-7"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="light-4" x="135.979" y="15.9" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="-15" dy="-15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-8"/>
<feFlood flood-color="#fff"/>
<feComposite operator="in" in2="blur-8"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-5" x="264.764" y="75.891" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-9"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-9"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="light-5" x="234.764" y="45.891" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="-15" dy="-15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-10"/>
<feFlood flood-color="#fff"/>
<feComposite operator="in" in2="blur-10"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="dark-6" x="128.412" y="208.621" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="15" dy="15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-11"/>
<feFlood flood-opacity="0.102"/>
<feComposite operator="in" in2="blur-11"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="light-6" x="98.412" y="178.621" width="132.567" height="132.567" filterUnits="userSpaceOnUse">
<feOffset dx="-15" dy="-15" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="12.5" result="blur-12"/>
<feFlood flood-color="#fff"/>
<feComposite operator="in" in2="blur-12"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_13415" data-name="Group 13415" transform="translate(-799.043 -94.379)">
<g id="Group_12983" data-name="Group 12983" transform="translate(86.549 -222.191) rotate(13)">
<path id="Path_104359" data-name="Path 104359" d="M-18163.937-17731.363s95.709-17.684,176.221-17.684,199.334,3.746,180.857,26.24-236.955,67.047-236.955,67.047-182.137,44.2-120.123,64.879,357.078,0,357.078,0" transform="translate(19010.223 17943)" fill="none" stroke="#dedede" stroke-width="1"/>
<g id="Group_12980" data-name="Group 12980" transform="translate(931.002 -818)">
<g id="Group_12847" data-name="Group 12847" transform="translate(147 1155)">
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -312.56, -188.82)" filter="url(#dark)">
<rect id="dark-7" data-name="dark" width="48" height="48" rx="24" transform="translate(262.07 254.29) rotate(13)" fill="#f9f9f9"/>
</g>
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -312.56, -188.82)" filter="url(#light)">
<rect id="light-7" data-name="light" width="48" height="48" rx="24" transform="translate(262.07 254.29) rotate(13)" fill="#f9f9f9"/>
</g>
<rect id="neutral" width="48" height="48" rx="24" transform="translate(-0.001 -0.001)" fill="#f9f9f9"/>
</g>
</g>
</g>
<g id="Group_12979" data-name="Group 12979" transform="translate(1014.92 -1011.586) rotate(13)">
<g id="Group_12847-2" data-name="Group 12847" transform="translate(147 1155)">
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -108.56, -28.82)" filter="url(#dark-2)">
<rect id="dark-8" data-name="dark" width="48" height="48" rx="24" transform="translate(99.29 52.5) rotate(13)" fill="#f9f9f9"/>
</g>
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -108.56, -28.82)" filter="url(#light-2)">
<rect id="light-8" data-name="light" width="48" height="48" rx="24" transform="translate(99.29 52.5) rotate(13)" fill="#f9f9f9"/>
</g>
<rect id="neutral-2" data-name="neutral" width="48" height="48" rx="24" transform="translate(-0.001 -0.001)" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12982" data-name="Group 12982" transform="translate(978.928 -855.686) rotate(13)">
<g id="Group_12847-3" data-name="Group 12847" transform="translate(147 1155)">
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -108.56, -188.82)" filter="url(#dark-3)">
<rect id="dark-9" data-name="dark" width="48" height="48" rx="24" transform="translate(63.3 208.4) rotate(13)" fill="#f9f9f9"/>
</g>
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -108.56, -188.82)" filter="url(#light-3)">
<rect id="light-9" data-name="light" width="48" height="48" rx="24" transform="translate(63.3 208.4) rotate(13)" fill="#f9f9f9"/>
</g>
<rect id="neutral-3" data-name="neutral" width="48" height="48" rx="24" transform="translate(-0.001 -0.001)" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12977" data-name="Group 12977" transform="translate(1114.906 -995.686) rotate(13)">
<g id="Group_12847-4" data-name="Group 12847" transform="translate(147 1155)">
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -209.56, -21.82)" filter="url(#dark-4)">
<rect id="dark-10" data-name="dark" width="48" height="48" rx="24" transform="translate(199.28 68.4) rotate(13)" fill="#f9f9f9"/>
</g>
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -209.56, -21.82)" filter="url(#light-4)">
<rect id="light-10" data-name="light" width="48" height="48" rx="24" transform="translate(199.28 68.4) rotate(13)" fill="#f9f9f9"/>
</g>
<rect id="neutral-4" data-name="neutral" width="48" height="48" rx="24" transform="translate(-0.001 -0.001)" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12978" data-name="Group 12978" transform="translate(1213.691 -965.695) rotate(13)">
<g id="Group_12847-5" data-name="Group 12847" transform="translate(147 1155)">
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -312.56, -28.82)" filter="url(#dark-5)">
<rect id="dark-11" data-name="dark" width="48" height="48" rx="24" transform="translate(298.06 98.39) rotate(13)" fill="#f9f9f9"/>
</g>
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -312.56, -28.82)" filter="url(#light-5)">
<rect id="light-11" data-name="light" width="48" height="48" rx="24" transform="translate(298.06 98.39) rotate(13)" fill="#f9f9f9"/>
</g>
<rect id="neutral-5" data-name="neutral" width="48" height="48" rx="24" transform="translate(-0.001 -0.001)" fill="#f9f9f9"/>
</g>
</g>
<g id="Group_12981" data-name="Group 12981" transform="translate(1077.34 -832.965) rotate(13)">
<g id="Group_12847-6" data-name="Group 12847" transform="translate(147 1155)">
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -209.56, -188.82)" filter="url(#dark-6)">
<rect id="dark-12" data-name="dark" width="48" height="48" rx="24" transform="translate(161.71 231.12) rotate(13)" fill="#f9f9f9"/>
</g>
<g transform="matrix(0.97, -0.22, 0.22, 0.97, -209.56, -188.82)" filter="url(#light-6)">
<rect id="light-12" data-name="light" width="48" height="48" rx="24" transform="translate(161.71 231.12) rotate(13)" fill="#f9f9f9"/>
</g>
<rect id="neutral-6" data-name="neutral" width="48" height="48" rx="24" transform="translate(-0.001 -0.001)" fill="#f9f9f9"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 9.8 KiB