feature/visually-impaired-mode #58

Merged
aslan merged 7 commits from RomanGolienko/Roman_applicant-site:feature/visually-impaired-mode into main 2024-06-13 13:55:17 +03:00
3 changed files with 180 additions and 118 deletions
Showing only changes of commit ebd4ef3a93 - Show all commits

View File

@ -603,70 +603,91 @@
//echo '<pre>' . print_r($out, 1) . '</pre>' //echo '<pre>' . print_r($out, 1) . '</pre>'
@endphp @endphp
@foreach($out as $id => $page) @if(count($out) >= 1)
<div class="carousel-item @if($id == 0) active @endif \" > @foreach($out as $id => $page)
<div class="row d-flex align-items-center justify-content-center " > <div class="carousel-item @if($id == 0) active @endif \" >
@foreach($page as $item) <div class="row d-flex align-items-center justify-content-center " >
<div class="col" style="max-width: 20%"> @foreach($page as $item)
<div class="row"> <div class="col" style="max-width: 20%">
<div class="col-12" > <div class="row">
<img src="{{$item['url']}}" class="w-100 border border-white border-2" style=" border-radius: 20px 20px 0px 0px; height: 14.5em; object-fit: cover "> <div class="col-12" >
<div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;"> <img src="{{$item['url']}}" class="w-100 border border-white border-2" style=" border-radius: 20px 20px 0px 0px; height: 14.5em; object-fit: cover ">
<div class=" p-3" style=""> <div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;">
<strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong> <div class=" p-3" style="">
<br><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button> <strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong>
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p> <br><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button>
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl"> <div class="modal-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1> <h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-8 d-flex justify-content-center"> <div class="col-8 d-flex justify-content-center">
<img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;"> <img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;">
</div>
</div> </div>
<p class="mt-4"> {{$item['text']}}</p>
</div> </div>
<p class="mt-4"> {{$item['text']}}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
@endforeach
</div>
<br><br><br><br>
</div>
@endforeach
<div class="carousel-indicators mt-5">
@for ($i = 0; $i < count($out); $i++)
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
@endfor
</div>
@else
<div class="carousel-item active" >
<div class="w-100 d-flex align-items-center justify-content-center " >
<div class="col-11 text-center" style="margin-right: 2em">
<div class="display-6 text-white"> Пока нет новостей! </div>
</div> </div>
@endforeach
</div> </div>
<br><br><br><br> <br><br><br><br>
</div> </div>
@endforeach <div class="carousel-indicators mt-5">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide1"></button>
<div class="carousel-indicators mt-5"> </div>
@for ($i = 0; $i < count($out); $i++) @endif
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
@endfor
</div>
</div> </div>
@ -785,6 +806,7 @@
<a href="#"><img width="30px" height="30px" src="{{ URL::to('img/front-page/rutub.png') }}" alt="vid"></a> <a href="#"><img width="30px" height="30px" src="{{ URL::to('img/front-page/rutub.png') }}" alt="vid"></a>
<a href="#"><img width="30px" height="30px" src="{{ URL::to('img/front-page/dzen.png') }}" alt="vid"></a> <a href="#"><img width="30px" height="30px" src="{{ URL::to('img/front-page/dzen.png') }}" alt="vid"></a>
<a href="#"><img width="30px" height="30px" src="{{ URL::to('img/front-page/odnok.png') }}" alt="vid"></a> <a href="#"><img width="30px" height="30px" src="{{ URL::to('img/front-page/odnok.png') }}" alt="vid"></a>
</div> </div>
</div> </div>
<div class="col mt-3 mt-xl-0" > <div class="col mt-3 mt-xl-0" >

View File

@ -603,70 +603,90 @@
//echo '<pre>' . print_r($out, 1) . '</pre>' //echo '<pre>' . print_r($out, 1) . '</pre>'
@endphp @endphp
@foreach($out as $id => $page) @if(count($out) >= 1)
<div class="carousel-item @if($id == 0) active @endif \" > @foreach($out as $id => $page)
<div class="row d-flex align-items-center justify-content-center " > <div class="carousel-item @if($id == 0) active @endif \" >
@foreach($page as $item) <div class="row d-flex align-items-center justify-content-center " >
<div class="col" style="max-width: 20%"> @foreach($page as $item)
<div class="row"> <div class="col" style="max-width: 20%">
<div class="col-12" > <div class="row">
<img src="{{$item['url']}}" class="w-100 border border-white border-2" style=" border-radius: 20px 20px 0px 0px; height: 14.5em; object-fit: cover "> <div class="col-12" >
<div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;"> <img src="{{$item['url']}}" class="w-100 border border-white border-2" style=" border-radius: 20px 20px 0px 0px; height: 14.5em; object-fit: cover ">
<div class=" p-3" style=""> <div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;">
<strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong> <div class=" p-3" style="">
<br><button type="button" class="btn text-white" style="background: #9739f6" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button> <strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong>
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p> <br><button style="background: #9739f6;" type="button" class="btn text-white" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button>
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl"> <div class="modal-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1> <h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-8 d-flex justify-content-center"> <div class="col-8 d-flex justify-content-center">
<img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;"> <img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style=" background-size: cover; border-radius: 20px;">
</div>
</div> </div>
<p class="mt-4"> {{$item['text']}}</p>
</div> </div>
<p class="mt-4"> {{$item['text']}}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
@endforeach @endforeach
</div>
<br><br><br><br>
</div>
@endforeach
<div class="carousel-indicators mt-5">
@for ($i = 0; $i < count($out); $i++)
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
@endfor
</div>
@else
<div class="carousel-item active" >
<div class="w-100 d-flex align-items-center justify-content-center " >
<div class="col-11 text-center" style="margin-right: 2em">
<div class="display-6 text-white"> Пока нет новостей! </div>
</div>
</div> </div>
<br><br><br><br> <br><br><br><br>
</div> </div>
@endforeach <div class="carousel-indicators mt-5">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide1"></button>
<div class="carousel-indicators mt-5"> </div>
@for ($i = 0; $i < count($out); $i++) @endif
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
@endfor
</div>
</div> </div>

View File

@ -604,70 +604,90 @@
//echo '<pre>' . print_r($out, 1) . '</pre>' //echo '<pre>' . print_r($out, 1) . '</pre>'
@endphp @endphp
@foreach($out as $id => $page) @if(count($out) >= 1)
<div class="carousel-item @if($id == 0) active @endif \" > @foreach($out as $id => $page)
<div class="row d-flex align-items-center justify-content-center " > <div class="carousel-item @if($id == 0) active @endif \" >
@foreach($page as $item) <div class="row d-flex align-items-center justify-content-center " >
<div class="col" style="max-width: 20%"> @foreach($page as $item)
<div class="row"> <div class="col" style="max-width: 20%">
<div class="col-12" > <div class="row">
<img src="{{$item['url']}}" class="w-100 border border-white border-2" style=" border-radius: 20px 20px 0px 0px; height: 14.5em; object-fit: cover "> <div class="col-12" >
<div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;"> <img src="{{$item['url']}}" class="w-100 border border-white border-2" style=" border-radius: 20px 20px 0px 0px; height: 14.5em; object-fit: cover ">
<div class=" p-3" style=""> <div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;">
<strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong> <div class=" p-3" style="">
<br><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button> <strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong>
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p> <br><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button>
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl"> <div class="modal-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1> <h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-8 d-flex justify-content-center"> <div class="col-8 d-flex justify-content-center">
<img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;"> <img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;">
</div>
</div> </div>
<p class="mt-4"> {{$item['text']}}</p>
</div> </div>
<p class="mt-4"> {{$item['text']}}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
@endforeach @endforeach
</div>
<br><br><br><br>
</div>
@endforeach
<div class="carousel-indicators mt-5">
@for ($i = 0; $i < count($out); $i++)
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
@endfor
</div>
@else
<div class="carousel-item active" >
<div class="w-100 d-flex align-items-center justify-content-center " >
<div class="col-11 text-center" style="margin-right: 2em">
<div class="display-6 text-white"> Пока нет новостей! </div>
</div>
</div> </div>
<br><br><br><br> <br><br><br><br>
</div> </div>
@endforeach <div class="carousel-indicators mt-5">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide1"></button>
<div class="carousel-indicators mt-5"> </div>
@for ($i = 0; $i < count($out); $i++) @endif
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
@endfor
</div>
</div> </div>