lobstershackbali/index.html at main · askong13/lobstershackbali · 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Lobster Shack Bali - Fresh Seafood Restaurant in Kuta</title>
    <meta name="description" content="Experience the best and freshest lobster and seafood in the heart of Bali. Lobster Shack Bali in Kuta offers a cozy atmosphere, grilled-to-perfection dishes, and unforgettable culinary moments.">
    <meta name="keywords" content="lobster bali, seafood kuta, best lobster in bali, seafood restaurant bali, lobster shack, fresh seafood, bali dining, kuta restaurant">
    <meta name="author" content="Lobster Shack Bali">
    <meta name="robots" content="index, follow">

    <link rel="icon" href="https://lh3.googleusercontent.com/d/1GIdbd0F7kn0O4L8qEr-25GXSEWbLNVj9" type="image/png">
    <link rel="apple-touch-icon" href="https://lh3.googleusercontent.com/d/1GIdbd0F7kn0O4L8qEr-25GXSEWbLNVj9">

    <meta property="og:title" content="Lobster Shack Bali - The Ultimate Seafood Experience">
    <meta property="og:description" content="Savor the freshest lobster and seafood, grilled to perfection in the heart of Kuta, Bali.">
    <meta property="og:image" content="https://lh3.googleusercontent.com/d/1GIdbd0F7kn0O4L8qEr-25GXSEWbLNVj9">
    <meta property="og:url" content="https://www.yourwebsite.com/"> <meta property="og:type" content="website">
    <meta property="og:site_name" content="Lobster Shack Bali">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Lobster Shack Bali - The Ultimate Seafood Experience">
    <meta name="twitter:description" content="Savor the freshest lobster and seafood, grilled to perfection in the heart of Kuta, Bali.">
    <meta name="twitter:image" content="https://lh3.googleusercontent.com/d/1GIdbd0F7kn0O4L8qEr-25GXSEWbLNVj9">

    <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=Poppins:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />

    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <header class="ls-main-header">
        <div class="ls-container">
            <a href="#home"><img src="https://lh3.googleusercontent.com/d/1FIBMIYd-0BRvEXzktF7pJ9_FVr3h4XFp" alt="Logo Lobster Shack" class="ls-logo"></a>
            <nav class="ls-main-nav" id="ls-main-nav">
                <ul class="ls-nav-links">
                    <li><a href="#home" class="active" data-lang-key="nav_home">Home</a></li>
                    <li><a href="#about" data-lang-key="nav_about">About Us</a></li>
                    <li><a href="#menu" data-lang-key="nav_menu">Menu</a></li>
                    <li><a href="#gallery" data-lang-key="nav_gallery">Gallery</a></li>
                </ul>
            </nav>
            <div class="ls-header-actions">
                <div class="ls-language-toggle">
                    <button class="ls-lang-btn active" data-lang="id">ID</button>
                    <button class="ls-lang-btn" data-lang="en">EN</button>
                </div>
                <button class="ls-mobile-menu-toggle" id="ls-mobile-menu-toggle" aria-label="Toggle Menu">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <main>
        <section id="home" class="ls-hero-section">
            <div class="swiper ls-hero-slider">
                <div class="swiper-wrapper" id="ls-hero-slider-wrapper"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="ls-hero-content" data-aos="fade-up">
                <h1 data-lang-key="hero_title">Savor the Freshness</h1>
                <p data-lang-key="hero_subtitle">The best lobster and seafood experience in the heart of Bali.</p>
                <a href="#menu" class="ls-btn"><i class="fas fa-utensils"></i> <span data-lang-key="hero_button">Explore Our Menu</span></a>
            </div>
        </section>

        <section id="about" class="ls-section">
            <div class="ls-container">
                <div class="ls-section-header" data-aos="fade-up">
                    <span class="ls-subtitle" data-lang-key="history_section_subtitle">Our Story</span>
                    <h2 class="ls-title" data-lang-key="history_title">Our Journey</h2>
                </div>
                <div id="ls-about-us-article" class="ls-about-section-content" data-aos-delay="200">
                    </div>
            </div>
        </section>

        <section id="menu" class="ls-section ls-menu-section">
            <div class="ls-container">
                <div class="ls-section-header" data-aos="fade-up"><span class="ls-subtitle" data-lang-key="menu_section_subtitle">Featured Dishes</span><h2 class="ls-title" data-lang-key="menu_title">Chef's Recommendations</h2></div>
                <div data-aos="fade-up"><div class="swiper ls-featured-slider"><div class="swiper-wrapper" id="ls-featured-menu-wrapper"></div><div class="swiper-pagination"></div></div></div>
                <div class="ls-section-header" data-aos="fade-up" style="margin-top: 6rem; margin-bottom: 3rem;"><h2 class="ls-title" data-lang-key="full_menu_title">Our Full Menu</h2></div>
                <div class="ls-menu-filters" id="ls-menu-filters" data-aos="fade-up"></div>
                <div class="ls-menu-grid" id="ls-menu-grid" data-aos="fade-up"></div>
            </div>
        </section>

        <section id="gallery" class="ls-gallery-section ls-section">
            <div class="ls-container">
                <div class="ls-section-header" data-aos="fade-up"><span class="ls-subtitle" data-lang-key="gallery_section_subtitle">Our Moments</span><h2 class="ls-title" data-lang-key="gallery_title">Tasteful Memories</h2></div>
                <div class="ls-gallery-grid" id="ls-gallery-grid" data-aos="fade-up"></div>
            </div>
        </section>
    </main>

    <footer class="ls-main-footer">
        <div class="ls-container">
            <div class="footer-content">
                <div class="footer-about">
                    <img src="https://lh3.googleusercontent.com/d/1GIdbd0F7kn0O4L8qEr-25GXSEWbLNVj9" alt="Lobster Shack Bali Logo in Footer" class="ls-logo">
                    <p data-lang-key="footer_description">Experience the finest catch of the day, grilled to perfection, in a cozy and inviting atmosphere. We look forward to welcoming you.</p>
                </div>
                <div class="footer-contact">
                    <h3 class="ls-footer-title" data-lang-key="footer_contact_title">Contact Us</h3>
                    <div class="ls-footer-contact-info">
                        <ul>
                            <li><i class="fas fa-map-marker-alt"></i> <span data-lang-key="footer_address_value">Jl. Raya Pantai Kuta No. 123, Kuta, Bali</span></li>
                            <li><i class="fas fa-phone"></i> <span data-lang-key="footer_phone_value">+62 812-3456-7890</span></li>
                            <li><i class="fas fa-envelope"></i> <span data-lang-key="footer_email_value">info@lobstershackbali.com</span></li>
                            <li><i class="fas fa-clock"></i> <span data-lang-key="footer_hours_value">Daily: 11:00 AM - 10:00 PM WITA</span></li>
                        </ul>
                    </div>
                </div>
                 <div class="footer-social-links">
                    <h3 class="ls-footer-title" data-lang-key="footer_follow_title">Follow Us</h3>
                    <p data-lang-key="footer_follow_text">Stay connected for the latest updates and offers.</p>
                    <ul class="ls-footer-socials">
                        <li><a href="https://www.instagram.com/lobstershackbali" aria-label="Instagram"><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="ls-footer-copyright">
                <p data-lang-key="footer_copyright">© 2025 Lobster Shack Bali. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <div class="ls-modal-overlay" id="ls-product-modal-overlay">
        <div class="ls-modal-content">
            <button class="ls-modal-close" id="ls-modal-close-btn" aria-label="Close modal"><i class="fas fa-times"></i></button>
            <div class="ls-modal-body" id="ls-modal-body"></div>
        </div>
    </div>

    <div class="ls-cookie-consent" id="ls-cookie-consent">
        <div class="ls-container">
            <p data-lang-key="cookie_text">We use cookies to enhance your browse experience and to analyze our traffic. By clicking "Accept", you consent to our use of cookies.</p>
            <button class="ls-btn" id="ls-cookie-accept-btn" data-lang-key="cookie_accept_btn">Accept</button>
        </div>
    </div>

    <div id="ls-dine-in-modal" class="ls-fab-popup-overlay">
        <div class="ls-fab-popup-content">
            <div class="ls-fab-popup-header">
                <h2>Dine In Reservation</h2>
                <button id="ls-dine-in-close-btn" class="ls-fab-popup-close">×</button>
            </div>
            <div class="ls-fab-popup-body">
                <div id="dine-in-step-1">
                    <p class="popup-info">Complete the form below to get your reservation code.</p>
                    <div class="popup-form-group">
                        <label for="customer-name">Your Name</label>
                        <input type="text" id="customer-name" placeholder="Enter your full name" required>
                    </div>
                    <div class="popup-grid">
                        <div class="popup-form-group">
                            <label for="reservation-date">Date</label>
                            <input type="date" id="reservation-date" required>
                        </div>
                        <div class="popup-form-group">
                            <label for="reservation-time">Time</label>
                            <input type="time" id="reservation-time" required>
                        </div>
                    </div>
                    <button id="generate-code-btn" class="ls-btn">Generate Code</button>
                </div>
                <div id="dine-in-step-2" style="display: none;">
                    <p class="popup-info">Your code has been generated successfully!</p>
                    <div class="reservation-code-display">
                        <strong id="reservation-code"></strong>
                    </div>
                    <p class="popup-instruction">Please show this code to our staff. The code is saved in your browser.</p>
                    <button id="cancel-code-btn" class="ls-btn btn-outline">Cancel & Make New</button>
                </div>
            </div>
        </div>
    </div>

    <div class="ls-fab-container">
        <div class="ls-fab-menu">
            <a href="#" id="fab-whatsapp" class="ls-fab-item" target="_blank" rel="noopener noreferrer">
                <span>Chat Admin</span>
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="#" id="fab-direction" class="ls-fab-item" target="_blank" rel="noopener noreferrer">
                <span>Get Direction</span>
                <i class="fas fa-directions"></i>
            </a>
            <a href="#" id="fab-dine-in" class="ls-fab-item">
                <span>Dine In</span>
                <i class="fas fa-utensils"></i>
            </a>
        </div>
        <button class="ls-fab-main" aria-label="Open Menu">
            <i class="fas fa-concierge-bell"></i>
        </button>
    </div>

    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/floating.js"></script>
</body>
</html>