Hugging Face's logo

Spaces:
dltmdgus
/
GreenDriverOptimizer
Configuration error

App Files Community
GreenDriverOptimizer
File size: 5,490 Bytes
d2bcb48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33248d9
 
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
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liger - Green-Drive Optimizer</title>
    <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=Outfit:wght@300;400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <meta name="description" content="Liger: μΉœν™˜κ²½ μ£Όν–‰ 경둜 μ΅œμ ν™” 및 μΆ©μ „μ†Œ μΆ”μ²œ μ†”λ£¨μ…˜">
</head>
<body>
    <div class="background-glob"></div>
    
    <nav class="navbar">
        <div class="logo">LIGER</div>
        <div class="nav-links">
            <a href="#demo">Demo</a>
            <a href="#presentation">Presentation</a>
            <a href="#workflow">Workflow</a>
        </div>
    </nav>

    <header class="hero">
        <div class="hero-content">
            <span class="badge">Green-Drive Optimizer</span>
            <h1>μŠ€λ§ˆνŠΈν•œ μ „κΈ°μ°¨ λΌμ΄ν”„μ˜ μ‹œμž‘,<br> <span class="gradient-text">LIGER</span></h1>
            <p>졜적의 κ²½λ‘œμ™€ μΆ©μ „μ†Œλ₯Ό μ°Ύμ•„μ£ΌλŠ” λ‹Ήμ‹ λ§Œμ˜ AI λ“œλΌμ΄λΉ™ νŒŒνŠΈλ„ˆ</p>
            <div class="cta-group">
                <a href="#demo" class="btn primary">데λͺ¨ μ˜μƒ 보기</a>
                <a href="#workflow" class="btn secondary">μ›Œν¬ν”Œλ‘œμš° ν™•μΈν•˜κΈ°</a>
            </div>
        </div>
        <div class="hero-image">
            <img src="α„…α…‘α„‹α…΅α„€α…₯_α„ƒα…’α„‘α…­α„‹α…΅α„†α…΅α„Œα…΅.png" alt="Liger Dashboard Preview" class="glass-card">
        </div>
    </header>

    <main>
        <section id="demo" class="section">
            <div class="section-header">
                <h2>Demo Video</h2>
                <p>Ligerκ°€ μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€ ν™•μΈν•΄λ³΄μ„Έμš”</p>
            </div>
            <div class="video-container glass-card">
                <video controls poster="α„…α…‘α„‹α…΅α„€α…₯_α„ƒα…’α„‘α…­α„‹α…΅α„†α…΅α„Œα…΅.png">
                    <source src="α„…α…‘α„‹α…΅α„€α…₯_데모영ᄉᅑᆼ.mp4" type="video/mp4">
                    λΈŒλΌμš°μ €κ°€ λΉ„λ””μ˜€ νƒœκ·Έλ₯Ό μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
                </video>
            </div>
        </section>

        <section id="presentation" class="section">
            <div class="section-header">
                <h2>Presentation</h2>
                <p>ν”„λ‘œμ νŠΈ 상세 μ†Œκ°œ 및 기술 μŠ€νƒ</p>
            </div>
            <div class="ppt-container glass-card">
                <!-- PDF νŒŒμΌμ„ 여기에 μ—…λ‘œλ“œν•˜κ±°λ‚˜ Google Slides embed μ½”λ“œλ₯Ό λ„£μœΌμ„Έμš” -->
                <div class="placeholder-ppt">
                    <div class="icon-box">πŸ“Š</div>
                    <h3>λ°œν‘œ 자료 (PPT/PDF)</h3>
                    <p>PDF νŒŒμΌμ„ λ ˆν¬μ§€ν† λ¦¬μ— μ—…λ‘œλ“œν•˜κ³ , <br><code>embed</code> νƒœκ·Έλ‚˜ 링크둜 μ—°κ²°ν•΄μ£Όμ„Έμš”.</p>
                    <a href="#" class="btn secondary small">PDF λ‹€μš΄λ‘œλ“œ (μ˜ˆμ‹œ)</a>
                </div>
            </div>
        </section>

        <section id="workflow" class="section">
            <div class="section-header">
                <h2>n8n Workflow</h2>
                <p>μžλ™ν™” 둜직과 데이터 흐름을 ν•œλˆˆμ—</p>
            </div>
            <div class="workflow-container glass-card">
                <div class="workflow-info">
                    <h3>Core Logic</h3>
                    <p>μœ μ € μž…λ ₯ β†’ 경둜 μ΅œμ ν™” β†’ μΆ©μ „μ†Œ μΆ”μ²œ β†’ κ²°κ³Ό 리포트 생성</p>
                </div>
                <div class="workflow-viz">
                    <!-- n8n μ›Œν¬ν”Œλ‘œμš° μ΄λ―Έμ§€λ‚˜ iframe을 넣을 수 μžˆμŠ΅λ‹ˆλ‹€ -->
                    <div class="code-block">
                        <pre><code>
// n8n Workflow JSON Viewer Link or Image
[User Input] --> [Tmap API] --> [Filtering] --> [Map Map] --> [Response]
                        </code></pre>
                    </div>
                    <a href="https://huggingface.co/dltmdgus" target="_blank" class="btn primary">Hugging Face ν”„λ‘œν•„ λ°©λ¬Έ</a>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Liger Team. All rights reserved.</p>
        <div class="socials">
            <a href="https://huggingface.co/dltmdgus" target="_blank">Hugging Face</a>
        </div>
    </footer>

    <script>
        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Simple intersection observer for fade-in animations
        const observerOptions = {
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.section, .hero').forEach(el => {
            el.classList.add('fade-in-section');
            observer.observe(el);
        });
    </script>
</body>
</html>