Test pages, and includes. New routes for those

feature/WIP
Nathan Steel 8 months ago
parent 202b4af07f
commit a3390bdba5

@ -0,0 +1,14 @@
<?php
namespace App\Controllers\Page;
class Controller extends \App\Controllers\Controller
{
public function about(){ response()->render('about'); }
public function simple(){
response()->render('sf');
// response()->render('sf-trying-swiper');
}
}

@ -14,3 +14,12 @@ app()->get('/', 'Home\Controller@index');
// }]); // }]);
// response()->redirect(['index']); // response()->redirect(['index']);
// Generic controller for 'basic' pages
app()->get('/about', 'Page\Controller@about');
app()->get('/simple', 'Page\Controller@simple');
app()->get('/discord', ['name' => 'discord', function() {
response()->redirect('https://discord.gg/mpqKaktn9w'); // Temporary member discord invite
}]);

@ -1,5 +1,7 @@
<?php <?php
// Location of auth vendor/package .\php\www\website\vendor\leafs\auth\src
auth()->middleware('auth.required', function () { auth()->middleware('auth.required', function () {
response()->redirect('/auth/login'); response()->redirect('/auth/login');
}); });
@ -8,6 +10,10 @@ auth()->middleware('auth.guest', function () {
response()->redirect('/dashboard'); response()->redirect('/dashboard');
}); });
app()->get('/auth', function(){
response()->redirect('/auth/login');
});
app()->group('/auth', [ app()->group('/auth', [
'middleware' => 'auth.guest', 'middleware' => 'auth.guest',
function () { function () {

@ -0,0 +1,36 @@
@extends('layouts.basePage', [
'title' => _env('APP_NAME', 'aNetwork Gaming Community'),
'breadcrumbs' => [
[
'title' => 'Home',
'href' => '/',
]
]
])
@section('content')
@include('components/header')
<main>
<section class="alerts">
<div class="container" style="padding-bottom: 0">
<section class="row">
<section class="col col-12">
<aside class="alert"><p>aNetwork is currently undergoing development changes</p></aside>
<aside class="alert alert--success"><p>aNetwork is currently undergoing development changes</p></aside>
<aside class="alert alert--warning"><p>aNetwork is currently undergoing development changes</p></aside>
<aside class="alert alert--error"><p>aNetwork is currently undergoing development changes</p></aside>
</section>
</section>
</div>
</section>
@includeIf('components/contact-form')
</main>
@includeIf('components/footer')
@endsection

@ -0,0 +1,235 @@
<section class="container">
<div class="row row--justify-center">
<div class="col col-8">
<div class="tac">
<p class="h1"><span>Over the top</span> Contact Form</p>
<p>Contains all the form elements I will be bothered to style</p>
</div>
<form>
<div class="row">
<div class="col col-6">
<label for="firstname">First Name</label>
<input type="text" name="firstname" placeholder="First"></input>
</div>
<div class="col col-6">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" placeholder="Last"></input>
</div>
</div>
<div class="row">
<div class="col col-12">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group__prepend">
<span class="input-group__content">@</span>
</div>
<input class="input-group__input" type="text" name="username" placeholder="Username"></input>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<label for="website">Website 1</label>
<div class="input-group">
<input class="input-group__input" type="text" name="website"></input>
<div class="input-group__append">
<span class="input-group__content">append</span>
</div>
</div>
</div>
<div class="col col-6">
<label for="website">Website</label>
<div class="input-group">
<input class="input-group__input" type="text" name="website"></input>
<div class="input-group__append">
<!-- <span class="input-group__content"> -->
<select class="input-group__content">
<option value="">.co.uk</option>
<option value="">.com</option>
</select>
<!-- </span> -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-12">
<label for="textarea">Textarea</label>
<textarea name="textarea"></textarea>
</div>
</div>
<div class="row">
<div class="col col-5">
<label for="reason-1">Reason 1</label>
<select>
<option value="" invalid>Select...</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
<div class="col col-3">
<label for="reason-1">Reason 1</label>
<select>
<option value="" invalid>Select...</option>
<optgroup label="I hate you">
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</optgroup>
<option value="" invalid>Option 3</option>
<optgroup label="I love you">
<option value="option 1">Option 4</option>
<option value="option 2">Option 5</option>
</optgroup>
</select>
</div>
<div class="col col-4">
<label for="reason-1">Reason 1</label>
<select>
<option value="" invalid>Select...</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
<hr>
<div class="row">
<div class="col col-12">
<h2>Checkboxes</h2>
<div class="control-group custom-checkbox">
<input type="checkbox" id="chk-1">
<label for="chk-1">Checkbox chk-1</label>
</div>
<div class="control-group">
<input type="checkbox" id="chk-2">
<label for="chk-2">Checkbox chk-2</label>
</div>
<div class="control-group">
<input type="checkbox" id="chk-3">
<label for="chk-3">Checkbox chk-3</label>
</div>
</div>
</div>
<div class="row">
<div class="col col-12">
<fieldset>
<legend>SELECT YOUR FAVOURITE</legend>
<div class="control-group">
<input type="radio" name="radioGroup1" id="rad-1">
<label for="rad-1">Radio rad-1</label>
</div>
<div class="control-group">
<input type="radio" name="radioGroup1" id="rad-2">
<label for="rad-2">Radio rad-2</label>
</div>
<div class="control-group">
<input type="radio" name="radioGroup1" id="rad-3">
<label for="rad-3">Radio rad-3</label>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col col-6">
<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
</div>
<div class="col col-6">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
</div>
</div>
<hr>
<div class="row">
<div class="col col-12">
<button type="submit">Send the thing</button>
<input type="submit"></input>
</div>
</div>
</form>
</div>
</div>
<div class="row row--cards">
<div class="col col-4">
<div class="card">
<header class="card__header"><p class="card__title">HEADER</p></header>
<div class="card__body">
<p class="card__title">TITLE</p>
<p class="card__text">text text tesx kajdfa fjladf jladkf ajdfl kadj fjask fjldsaj fljad fklasjd lfj lkdf</p>
</div>
<footer class="card__footer"><p class="card__title">FOOTER</p></footer>
</div>
</div>
<div class="col col-4">
<div class="card">
<div class="card__body">
<p class="card__title">TITLE</p>
<p class="card__text">text text tesx kajdfa fjladf jladkf ajdfl kadj fjask fjldsaj fljad fklasjd lfj lkdf</p>
</div>
<footer class="card__footer">
<div class="row">
<div class="col col-8">
<p>Footer content that is not a title</p>
</div>
<div class="col col-4">
<a href="#" class="button">Button</a>
</div>
</div>
</footer>
</div>
</div>
<div class="col col-4">
<div class="card">
<header class="card__header"><p class="card__title">HEADER</p></header>
<div class="card__body">
<p class="card__title">TITLE</p>
<p class="card__text">text text tesx kajdfa fjladf jladkf ajdfl kadj fjask fjldsaj fljad fklasjd lfj lkdf</p>
<a href="#" class="button">Button</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-3">
<div class="card">
<img class="card-image--top" src="@assets('img/discord.png')" >
<div class="card__body">
<p class="card__text">SERVIE SERVICE SERVICE SERIVE SEIVES SEIGSVE SEIEVE ESIEFEVE</p>
<div class="row">
<div class="col col-4">a</div>
<div class="col col-4">s</div>
<div class="col col-4">Something</div>
</div>
</div>
</div>
</div>
</div>
</section>

@ -2,9 +2,9 @@
<section class="container"> <section class="container">
<div class="row"> <div class="row">
<div class="col col-8"> <div class="col col-xs-12 col-7">
<div class="row"> <div class="row">
<div class="col col-4"> <div class="col col-xs-12 col-sm-6 col-4">
<a href="#">Section title</a> <a href="#">Section title</a>
<ul class="no-bullet-point"> <ul class="no-bullet-point">
<li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li>
@ -13,7 +13,7 @@
<li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li>
</ul> </ul>
</div> </div>
<div class="col col-4"> <div class="col col-xs-12 col-sm-6 col-4">
<a href="#">Section title</a> <a href="#">Section title</a>
<ul class="no-bullet-point"> <ul class="no-bullet-point">
<li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li>
@ -22,7 +22,7 @@
<li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li>
</ul> </ul>
</div> </div>
<div class="col col-4"> <div class="col col-xs-12 col-sm-6 col-4">
<a href="#">Section title</a> <a href="#">Section title</a>
<ul class="no-bullet-point"> <ul class="no-bullet-point">
<li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li>
@ -33,8 +33,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col col-4"> <div class="col col-xs-12 col-5">
<p>C</p> <a href="/" class="site-title site-title--header">aNetwork</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div> </div>
</div> </div>

@ -1,34 +1,54 @@
<header class="anetwork-head"> <header class="header">
<div class="container container--no-gap">
<nav class="container nav row row--align-center container--no-gap"> <nav class="nav row row--align-center">
<div class="col col-2"> <div class="col col-2">
<a href="/" class="anetwork-title">aNetwork</a> <a href="/" class="site-title site-title--header">aNetwork</a>
</div> </div>
<div class="col col-fill"> <div class="col col-fill">
<ul class="inline-list"> <ul class="nav-list">
<li><a href="#about">About</a></li> <li class="nav-list__item"><a href="/about">About</a></li>
<li><a href="#servers">Servers</a> <li class="nav-list__item nav-list__item--has-dropdown"><a href="#servers">Servers</a>
@if(!empty($servers)) @if(!empty($servers))
<ul> <ul class="nav-list__item__dropdown">
<div class="nav-list__item__dropdown__content">
@foreach($servers as $server) <!-- Loop servers to add to header --> @foreach($servers as $server) <!-- Loop servers to add to header -->
@if(!empty($server['servers'])) <!-- Only add if the server type has related servers --> @if(!empty($server['servers'])) <!-- Only add if the server type has related servers -->
<li><a href="#servers" data-tabs-button data-tabs-group="servers" data-tabs-id="{{ strtolower($server['type']) }}">{{ $server['type'] }}</a></li> <li class="nav-list__item__dropdown__item"><a href="#servers" data-tabs-button data-tabs-group="servers" data-tabs-id="{{ strtolower($server['type']) }}">{{ $server['type'] }}</a></li>
@endif @endif
@endforeach @endforeach
</div>
</ul> </ul>
@endif @endif
</li> </li>
<li><a href="#faq">FAQs</a></li> <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
<li class="nav-list__item"><a href="#faq">FAQs</a></li>
</ul> </ul>
</div> </div>
<div class="col col-2 tar"> <div class="col col-3 tar">
<ul class="inline-list"> <ul class="inline-list">
<li><a href="/discord">Discord<i class="iconoir iconoir-discord" width="16" height="16" style="margin-left:12px; font-size:24px;"></i></a></li> <!-- <li><a href="/discord">Discord<i class="iconoir iconoir-discord" width="16" height="16" style="margin-left:12px; font-size:24px;"></i></a></li> -->
<li>
@auth
<a class="rounded-md px-3 py-2 text-black transition hover:text-black/70 focus:outline-none dark:text-white dark:hover:text-white/80"
href="/dashboard">
Dashboard
</a>
@else
<a class="rounded-md px-3 py-2 text-black transition hover:text-black/70 focus:outline-none dark:text-white dark:hover:text-white/80"
href="/auth/login">
Log in
</a>
<a class="rounded-md px-3 py-2 text-black transition hover:text-black/70 focus:outline-none dark:text-white dark:hover:text-white/80"
href="/auth/register">
Register
</a>
@endif
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
</div>
</header> </header>

@ -26,7 +26,7 @@
<div class="row row--scroll row--cards servers-scroll" data-tabs-tab data-tabs-group="servers" data-tabs-id="{{ strtolower($server['type']) }}" @if($loop->index == 0) data-tabs-default @endif > <div class="row row--scroll row--cards servers-scroll" data-tabs-tab data-tabs-group="servers" data-tabs-id="{{ strtolower($server['type']) }}" @if($loop->index == 0) data-tabs-default @endif >
@if(empty($server['servers'])) @if(empty($server['servers']))
<div class="col col-6"> <div class="col col-6">
<div class="card"> <div class="card card__body">
<h3>Uh oh!</h3> <h3>Uh oh!</h3>
<p>Currently there are no '{{ $server['type'] }}' servers</p> <p>Currently there are no '{{ $server['type'] }}' servers</p>
</div> </div>
@ -34,7 +34,7 @@
@else @else
@foreach($server['servers'] as $serverItem) @foreach($server['servers'] as $serverItem)
<div class="col col-3p5"> <div class="col col-3p5">
<div class="card"> <div class="card card__body">
<h3>{{ $serverItem['name'] }}<i class="iconoir iconoir-copy" width="16" height="16" style="margin-left:12px"></i></h3> <h3>{{ $serverItem['name'] }}<i class="iconoir iconoir-copy" width="16" height="16" style="margin-left:12px"></i></h3>
<p>{{ $serverItem['description'] }}</p> <p>{{ $serverItem['description'] }}</p>
</div> </div>

@ -14,24 +14,16 @@
<main> <main>
<section class="alerts" style="background: #33312E">
<div class="container" style="padding-bottom: 0">
<section class="row">
<section class="col col-12 no-padd">
<aside class="alert"><p>aNetwork is currently undergoing development changes</p></aside>
</section>
</section>
</div>
</section>
<section class="anetwork-hero"> <section class="anetwork-hero">
<div class="container container--no-botgap"> <div class="container container--no-botgap">
<section class="row"> <section class="row">
<section class="col col-sm-12 col-8 col--align-center"> <section class="col col-sm-12 col-8 col--align-center">
<h1 style="font-size: 42px;"><span class="anetwork-title">aNetwork</span> Gaming Community</h1> <h1 style="font-size: 42px;"><span class="site-title">aNetwork</span> Gaming Community</h1>
<p>A community that runs several gaming servers. If there's something we don't host; Let us know over in the <a href="/discord">aNetwork Discord</a>. If there's enough want, we'll set it up.</p> <p>A community that runs several gaming servers. If there's something we don't host; Let us know over in the <a href="/discord">aNetwork Discord</a>. If there's enough want, we'll set it up.</p>
<br> <br>
<a class="button button--hero" href="#">View Servers</a> <a class="button button--hero" href="#">View Servers</a>
<a class="button button--blue" href="#"><b>Join Discord &rarr;</b></a> <a class="button button--blue" href="#">Join Discord &rarr;</a>
<a class="button button--disabled" href="#">Disabled</a>
</section> </section>
<!-- row col, if it's a column that wants to have flex/inner-columns --> <!-- row col, if it's a column that wants to have flex/inner-columns -->
@ -59,20 +51,22 @@
<div class="row row--cards"> <div class="row row--cards">
<div class="col col-4"> <div class="col col-4">
<div class="card"> <div class="card">
<div class="card__body">
<h3>Formed in 2021</h3> <h3>Formed in 2021</h3>
<p>Card content*</p> <p>Card content*</p>
<p><small>*with small content</small></p> <p><small>*with small content</small></p>
</div> </div>
</div> </div>
</div>
<div class="col col-4"> <div class="col col-4">
<div class="card"> <div class="card card__body"> <!-- Since nothing else, can just slam body onto the card -->
<h3>Public Servers</h3> <h3>Public Servers</h3>
<p>Card content</p> <p>Card content</p>
<p><span class="tag">Swag</span> <span class="tag">Awesome</span></p> <p><span class="tag">Swag</span> <span class="tag tag--border">Awesome</span></p>
</div> </div>
</div> </div>
<div class="col col-4"> <div class="col col-4">
<div class="card"> <div class="card card__body">
<h3>Community Events</h3> <h3>Community Events</h3>
<p>Card content</p> <p>Card content</p>
</div> </div>

@ -18,7 +18,7 @@
<script src="@assets('aSkelly/js/clipboard.js')" defer></script> <script src="@assets('aSkelly/js/clipboard.js')" defer></script>
<script src="@assets('aSkelly/js/tabs.js')" defer></script> <script src="@assets('aSkelly/js/tabs.js')" defer></script>
<!-- Per site --> <!-- Per site -->
<link rel="stylesheet" href="@assets('css/main.css')"> <!-- <link rel="stylesheet" href="@assets('css/main.css')"> -->
<!-- External --> <!-- External -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />

@ -0,0 +1,574 @@
@extends('layouts.basePage', [
'title' => 'SFs Dupe',
'breadcrumbs' => [
[
'title' => 'Home',
'href' => '/',
]
]
])
@section('content')
<header>
<div class="mobile" style="border-bottom: 1px solid orange;">
<div style="background: green;">
<div class="container container--no-gap">
<div class="row">
<div class="col col-12" style="display: flex; justify-content: space-between; padding: 10px;">
<span>Location 1</span>
<span>Location 2</span>
<span>Location 3</span>
</div>
</div>
</div>
</div>
<div class="container container--no-gap">
<div class="row row--align-center">
<div class="col col-2">
<a href="/"><img src="@assets('img/discord.png')" style="margin-left: 0;"></a>
</div>
<div class="col col-2" style="margin-left: auto;">
<span class="" onclick="document.getElementById('burger-menu').style.display='block';">Burger</span>
</div>
</div>
</div>
</div>
<!-- apply the padding-top to the header itself -->
<div class="sf-header">
<div class="container container--no-gap">
<div class="row row--align-center">
<div class="col col-2">
<a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain;
height: 50px;
width: 100px;"></a>
</div>
<div class="col col-10" style="display: flex; flex-direction: column;">
<div class="row">
<div class="col col-12 tar">
<span class="locations">
<span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
<span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
<span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
</span>
<span class="socials">
<a href="#" class="tag tag--social"><span>fb</span></a>
<a href="#" class="tag tag--social"><span>tw</span></a>
<a href="#" class="tag tag--social"><span>lnk</span></a>
</span>
</div>
</div>
<div class="row" style="margin-top: auto;">
<div class="col col-12">
<ul class="nav-list">
<li class="nav-list__item"><a href="/about">About</a></li>
<li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
<ul class="nav-list__item__dropdown">
<div class="nav-list__item__dropdown__content">
<li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
</div>
</ul>
</li>
<li class="nav-list__item"><a href="/simple">Simple floor</a></li>
<li class="nav-list__item"><a href="#faq">FAQs</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Burger nav -->
<div id="burger-menu" class="" style="display: none; position: absolute; height: 100%; left: 0; right: 0; z-index: 10; background-color: #FFFFFFD1; padding: 20px 40px; ">
<div class="row" style="margin-top: auto;">
<div class="col col-12">
<div class="" onclick="document.getElementById('burger-menu').style.display='none';">CLOSE</div>
<ul class="nav-list">
<li class="nav-list__item"><a href="/about">About</a></li>
<li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
<ul class="nav-list__item__dropdown">
<div class="nav-list__item__dropdown__content">
<li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
</div>
</ul>
</li>
<li class="nav-list__item"><a href="/simple">Simple floor</a></li>
<li class="nav-list__item"><a href="#faq">FAQs</a></li>
</ul>
</div>
</div>
</div>
<!-- END Header -->
<!-- Hero and content -->
<div style="position: relative;">
<img class="image--center" src="https://placehold.co/1920x640">
<div class="container" style="padding-left: 80px; padding-right: 80px; margin-top: -100px; background: #707070; position: relative;">
<div class="row row--align-center" style="">
<h2>Our Showrooms</h2>
<div style="margin-left: auto">
More Store information
<span style="background: grey; color: #FFF; border-radius: 999px; border: 1px solid #FFF;">-></span>
</div>
</div>
<style>
/* Changing the col padding for this row */
.row--our-showrooms{
margin-left: -60px; margin-right: -60px;
}
.row--our-showrooms [class^=col]{
padding-right: 60px; padding-left: 60px;
}
</style>
<div class="row row--our-showrooms">
<div class="col col-4" style="display: flex; align-items: center; justify-content: left;">
<div style="width: auto;">
<p>Showroom Name</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
</div>
</div>
<div class="col col-4" style="border: solid #FFF; border-width: 0 1px; display: flex; align-items: center; justify-content: center;">
<div style="width: auto;">
<p>Showroom Name</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
</div>
</div>
<div class="col col-4" style="display: flex; align-items: center; justify-content: right;">
<div style="width: auto;">
<p>Showroom Name</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
</div>
</div>
</div>
</div>
</div>
<!-- margin-bottom, to match top of image -->
<div class="container" style="margin-bottom: 40px;">
<div class="row image-over-block">
<!-- col 10 = 91% - 50% col 6 = remains 41% -->
<!-- on container of 1300 (as design) 110 = 8.4% 140 = 10.7% (110/1300)*100 -->
<div class="col col-11 image-over-block__block">
<div class="row">
<div class="col col-6">
<p>WHERE ELEGANCE MEETS PERFORMANCE</p>
<p>Amigo</p>
<p>As an Amtico One Premium Retailer, we offer expert guidance and installation. Amtico flooring is a luxurious, durable solution, replicating natural materials like wood and stone with a high-quality finish. Scratch-resistant and low-maintenance, its ideal for busy homes and commercial spaces. With unique patterns like herringbone and parquet, Amtico lets you create a stylish, long-lasting floor tailored to your vision.</p>
<a class="button" href="#">Amtico Range</a>
</div>
</div>
</div>
<!-- col 6 = 50% -->
<div class="col col-6 image-over-block__image">
<img style="" src="https://placehold.co/630x630">
</div>
</div>
</div>
<!-- Meet the Team -->
<div class="container">
<h2>Meet the Team</h2>
<div class="row">
@for ($i = 0; $i < 3; $i++)
<div class="col-xs-12 col-sm-6 col-md-4 team-block">
<img class="team-block__image" src="https://placehold.co/412x412">
<p class="team-block__name">Team member name</p>
<p class="team-block__role">Job role</p>
</div>
@endfor
</div>
</div>
<!-- Showrroms -->
<div class="container">
<h2>Our Showrooms</h2>
<div class="row">
@for ($i = 0; $i < 3; $i++)
<div class="col col-xs-12 col-sm-6 col-md-4">
<div class="store-block">
<p class="store-block__title h5">Someplace Store</p>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<p>123 Somewhere Road Someplace, PO5 C0D</p>
</div>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<p>000 0000 0000</p>
</div>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<p>email@address.co.uk</p>
</div>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<div>
<p>Opening Hours</p>
<div class="store-block__block__times">
<div class="row">
<div class="col-xs-12 col-sm-4" style="padding-right: 0">
<p>Mon-Fri</p>
</div>
<div class="col-xs-12 col-sm-8">
<p>9am - 4pm</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4" style="padding-right: 0">
<p>Sat</p>
</div>
<div class="col-xs-12 col-sm-8">
<p>9am - 3pm</p>
</div>
</div>
</div>
</div>
</div>
<div class="store-block__map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2369.3678147138744!2d-0.08880754332036069!3d53.56905190129133!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48789cbafda6135f%3A0x29153b25374cd41a!2sGrimsby%20Fishing%20Heritage%20Centre!5e0!3m2!1sen!2suk!4v1748549467003!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
@endfor
</div>
</div>
<!-- Advanced slider -->
<div class="container">
<div class="row">
<div class="col col-12">
<h2>Fancy Range Slider</h2>
<p>Whether you desire the look of a natural wood, a calming stone, or even something more abstract, Amtico offers a range of designs and patterns across all their collections. With durable wear layers and timeless style your Amtico floor will stand the test of time.</p>
</div>
</div>
<div class="row row-for-fancy">
<div class="col col-xs-12 col-sm-12 col-3">
<h3>Slider range title</h3>
<p>With the same benefits of a standard Amtico floor, but the option for more style creativity, we can create an elegant-looking, well-designed floor, with a more modern and contemporary aesthetic choice of patterns and designs.</p>
<a class="button">Button link</a>
<div class="slide__dots" style="margin-top: 20px;">
<!-- <span class="slide-dot slide-dot--active"><div class="slide-dot__inner"></div></span>
<span class="slide-dot"><div class="slide-dot__inner"></div></span>
<span class="slide-dot"><div class="slide-dot__inner"></div></span> -->
</div>
</div>
<style>
.fancy-slider__container{
flex: 0 0 100%;
max-width: 100%;
background: lime; overflow:hidden;
}
.fancy-slider__container__content-row{
width: auto !important; /* Maybe needed as .col div.row to remove the width: 100% that seems to mess up relative pos */
}
.fancy-slider__slider-items{
flex-wrap: nowrap;
margin-left: 25px;
transition: 0.6s ease-in-out !important;
transform: translate3d(0px, 0px, 0px); /* First one will be changed inline via JS */
}
.arrow{
background: orange; width: 35px; height: 35px; border-radius:999px;
position: absolute; z-index: 8;
}
.arrow--left{left: 0; top: 50%;}
.arrow--right{right: 0; top: 50%;}
.row-for-fancy{}
/* Full width on mobile */
.fancy-slider__container{
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 768px){
/* On small desktop, fit with the col-3 side-content */
.fancy-slider__container{
flex: 0 0 75%;
max-width: 75%;
}
.row-for-fancy{ flex-wrap: nowrap;}
}
/* Anything above the size of the container */
@media (min-width: 1080px){
.fancy-slider__container{
flex: 0 0 85%;
max-width: 85%;
}
}
/* XL */
@media (min-width: 1200px){
.fancy-slider__container{
flex: 0 0 85%;
max-width: 85%;
}
}
/* Basically they're just col col-6 and col col-5 atm, will need to do mixins for each col I guess for SASS dupes */
.fancy-slider__slide, .swiper-slide{
/* .col stuff */
padding-right: 0.4166666667rem;
padding-left: 0.4166666667rem;
min-height: 2px;
/* .col-5 */
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
/* Attempt at slight animation on scale */
/* animation-duration: 1s;
animation: maxOff 1s ease infinite alternate; */
transition: 1.2s ease-in-out !important;
}
.fancy-slider__slide--active, .swiper-slide-active{
/* .col-6 */
/* Trying in JS/inline for animation sake */
flex: 0 0 50%;
max-width: 50%;
transition: .6s ease-in-out !important;
}
</style>
<!-- <div class="col fancy-slider__container">
<div class="row fancy-slider__container__content-row">
<div class="arrow arrow--left"></div>
<div class="col col-12 fancy-slider__slider-items row row--align-center">
<div class="col fancy-slider__slide">
<img style="" src="https://placehold.co/630x630">
</div>
@for ($i = 0; $i < 3; $i++)
<div class="col fancy-slider__slide">
<img style="" src="https://placehold.co/630x630">
</div>
@endfor
</div>
<div class="arrow arrow--right"></div>
</div>
</div> -->
<div class="col fancy-slider__container">
<div class="swiper">
<div class="swiper-wrapper fancy-slider__slider-items row row--align-center">
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
</div>
<!-- <div class="swiper-pagination"></div> -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<!-- <div class="swiper-pagination"></div> -->
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
/* .swiper {
width: 85%;
height: 430px;
} */
</style>
<div class="container">
</div>
<script>
// fancy-slider__container (not needed in swiper, think it's the container then a 'wrapper' for the slider)
// fancy-slider__container__content-row
// fancy-slider__slider-items
// fancy-slider__slide fancy-slider__slide--active
const swiper = new Swiper('.swiper', {
// const swiper = new Swiper('.swiper', {
// Optional parameters
centeredSlides: false,
direction: 'horizontal',
loop: true,
// slidesPerView: 3,
slidesPerView: 1, // Arbitray number, but seems to be working. Slide 'widths' are
// allowTouchMove: true,
// autoplay: {
// delay: 2500,
// disableOnInteraction: false,
// },
// breakpoints: {
// 640: {
// slidesPerView: 2,
// spaceBetween: 20,
// },
// If we need pagination
pagination: {
// el: '.swiper-pagination',
el: '.slide__dots',
clickable: true,
renderBullet: function (index, className) {
return '<span class="slide-dot '+ className+'"><div class="slide-dot__inner"></div></span>';
// '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
// nextEl: '.arrow--right',
// prevEl: '.arrow--left',
},
// And if we need scrollbar
// scrollbar: {
// el: '.swiper-scrollbar',
// },
});
</script>
<!-- Installations gallery with view/hide -->
<div class="container">
<div class="row">
<div class="col col-12">
<h2>Fancy gallery</h2>
</div>
</div>
<div class="row gallery-fancy">
<div class="col col-3">
<img src="https://placehold.co/250x350">
<img src="https://placehold.co/240x240">
</div>
<div class="col col-3">
<img src="https://placehold.co/240x240">
<img src="https://placehold.co/240x180">
</div>
<div class="col col-3">
<img src="https://placehold.co/240x180">
<img src="https://placehold.co/250x350">
</div>
<div class="col col-3">
<img src="https://placehold.co/250x240">
<img src="https://placehold.co/250x240">
</div>
</div>
<button id="gf-toggle" class="button">View all Images</button>
<script>
let toggle = document.getElementById('gf-toggle');
let gf = document.querySelectorAll('.gallery-fancy');
toggle.addEventListener("click", function(e) {
if(gf[0].classList.contains('gallery-fancy--show')){
gf[0].classList.remove('gallery-fancy--show');
toggle.innerHTML = 'View all Images';
}else{
gf[0].classList.add('gallery-fancy--show');
toggle.innerHTML = 'Hide Images';
}
});
</script>
</div>
<!-- Footer -->
<footer style="margin-top: auto;">
<div style="background-color: #F6F6F6; color: #242322">
<div class="container">
<div class="row">
<div class="col col-2">
<a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
<a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
</div>
<div class="col col-6">
<div class="row">
@for ($i = 0; $i < 3; $i++)
<div class="col col-6">
<p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Someplace Store</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>123 Somewhere Road Someplace, PO5 C0D</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>000 0000 0000</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>email@address.co.uk</p></div>
</div>
@endfor
<div class="col col-6">
<p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Useful Links</p>
<div style="font-size: 15px;"><a href="#">Contact</a></div>
<div style="font-size: 15px;"><a href="#">About Us</a></div>
<div style="font-size: 15px;"><a href="#">Terms &amp; Conditions</a></div>
</div>
</div>
</div>
<div class="col col-4">
<div class="" style="background: #707070; padding: 20px; color: #FFF; border-radius: 16px;">
<p style="font-size: 18px; font-weight: bold;">Header</p>
<p style="font-size: 13px; margin-top: 8px;">Paragraph/content of the block</p>
<form style="margin-top: 12px; display: flex; gap: 10px;">
<div class="input-group" style="flex: 1 0 50%;">
<label for="newsletter-email" style="color: #FFF; margin: 0; position: absolute; top: 50%; transform: translate(0, -50%); left: 20px;">Email</label>
<input type="text" placeholder="Email" id="newsletter-email"
style="background: #707070; border: 1px solid #FFF; color: #FFF;"></input>
</div>
<button style="margin-top: 0;">Sign-up</button>
</form>
</div>
<div class="" style="margin-top: 30px;">
<span class="socials">
<a href="#" class="tag tag--social"><span>fb</span></a>
<a href="#" class="tag tag--social"><span>tw</span></a>
<a href="#" class="tag tag--social"><span>lnk</span></a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="background-color: #242322; color: #FFF;">
<div class="col col-12" style="padding: 10px 40px;">
<p>Copyright © SF | All Rights Reserved</p>
<p>Developed by Aney</p>
</div>
</div>
</footer>
@endsection

@ -0,0 +1,634 @@
@extends('layouts.basePage', [
'title' => 'SFs Dupe',
'breadcrumbs' => [
[
'title' => 'Home',
'href' => '/',
]
]
])
@section('content')
<header>
<div class="mobile" style="border-bottom: 1px solid orange;">
<div style="background: green;">
<div class="container container--no-gap">
<div class="row">
<div class="col col-12" style="display: flex; justify-content: space-between; padding: 10px;">
<span>Location 1</span>
<span>Location 2</span>
<span>Location 3</span>
</div>
</div>
</div>
</div>
<div class="container container--no-gap">
<div class="row row--align-center">
<div class="col col-2">
<a href="/"><img src="@assets('img/discord.png')" style="margin-left: 0;"></a>
</div>
<div class="col col-2" style="margin-left: auto;">
<span class="" onclick="document.getElementById('burger-menu').style.display='block';">Burger</span>
</div>
</div>
</div>
</div>
<!-- apply the padding-top to the header itself -->
<div class="sf-header">
<div class="container container--no-gap">
<div class="row row--align-center">
<div class="col col-2">
<a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain;
height: 50px;
width: 100px;"></a>
</div>
<div class="col col-10" style="display: flex; flex-direction: column;">
<div class="row">
<div class="col col-12 tar">
<span class="locations">
<span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
<span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
<span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
</span>
<span class="socials">
<a href="#" class="tag tag--social"><span>fb</span></a>
<a href="#" class="tag tag--social"><span>tw</span></a>
<a href="#" class="tag tag--social"><span>lnk</span></a>
</span>
</div>
</div>
<div class="row" style="margin-top: auto;">
<div class="col col-12">
<ul class="nav-list">
<li class="nav-list__item"><a href="/about">About</a></li>
<li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
<ul class="nav-list__item__dropdown">
<div class="nav-list__item__dropdown__content">
<li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
</div>
</ul>
</li>
<li class="nav-list__item"><a href="/simple">Simple floor</a></li>
<li class="nav-list__item"><a href="#faq">FAQs</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Burger nav -->
<div id="burger-menu" class="" style="display: none; position: absolute; height: 100%; left: 0; right: 0; z-index: 10; background-color: #FFFFFFD1; padding: 20px 40px; ">
<div class="row" style="margin-top: auto;">
<div class="col col-12">
<div class="" onclick="document.getElementById('burger-menu').style.display='none';">CLOSE</div>
<ul class="nav-list">
<li class="nav-list__item"><a href="/about">About</a></li>
<li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
<ul class="nav-list__item__dropdown">
<div class="nav-list__item__dropdown__content">
<li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
</div>
</ul>
</li>
<li class="nav-list__item"><a href="/simple">Simple floor</a></li>
<li class="nav-list__item"><a href="#faq">FAQs</a></li>
</ul>
</div>
</div>
</div>
<!-- END Header -->
<!-- Hero and content -->
<div style="position: relative;">
<img class="image--center" src="https://placehold.co/1920x640">
<div class="container" style="padding-left: 80px; padding-right: 80px; margin-top: -100px; background: #707070; position: relative;">
<div class="row row--align-center" style="">
<h2>Our Showrooms</h2>
<div style="margin-left: auto">
More Store information
<span style="background: grey; color: #FFF; border-radius: 999px; border: 1px solid #FFF;">-></span>
</div>
</div>
<style>
/* Changing the col padding for this row */
.row--our-showrooms{
margin-left: -60px; margin-right: -60px;
}
.row--our-showrooms [class^=col]{
padding-right: 60px; padding-left: 60px;
}
</style>
<div class="row row--our-showrooms">
<div class="col col-4" style="display: flex; align-items: center; justify-content: left;">
<div style="width: auto;">
<p>Showroom Name</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
</div>
</div>
<div class="col col-4" style="border: solid #FFF; border-width: 0 1px; display: flex; align-items: center; justify-content: center;">
<div style="width: auto;">
<p>Showroom Name</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
</div>
</div>
<div class="col col-4" style="display: flex; align-items: center; justify-content: right;">
<div style="width: auto;">
<p>Showroom Name</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
</div>
</div>
</div>
</div>
</div>
<!-- margin-bottom, to match top of image -->
<div class="container" style="margin-bottom: 40px;">
<div class="row image-over-block">
<!-- col 10 = 91% - 50% col 6 = remains 41% -->
<!-- on container of 1300 (as design) 110 = 8.4% 140 = 10.7% (110/1300)*100 -->
<div class="col col-11 image-over-block__block">
<div class="row">
<div class="col col-6">
<p>WHERE ELEGANCE MEETS PERFORMANCE</p>
<p>Amigo</p>
<p>As an Amtico One Premium Retailer, we offer expert guidance and installation. Amtico flooring is a luxurious, durable solution, replicating natural materials like wood and stone with a high-quality finish. Scratch-resistant and low-maintenance, its ideal for busy homes and commercial spaces. With unique patterns like herringbone and parquet, Amtico lets you create a stylish, long-lasting floor tailored to your vision.</p>
<a class="button" href="#">Amtico Range</a>
</div>
</div>
</div>
<!-- col 6 = 50% -->
<div class="col col-6 image-over-block__image">
<img style="" src="https://placehold.co/630x630">
</div>
</div>
</div>
<!-- Meet the Team -->
<div class="container">
<h2>Meet the Team</h2>
<div class="row">
@for ($i = 0; $i < 3; $i++)
<div class="col-xs-12 col-sm-6 col-md-4 team-block">
<img class="team-block__image" src="https://placehold.co/412x412">
<p class="team-block__name">Team member name</p>
<p class="team-block__role">Job role</p>
</div>
@endfor
</div>
</div>
<!-- Off page content -->
<div style="background: lightblue;">
<div class="container-overflow">
<div class="container">
<div class="row nowrap row--align-center">
<div class="col-xs-12 col-sm-6 col-lg-6" style="padding: 100px">
aaa
</div>
<div class="col-xs-12 col-sm-6 col-lg-7">
<img style="" src="https://placehold.co/630x630">
</div>
</div>
</div>
</div>
</div>
<!-- Showrroms -->
<div class="container">
<h2>Our Showrooms</h2>
<div class="row">
@for ($i = 0; $i < 3; $i++)
<div class="col col-xs-12 col-sm-6 col-md-4">
<div class="store-block">
<p class="store-block__title h5">Someplace Store</p>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<p>123 Somewhere Road Someplace, PO5 C0D</p>
</div>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<p>000 0000 0000</p>
</div>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<p>email@address.co.uk</p>
</div>
<div class="store-block__block">
<i class="fal fa-phone"></i>
<div>
<p>Opening Hours</p>
<div class="store-block__block__times">
<div class="row">
<div class="col-xs-12 col-sm-4" style="padding-right: 0">
<p>Mon-Fri</p>
</div>
<div class="col-xs-12 col-sm-8">
<p>9am - 4pm</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4" style="padding-right: 0">
<p>Sat</p>
</div>
<div class="col-xs-12 col-sm-8">
<p>9am - 3pm</p>
</div>
</div>
</div>
</div>
</div>
<div class="store-block__map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2369.3678147138744!2d-0.08880754332036069!3d53.56905190129133!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48789cbafda6135f%3A0x29153b25374cd41a!2sGrimsby%20Fishing%20Heritage%20Centre!5e0!3m2!1sen!2suk!4v1748549467003!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
@endfor
</div>
</div>
<!-- Advanced slider -->
<div class="overflow-container">
<div class="container">
<div class="row">
<div class="col col-12">
<h2>Fancy Range Slider</h2>
<p>Whether you desire the look of a natural wood, a calming stone, or even something more abstract, Amtico offers a range of designs and patterns across all their collections. With durable wear layers and timeless style your Amtico floor will stand the test of time.</p>
</div>
</div>
<div class="row row-for-fancy">
<div class="col col-xs-12 col-sm-12 col-3">
<h3>Slider range title</h3>
<p>With the same benefits of a standard Amtico floor, but the option for more style creativity, we can create an elegant-looking, well-designed floor, with a more modern and contemporary aesthetic choice of patterns and designs.</p>
<a class="button">Button link</a>
<div class="slide__dots" style="margin-top: 20px;">
<!-- For each slide, one of these needs adding (show like 5 of them, and then have these slide if there's more) -->
<span class="slide-dot slide-dot--active"><div class="slide-dot__inner"></div></span>
<span class="slide-dot"><div class="slide-dot__inner"></div></span>
<span class="slide-dot"><div class="slide-dot__inner"></div></span>
</div>
</div>
<style>
.fancy-slider__container{
flex: 0 0 100%;
max-width: 100%;
background: lime; overflow:hidden;
}
.fancy-slider__container__content-row{
width: auto !important; /* Maybe needed as .col div.row to remove the width: 100% that seems to mess up relative pos */
}
.fancy-slider__slider-items{
flex-wrap: nowrap;
margin-left: 25px;
transition: 0.6s ease-in-out !important;
transform: translate3d(0px, 0px, 0px); /* First one will be changed inline via JS */
}
.arrow{
background: orange; width: 35px; height: 35px; border-radius:999px;
position: absolute; z-index: 8;
}
.arrow--left{left: 0; top: 50%;}
.arrow--right{right: 20px; top: 50%;}
.row-for-fancy{}
/* Full width on mobile */
.fancy-slider__container{
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 768px){
/* On small desktop, fit with the col-3 side-content */
.fancy-slider__container{
flex: 0 0 75%;
max-width: 75%;
}
.row-for-fancy{ flex-wrap: nowrap;}
}
/* Anything above the size of the container */
@media (min-width: 1080px){
/* .fancy-slider__container{
flex: 0 0 85%;
max-width: 85%;
} */
}
/* XL */
@media (min-width: 1200px){
.fancy-slider__container{
flex: 0 0 83.33%; /* col-lg-10 now tbf */
max-width: 83.33%;
}
}
/* Basically they're just col col-6 and col col-5 atm, will need to do mixins for each col I guess for SASS dupes */
.fancy-slider__slide{
/* .col stuff */
padding-right: 0.4166666667rem;
padding-left: 0.4166666667rem;
min-height: 2px;
/* .col-5 */
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
/* Attempt at slight animation on scale */
/* animation-duration: 1s;
animation: maxOff 1s ease infinite alternate; */
transition: 1.2s ease-in-out !important;
}
.fancy-slider__slide--active{
/* .col-6 */
/* Trying in JS/inline for animation sake */
flex: 0 0 50%;
max-width: 50%;
transition: .6s ease-in-out !important;
}
</style>
<div class="col fancy-slider__container">
<div class="row fancy-slider__container__content-row">
<div class="arrow arrow--left"></div>
<div class="col col-12 fancy-slider__slider-items row row--align-center">
<div class="col fancy-slider__slide fancy-slider__slide--active">
<img style="" src="https://placehold.co/630x630">
</div>
@for ($i = 0; $i < 3; $i++)
<div class="col fancy-slider__slide">
<img style="" src="https://placehold.co/630x630">
</div>
@endfor
</div>
<div class="arrow arrow--right"></div>
</div>
</div>
<script>
//arrow--left //arrow--right
// Also set HEIGHT of slider-items to that of slider--active, otherwise it janks
// Using this as basis here: https://stackoverflow.com/a/73925390
function slideFunc(){
let slider = document.querySelector('.fancy-slider__slider-items');
let right = document.querySelector('.arrow--right');
let left = document.querySelector('.arrow--left');
let index = 0; // Faux 0, as index will be 1,2,3,4 but to start at 1 for calcs, need to be 0
let totalSlideCount = document.querySelectorAll('.fancy-slider__slider-items .fancy-slider__slide').length;
console.log(totalSlideCount);
// slider.style.width = '500px';
// slider.style.left = '0px';
// TODO: GET HOW EVER MANY ITEMS WILL BE SHOWN ON SCREEN AT ONE TIME. IF NUMBER IS
function resizeSliderHeight(){
// To prevent over the top node creation, and jank related to nodes
// first, make the slider 'complete'
// for now dupign the 'active'/1st slide and hiding
let slideItem = document.querySelector('.fancy-slider__slide--active');
let height = slideItem.offsetHeight;
console.log(height);
document.querySelector('.fancy-slider__slider-items').style.height = height+'px';
// let cloneNode = slideItem.cloneNode(true);
// slider.prepend(cloneNode);
}
resizeSliderHeight();
// onResize, or rotate, on x, y, z
// also with a wait to not do it every time a drag on window occurs (each frame resize...)
// [0][1][2][3]
// [0][1][2][3][0] While sliding to the left (moving to the next on the right)
// [1][2][3][0] Then remove the item that was just slided past/duplicated
// [0][1][2][3]
// [0][1][2][3]
// [3][0][1][2][3] Slide to the right, creating new element at start for 3
// [3][0][1][2] Then remove the original 3 keeping the dupe at the start
// WHICHEVER ELEMENT IS AT THE START/PUT TO THE START GETS --active, and the other element with it loses it, then
// gets deleted. Hopefully this makes a smooth transition on deleting items but, we'll see...
// RIGHT FIRST
function sliderNext() {
// Get the size of a slider-slide (non-active)
// First fancy-slider__slide that ISN'T --active (the big one)
let slideItem = document.querySelector('.fancy-slider__slide:not(.fancy-slider__slide--active)');
let slideScroll = slideItem.offsetWidth; // Offset width is inclusive of any padding, etc. too FYI
// slideScroll = 100; // This was the default of the function
// setTimeout(() => {
// index++;
// console.log(index);
index = ((index)%totalSlideCount)+1; // if 4 items 4%4 = 0 + 1 = 1, 3%4 = 3 + 1 = 4 0,1,2,3 = 1,2,3,4 index
nextIndex = ((index)%totalSlideCount)+1; // as above, but 2
let prevActiveSlide = slider.querySelector(`div:nth-child(${index})`);
let newActiveSlide = slider.querySelector(`div:nth-child(${index+1})`);
console.log(index);
console.log(prevActiveSlide);
console.log(nextIndex);
console.log(newActiveSlide);
// console.log(prevActiveSlide);
// console.log(newActiveSlide);
newActiveSlide.classList.add('fancy-slider__slide--active');
// TODO HERE TOO. This will error, the index here will also need to be done % ???
// actually this might be fine, and the above need changing. Will see
prevActiveSlide.classList.remove('fancy-slider__slide--active');
// ADD A 'data-slide-index'
// 1 2 3 4
// 1 2 3 4 1
// let cloneNode = prevActiveSlide.cloneNode(true);
// slider.appendChild(cloneNode);
// 0 1 2 3 0
// NEED TO USE data-slider-id instead of their actual ID location as they will be moved/removed/re-added
// clone of
// First slide (atm, the one to be removed)
// let evilSlide = slider.querySelector(`div:nth-child(1)`);
// console.log(evilSlide);
// evilSlide.remove(true);
// TODO: Only clone the next one to be shown from hidden left/right. THEN remove the old one
// don't do like this and keep cloning, that's pretty bad
// let child = slider.querySelector(`.fancy-slider__slide:nth-child(${index})`);
// cloneNode returns a duplicate of the node
// let cloneNode = newActiveSlide.cloneNode(true); // TODO: Wtf is this
// slider.style.width = `${(5 + index) * slideScroll}px`;
// slider.appendChild(cloneNode);
// For animation, may need to add a 'fixed' height/width to the items shrinking and growing
// and have those change up/down in JS slowly?
// }, 300);
// clone and move the element to bottom
// TODO: Change this to be a translate on a 'fixed width' slider
// index*slideScroll ?
// let currentLeftPosition = slider.style.left ? parseFloat(slider.style.left.replace('px', '')) : 0;
let currentLeftPosition = -((index-1)*slideScroll);
console.log('currentleft: '+currentLeftPosition);
let nextLeftPosition = currentLeftPosition - slideScroll;
console.log('nextleft: '+nextLeftPosition);
// slider.style.left = `${nextLeftPosition}px`;
slider.style.transform = `translate3d(${nextLeftPosition}px, 0px, 0px)`;
}
right.addEventListener('click', sliderNext);
}
slideFunc();
</script>
</div>
</div>
</div>
<!-- Installations gallery with view/hide -->
<div class="container">
<div class="row">
<div class="col col-12">
<h2>Fancy gallery</h2>
</div>
</div>
<div class="row gallery-fancy">
<div class="col col-3">
<img src="https://placehold.co/250x350">
<img src="https://placehold.co/240x240">
</div>
<div class="col col-3">
<img src="https://placehold.co/240x240">
<img src="https://placehold.co/240x180">
</div>
<div class="col col-3">
<img src="https://placehold.co/240x180">
<img src="https://placehold.co/250x350">
</div>
<div class="col col-3">
<img src="https://placehold.co/250x240">
<img src="https://placehold.co/250x240">
</div>
</div>
<button id="gf-toggle" class="button">View all Images</button>
<script>
let toggle = document.getElementById('gf-toggle');
let gf = document.querySelectorAll('.gallery-fancy');
toggle.addEventListener("click", function(e) {
if(gf[0].classList.contains('gallery-fancy--show')){
gf[0].classList.remove('gallery-fancy--show');
toggle.innerHTML = 'View all Images';
}else{
gf[0].classList.add('gallery-fancy--show');
toggle.innerHTML = 'Hide Images';
}
});
</script>
</div>
<!-- Footer -->
<footer style="margin-top: auto;">
<div style="background-color: #F6F6F6; color: #242322">
<div class="container">
<div class="row">
<div class="col col-xs-12 col-md-2">
<a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
<a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
</div>
<div class="col col-xs-12 col-md-6">
<div class="row">
@for ($i = 0; $i < 3; $i++)
<div class="col col-xs-12 col-6">
<p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Someplace Store</p>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>123 Somewhere Road Someplace, PO5 C0D</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>000 0000 0000</p></div>
<div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>email@address.co.uk</p></div>
</div>
@endfor
<div class="col col-xs-12 col-6">
<p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Useful Links</p>
<div style="font-size: 15px;"><a href="#">Contact</a></div>
<div style="font-size: 15px;"><a href="#">About Us</a></div>
<div style="font-size: 15px;"><a href="#">Terms &amp; Conditions</a></div>
</div>
</div>
</div>
<div class="col col-xs-12 col-md-4">
<div class="" style="background: #707070; padding: 20px; color: #FFF; border-radius: 16px;">
<p style="font-size: 18px; font-weight: bold;">Header</p>
<p style="font-size: 13px; margin-top: 8px;">Paragraph/content of the block</p>
<form style="margin-top: 12px; display: flex; gap: 10px;">
<div class="input-group" style="flex: 1 0 50%;">
<label for="newsletter-email" style="color: #FFF; margin: 0; position: absolute; top: 50%; transform: translate(0, -50%); left: 20px;">Email</label>
<input type="text" placeholder="Email" id="newsletter-email"
style="background: #707070; border: 1px solid #FFF; color: #FFF;"></input>
</div>
<button style="margin-top: 0;">Sign-up</button>
</form>
</div>
<div class="" style="margin-top: 30px;">
<span class="socials">
<a href="#" class="tag tag--social"><span>fb</span></a>
<a href="#" class="tag tag--social"><span>tw</span></a>
<a href="#" class="tag tag--social"><span>lnk</span></a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="background-color: #242322; color: #FFF;">
<div class="col col-12" style="padding: 10px 40px;">
<p>Copyright © SF | All Rights Reserved</p>
<p>Developed by Aney</p>
</div>
</div>
</footer>
@endsection

@ -29,8 +29,26 @@
vertical-align: middle; vertical-align: middle;
} }
.servers-scroll{
height: 178px;
}
.servers-bg{
background:#bac3cc;
}
.servers-bg .container{
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: contain;
}
.servers-bg--mc{ background:#96c564; }
.servers-bg--mc .container{ background-image: url(./images/mc.png); }
.servers-bg--factorio{ background:#d28c3c; }
.servers-bg--factorio .container{ background-image: url(./images/factorio.png); }
.footer{ /* */
/* .footer{
background-color: #3f3f3f ; background-color: #3f3f3f ;
color: #CCC; color: #CCC;
border-top: 1px solid #636363; border-top: 1px solid #636363;
@ -51,22 +69,4 @@
display: inline-block; display: inline-block;
margin: 0 0.1rem; margin: 0 0.1rem;
padding: 0 0.5rem; padding: 0 0.5rem;
} } */
.servers-scroll{
height: 178px;
}
.servers-bg{
background:#bac3cc;
}
.servers-bg .container{
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: contain;
}
.servers-bg--mc{ background:#96c564; }
.servers-bg--mc .container{ background-image: url(./images/mc.png); }
.servers-bg--factorio{ background:#d28c3c; }
.servers-bg--factorio .container{ background-image: url(./images/factorio.png); }

Loading…
Cancel
Save