UI/index.html at master · lambda-devdesk-queue/UI · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>DevDeskQue</title>

    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body onload = "checkCookies()">
    <!-- navigation code here -->

    <nav>
        <img src="img/LOGO3.png" style="width:200px;">
        <div class="nav">
            <div class="main-header">
            <h3>DevDeskQue is an app that allows Lambda students to submit a ticket to escalate any type of question, to the help desk!</h3></div>
                <div class="navigation">
                    <a href='#'>Home</a>
                    <a href='about_us.html'>About Us</a>
                    <a href="https://devdeskque-team.netlify.com/">Log-In</a>
                </div>
        </div>
    </nav>

    <div class="container home">

        <header class="intro">
            <!-- image code here -->

            <!-- created DOM event of clicking on text and text will change-->
            <div class="students">
                <h2 onclick="this.innerHTML='Go DevDeskQue!'">Students deserve MORE</h2>
            </div>

            <p>Students at Lambda School need a place where they can escalate their concerns and receive help.  DevDeskQue allows an admin to manage help desk tickets that come in from Lambda School Students.  In addition, it allows students (2nd user type) to submit a ticket, categorize it and post it to the help channel. </p>
        </header>

        <!-- created DOM event of clicking on text and text will change-->
        <div class="mid-content-header">
            <h2 onclick="this.innerHTML='DevDeskQue is a wise choice!'">Reasons to choose DevDeskQue</h2>
        </div>

        <section class="main-image">
            <img src="img/reporting-tool.jfif" class="reporting" alt="report">
            <img src="img/collaborate.jfif" class="collaboration" alt="work together">
            <img src="img/expert-agent.png" class="agent" alt="expert agent">
        </section>

        <section class="mid-content">
            <div class="app-features">
                <h3>Reporting</h3>
                <p>Get insights about your helpdesk performance, and identify the biggest clogs in your support process</p>
            </div>
            <div class="app-features">
                <h3>Collaboration</h3>
                <p>Work together, with the right person to help you resolve your support tickets faster and more efficiently</p>
            </div>
            <div class="app-features">
                <h3>Expert Agents</h3>
                <p>Need a helping hand? Bring them on board to provide you expertise and timely resolution</p>
            </div>
        </section>

        <div class="bottom-content-lambda">
            <h2>Why Lambda students love using DevDeskQue app ...</h2>
        </div>
        <section class="table">
            <table class="table-features">
                <tr>
                    <th>Criteria</th>
                    <th>DevDeskQue</th>
                     <th>ZenDesk</th>
                </tr>
                <tr>
                    <td>Overall Rating</td>
                    <td>4.5</td>
                    <td>4.2</td>
                </tr>
                <tr>
                    <td>Meets Requirements</td>
                    <td>8.7</td>
                    <td>8.6</td>
                </tr>
                <tr>
                    <td>Ease of use</td>
                    <td>9.1</td>
                     <td>8.7</td>
                </tr>
                <tr>
                    <td>Ease of Admin</td>
                    <td>9.0</td>
                     <td>8.3</td>
                </tr>
                <tr>
                    <td>Quality of support</td>
                    <td>9.8</td>
                    <td>8.8</td>
                </tr>
            </table>
        </section>

        <section class="lambda">
            <div class="lambda-text">
                <h3>Quality. Efficient. Responsive.</h3>

                <p>QUALITY - to the highest class of work provided to each students needs</p>

                <p>EFFICIENT - our expert agents complete each task at hand from beginning to end</p>

                <p>RESPONSIVE - we guarantee every ticket received will be reviewed, worked on and completed within 24 hrs</p>

                <!--Event Listener by clicking on button will show content-->

                <a href="https://devdeskque-team.netlify.com/">
                <div class="btn">
                    Log-In
                </div></a>
                <script>
                    document.getElementsByClassName(".btn").addEventListener("click", myFunction);

                    function myFunction(){
                        alert ("Great choice!");
                    }
                </script>
            </div>

            <div class="lambda-img">
                <img src="img/lambda.jfif" class="school" alt="lambda-school">
            </div>
        </section>


        <!-- added getFullYear method and fullDate-->
        <footer>
            <p>&copy; DevDeskQue</p>
            <p id="date"></p>
        </footer>
        <script>
            const d = new Date();
            document.getElementById("date").innerHTML = d.getFullYear();
        </script>
        <script>document.write(Date());</script>

    </div>

    <!-- added onload and onunload function -->

    <p class="onload"></p>
    <script>
        function checkCookies(){
            var text = "";
            if (navigator.cookieEnabled == true){
                text = "Cookies are enabled.";
            }   else {
                text = "Cookies are not enabled.";
            }
            document.getElementsByClassName(".onload").innerHTML = text;
        }
    </script>

</body>

</html>