feat: update platform icons and badges with improved styling, responsive design, and enhanced accessibility for app development section
This commit is contained in:
Ümit Tunç
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||||
<path fill="#3DDC84" d="M17.6 9.48l1.84-3.18c.16-.28.04-.62-.28-.74-.32-.12-.66.06-.78.36l-1.92 3.32-1.93-3.34C14.5 5.48 14.16 5.3 13.84 5.42c-.32.12-.44.46-.28.74L15.4 9.5H8.6l1.84-3.18c.16-.28.04-.62-.28-.74-.32-.12-.66.06-.78.36L7.46 8.66 5.54 5.34C5.38 5.04 5.04 4.86 4.72 4.98c-.32.12-.44.46-.28.74L6.28 9.5H4.5c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h1.5v2.25c0 .62.5 1.12 1.12 1.12.62 0 1.12-.5 1.12-1.12V18h7.52v2.25c0 .62.5 1.12 1.12 1.12.62 0 1.12-.5 1.12-1.12V18H19.5c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5h-1.9zM6.75 15.75c-.62 0-1.12-.5-1.12-1.12s.5-1.12 1.12-1.12 1.12.5 1.12 1.12-.5 1.12-1.12 1.12zm10.5 0c-.62 0-1.12-.5-1.12-1.12s.5-1.12 1.12-1.12 1.12.5 1.12 1.12-.5 1.12-1.12 1.12z"/>
|
||||
<path fill="#3DDC84" d="M17.6 9.48l1.84-3.18c.16-.28.04-.62-.28-.74-.32-.12-.66.06-.78.36l-1.92 3.32-1.93-3.34c-.5-.86-1.22-1.4-2.2-1.4-.98 0-1.74.54-2.2 1.4l-3.11-1.8c-.5-.3-1.1-.1-1.4.4-.3.5-.1 1.1.4 1.4l1.27.73C6.87 4.94 9.28 4 12 4s5.13.94 7.23 2.45l1.27-.73c.5-.3.7-.9.4-1.4-.3-.5-.9-.7-1.4-.4l-3.11 1.8c-.46-.86-1.22-1.4-2.2-1.4-.98 0-1.74.54-2.2 1.4L8.58 5.66 6.66 2.32C6.5 2.04 6.16 1.86 5.84 1.98c-.32.12-.44.46-.28.74L7.4 6.02H4.5c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h1.5v2.25c0 .62.5 1.12 1.12 1.12.62 0 1.12-.5 1.12-1.12V18h7.52v2.25c0 .62.5 1.12 1.12 1.12.62 0 1.12-.5 1.12-1.12V18H19.5c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5h-1.9zM6.75 15.75c-.62 0-1.12-.5-1.12-1.12s.5-1.12 1.12-1.12 1.12.5 1.12 1.12-.5 1.12-1.12 1.12zm10.5 0c-.62 0-1.12-.5-1.12-1.12s.5-1.12 1.12-1.12 1.12.5 1.12 1.12-.5 1.12-1.12 1.12z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 816 B After Width: | Height: | Size: 940 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||||
<path fill="#CF0A2C" d="M12 4.5c1.2 0 2.2.7 2.7 1.7l3.1-1.8c.5-.3 1.1-.1 1.4.4s.1 1.1-.4 1.4l-3.1 1.8c.3.5.5 1.1.5 1.7s-.2 1.2-.5 1.7l3.1 1.8c.5.3.7.9.4 1.4s-.9.7-1.4.4l-3.1-1.8c-.5 1-1.5 1.7-2.7 1.7s-2.2-.7-2.7-1.7l-3.1 1.8c-.5.3-1.1.1-1.4-.4s-.1-1.1.4-1.4l3.1-1.8c-.3-.5-.5-1.1-.5-1.7s.2-1.2.5-1.7L5.3 6.8c-.5-.3-.7-.9-.4-1.4s.9-.7 1.4-.4l3.1 1.8c.5-1 1.5-1.7 2.7-1.7z"/>
|
||||
<path fill="#CF0A2C" d="M12 3.2c1.9 0 3.6 1 4.6 2.5l2.8-1.6c.6-.35 1.35-.1 1.7.5.35.6.1 1.35-.5 1.7l-2.8 1.6c.2.6.3 1.2.3 1.9 0 .7-.1 1.3-.3 1.9l2.8 1.6c.6.35.85 1.1.5 1.7-.35.6-1.1.85-1.7.5l-2.8-1.6c-1 1.5-2.7 2.5-4.6 2.5s-3.6-1-4.6-2.5L4.6 17.1c-.6.35-1.35.1-1.7-.5-.35-.6-.1-1.35.5-1.7l2.8-1.6c-.2-.6-.3-1.2-.3-1.9 0-.7.1-1.3.3-1.9L3.4 8.4c-.6-.35-.85-1.1-.5-1.7.35-.6 1.1-.85 1.7-.5l2.8 1.6C8.4 4.2 10.1 3.2 12 3.2z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 474 B After Width: | Height: | Size: 523 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||||
<path fill="#000" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
<path fill="#000000" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 565 B After Width: | Height: | Size: 569 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||||
<path fill="#333" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
<path fill="#000000" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 565 B After Width: | Height: | Size: 569 B |
@@ -1,5 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||||
<path fill="#0081FB" d="M4 9.5A4.5 4.5 0 0 1 8.5 5h7A4.5 4.5 0 0 1 20 9.5v4.75A3.75 3.75 0 0 1 16.25 18H14l-1.25 2h-1.5L10 18H7.75A3.75 3.75 0 0 1 4 14.25V9.5zm4.5-2A2.5 2.5 0 0 0 6 10v4.25c0 .97.78 1.75 1.75 1.75H9.4l1.1 1.75h2l1.1-1.75h1.65c.97 0 1.75-.78 1.75-1.75V10a2.5 2.5 0 0 0-2.5-2.5h-7z"/>
|
||||
<circle cx="8.25" cy="11.5" r="1.25" fill="#fff"/>
|
||||
<circle cx="15.75" cy="11.5" r="1.25" fill="#fff"/>
|
||||
<path fill="#0467DF" d="M6.897 12c0-2.567 2.05-4.646 4.579-4.646.983 0 1.9.31 2.655.84.755-.53 1.672-.84 2.655-.84 2.529 0 4.579 2.079 4.579 4.646 0 2.567-2.05 4.646-4.579 4.646-.983 0-1.9-.31-2.655-.84-.755.53-1.672.84-2.655.84-2.529 0-4.579-2.079-4.579-4.646zm12.995 0c0-2.567 2.05-4.646 4.579-4.646v2.323c-1.3 0-2.355 1.04-2.355 2.323 0 1.283 1.055 2.323 2.355 2.323V16.646c-2.529 0-4.579-2.079-4.579-4.646zM.902 12c0-2.567 2.05-4.646 4.579-4.646v2.323c-1.3 0-2.355 1.04-2.355 2.323 0 1.283 1.055 2.323 2.355 2.323v2.323C2.952 16.646.902 14.567.902 12z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 507 B After Width: | Height: | Size: 659 B |
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="#343f52" stroke-width="1.5"/>
|
||||
<ellipse cx="12" cy="12" rx="4" ry="9" fill="none" stroke="#343f52" stroke-width="1.5"/>
|
||||
<path fill="none" stroke="#343f52" stroke-width="1.5" d="M3 12h18M4.5 7.5h15M4.5 16.5h15"/>
|
||||
<path fill="#E44D26" d="M4.136 3.015h15.729L18.39 20.28l-6.195 1.708-6.222-1.702L4.136 3.015z"/>
|
||||
<path fill="#F16529" d="M12 19.384V5.626l5.302.916.468 5.234L12 19.384z"/>
|
||||
<path fill="#EBEBEB" d="M12 5.626v2.454h4.532l-.318 3.556H12v2.454h6.965l-.604 6.748L12 19.384V5.626z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 365 B After Width: | Height: | Size: 381 B |
@@ -4,17 +4,16 @@
|
||||
|
||||
<div {{ $attributes->class(['app-dev-platforms']) }}>
|
||||
@foreach($platforms as $platform)
|
||||
<span class="app-dev-platform-pill" title="{{ t($platform['name']) }}">
|
||||
<span class="app-dev-platform-item" title="{{ t($platform['name']) }}">
|
||||
<img
|
||||
src="{{ asset('assets/img/platforms/' . $platform['logo']) }}"
|
||||
class="app-dev-platform-icon"
|
||||
alt=""
|
||||
width="28"
|
||||
height="28"
|
||||
alt="{{ t($platform['name']) }}"
|
||||
width="38"
|
||||
height="38"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
<span class="app-dev-platform-label">{!! t($platform['label'] ?? $platform['name']) !!}</span>
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@@ -44,13 +44,13 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Desteklenen platform rozetleri */
|
||||
/* Platform logoları — kutu/arkaplan yok */
|
||||
.app-dev-platforms {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
gap: 1rem;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.15rem;
|
||||
@@ -60,6 +60,11 @@
|
||||
.app-dev-platforms::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.app-dev-platforms {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.app-dev-platforms {
|
||||
justify-content: flex-start;
|
||||
@@ -67,34 +72,27 @@
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
.app-dev-platform-pill {
|
||||
.app-dev-platform-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 4.75rem;
|
||||
width: 4.75rem;
|
||||
min-height: 4.75rem;
|
||||
padding: 0.5rem 0.35rem;
|
||||
gap: 0.35rem;
|
||||
color: #343f52;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(52, 63, 82, 0.1);
|
||||
border-radius: 0.65rem;
|
||||
text-align: center;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.app-dev-platform-icon {
|
||||
display: block;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.app-dev-platform-label {
|
||||
font-size: 0.62rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
max-width: 100%;
|
||||
@media (min-width: 576px) {
|
||||
.app-dev-platform-icon {
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@@ -108,13 +106,13 @@
|
||||
];
|
||||
|
||||
$platforms = [
|
||||
['name' => 'Android', 'label' => 'Android', 'logo' => 'android.svg'],
|
||||
['name' => 'iOS', 'label' => 'iOS', 'logo' => 'ios.svg'],
|
||||
['name' => 'Windows', 'label' => 'Windows', 'logo' => 'windows.svg'],
|
||||
['name' => 'macOS', 'label' => 'macOS', 'logo' => 'macos.svg'],
|
||||
['name' => 'Huawei AppGallery', 'label' => 'Huawei', 'logo' => 'huawei.svg'],
|
||||
['name' => 'Meta Quest', 'label' => 'Quest', 'logo' => 'meta-quest.svg'],
|
||||
['name' => 'Web', 'label' => 'Web', 'logo' => 'web.svg'],
|
||||
['name' => 'Android', 'logo' => 'android.svg'],
|
||||
['name' => 'iOS', 'logo' => 'ios.svg'],
|
||||
['name' => 'Windows', 'logo' => 'windows.svg'],
|
||||
['name' => 'macOS', 'logo' => 'macos.svg'],
|
||||
['name' => 'Huawei AppGallery', 'logo' => 'huawei.svg'],
|
||||
['name' => 'Meta Quest', 'logo' => 'meta-quest.svg'],
|
||||
['name' => 'Web', 'logo' => 'web.svg'],
|
||||
];
|
||||
|
||||
$features = [
|
||||
|
||||
Reference in New Issue
Block a user