yum-unity/info.html at main · dvvvjula/yum-unity · 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>YumUnity</title>
    <link rel="stylesheet" href="info-styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="page-container">
    <!-- header -->
    <header class="page-header">
      <div class="account-prompt">
        No account?
        <a class="signup-link" href="authentication/register.html">Sign up!</a>
      </div>
      <div class="logo-container">
        <img
          alt="YumUnity logo in black handwriting style"
          class="logo"
          src="pictures/logo.png"
        />
      </div>
      <div>
        <button
          class="login-button"
          type="button"
          onclick="window.location.href='authentication/login.html'"
        >
          Log in
        </button>
      </div>
    </header>

    <!-- hero section -->
    <section
      class="hero-section"
      aria-label="Hero section with rice and vegetables background"
    >
      <img
        alt="Close-up image of a plate with rice, asparagus, and leafy greens on a striped tablecloth"
        aria-hidden="true"
        class="hero-image"
        src="pictures/food-main-page.jpg"
      />
      <div class="hero-content">
        <h1 class="hero-title pecita-font">Where every bite <br/>tells a story.</h1>
        </p>
        <p class="hero-text">
          Welcome to YumUnity — the ultimate social experience for food lovers
          everywhere. Share your favorite meals, post delicious food photos, and
          explore a vibrant community of fellow foodies. From hearty home-cooked
          dinners to trendy café treats, every bite finds its place here. Like,
          comment, and connect with friends over your shared passion for flavor.
        </p>
        <p class="hero-text">
          Track your meals, monitor your calories, and keep a tasty record of
          everything you eat. Whether you're discovering new recipes or
          reminiscing on your culinary adventures, YumUnity helps you celebrate
          every plate. Join today and turn your love for food into a delicious
          journey worth sharing.
        </p>
      </div>
    </section>

    <!-- main content -->
    <main class="main-content">
      <!-- left side: Your Feed, But Tastier -->
      <section class="feed-section">
        <h2 class="section-title">Your Feed, But Tastier</h2>
        <div class="carousel-container">
          <button
            aria-label="Previous image"
            class="carousel-button prev-button"
            type="button"
            onclick="previousImage()"
          >
            <i class="fas fa-chevron-left"></i>
          </button>
          <div class="carousel-content">
            <img
              alt="Food image"
              class="carousel-image"
              id="carousel-image"
              src="pictures/pic-gallery-1.png"
            />
          </div>
          <button
            aria-label="Next image"
            class="carousel-button next-button"
            type="button"
            onclick="nextImage()"
          >
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </section>

      <!-- right side: Join the YumUnity -->
      <section class="join-section">
        <h2 class="section-title">
          Join the
          <strong class="yumunity-link bold-yumunity">YumUnity</strong>!
        </h2>
        <div class="join-content text-center">
          <p>
            The vibrant social network built for food lovers, by food lovers.
            Whether you're obsessed with brunch aesthetics, hunting for
            late-night snack inspiration, or crafting gourmet experiences at
            home, YumUnity gives you a place to share it all.
          </p>
          <p>
            At YumUnity, connection is at the heart of every bite. Looking to
            level up your food game? You can even invite your friends to join in
            the fun and build your own flavorful corner of the community.
            YumUnity isn’t just about food — it’s about the stories, memories,
            and moments we share around the table.
            But YumUnity goes beyond pretty pictures. Keep track of what you eat
            with smart meal logging and get a clear picture of your nutrition.
            Whether you're meal-prepping, mindful eating, or simply curious
            about your habits. It’s culture. It’s creativity. It’s community.
            And it all comes together right here.
          </p>
        </div>
        <button
          class="signup-button"
          type="button"
          onclick="window.location.href='authentication/register.html'"
        >
          Sign up
        </button>
      </section>
    </main>

    <!-- footer -->
    <footer class="page-footer">
      <a class="footer-link" href="#">ABOUT US</a>
      <div class="copyright">
        <span>©</span>
        <span class="footer-yumunity pecita-font">YumUnity</span>
        <span>All right reserved.</span>
      </div>
      <div class="social-links">
        <a aria-label="Facebook" class="social-link" href="#"
          ><i class="fab fa-facebook-f"></i
        ></a>
        <a aria-label="Instagram" class="social-link" href="#"
          ><i class="fab fa-instagram"></i
        ></a>
        <a aria-label="Twitter" class="social-link" href="#"
          ><i class="fab fa-twitter"></i
        ></a>
      </div>
    </footer>

    <script>
      const galleryImages = [
        "pictures/pic-gallery-2.png",
        "pictures/pic-gallery-3.png",
      ];

      let currentImageIndex = 0;

      function updateCarousel() {
        document.getElementById("carousel-image").src =
          galleryImages[currentImageIndex];
      }

      function nextImage() {
        currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
        updateCarousel();
      }

      function previousImage() {
        currentImageIndex =
          (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
        updateCarousel();
      }
    </script>
  </body>
</html>