diff --git a/metager/lang/de/index.php b/metager/lang/de/index.php
index 5091418b23abb56eea780daf7d136fc5c55b05f8..f5bb2f0d9cdd31703eb72775b7b963a25d6d563c 100644
--- a/metager/lang/de/index.php
+++ b/metager/lang/de/index.php
@@ -1,6 +1,6 @@
<?php
return [
- 'plugin' => 'MetaGer installieren',
+ 'plugin' => 'Installieren',
'plugin-title' => 'MetaGer zu Ihrem Browser hinzufügen',
'key' => [
'placeholder' => 'Schlüssel für werbefreie Suche eingeben',
diff --git a/metager/lang/en/index.php b/metager/lang/en/index.php
index bdd4533f0bd0e0241dda900cddf028945eae13c9..aec728def374228a6f031d9698adf1fc36ae9240 100644
--- a/metager/lang/en/index.php
+++ b/metager/lang/en/index.php
@@ -6,7 +6,7 @@ return [
'fokus' => 'Skip to search focus selection',
],
'lang' => 'wwitch language',
- 'plugin' => 'Install MetaGer',
+ 'plugin' => 'Install',
'plugin-title' => 'Add MetaGer to your browser',
'key' => [
'placeholder' => 'Enter member key',
diff --git a/metager/public/img/tiles/heart.svg b/metager/public/img/tiles/heart.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c2aeb55c23c856336066c073cfc7bcecb87009ae
--- /dev/null
+++ b/metager/public/img/tiles/heart.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ id="svg10"
+ xml:space="preserve"
+ viewBox="0 0 176.29866 426.0522"
+ version="1.1"
+ height="80"
+ width="80"
+ sodipodi:docname="heart.svg"
+ inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"><sodipodi:namedview
+ id="namedview16"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ showgrid="false"
+ inkscape:zoom="13.724014"
+ inkscape:cx="37.379736"
+ inkscape:cy="28.67237"
+ inkscape:window-width="2560"
+ inkscape:window-height="1371"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg10" /><defs
+ id="defs14"><linearGradient
+ xlink:href="#linearGradient6206"
+ id="linearGradient6210"
+ gradientUnits="userSpaceOnUse"
+ x1="-293.63593"
+ y1="3.2192702"
+ x2="-258.68027"
+ y2="13.229791"
+ gradientTransform="matrix(0,-0.91412987,0.91412987,0,0.02226508,24.582359)" /><linearGradient
+ id="linearGradient6206"><stop
+ style="stop-color:#ffec00;stop-opacity:1"
+ offset="0"
+ id="stop6202" /><stop
+ style="stop-color:#ff0000;stop-opacity:1"
+ offset="1"
+ id="stop6204" /></linearGradient></defs><metadata
+ id="metadata2"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><g
+ id="g8"
+ transform="matrix(6.4131855,0,0,-6.4131855,-1935.3288,416.0147)"><g
+ id="layer1"
+ transform="matrix(2.0600602,0,0,-1.954417,280.47242,579.78551)"><g
+ id="g61"
+ transform="rotate(-45,12.388336,277.04149)"><g
+ id="g112"><g
+ id="g120"><g
+ id="g125"><path
+ id="path26-6"
+ style="fill:url(#linearGradient6210);fill-opacity:1;stroke-width:0.385146"
+ d="m 12.115996,264.57061 a 9.1509008,10.131353 0 0 1 9.1509,10.13136 9.1509008,10.131353 0 0 1 -9.1509,10.13135 9.1509008,10.131353 0 0 1 -9.1509012,-10.13135 9.1509008,10.131353 0 0 1 9.1509012,-10.13136 z m 19.282252,19.28223 a 10.131353,9.1508998 0 0 1 -10.131354,9.15089 10.131353,9.1508998 0 0 1 -10.131352,-9.15089 10.131353,9.1508998 0 0 1 10.131352,-9.15091 10.131353,9.1508998 0 0 1 10.131354,9.15091 z M 2.9650961,274.70197 H 21.266896 v 18.30177 H 2.9650961 Z" /></g></g></g></g></g></g></svg>
diff --git a/metager/public/img/tiles/maps.png b/metager/public/img/tiles/maps.png
new file mode 100644
index 0000000000000000000000000000000000000000..c45398faa74d8432ed3a4934e0a30f24f3921517
Binary files /dev/null and b/metager/public/img/tiles/maps.png differ
diff --git a/metager/public/img/tiles/sumaev.png b/metager/public/img/tiles/sumaev.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0ceb801eaf3bb4e98e22352441ad2e17b0a16b5
Binary files /dev/null and b/metager/public/img/tiles/sumaev.png differ
diff --git a/metager/resources/less/metager/pages/startpage/startpage.less b/metager/resources/less/metager/pages/startpage/startpage.less
index 5dc355c4f2c068e56ac46e9ee21c440b40ee3687..807cee36cda98706fa9a21ea7decf35415235b3f 100644
--- a/metager/resources/less/metager/pages/startpage/startpage.less
+++ b/metager/resources/less/metager/pages/startpage/startpage.less
@@ -2,6 +2,7 @@
@scrollLinkHeight: 40px;
@scrollLinkHeightMedium: 50px;
@scrollLinkHeightMax: 70px;
+@import "./tiles.less";
html {
scroll-behavior: smooth;
@@ -62,7 +63,6 @@ div.startpage {
}
>div#search-wrapper {
- flex-grow: 1;
display: grid;
grid-template-rows: 20dvh max-content max-content max-content 1fr;
diff --git a/metager/resources/less/metager/pages/startpage/tiles.less b/metager/resources/less/metager/pages/startpage/tiles.less
new file mode 100644
index 0000000000000000000000000000000000000000..f9473ad274546787c6efda575ece6b86aba3ed37
--- /dev/null
+++ b/metager/resources/less/metager/pages/startpage/tiles.less
@@ -0,0 +1,69 @@
+div#tiles-container {
+ display: flex;
+ flex-grow: 1;
+ padding-inline: 1rem;
+
+ div#tiles {
+ flex-grow: 0;
+ display: flex;
+ align-items: flex-start;
+ padding-top: 5dvh;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-inline: auto;
+ height: max-content;
+ justify-content: space-between;
+
+ >a {
+ display: flex;
+ row-gap: .5rem;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+ color: @text-color;
+
+ >div.image {
+ @image_size: 4.5rem;
+ width: @image_size;
+ height: @image_size;
+ padding: 1rem;
+ background-color: @highlight-color;
+ border-radius: 5px;
+ transition: width 0.5s, height 0.5s;
+
+ >img {
+ width: 100%;
+ height: 100%;
+
+ &.invert-dm {
+ filter: invert(@icon-color);
+ }
+ }
+ }
+
+ >div.title {
+ font-size: .8rem;
+ color: fade(@text-color, 40%);
+ transition: color 0.5s, width 0.5s, overflow 0.5s;
+ width: 11ch;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: center;
+ }
+
+ &:hover {
+ >div.image {
+ width: 6rem;
+ height: 6rem;
+ }
+
+ >div.title {
+ color: @text-color;
+ width: unset;
+ overflow: unset;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/metager/resources/views/index.blade.php b/metager/resources/views/index.blade.php
index 98a193f4144636c5dda0c5aa320db5d83a2b095c..2a22945515141ba173a0f459b30889b8af51d2f2 100644
--- a/metager/resources/views/index.blade.php
+++ b/metager/resources/views/index.blade.php
@@ -35,35 +35,15 @@
@if(Request::filled('key'))
<input type="hidden" name="key" value="{{ Request::input('key', '') }}" form="searchForm">
@endif
- @if(app(\App\SearchSettings::class)->self_advertisements)
- <div id="startpage-quicklinks">
- @if(app(\App\Models\Authorization\Authorization::class)->availableTokens < 0)
- <a class="metager-key no-key" href="{{ app(\App\Models\Authorization\Authorization::class)->getAdfreeLink() }}">
- <img src="/img/svg-icons/metager-lock.svg" alt="Key Icon" />
- <span>
- @lang("index.adfree")
- </span>
- </a>
- @elseif(!app(\App\Models\Authorization\Authorization::class)->canDoAuthenticatedSearch(false))
- <a class="metager-key" href="{{ app(\App\Models\Authorization\Authorization::class)->getAdfreeLink() }}">
- <img src="/img/svg-icons/key-empty.svg" alt="Key Icon" />
- <span>
- @lang("index.key.tooltip.empty")
- </span>
- </a>
- @endif
- @if($agent->isMobile() && ($agent->browser() === "Chrome" || $agent->browser() === "Edge"))
- <button type="submit" id="plugin-btn" form="searchForm" title="{{ trans('index.plugin-title') }}"
- name="chrome-plugin" value="true"><img src="/img/svg-icons/svg-icons/plug-in.svg" alt="+">
- {{ trans('index.plugin') }}</a>
- @else
- <a id="plugin-btn"
- href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/plugin') }}"
- title="{{ trans('index.plugin-title') }}"><img src="/img/svg-icons/plug-in.svg" alt="+">
- {{ trans('index.plugin') }}</a>
- @endif
+
+ </div>
+ <div id="tiles-container">
+ <div id="tiles">
+ @include("parts.tile", ["url" => "https://suma-ev.de", "image" => "/img/tiles/sumaev.png", "image_alt" => "SUMA-EV Logo", "title" => "SUMA-EV"])
+ @include("parts.tile", ["url" => "https://maps.metager.de", "image" => "/img/tiles/maps.png", "image_alt" => "MetaGer Maps Logo", "title" => "Maps"])
+ @include("parts.tile", ["url" => route("settings", ["focus" => $focus, "url" => url()->full()]), "image" => "/img/icon-settings.svg", "image_alt" => "SUMA-EV Logo", "title" => __('sidebar.nav28'), "options" => ["img_class" => "invert-dm"]])
+ @include("parts.tile", ["url" => route("plugin"), "image" => "/img/svg-icons/plug-in.svg", "image_alt" => "MetaGer Plugin Logo", "title" => __("index.plugin")])
</div>
- @endif
</div>
<div id="language">
<a href="{{ route('lang-selector') }}">{{ LaravelLocalization::getCurrentLocaleNative() }}</a>
diff --git a/metager/resources/views/parts/tile.blade.php b/metager/resources/views/parts/tile.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..ce94a9838ecb7665c2765adafe05e808181fd9b6
--- /dev/null
+++ b/metager/resources/views/parts/tile.blade.php
@@ -0,0 +1,6 @@
+<a href="{{$url}}">
+ <div class="image">
+ <img src="{{$image}}" alt="{{$image_alt}}" @if(isset($options) && array_key_exists("img_class",$options))class="{{$options["img_class"]}}"@endif>
+ </div>
+ <div class="title">{{$title}}</div>
+</a>
\ No newline at end of file