jchanDev.github.io/project3.html at main · jchanDev/jchanDev.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Sproutsense</title>
    <script>
        (function () {
            const theme = localStorage.getItem('theme');
            const isDark = theme === 'dark' || !theme; // default to dark if none set

            if (isDark) {
                document.documentElement.classList.add('dark');
                // Temporary inline style, but *removable*
                const tempStyle = document.createElement('style');
                tempStyle.textContent = `
      body {
        background: radial-gradient(circle at 30% 20%, #1a1a40, #000) !important;
        color: #ffffff !important;
      }
        .terminal {
            background: #211031 !important;
            border-color: #7E22CE !important;
            box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.4) !important;
        }
        .terminal-body {
            background: #1e1c22;
            color: #eee;
        }
        .panel {
            background: #27252d;
            border-color: #7E22CE;
            color: #f3d9ff;
        }
    `;
                tempStyle.id = 'temp-dark-style';
                document.head.appendChild(tempStyle);
            }

            // Once the page fully loads, remove the temporary inline style
            window.addEventListener('DOMContentLoaded', () => {
                const temp = document.getElementById('temp-dark-style');
                if (temp) temp.remove();
            });
        })();
    </script>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="terminal">
        <!-- Terminal Header -->
        <div class="terminal-header">
            <div class="buttons">
                <span class="red"></span>
                <span class="yellow"></span>
                <span class="green"></span>
            </div>
            <div class="title">~/projects/Sproutsense</div>
            <button id="toggle-theme">🌙</button>
        </div>

        <!-- Terminal Body -->
        <div class="terminal-body project-page">
            <!-- Back link -->
            <a href="index.html" class="back">← cd ..</a>

            <!-- Project Title -->
            <h1 class="project-title">Sproutsense.exe</h1>
            <div class="bar"></div>

            <!-- Description Panel -->
            <section class="panel">
                <div class="label">&gt; Description:</div>
                <p>SproutSense is a smart agriculture platform for real-time plant health monitoring and AI-powered
                    irrigation recommendations using environmental sensor data.</p>
            </section>

            <section class="panel">
                <div class="label">&gt; Achievements:</div>
                <ul class="features">
                    <li>1st Place — ITC 2025</li>
                    <li>2nd Place — UCSB CE Capstone 2025</li>
                </ul>
            </section>
            <!-- Technologies Panel -->
            <section class="panel">
                <div class="label">&gt; Technologies:</div>
                <div class="tags">
                    <span>React</span>
                    <span>AWS</span>
                    <span>Tailwind</span>
                    <span>Docker</span>
                    <span>Scikit-learn</span>
                </div>
            </section>

            <!-- Features Panel -->
            <section class="panel">
                <div class="label">&gt; How it works:</div>
                <ul class="features">
                    <li>Network of smart environmental sensors sends data to our website. Done through MQTT
                        commmunication between Base Station and Server</li>
                    <li>Databse is PostgreSQL and backend is Python with FastAPI</li>
                    <li>Trained model in google Colab and integrated model into website</li>
                    <li>Build many pages and views with React</li>
                </ul>
            </section>

            <section class="panel">
                <div class="label">&gt; Slideshow:</div>
                <div class="slideshow-wrapper">
                    <iframe
                        src="https://docs.google.com/presentation/d/1l3LcrPgQmQztnF1cMWm0iAOGqdpEN_S9Kb_itBYqlH8/embed?start=false&loop=false"
                        frameborder="0" allowfullscreen>
                    </iframe>

                    <!-- Mobile view link -->
                    <a href="https://docs.google.com/presentation/d/1l3LcrPgQmQztnF1cMWm0iAOGqdpEN_S9Kb_itBYqlH8/view"
                        class="mobile-slide-link" target="_blank">
                        View Slideshow
                    </a>
                </div>
            </section>


            <div class="actions">
                <a href="https://github.com/BK1031/SproutSense" class="btn primary" target="_blank"
                    rel="noopener noreferrer">View Github</a>
                <a href="https://sproutsense.netlify.app/" class="btn" target="_blank" rel="noopener noreferrer">Visit
                    Sproutsense!</a>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>