
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FSU Request a Ride System</title>
    <script src="https://fsuconnect.com/https://kit.fontawesome.com/6a37204ce6.js" crossorigin="anonymous"></script>
    <link href="https://fsuconnect.com/Content/fonts.css" rel="stylesheet" />
    <!-- Custom styles for this template-->
    <link href="https://fsuconnect.com/Content/sb-admin-2.css" rel="stylesheet" />
    <link href="https://fsuconnect.com/Content/kendo/2022.3.913/kendo.common.min.css" rel="stylesheet" />
    <link href="https://fsuconnect.com/Content/kendo/2022.3.913/kendo.material-v2.min.css" rel="stylesheet" />
    <link href="https://fsuconnect.com/Content/kendo/2022.3.913/kendo.default.mobile.min.css" rel="stylesheet" />
    <link href="https://fsuconnect.com/Content/toastr.css" rel="stylesheet" />
    <style>
        .button-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 24px 8px;
        }
		
		@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@700&display=swap');

:root {
    --brand-primary:        #72665B;
    --brand-primary-hover:  #61574D;
    --brand-primary-active: #524942;
    --brand-contrast:       #ffffff;

    --brand-danger:         #b6311a;
    --brand-danger-hover:   #972915;

    --neutral-text:         #1f1f1f;
    --neutral-subtle:       #565656;
    --surface:              #ffffff;
    --page-bg:              #f4f3f2;

    --font-body:   'Noto Sans', Helvetica, Arial, sans-serif;
    --font-head:   'Roboto', Helvetica, Arial, sans-serif;
    --font-button: 'Roboto Condensed', 'Impact', 'Franklin Gothic Bold', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--neutral-text);
    background-color: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}

#wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.button-container {
    background-color: var(--surface);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    margin-top: 24px;
}

h1 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--neutral-text);
    margin-bottom: 0;
}

#instructions {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--neutral-subtle);
}

.btn {
    font-family: var(--font-button);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    word-spacing: 0.16em;
    border: none;
    border-radius: 4px;
    padding: 8px 22px;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:focus,
.btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-primary,
.btn-success,
#refreshstatus,
#confirmrequest {
    background-color: var(--brand-primary);
    color: var(--brand-contrast);
}

.btn-primary:hover,
.btn-success:hover,
#refreshstatus:hover,
#confirmrequest:hover {
    background-color: var(--brand-primary-hover);
    color: var(--brand-contrast);
}

.btn-primary:active,
.btn-success:active,
#refreshstatus:active,
#confirmrequest:active {
    background-color: var(--brand-primary-active);
    color: var(--brand-contrast);
}

.btn-danger {
    background-color: var(--brand-danger);
    color: var(--brand-contrast);
}

.btn-danger:hover {
    background-color: var(--brand-danger-hover);
    color: var(--brand-contrast);
}

/* Pickup-location buttons keep their per-stop API colors; only shape is overridden.
   Uncomment the block below to force all to brand color instead. */
.pickup-row .btn {
    padding: 14px 22px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    text-transform: none;
    letter-spacing: normal;
    word-spacing: normal;
    font-family: var(--font-head);
}

.pickup-row .btn:hover {
    filter: brightness(0.92);
}

/*
.pickup-row .btn {
    background-color: var(--brand-primary) !important;
    color: var(--brand-contrast) !important;
}
*/

.k-window-titlebar,
.k-window-title {
    background-color: var(--brand-primary);
    color: var(--brand-contrast);
    font-family: var(--font-head);
    font-weight: 500;
}

.k-window-titlebar .k-button,
.k-window-titlebar .k-i-close,
.k-window-titlebar .k-icon {
    color: var(--brand-contrast);
}

#confirmpopup {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--neutral-text);
    padding: 8px 4px;
}

#picklocation {
    font-weight: 700;
    color: var(--brand-primary);
}

select#numcustomers,
.custom-select-lg {
    font-family: var(--font-body);
    border: 1px solid #c6c2bd;
    border-radius: 4px;
    padding: 6px 10px;
    margin-left: 8px;
}

select#numcustomers:focus,
.custom-select-lg:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(114, 102, 91, 0.3);
}
		
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="existingcontainer">
            <div class="row">
                <div class="d-flex justify-content-center"><div id="existingrequestinfo"></div></div>
            </div>
        </div>
        <div id="buttoncontainer" class="container-fluid button-container">
            <div class="row">
                <div class="col-12">
                    <h1 style="text-align:center">FSU RAM Shuttle Service</h1> <br />
                    <h2 style="text-align:center" id="instructions"></h2><br />

                </div>
            </div>
            <div class="text-center my-4">
                <button class="btn btn-primary btn-lg" id="refreshstatus">Refresh</button>        
                <button class="btn btn-danger btn-lg" id="canceltrip">Cancel</button>
            </div>

        </div>
    </div>
    <div id="confirmpopup">
        <div>Please confirm your pickup: <label id="picklocation"></label> <label id="picklocationid" style="visibility:hidden;"></label></div> <br />
        <div class="d-flex justify-content-center mt-4">
            <div>Number of People: <label id="numcustomers"></label></div>
            <select id="numcustomers" class="custom-select-lg">
                <option id="1">1</option>
                <option id="2">2</option>
                <option id="3">3</option>
                <option id="4">4</option>
            </select>
        </div>
        <div class="d-flex justify-content-center mt-4">
            <button id="confirmrequest" class="btn btn-success btn-lg mx-2">Confirm</button>
            <button id="cancelrequest" class="btn btn-danger btn-lg mx-2">Cancel</button>
        </div>
    </div>
    <script src="https://fsuconnect.com/Scripts/jquery-3.3.1.min.js"></script>
    <script src="https://fsuconnect.com/Scripts/toastr.min.js"></script>
    <script src="https://fsuconnect.com/Scripts/bootstrap.bundle.min.js"></script>
    <script src="https://fsuconnect.com/Scripts/kendo/2022.3.913/kendo.all.min.js"></script>
    <script src="https://fsuconnect.com/Scripts/jquery.easing.1.3.js"></script>
    <script src="https://fsuconnect.com/Scripts/requestride.js"></script>
</body>

</html>