website/index.html at main · econdug/website · 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Import font -->
    <style>
        @import url('https://fonts.cdnfonts.com/css/circular-std');
    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Economics Department Undergraduate Group, Home Page ">
    <meta name="keywords" content="Brown University, Economics Department Undergraduate Group, College, Home Page">
    <meta name="author" content="Thien Nguyen">
    <title> Economics DUG | Home </title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="http://fonts.cdnfonts.com/css/circular-std" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <header>
        <div class="container">
            <div class="nav-container">
                <div id="branding">
                    <a href="index.html">
                        <img src="images/temp logo.png" style="padding: 5px" alt="HTML" class="flowLeft">
                    </a>
                </div>
                <nav class="navbar navbar-expand-lg navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <div class="navbar-nav text-right pr-3">
                            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                            <a class="nav-item nav-link" href="./html/about.html">About</a>
                            <a class="nav-item nav-link" href="./html/events.html">Events</a>
                            <a class="nav-item nav-link" href="./html/resources.html">Resources</a>
                            <a class="nav-item nav-link" href="./html/contact.html">Contact Us</a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>

    <section id="intro_for_home">
        <div class="container">
            <picture>
                <source media="(max-width:992px)" srcset="images/home-banner.png">
                <img src="images/home-banner-wide.png" alt="home banner">
            </picture>
        </div>
    </section>

    <section id="welcome">
        <div class="container">
            <div class="white-box">
                <h1 style="padding: 30px 0px 20px 0px"> Welcome to the Economics DUG </h1>
                <p style="padding: 0px 20px 0px 0px;">
                    The Economics Departmental Undergraduate Group (DUG) is the single DUG that
                    serves concentrators in <br> Economics, Applied Math-Economics, Computer
                    Science-Economics, and Mathematics-Economics at Brown.
                    <br><br>
                    <a id="listserv2"
                        href="https://forms.gle/Jk9Uoxway6HTVBH49">Join
                        the Economics DUG Listserv!</a>
                    <br><br>
                </p>
            </div>
            <!-- <div class="grid-container"> -->
            <div class="preview_1" style="padding-top: 20px">
                <div class="home-img"><img src="images/home-1.png" alt="Faculty Lectures"></div>
                <div class="home-img"><img src="images/home-4.png" alt="Academic Support"></div>
                <div class="home-img"><img src="images/home-3.png" alt="Student Panels"></div>
                <div class="home-img"><img src="images/home-2.png" alt="Networking"></div>
            </div>
        <div class="upcoming-text">
            Upcoming Events
        </div>
        <div class="w3-content w3-display-container" style="left: 230px;">
        <img class="mySlides" src="https://lh3.google.com/u/0/d/1y11iCJZ4iLtJADbDwmpa7QmtakjxvxdJ" style="width:60%">
        <img class="mySlides" src="https://lh3.google.com/u/0/d/1t_rXQERh4JYvwKtbQsMe6_tw-gGzbYnf" style="width:60%">

        <div style="display: flex;">
            <button class="w3-button w3-left w3-light-grey" style="width: 294px;" onclick="plusDivs(-1)">&laquo; Previous</button>
            <button class="w3-button w3-right w3-green" style="width: 293px;" onclick="plusDivs(1)">Next &raquo;</button>
        </div>
        </div>
        </div>

        <button class="open-button" onclick="openForm()"><i class="material-icons" style="font-size:24px;">chat</i></button>
        <div class="chat-popup" id="myForm">
        <div class="form-container">
            <h1>Chat</h1>

            <label for="msg"><b>Message</b></label>
            <div id="chat-content"></div>
            <input placeholder="Type message.." name="msg" id="user-input" required></input>

            <button type="submit" class="btn" onclick="sendMessage()">Send</button>
            <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        </div>
        </div>
        <!-- <div class="contain">
                <img src="images/faculty_lecture/faculty_lectures.svg" alt="HTML" class="image">
                <div class="overlay">
                    <div class="text">Every semester, we host a myriad of faculty lunch lectures where Brown students
                        can learn more about current research at Brown, listen to talks by faculty and professors, and
                        receive insight on future research opportunities.</div>
                </div>
            </div> -->
        <!-- <div class="contain">
                <img src="images/student_panels/student_panels.svg" alt="HTML" class="image">
                <div class="overlay">
                    <div class="text">In addition to lectures, we host panels that feature upperclassmen students who
                        speak about their respective academic and career paths regarding economics. In the past, we have
                        held several concentration and internship panels to help students pursue a future in economics.
                    </div>
                </div>
            </div>
            <div class="contain">
                <img src="images/academic_support/academic_support.svg" alt="HTML" class="image">
                <div class="overlay">
                    <div class="text">From holding pre-registration office hours to meeting with students directly, the
                        Econ DUG is always available to help students navigate through the Economics concentration. We
                        serve as academic peer advisors and ensure that every student can be connected to the right
                        resources.</div>
                </div>
            </div>
            <div class="contain">
                <img src="images/networking/networking.svg" alt="HTML" class="image">
                <div class="overlay">
                    <div class="text">Through our panels, lectures, and workshops, we aim to introduce attendees to
                        faculty members and other students at Brown, thereby giving them access to a network of
                        like-minded individuals who are willing to support them during their time at university.</div>
                </div>
            </div> -->
        <!-- </div> -->
    </section>

    <footer>
        <div class="footer">
            <div class="footer_content">
            <p>Get in touch with us today!</p>
            <div>
                <p style="display: inline-block; margin-right: 30px;"><a href="mailto:econdug@brown.edu" class="fa fa-envelope" style="font-size:36px"></a></p>
                <p style="display: inline-block;"><a href="https://www.instagram.com/brownecondug/" class="fa fa-instagram" style="font-size:36px"></a></p>
            </div>
            <div class="footer_content"><p><i> &copy; 2023 Economics DUG </i></p></div>
        </div>
    </footer>
</body>

</html>

<script>
    function myFunction() {
        var x = document.getElementById("myLinks");
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }
    }

    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
    showDivs(slideIndex += n);
    }

    function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
    }

    function openForm() {
        document.getElementById("myForm").style.display = "block";
    }

    function closeForm() {
        document.getElementById("myForm").style.display = "none";
    }

    var chatContainer = document.getElementById('chat-container');
    var chatContent = document.getElementById('chat-content');

    function sendMessage() {
        var userInput = document.getElementById('user-input').value;
        appendMessage('User', userInput);
        // Call a function to process the user's message and get the bot's response
        var botResponse = getBotResponse(userInput);
        appendMessage('Bot', botResponse);
        // Clear the input field
        document.getElementById('user-input').value = '';
    }

    function appendMessage(sender, message) {
        var messageElement = document.createElement('div');
        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatContent.appendChild(messageElement);
        // Scroll to the bottom to show the latest message
        chatContent.scrollTop = chatContent.scrollHeight;
    }

    function getBotResponse(userInput) {
        // Implement your chatbot's logic here to generate a response based on user input
        // For simplicity, we'll use a basic example.
        return 'Hi! How can I help you'
    }
</script>