voteamerica.github.io/pages/self-service.html at 937d3deb078f7dcd0fd4f6fe97ceeb3fa49b2dc2 · voteamerica/voteamerica.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
layout: default
permalink: self-service/
selfservice: true
title: Manage your matches
---

<main class="content">
    <div class="wrapper single-column offset-top">
        <div class="bannerbox">
            <h1 class="bannerbox__title">Manage your matches</h1>
            <div class="bannerbox__content self-service">
                <form id="login" aria-hidden="false">
                    <div id="enter-uuid" class="form-group">
                        <label for="inputUUID">Please enter your reference ID number</label>
                        <input type="text" id="inputUUID" class="form-input form-input--medium" placeholder="e.g. 1a2b-3c4d-5e6f-7g8hi9j0klmno" required />
                        <div class="help-block with-errors"></div>
                    </div>
                    <div id="enter-phone" class="form-group">
                        <label for="inputPhoneNumber">Enter your phone number to verify your identity</label>
                        <input type="tel" id="inputPhoneNumber" class="form-input form-input--medium" placeholder="e.g. 1234567890" required />
                        <div class="help-block with-errors"></div>
                    </div>
                    <div id="enter-type" class="form-group checkbox checkbox--multi">
                        <label>
                            <input type="radio" name="inputType" value="rider" required /> I have requested a ride
                        </label>
                        <label>
                            <input type="radio" name="inputType" value="driver" required /> I have made a ride offer
                        </label>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <button class="button">Log in</button>
                    </div>
                    <div id="manageLogin" >
                        <p id="infoLogin"></p>
                    </div>
                </form>

                <div id="manage" style="display:none" aria-hidden="true">
                    <p>Welcome to the new self-service admin page. Please note that this section is still a work in progress. Some features are still under contruction, and may be a little temperamental. If you encounter any issues, please <a href="mailto:selfservice@carpoolvote.com">email us</a>. Thank you for your understanding!</p>
                    <p id="infoAdmin"></p>

                    <!--https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute  -->
                    <!--https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby-->
                    <div id="driverInfo" aria-labelledby="driverInfoHeader">
                        <h2 id="driverInfoHeader" class="self-service-heading">Driver Info</h2>
                        <ul aria-labelledby="driverInfoHeader"></ul>
                    </div>

                    <div id="driverProposedMatches" aria-labelledby="driverProposedHeader">
                        <h2 id="driverProposedHeader" class="self-service-heading">Driver Proposed Matches</h2>
                        <ul aria-labelledby="driverProposedHeader"></ul>
                        <br><br>
                    </div>

                    <div id="driverConfirmedMatches" aria-labelledby="driverConfirmedHeader">
                        <h2 id="driverConfirmedHeader" class="self-service-heading">Driver Confirmed Matches</h2>
                        <ul aria-labelledby="driverConfirmedHeader"></ul>
                        <br><br>
                    </div>

                    <div id="riderInfo" aria-labelledby="riderInfoHeader">
                        <h2 id="riderInfoHeader" class="self-service-heading">Rider Info</h2>
                        <ul aria-labelledby="riderInfoHeader"></ul>
                    </div>

                    <div id="riderConfirmedMatch" aria-labelledby="riderConfirmedHeader">
                        <h2 id="riderConfirmedHeader" class="self-service-heading">Rider Confirmed Match</h2>
                        <ul aria-labelledby="riderConfirmedHeader"></ul>
                        <br><br>
                    </div>

                    <div class="form-group">
                        <button class="button button--danger" id="btnCancelRideRequest">Cancel Ride Request</button>
                        <button class="button button--danger" id="btnCancelMatch">Cancel Match Request</button>
                        <button class="button button--danger" id="btnCancelDriveOffer">Cancel Drive Offer Request</button>
                        <button class="button button--danger" id="btnPauseDriverMatch">Pause Notifications</button>
                        <button class="button" id="btnAcceptDriverMatch">Accept Driver Match Request</button>
                    </div>
                    <div class="form-group">
                        <button class="button button--small button--danger logout" id="logout">Logout</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>