ai-project/singletask.html at dev · NoroffFEU/ai-project · 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
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <link rel="icon" href="" />
  <title>Open A.I | Daily Planner</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="./scss/styles.css" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <script src="./js/weeklyView/utils/fileSaver.js" type="module" defer></script>

  <script type="module" src="./js/index.js"></script>
  <script src="https://kit.fontawesome.com/6fb668811a.js" crossorigin="anonymous"></script>
  <script src="./js/ui/renderSidebar.mjs" defer type="module"></script>
  <script src="./js/utils/toggleSidebar.mjs" defer type="module"></script>
  <script src="./js/chatBot/chatService.mjs" defer type="module"></script>
</head>

<body>
  <header id="sidebarNav" class="sidebarNav"></header>

  <main class="page-container">
    <img id="app-logo" class="my-2" src="./assets/logo/LogoBlack.svg" alt="logo" />
    <div class="container d-flex flex-column align-items-center my-4">
      <p>Login to use all features of the app</p>
      <p>
        <a href="./login.html" class="text-decoration-none">Login</a>
        |
        <a href="./register.html" class="text-decoration-none">Register</a>
      </p>
    </div>

    <div class="container d-flex flex-column pb-5">
      <h1 class="fw-bold text-center">Task details</h1>
      <div id="singleTaskContainer" class="mt-5"></div>

      <div class="dropdown mx-auto mt-5">
        <button id="exportBtn" class="btn btn-outline-dark px-4 dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">
          <i class="fa-solid fa-download"></i> Export list as
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#" id="exportPng">.PNG</a></li>
          <li><a class="dropdown-item" href="#" id="exportPdf">.PDF</a></li>
          <li><a class="dropdown-item" href="#" id="exportCsv">.CSV</a></li>
        </ul>
      </div>
    </div>

    <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="confirmTitle">Confirm</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="confirmBody">Are you sure?</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" id="confirmCancelBtn">
              Cancel
            </button>
            <button type="button" class="btn btn-danger" id="confirmOkBtn">
              Delete
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body text-center" id="feedbackBody">Utført</div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="loginModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">
              <i class="fa-solid fa-lightbulb text-primary"></i> Unlock Full Motivation Features
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center py-4">
            <p class="lead mb-3">You just experienced a preview!</p>
            <p class="text-muted mb-4">
              Log in to unlock unlimited AI-powered motivational messages tailored to your tasks and goals.
            </p>
            <div class="d-grid gap-2">
              <a href="./login.html" class="btn btn-primary btn-lg">
                <i class="fa-solid fa-right-to-bracket"></i> Log In
              </a>
              <a href="./register.html" class="btn btn-outline-primary">
                <i class="fa-solid fa-user-plus"></i> Create Account
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container mt-5">
      <div id="bot-container" class="card mt-5">
        <div class="card-body">
          <div id="taskHeader" class="mb-4 pb-3 border-bottom">
            <h2 id="taskTitle" class="mb-2">Workout</h2>
            <p id="taskDescription" class="text-muted mb-2">I want to workout as a novice, plan me a simple routine to
              start</p>
            <div class="d-flex gap-3 flex-wrap">
              <small class="text-muted">
                <i class="fa-solid fa-calendar"></i>
                <span id="taskDueDate">Due: Oct 2, 2025</span>
              </small>
              <small class="text-muted">
                <i class="fa-solid fa-palette"></i>
                <span id="taskColor">
                  <span id="colorBadge" class="badge" style="background-color: #4a6fa5;">Fitness</span>
                </span>
              </small>
            </div>
          </div>

          <h3 class="h5 mb-3">
            <i class="fa-solid fa-robot"></i> AI Assistant
          </h3>

          <div id="chatMessages" class="chat-messages mb-4">
          </div>


          <div class="input-group mb-3">
            <input id="userInput" type="text" class="form-control" placeholder="...type your message here" disabled
              aria-label="Chat input" aria-describedby="chat-buttons" />
          </div>

          <div id="chat-buttons" class="d-flex gap-2 justify-content-end">
            <button id="motivateBtn" type="button" class="btn btn-primary" disabled>
              <i class="fa-solid fa-lightbulb"></i> Motivate me
            </button>
            <button id="submitBtn" type="button" class="btn btn-success" disabled>
              <i class="fa-solid fa-paper-plane"></i> Submit
            </button>
          </div>

          <div id="loginPrompt" class="mt-3 text-center">
            <p class="text-muted">Log in to interact with the AI assistant</p>
            <a href="./login.html" class="btn btn-outline-primary">
              <i class="fa-solid fa-right-to-bracket"></i> Log in to use chatbot
            </a>
          </div>
        </div>
      </div>
    </div>

  </main>

  <footer id="footer-container" class="footer"></footer>
</body>

</html>