caffine/cafine.html at main · sidneycodes1/caffine · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
  <title>Cafine</title>
  <link rel="stylesheet" href="cafine.css">
</head>
<body>
  <header>
    <div class="navbar-container">
      <nav>
        <div class="logo">
          <img src="cafin.img/afro-nature-seeklogo.svg" alt="Site Logo">
        </div>

        <button class="navbar-toggle" id="navbar-toggle">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </button>

        <ul class="nav-links" id="nav-links">
          <li><a href="#">Home</a></li>
          <li><a href="#introduction">Introduction</a></li>
          <li><a href="#">Consumption</a></li>
          <li><a href="#">Risk</a></li>
          <li><a href="#">Benefits</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
   <section class="hero">
  <div class="hero-text">
    <h1><span>Beyond the Cup</span>,<br>Discover the World of Caffeine</h1>
    <p>From your morning coffee to energy drinks, learn how caffeine affects your body and mind.</p>
    <div class="hero-buttons">
      <button href="#introduction" class="btn-primary">Introduction</button>
      <button class="btn-outline">Benefits→</button>
    </div>
  </div>

  <div class="hero-image">
     <div class="circle">
        <img src="cafin.img/cafin 11.avif" alt="Cup of Coffee">
     </div>
  </div>
</section>
<section id="introduction" class="intro-section">
  <div class="intro-content">
    <h2>Introduction to Caffeine</h2>
    <p>
      Caffeine is a naturally occurring stimulant found in coffee beans, tea leaves,
      cacao pods, and several other plants. It works primarily by blocking the
      adenosine receptors in the brain, reducing feelings of tiredness and increasing
      alertness and concentration. Caffeine is one of the most widely consumed
      psychoactive substances in the world, influencing the central nervous system
      to improve focus and energy levels temporarily.
    </p>
    <p>
      While it plays a vital role in daily routines for billions of people, its effects
      on the body depend on dosage, metabolism, and individual sensitivity. Understanding
      how caffeine interacts with our biology helps explain why a morning cup of coffee
      can be both a comfort and a science.
    </p>
  </div>
  <div class="intro-image">
    <img src="cafin.img/cafin.mol.jpg" alt="Caffeine molecular structure or coffee image" />
  </div>
</section>
  <div class="chat-container">
    <div class="messages" id="chat-messages"></div>
    <div class="chat-input">
      <input type="text" id="chat-input" placeholder="Enter your drink (e.g., coffee, green tea)">
      <button onclick="sendChatMessage()">Send</button>
    </div>
  </div>
</section>


  </main>

  <footer></footer>

  <!-- ✅ JS for toggle -->
  <script>
    const toggle = document.getElementById('navbar-toggle');
    const navLinks = document.getElementById('nav-links');

    toggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
      toggle.classList.toggle('open');
    });

const links = document.querySelectorAll('nav ul li a');

// --- Desktop hover functionality ---
toggle.addEventListener('mouseenter', () => {
  navLinks.classList.add('active');
  toggle.classList.add('open');
});

navLinks.addEventListener('mouseleave', () => {
  navLinks.classList.remove('active');
  toggle.classList.remove('open');
});

// --- Mobile / Touch functionality ---
toggle.addEventListener('click', () => {
  navLinks.classList.toggle('active');
  toggle.classList.toggle('open');
});

// Close menu on link click (works for mobile)
links.forEach(link => {
  link.addEventListener('click', () => {
    navLinks.classList.remove('active');
    toggle.classList.remove('open');
  });
});

// Optional: Clicking outside closes menu (both desktop & mobile)
document.addEventListener('click', (event) => {
  if (!navLinks.contains(event.target) && !toggle.contains(event.target)) {
    navLinks.classList.remove('active');
    toggle.classList.remove('open');
  }
});


  </script>
</body>
</html>