index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NutriScan</title>
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="container">
            <div class="logo-container">
                <img src="Asset/logo_transparent.png" alt="NutriScan Logo" class="logo">
                <span class="logo-text">NutriScan</span>
            </div>
            <ul class="menu">
                <li><a href="#home" class="lang" data-en="Home" data-id="Beranda">Home</a></li>
                <li><a href="#about" class="lang" data-en="About" data-id="Tentang">About</a></li>
                <li><a href="#features" class="lang" data-en="Features" data-id="Fitur">Features</a></li>
                <li><a href="#cards" class="lang" data-en="Cards" data-id="Kartu">Cards</a></li>
                <li><a href="#technologies" class="lang" data-en="Technologies" data-id="Teknologi">Technologies</a></li>
                <li><a href="#download" class="lang" data-en="Download" data-id="Unduh">Download</a></li>
            </ul>
            <div class="language-switch">
                <button class="lang-btn" data-lang="en">EN</button>
                <button class="lang-btn" data-lang="id">ID</button>
            </div>
        </div>
    </nav>
    

    <!-- Home Section -->
    <section id="home" class="home">
        <div class="container">
            <h1 class="lang" data-en="Welcome to <span>NutriScan</span>" data-id="Selamat datang di <span>NutriScan</span>">Welcome to <span>NutriScan</span></h1>
            <p class="lang" data-en="Explore nutrition in an interactive way with Augmented Reality" data-id="Jelajahi informasi gizi dengan cara interaktif menggunakan Augmented Reality">Explore nutrition in an interactive way with Augmented Reality</p>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="lang" data-en="About NutriScan" data-id="Tentang NutriScan">About NutriScan</h2>
            <p class="lang" data-en="NutriScan is an AR app to scan cards and display fruit objects interactively. It helps users learn nutritional information in an engaging way." data-id="NutriScan adalah aplikasi AR untuk memindai kartu dan menampilkan objek buah secara interaktif. Aplikasi ini membantu pengguna mempelajari informasi gizi dengan cara menarik.">NutriScan is an AR app to scan cards and display fruit objects interactively. It helps users learn nutritional information in an engaging way.</p>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
        <div class="container">
            <h2 class="lang" data-en="Features" data-id="Fitur">Features</h2>
            <div class="feature-list">
                <div class="feature-item">
                    <i class="bx bx-scan"></i>
                    <h3 class="lang" data-en="Interactive Scanning" data-id="Pemindaian Interaktif">Interactive Scanning</h3>
                    <p class="lang" data-en="Scan cards and view interactive 3D fruit models." data-id="Pindai kartu dan lihat model buah 3D interaktif.">Scan cards and view interactive 3D fruit models.</p>
                </div>
                <div class="feature-item">
                    <i class="bx bx-book"></i>
                    <h3 class="lang" data-en="Nutrition Info" data-id="Informasi Gizi">Nutrition Info</h3>
                    <p class="lang" data-en="Learn about the benefits and nutrition of various fruits." data-id="Pelajari manfaat dan informasi gizi berbagai buah.">Learn about the benefits and nutrition of various fruits.</p>
                </div>
                <!-- <div class="feature-item">
                    <i class="bx bx-mobile"></i>
                    <h3 class="lang" data-en="Mobile Friendly" data-id="Ramah Mobile">Mobile Friendly</h3>
                    <p class="lang" data-en="Designed for a seamless mobile experience." data-id="Dirancang untuk pengalaman mobile yang lancar.">Designed for a seamless mobile experience.</p>
                </div> -->
            </div>
        </div>
    </section>

    <!-- Cards Section -->
    <section id="cards" class="cards">
        <div class="container">
            <h2 class="lang" data-en="Explore Cards" data-id="Jelajahi Kartu">Explore Cards</h2>
            <div class="baba">
                <div class="carousel">
                    <div class="slider">
                        <section><img src="Asset/card/1.png" alt="Card 1"></section>
                        <section><img src="Asset/card/2.png" alt="Card 2"></section>
                        <section><img src="Asset/card/3.png" alt="Card 3"></section>
                        <section><img src="Asset/card/4.png" alt="Card 4"></section>
                        <section><img src="Asset/card/5.png" alt="Card 5"></section>
                        <section><img src="Asset/card/6.png" alt="Card 6"></section>
                        <section><img src="Asset/card/7.png" alt="Card 7"></section>
                        <section><img src="Asset/card/8.png" alt="Card 8"></section>
                        <section><img src="Asset/card/9.png" alt="Card 9"></section>
                        <section><img src="Asset/card/10.png" alt="Card 10"></section>
                        <section><img src="Asset/card/11.png" alt="Card 11"></section>
                        <section><img src="Asset/card/12.png" alt="Card 12"></section>
                        <section><img src="Asset/card/13.png" alt="Card 13"></section>
                        <section><img src="Asset/card/14.png" alt="Card 14"></section>
                        <section><img src="Asset/card/15.png" alt="Card 15"></section>
                    </div>
                    <div class="slider-controls">
                        <button class="left"><i class="material-icons"></i></button>
                        <button class="right"><i class="material-icons"></i></button>
                    </div>
                </div>
            </div>
            <p class="lang" data-en="Use these cards to scan and explore fruits." data-id="Gunakan kartu ini untuk memindai dan menjelajahi buah.">Use these cards to scan and explore fruits.</p>
            <a href="https://www.mediafire.com/file/myfabn3v8uelbx5/NutriScan_Card.zip/file" class="download-button">Download Cards</a>
        </div>
    </section>

    <!-- Technologies Section -->
    <section id="technologies" class="technologies">
        <div class="container">
            <h2>Technologies</h2>
            <div class="tech-logos">
                <div class="tech-item">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Unity_Technologies_logo.svg" alt="Unity">
                    <p>Unity</p>
                </div>
                <div class="tech-item">
                    <img src="https://integralplm.com/wp-content/uploads/2021/12/vuforia-engine-logo.png" alt="Vuforia">
                    <p>Vuforia</p>
                </div>
                <!-- <div class="tech-item">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/Android_robot.svg" alt="Android">
                    <p>Android</p>
                </div> -->
            </div>
        </div>
    </section>

    <!-- Download Section -->
    <section id="download" class="download">
        <div class="container">
            <h2 class="lang" data-en="Download" data-id="Unduh">Download</h2>
            <div class="download-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/Android_robot.svg" alt="Android Logo" class="download-logo">
                <!-- <p>Download for Android</p> -->
                <p class="lang" data-en="Get NutriScan for Android." data-id="Dapatkan NutriScan untuk Android.">Get NutriScan for Android.</p>
                <a href="https://drive.google.com/file/d/13xuc0xH-cAR-bg8M7wuUSPkXSIicQKWj/view?usp=sharing" class="download-button" style="margin-top: 0px;">Download v1.2.1</a>
            </div>
        </div>
    </section>
    <script src="script.js"></script>
    <script>
        document.querySelectorAll('.menu a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
    <script>
        // Language switch functionality
        document.querySelectorAll('.lang-btn').forEach(button => {
            button.addEventListener('click', () => {
                const lang = button.dataset.lang;
                document.querySelectorAll('.lang').forEach(element => {
                    element.innerHTML = element.dataset[lang];
                });
            });
        });
    </script>
</body>
</html>