oalug.github.com/index.html at master · oalug/oalug.github.com · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ogden Area Linux Users Group (OALUG)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>Ogden Area Linux Users Group</h1>
            <nav class="header-nav">
                <a href="past-meetings.html">Past Meetings</a>
                <a href="https://discord.gg/Nngvhy8Yfv">Discord</a>
                <a href="https://groups.google.com/g/oalug">Google Group</a>
            </nav>
        </div>
    </header>
    <section class="hero-section">
        <div class="header-content">
            <div class="header-text">
                <p class="header-description-main">We are a community of students, professionals, and enthusiasts dedicated to Linux and free &amp; open source software/hardware.</p>
                <p class="header-description-secondary">The group serves Weber, Davis, and Morgan counties in Utah. We welcome absolutely anyone who is interested in learning, teaching, and helping the local community about technology. Membership is open and free, as are our meetings.</p>
            </div>
            <div class="header-image">
                <img src="banner2.png" alt="OALUG Banner">
            </div>
        </div>
    </section>
    <section class="container">
        <h2>Announcements</h2>
        <div id="announcements" class="meetings-container">
            <!-- Announcement items will be inserted here -->
        </div>
    </section>
    <section class="container">
        <h2>Upcoming Meetings</h2>
        <div id="meetings" class="meetings-container">
            <!-- Meeting items will be inserted here -->
        </div>
    </section>
    <script>
        const announcements = [
            { title: 'Call For Presentors', content: "We are always looking for people in the Ogden, UT area to present on Linux and other open-source topics! Ideally we want to have meetings once a month, but often we don't have enough presentations lined up to sustain that pace. Even if you are personally not comfortable presenting, if you know someone who you would love to hear present on a techncial topic they are knowledgable on for about an hour, let us know! Submit all presentation requests either by posting a message on the OALUG Google Group, or on the #general channel on the OALUG Discord server.", date: '' },
        ];

        const meetings = [
            <!-- { date: '2025/10/15', time: '6:30 PM', location: '<a href="https://g.co/kgs/LR2U8wU">Weber County Southwest branch Library in Roy.</a> Meeting will be in the first third of the auditorium.', topic: '', calendarLink: '', description: ''}, -->
            { date: '2026/03/17', time: '6:30 PM', location: '<a href="https://g.co/kgs/LR2U8wU">Weber County Southwest branch Library in Roy.</a> Meeting will be in the classroom directly across from the boardroom.', topic: 'Bring Your Own Board (B.Y.O.B) - An Introduction to Microcontrollers', calendarLink: 'https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NW5hYXE2dG5kYjdpbGx2bmttYjZ1N24wM3Ugcms0ZzluNTF1cjVtb2FtZ2g4YjFlY2JmOWNAZw&tmsrc=rk4g9n51ur5moamgh8b1ecbf9c%40group.calendar.google.com', description: 'We will be holding a show and tell night about the wild world of microcontrollers! If you are already a seasoned veteran with embedded electronics, grab your favorite microcontroller and some cool electronic components from your scrap heap and show them off to everyone! And if you don\'t know anything about microcontrollers, we will have a presentation by Ryan Zaugg on the basics of the ESP32, one of the most popular and accessible microcontrollers out there.' },
        ];

        const announcementsContainer = document.getElementById('announcements');
        announcements.forEach(announcement => {
            const card = document.createElement('div');
            card.className = 'meeting-card';

            let dateSection = '';
            if (announcement.date) {
                // Format date to MMM DD, YYYY
                const dateObj = new Date(announcement.date);
                const formattedDate = dateObj.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric'
                });
                dateSection = `<span class="meeting-date">${formattedDate}</span>`;
            }

            card.innerHTML = `
                <div class="meeting-header">
                    <h3>${announcement.title}</h3>
                    ${dateSection}
                </div>
                <div class="meeting-details">
                    <p class="meeting-description">${announcement.content}</p>
                </div>
            `;
            announcementsContainer.appendChild(card);
        });

        const meetingsContainer = document.getElementById('meetings');
        meetings.forEach(meeting => {
            const card = document.createElement('div');
            card.className = 'meeting-card';

            // Format date to MMM DD, YYYY
            const dateObj = new Date(meeting.date);
            const formattedDate = dateObj.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });

            card.innerHTML = `
                <div class="meeting-header">
                    <h3>${meeting.topic}</h3>
                    <span class="meeting-date">${formattedDate}</span>
                </div>
                <div class="meeting-details">
                    <p><strong>Time:</strong> ${meeting.time}</p>
                    <p><strong>Location:</strong> ${meeting.location}</p>
                    <p class="meeting-description">${meeting.description}</p>
                    <a href="${meeting.calendarLink}" target="_blank" class="calendar-link">Add to Calendar</a>
                </div>
            `;
            meetingsContainer.appendChild(card);
        });
    </script>
</body>
</html>