Task-manager/help.html at main · bhargavbhat18/Task-manager · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TaskFlux | Help Center</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css">
<style>
  .help-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }
  .h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
  @media(max-width: 768px) { .h-grid { grid-template-columns: 1fr; } }

  .h-card { padding: 32px; border-radius: 1.5rem; }
  .h-title { font-size: 20px; font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }

  .faq-i { margin-bottom: 16px; border-bottom: 1px solid var(--gbo); padding-bottom: 16px; }
  .faq-q { font-weight: 600; color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .faq-a { font-size: 14px; color: var(--on-surface-var); margin-top: 12px; line-height: 1.6; display: none; }
  .faq-i.open .faq-a { display: block; }
  .faq-i.open .ms { transform: rotate(180deg); }

  .contact-form .fg { margin-bottom: 20px; }
  .back-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); text-decoration: none; font-weight: 600; margin-bottom: 24px; cursor: pointer; }
</style>
</head>
<body>
<div class="mesh"><div class="m1"></div><div class="m2"></div></div>

<div class="help-container">
  <a href="dashboard.html" class="back-btn"><span class="ms">arrow_back</span>Back to Dashboard</a>

  <h1 style="font-size:32px; font-weight:700; margin-bottom:12px;">Help Center</h1>
  <p style="color:var(--on-surface-var); font-size:16px;">Find answers, learn tricks, and get support.</p>

  <div class="h-grid">
    <!-- FAQ Section -->
    <div class="h-card glass">
      <h2 class="h-title"><span class="ms">quiz</span>Frequently Asked Questions</h2>
      <div class="faq-list">
        <div class="faq-i">
          <div class="faq-q">How do I create a new task? <span class="ms">expand_more</span></div>
          <div class="faq-a">Click the "New Task" button in the sidebar or press "N" on your keyboard. Fill in the details and hit Save.</div>
        </div>
        <div class="faq-i">
          <div class="faq-q">Is my data stored securely? <span class="ms">expand_more</span></div>
          <div class="faq-a">Currently, TaskFlux stores all your data locally in your browser's LocalStorage. This means your data never leaves your device.</div>
        </div>
        <div class="faq-i">
          <div class="faq-q">Can I use TaskFlux on mobile? <span class="ms">expand_more</span></div>
          <div class="faq-a">Yes! TaskFlux is fully responsive and works great on smartphones and tablets.</div>
        </div>
        <div class="faq-i">
          <div class="faq-q">How do I reset my account? <span class="ms">expand_more</span></div>
          <div class="faq-a">Go to Settings > Danger Zone and click "Reset Data". This will clear all your tasks and history.</div>
        </div>
      </div>
    </div>

    <!-- Contact Support -->
    <div class="h-card glass">
      <h2 class="h-title"><span class="ms">support_agent</span>Contact Support</h2>
      <form class="contact-form" id="contactForm">
        <div class="fg">
          <label class="fl">Subject</label>
          <select class="fsl">
            <option>General Inquiry</option>
            <option>Technical Issue</option>
            <option>Feature Request</option>
            <option>Billing Question</option>
          </select>
        </div>
        <div class="fg">
          <label class="fl">Message</label>
          <textarea class="fta" placeholder="How can we help you?" style="min-height:120px;"></textarea>
        </div>
        <button type="submit" class="btn-s" style="width:100%;">Send Message</button>
      </form>
    </div>
  </div>
</div>

<div id="toast"><span class="ms" id="tIco">check_circle</span><span id="tMsg"></span></div>

<script src="js/utils.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // FAQ Accordion
    document.querySelectorAll('.faq-q').forEach(q => {
      q.addEventListener('click', () => {
        const item = q.parentElement;
        item.classList.toggle('open');
      });
    });

    // Contact Form
    document.getElementById('contactForm').addEventListener('submit', (e) => {
      e.preventDefault();
      utils.showToast('Message sent! We\'ll get back to you soon.', 's');
      e.target.reset();
    });
  });
</script>
</body>
</html>