@extends('layouts.default')

@section('title', 'API Olózfera')

@section('content')
    <style>
        .navbar-brand{
            margin: 0;
            padding: 0
        }
        body{
            background: var(--bs-gray-200);
        }
        .page-title{
            font-size: 64px;
            color: var(--secondary);
            text-align: center;
            margin-bottom: 0;
        }
        @media (min-width: 768px){
            .page-title{
                font-size: 128px;
                color: var(--secondary);
                text-align: center;

            }
        }
        .page-title small{
            font-size: 80px;
        }
        .logo-olozfera{
            width: 150px;
            fill: var(--bs-dark);
            display: block;
        }
        .content-container {
            height: calc(100vh - 56px);
        }
        .fa-cloud{
            font-size: 96px;
        }
        @media (min-width: 768px){
            .fa-cloud{
                font-size: 128px;
            }
        }
    </style>
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow" >
        <div class="container-fluid">

            <button id="sidebarToggler"
                    type="button"
                    class="btn btn-outline-dark mr-3 d-md-none"
                    data-bs-toggle="collapse"
                    data-bs-target="#menu-principal">
                <i class="fas fa-bars"></i>
            </button>

            <a class="navbar-brand" href="#">
                <svg class="logo-olozfera" viewBox="0 0 251.12 52">
                    <g fill-rule="evenodd" clip-rule="evenodd">
                        <path d="M0 26C0 11.64 11.58 0 25.85 0A25.87 25.87 0 0 1 51.7 26c0 14.36-11.58 26-25.85 26A25.93 25.93 0 0 1 0 26Zm2.18 0a23.77 23.77 0 0 0 23.67 23.81A23.77 23.77 0 0 0 49.52 26 23.77 23.77 0 0 0 25.85 2.19 23.77 23.77 0 0 0 2.18 26Z"></path>
                        <path d="m25.5 24.42 2.61 1.75 14.8-12.34v25.3l-14.8-10.07-10.18 8.4-1.4-1.74 9.67-8.06-2.61-1.75L8.7 38.17V13.04l14.9 10.07 10.18-8.4 1.4 1.75Zm-14.53 9.02v-16.1l10.79 7.26zm29.85-14.8v16.2l-10.8-7.35Zm80.91-11.72h3.28l-3.19 5.25h-3.28zM83.46 17.16c1.19 1.14 2 2.54 2.65 4.03.54 1.48.9 3.06 1 4.81v.18a12.97 12.97 0 0 1-3.55 8.93 12.39 12.39 0 0 1-4.1 2.8c-1.65.7-3.47 1.05-5.38 1.05a13.03 13.03 0 0 1-9.48-3.86 12 12 0 0 1-2.64-4.02 12.26 12.26 0 0 1-.91-4.82v-.08a12.7 12.7 0 0 1 7.65-11.82c1.64-.7 3.46-1.05 5.38-1.05 1.91 0 3.64.35 5.28 1.05 1.64.7 3.01 1.66 4.1 2.8zM69.98 35.8c1.18.53 2.64.8 4.1.8 1.46 0 2.82-.27 4.1-.8a9.26 9.26 0 0 0 3.28-2.18c.91-.97 1.55-2.1 2.1-3.33.45-1.23.72-2.63.72-4.03v-.08a10.72 10.72 0 0 0-3-7.44c-.91-.97-2-1.76-3.28-2.28a10.34 10.34 0 0 0-4.1-.79c-1.46 0-2.83.26-4.1.79a9.26 9.26 0 0 0-3.28 2.19c-.92.96-1.55 2.1-2.1 3.32a11.73 11.73 0 0 0-.73 4.03v.09a10.72 10.72 0 0 0 3 7.44 9.5 9.5 0 0 0 3.29 2.27zm59.86-18.64c1.19 1.14 2 2.54 2.65 4.03.54 1.48.9 3.06 1 4.81v.18a12.98 12.98 0 0 1-3.55 8.93 12.4 12.4 0 0 1-4.1 2.8c-1.65.7-3.47 1.05-5.38 1.05a13.03 13.03 0 0 1-9.48-3.86 12 12 0 0 1-2.64-4.02 12.26 12.26 0 0 1-.91-4.82v-.08a12.7 12.7 0 0 1 13.03-12.87c1.91 0 3.64.35 5.28 1.05 1.55.7 3 1.66 4.1 2.8zM116.27 35.8c1.18.53 2.64.8 4.1.8 1.55 0 2.91-.27 4.1-.8a9.25 9.25 0 0 0 3.28-2.18c.9-.97 1.55-2.1 2.1-3.33.45-1.23.72-2.63.72-4.03v-.08a10.7 10.7 0 0 0-3-7.44 9.4 9.4 0 0 0-3.29-2.28 10.34 10.34 0 0 0-4.1-.79c-1.45 0-2.82.26-4.1.79a9.26 9.26 0 0 0-3.28 2.19c-.9.96-1.55 2.1-2.1 3.32a11.72 11.72 0 0 0-.72 4.03v.09a10.71 10.71 0 0 0 3 7.44 9.5 9.5 0 0 0 3.29 2.27zM93.3 13.66h-2.64v24.86h17.4v-2.37H93.3Zm65.97 24.86h2.64V27.58h14.22V25.2h-14.21v-9.19h15.85v-2.36h-18.5zm24.61-11.38h14.4v-2.37h-14.4v-8.75h15.94v-2.36h-18.59v24.86H200v-2.37h-16.12zm37.62-1.23a8.7 8.7 0 0 1-2.45 1.5c-.82.34-1.55.52-2.37.7l8.38 10.4h-3.37l-8.02-9.97h-7.65v9.98h-2.65V13.48h10.94c1.64 0 3 .26 4.28.7a8.19 8.19 0 0 1 3.1 1.84 6.62 6.62 0 0 1 2 4.73v.09c0 1.05-.18 2-.54 2.88a5.63 5.63 0 0 1-1.64 2.2zm-7.28-9.89h-8.3v10.16h8.12c1 0 2-.1 2.82-.36a8.33 8.33 0 0 0 2.19-1.05 4.36 4.36 0 0 0 2-3.76v-.09c0-1.57-.54-2.71-1.73-3.59-1.18-.87-2.92-1.31-5.1-1.31z"></path>
                        <path d="m224.7 38.52 13.2-25.48 13.22 25.48h-2.92l-3.19-6.22h-14.3l-3.19 6.22zm19.22-8.5-6.01-11.64-6.02 11.65zm-110.34-14v-2.28h22.41l-7.92 9.9c.63.78 1 1.75 1 2.8a4.8 4.8 0 0 1-4.92 4.72c-.64 0-1.28-.08-1.82-.35l-4.29 5.34h17.59v2.37h-22.6l7.38-9.2a4.64 4.64 0 0 1-1.1-2.97 4.8 4.8 0 0 1 4.93-4.73c.64 0 1.37.18 2 .44l4.83-6.04zm8.2 10.33a2.3 2.3 0 0 0 2.37 2.28 2.37 2.37 0 0 0 2.37-2.28 2.3 2.3 0 0 0-2.37-2.28 2.3 2.3 0 0 0-2.37 2.28z"></path>
                    </g>
                </svg>
            </a>

            <div class="collapse navbar-collapse" id="menu-principal">
                <ul class="navbar-nav ms-auto">
                    @auth
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('accounts.index') }}">
                                <i class="fas fa-dashboard"></i>
                                {{__('Dashboard')}}
                            </a>
                        </li>
                    @else
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">
                                <i class="fas fa-sign-in"></i>
                                {{__('Login')}}
                            </a>
                        </li>
                        @if (Route::has('register'))
                            <li class="nav-item">

                                <a class="nav-link" href="{{ route('register') }}">
                                    <i class="fa fa-user-plus"></i>
                                    {{__('Register')}}
                                </a>
                            </li>
                        @endif
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-xl content-container">
            <div class="d-flex justify-content-center align-items-center h-100">
                <div class="text-center text-secondary">
                    <i class="fas fa-cloud"></i>
                    <h1 class="page-title">API Olózfera</h1>
                </div>

            </div>
    </div>
@endsection