-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
133 lines (116 loc) · 5.29 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="A chatbot designed to offer help for men with mental health queries" />
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<!-- Googlefonts CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400&family=Oxygen:wght@300;400;700&display=swap"
rel="stylesheet" />
<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/d1557c7a8f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/style.css" />
<title>ZenBot</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#" id="logo">ZenBot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="menu">
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="toolbox.html">Toolbox</a>
</li>
<li class="nav-item">
<a class="nav-link" href="crew.html">Crew</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container pt-5 pb-4">
<div class="row justify-content-center align-items-center">
<div class="col-md-12">
<div class="card zenbot-container text-center">
<div class="card-body d-flex flex-column">
<h3 class="card-title welcome">Welcome to ZenBot!</h3>
<!-- This will display on large screens and up -->
<p id="meta-lg" class="card-text px-5">Welcome to our tranquil haven. I'm Zenbot, your serene companion here
to provide a
comforting refuge for open conversations about mental well-being. This serene space is designed to be your
judgment-free sanctuary, offering a gentle ear and support as you navigate the ebbs and flows of your
thoughts and emotions. Feel free to share, reflect, and find solace in our serene corner of the digital
realm.
</p>
<!-- This will diplay on tablet size screens and down -->
<p id="meta-sm" class="card-text">
What's on your mind today?
</p>
<!-- Output area -->
<div id="outputContainer" class="mt-3 output">
<div class="d-flex justify-content-center row">
<p class="my-auto pr-2" id="promptOutput"></p>
<div id="spinner" class="spinner-border d-none" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="container pt-2">
<div class="row g-2">
<div class="col-12">
<input type="text" id="userInput" class="form-control" placeholder="Type here..." />
</div>
<div class="col-12 d-flex justify-content-center pt-3">
<button type="button" id="submitBtn" class="btn btn-colour btn-block col-6 justify-content-center">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 text-center text-md-end">
Code Institute Movember Hackathon 2023
</div>
<div class="col-12 col-md-4 text-center text-md-end">
Copyright © ZenBot Collective
</div>
<div class="col-12 col-md-4 text-center text-md-start">
<a href="crew.html" class="crew-footer" aria-label="Here, link to crew page">Crew <i
class="fa-brands fa-github"></i> and
<i class="fa-brands fa-linkedin"></i> links</a>
</div>
</div>
</footer>
<script src="assets/js/script.js"></script>
<!-- Bootstrap Script files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>