@extends('layouts.dashboard',['title'=> "CLock-in"])

@section('content')

<style>
    .title {
        width: "100%";
        height: 32px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-size: 24.1039px;
        line-height: 31px;
        text-align: center;
        color: #181C32;
    }

    .subTitle {
        width: "100%";
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        font-size: 17.6762px;
        line-height: 27px;
        text-align: center;
        color: #B5B5C3;

    }

    .frame-83 {
        background: #FFCC00;
        border-radius: 6px;
        padding: 9px 22px 9px 22px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 97px;
        height: 38px;
    }

    .add-new {
        color: #ffffff;
        text-align: center;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 11px;
        line-height: 12px;
        font-weight: 600;
    }
</style>

<div class="w-full mt-4 relative  shadow-md sm:rounded-lg overflow-auto ">

    <div class="w-full mt-4 relative  shadow-md sm:rounded-lg overflow-auto ">
        <div class=" items-center justify-center flex-column flex-wrap md:flex-row space-y-4 md:space-y-0 pb-4 bg-white dark:bg-gray-900">

            <div class="title">Please scan me </div>
            <p class="subTitle">Please do not share your QR code with any one</p>
            <p class="subTitle">as this code is been tracked</p>
            <div class="w-full flex justify-center">
                <img src="/images/QR Code 1.png" class="" />
            </div>
            <p class="subTitle">nsd3h2992rbjbf892392fb2b9</p>
            <div class="w-full flex justify-center">
                <div class="frame-83 mx-2 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300">
                    <div class="add-new">Verify</div>
                </div>
            </div>
        </div>

    </div>
</div>

@stop