Ignore:
Timestamp:
06/12/24 20:14:25 (7 months ago)
Author:
bube-ristovska <ristovska725@…>
Branches:
main
Children:
69e9f5d
Parents:
249bf91
Message:

Final features

File:
1 edited

Legend:

Unmodified
Added
Removed

  • resources/views/register-statement.blade.php

    r249bf91 r768f473  
    1 <h1>TODO</h1>
     1<!DOCTYPE html>
     2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     3<head>
     4    <meta charset="utf-8">
     5    <meta name="viewport" content="width=device-width, initial-scale=1">
     6
     7    <title>Laravel</title>
     8
     9    <!-- Fonts -->
     10    <link rel="preconnect" href="https://fonts.bunny.net">
     11    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
     12
     13    <!-- Styles -->
     14    <style>
     15        @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
     16        .font-family-karla { font-family: karla; }
     17        .bg-sidebar { background: #3d68ff; }
     18        .cta-btn { color: #3d68ff; }
     19        .upgrade-btn { background: #1947ee; }
     20        .upgrade-btn:hover { background: #0038fd; }
     21        .active-nav-link { background: #1947ee; }
     22        .nav-item:hover { background: #1947ee; }
     23        .account-link:hover { background: #3d68ff; }
     24        .flex-parent-element {
     25            display: flex;
     26            width: 50%;
     27        }
     28
     29        .flex-child-element {
     30            flex: 1;
     31            margin: 10px;
     32        }
     33
     34        .flex-child-element:first-child {
     35            margin-right: 20px;
     36        }
     37        .container {
     38            display: block;
     39            position: relative;
     40            padding-left: 35px;
     41            margin-bottom: 12px;
     42            cursor: pointer;
     43            font-size: 22px;
     44            -webkit-user-select: none;
     45            -moz-user-select: none;
     46            -ms-user-select: none;
     47            user-select: none;
     48        }
     49        .center {
     50            border: 5px solid;
     51            width: 50%;
     52            padding: 10px;
     53            margin-left: 400px;
     54        }
     55
     56        /* Hide the browser's default checkbox */
     57        .container input {
     58            position: absolute;
     59            opacity: 0;
     60            cursor: pointer;
     61            height: 0;
     62            width: 0;
     63        }
     64
     65        /* Create a custom checkbox */
     66        .checkmark {
     67            position: absolute;
     68            top: 0;
     69            left: 0;
     70            height: 25px;
     71            width: 25px;
     72            background-color: #eee;
     73        }
     74
     75        /* On mouse-over, add a grey background color */
     76        .container:hover input ~ .checkmark {
     77            background-color: #ccc;
     78        }
     79
     80        /* When the checkbox is checked, add a blue background */
     81        .container input:checked ~ .checkmark {
     82            background-color: #2196F3;
     83        }
     84
     85        /* Create the checkmark/indicator (hidden when not checked) */
     86        .checkmark:after {
     87            content: "";
     88            position: absolute;
     89            display: none;
     90        }
     91
     92        /* Show the checkmark when checked */
     93        .container input:checked ~ .checkmark:after {
     94            display: block;
     95        }
     96
     97        /* Style the checkmark/indicator */
     98        .container .checkmark:after {
     99            left: 9px;
     100            top: 5px;
     101            width: 5px;
     102            height: 10px;
     103            border: solid white;
     104            border-width: 0 3px 3px 0;
     105            -webkit-transform: rotate(45deg);
     106            -ms-transform: rotate(45deg);
     107            transform: rotate(45deg);
     108        }
     109        body > div > main > div > div > form{
     110            margin-left: 500px;
     111            width: 600px;
     112        }
     113
     114        .alert-success {
     115            color: #3c763d;
     116            background-color: #dff0d8;
     117            border-color: #d6e9c6;
     118        }
     119        .alert {
     120            padding: 15px;
     121            margin-bottom: 20px;
     122            border: 1px solid transparent;
     123            border-radius: 4px;
     124            width: 200px;
     125            float: right;
     126        }
     127    </style>
     128    <script src="https://cdn.tailwindcss.com"></script>
     129
     130</head>
     131<body class="bg-gray-100 font-family-karla flex">
     132<aside class="relative bg-sidebar h-screen w-64 hidden sm:block shadow-xl">
     133    <div class="p-6">
     134        @if (Session::get('is_policeman'))
     135            <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Полицаец</a>
     136        @else
     137            <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
     138            <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
     139                <i class="fas fa-plus mr-3"></i> <a href="/register-policeman">Додади полицаец</a>
     140            </button>
     141        @endif
     142    </div>
     143    <nav class="text-white text-base font-semibold pt-3">
     144        <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
     145            <i class="fas fa-tachometer-alt mr-3"></i>
     146            Контролна табла
     147        </a>
     148        <a href="/employees" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
     149            <i class="fas fa-sticky-note mr-3"></i>
     150            Вработени
     151        </a>
     152        <a href="/filter" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
     153            <i class="fas fa-table mr-3"></i>
     154            Филтрирај граѓани
     155        </a>
     156        <a href="/cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
     157            <i class="fas fa-align-left mr-3"></i>
     158            Случаи
     159        </a>
     160        <a href="/finished_cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
     161            <i class="fas fa-calendar mr-3"></i>
     162            Архива
     163        </a>
     164    </nav>
     165    <a href="#" class="absolute w-full upgrade-btn bottom-0 active-nav-link text-white flex items-center justify-center py-4">
     166        <i class="fas fa-arrow-circle-up mr-3"></i>
     167
     168    </a>
     169</aside>
     170
     171<div class="w-full flex flex-col h-screen overflow-y-hidden">
     172    <!-- Desktop Header -->
     173    <header class="w-full items-center bg-white py-2 px-6 hidden sm:flex">
     174        <div class="w-1/2"></div>
     175        <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
     176            <button @click="isOpen = !isOpen" class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none">
     177                @php
     178                    $person = DB::select('select * from people where pe_id=:pe_id;', ['pe_id' => Session::get('pe_id')]);
     179
     180                    if (!empty($person)) {
     181                        $image = $person[0]->picture;
     182                    } else {
     183                        $image = null;
     184                    }
     185                @endphp
     186
     187                <img src="{{ $image }}">
     188
     189            </button>
     190            <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
     191            <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16">
     192                <a href="#" class="block px-4 py-2 account-link hover:text-white">Профил</a>
     193                <a href="#" class="block px-4 py-2 account-link hover:text-white">Помош</a>
     194                <a href="/logout"class="block px-4 py-2 account-link hover:text-white">Одјави се</a>
     195            </div>
     196        </div>
     197    </header>
     198
     199    <!-- Mobile Header & Nav -->
     200    <header x-data="{ isOpen: false }" class="w-full bg-sidebar py-5 px-6 sm:hidden">
     201        <div class="flex items-center justify-between">
     202            <a href="/" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
     203            <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
     204                <i x-show="!isOpen" class="fas fa-bars"></i>
     205                <i x-show="isOpen" class="fas fa-times"></i>
     206            </button>
     207        </div>
     208
     209        <!-- Dropdown Nav -->
     210        <nav :class="isOpen ? 'flex': 'hidden'" class="flex flex-col pt-4">
     211            <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     212                <i class="fas fa-tachometer-alt mr-3"></i>
     213                Контролна табла
     214            </a>
     215            <a href="/employees" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     216                <i class="fas fa-sticky-note mr-3"></i>
     217                Вработени
     218            </a>
     219            <a href="/filter"  class="flex items-center active-nav-link text-white py-2 pl-4 nav-item">
     220                <i class="fas fa-table mr-3"></i>
     221                Филтрирај граѓани
     222            </a>
     223            <a href="/cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     224                <i class="fas fa-align-left mr-3"></i>
     225                Случаи
     226            </a>
     227
     228            <a href="/finished_cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     229                <i class="fas fa-calendar mr-3"></i>
     230                Архива
     231            </a>
     232            <a href="/help" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     233                <i class="fas fa-cogs mr-3"></i>
     234                Помош
     235            </a>
     236            <a href="/myprofile" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     237                <i class="fas fa-user mr-3"></i>
     238                Мој профил
     239            </a>
     240            <a href="/logout" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
     241                <i class="fas fa-sign-out-alt mr-3"></i>
     242                Одјави се
     243            </a>
     244
     245        </nav>
     246        <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
     247            <i class="fas fa-plus mr-3"></i> Нов извештај
     248        </button>
     249    </header>
     250
     251
     252    <main class="w-full flex-grow p-6">
     253
     254        <h1 class="text-3xl text-black pb-6">Контролна табла</h1>
     255
     256
     257
     258        <div class="w-full mt-12">
     259            <p class="text-xl pb-3 flex items-center">
     260                <i class="fas fa-list mr-3"></i> Додавање на изјава за случај со контролен број {{ session('c_id') }}
     261            </p>
     262
     263            <div class=".center">
     264                <form method="POST" action="/register-statement" class="mt-10 .center">
     265                    @csrf
     266                    <div class="mb-6">
     267                        <label class="block mb-2 uppercase font-bold text-xs text-gray-700"
     268                               for="description"
     269                        >
     270                            Опис
     271                        </label>
     272
     273                        <textarea class="border border-gray-400 p-2 w-full"
     274                               name="description"
     275                               id="description"
     276                               required
     277                        > </textarea>
     278                    </div>
     279                    <div class="mb-6">
     280                        <label class="block mb-2 uppercase font-bold text-xs text-gray-700"
     281                               for="incident_timestamp"
     282                        >
     283                            Време:
     284                        </label>
     285
     286                        <input class="border border-gray-400 p-2 w-full  text-gray-500"
     287                               type="datetime-local"
     288                               name="incident_timestamp"
     289                               value=""
     290                               id="incident_timestamp"
     291                               required
     292                             >
     293                    </div>
     294
     295                    @error('incident_timestamp')
     296                    <p class="text-red-500 text-xs mt-1">{{$message}}</p>
     297                    @enderror
     298
     299                    <div class="mb-6">
     300                        <label class="block mb-2 uppercase font-bold text-xs text-gray-700"
     301                               for="incident_place"
     302                        >
     303                            Место:
     304                        </label>
     305
     306                        <input class="border border-gray-400 p-2 w-full text-gray-500"
     307                               type="text"
     308                               name="incident_place"
     309                               value=""
     310                               id="incident_place"
     311                               required
     312                         >
     313                    </div>
     314                    @error('incident_place')
     315                    <p class="text-red-500 text-xs mt-1">{{$message}}</p>
     316                    @enderror
     317
     318
     319                    <div class="mb-6">
     320                        <label class="block mb-2 uppercase font-bold text-xs text-gray-700"
     321                               for="embg"
     322                        >
     323                            ЕМБГ
     324                        </label>
     325
     326                        <input class="border border-gray-400 p-2 w-full text-gray-500"
     327                               type="text"
     328                               name="embg"
     329                               value=""
     330                               id="embg"
     331                               required
     332                        >
     333                    </div>
     334                    <label for="witness">Сведок</label>
     335                    <input type="radio" id="witness" name="role" value="witness">
     336
     337                    <label for="victim">Жртва</label>
     338                    <input type="radio" id="victim" name="role" value="victim">
     339
     340                    <div class="mb-6">
     341                        <button type="submit"
     342                                class="bg-blue-400 text-white rounded py-2 px-4 hover:bg-blue-500"
     343                        >
     344                            Додади
     345                        </button>
     346                    </div>
     347                </form>
     348
     349
     350            </div>
     351        </div>
     352    </main>
     353</div>
     354
     355
     356<!-- AlpineJS -->
     357<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
     358<!-- Font Awesome -->
     359<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
     360<!-- ChartJS -->
     361<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
     362<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     363
     364
     365
     366
     367</body>
     368</html>
Note: See TracChangeset for help on using the changeset viewer.