spatialturn.github.io/index.html at main · SpatialTurn/spatialturn.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
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geospatial Training Tutorials</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; }
        body { margin: 0; font-family: 'Open Sans', sans-serif; background-color: #1a1a1a; color: #e0e0e0; cursor: url('https://www.cursor.cc/cursor/12/12/0/png'), auto; }
        header { background: linear-gradient(90deg, #333, #444); color: #fff; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #555; }
        header h1 { margin: 0; font-family: 'Roboto', sans-serif; font-size: 2em; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
        /* Commented out search box style for now
        header .search { flex-grow: 1; margin: 0 40px; }
        header .search input { width: 100%; padding: 10px 15px; background-color: #2a2a2a; color: #e0e0e0; border: 2px solid #555; border-radius: 25px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; font-size: 1em; }
        header .search input:focus { border-color: #00aaff; box-shadow: 0 0 5px #00aaff; }
        */
        .container { width: 100%; padding: 0 10px; }
        .main-content { text-align: center; padding: 40px 0; background: linear-gradient(135deg, #2a2a2a, #1e1e1e); border-radius: 15px; margin: 20px 0; box-shadow: 0 6px 15px rgba(0,0,0,0.6); }
        .main-content h2 { color: #00aaff; font-family: 'Roboto', sans-serif; font-size: 2.5em; margin-bottom: 20px; text-shadow: 2px 2px 6px rgba(0,0,0,0.8); }
        .main-content p { color: #ccc; font-size: 1.2em; margin-bottom: 30px; line-height: 1.6; max-width: 900px; margin-left: auto; margin-right: auto; }
        .modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0; max-width: 100%; margin: 0 auto; justify-items: center; }
        .module-card { background-color: #2e2e2e; border: 2px solid #444; border-radius: 8px; text-align: left; padding: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); transition: transform 0.4s ease, box-shadow 0.4s ease; width: 85%; }
        .module-card:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 16px rgba(0,170,255,0.3); }
        .module-card img { width: 100%; height: auto; border-radius: 6px 6px 0 0; }
        .module-card a { text-decoration: none; color: #00aaff; font-family: 'Roboto', sans-serif; font-weight: 700; display: block; margin: 8px 0; font-size: 1.2em; }
        .module-card p { color: #bbb; font-size: 1em; margin: 6px 0; line-height: 1.3; }
        #map { width: 100%; max-width: 1200px; height: auto; margin: 20px auto 0; border: 2px solid #444; border-radius: 8px; overflow: hidden; }
        footer { background-color: #333; padding: 15px 20px; text-align: center; font-size: 0.9em; color: #aaa; border-top: 1px solid #555; margin-top: 20px; }
        footer a { color: #00aaff; text-decoration: none; }
        footer a:hover { text-decoration: underline; }
        @media (max-width: 1024px) {
            .modules { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
            #map { width: 100%; max-width: 600px; }
            .main-content h2 { font-size: 2em; }
            .main-content p { font-size: 1em; }
        }
        @media (max-width: 768px) {
            .modules { grid-template-columns: 1fr; max-width: 100%; }
            #map { width: 100%; max-width: none; height: auto; }
            header { padding: 15px 20px; }
            /* header .search { margin: 0 20px; } */
            .main-content { padding: 20px 0; }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Geospatial Training Tutorials</h1>
            <!--
            <div class="search">
                <input type="text" id="searchInput" placeholder="Search modules...">
            </div>
            -->
        </header>
        <div class="main-content">
            <h2>Enabling the Geospatial Turn in the Social Sciences through Cyberinfrastructure Training</h2>
            <p>Explore the basics or enhance your expertise with tutorials designed to empower your geospatial projects</p>
            <div class="modules">
		<div class="module-card" data-href="https://spatialturn.github.io/IntroModule/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-zelch-20337592.jpg" alt="Jupiter">
                    <a href="https://spatialturn.github.io/IntroModule/" target="_blank">START HERE</a>
                    <p>Learn to use Jupyter Notebooks and Carpentries.</p>
                </div>
                <div class="module-card" data-href="https://spatialturn.github.io/DataCollection/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-digitalbuggu-167538.jpg" alt="Data Collection">
                    <a href="https://spatialturn.github.io/DataCollection/" target="_blank">Data Collection</a>
                    <p>Learn to gather geospatial data effectively.</p>
                </div>
                <div class="module-card" data-href="https://spatialturn.github.io/DataManagement/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-cookiecutter-1148820.jpg" alt="Data Management">
                    <a href="https://spatialturn.github.io/DataManagement/" target="_blank">Data Management</a>
                    <p>Understand geospatial data management techniques.</p>
                </div>
                <div class="module-card" data-href="https://spatialturn.github.io/DataAnalysis/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-goumbik-590022.jpg" alt="Data Analysis">
                    <a href="https://spatialturn.github.io/DataAnalysis/" target="_blank">Data Analysis</a>
                    <p>Understand geospatial data analysis techniques.</p>
                </div>
                <div class="module-card" data-href="https://spatialturn.github.io/DataVisualization/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-googledeepmind-17484970.jpg" alt="Data Visualization">
                    <a href="https://spatialturn.github.io/DataVisualization/" target="_blank">Data Visualization</a>
                    <p>Visualize data with advanced GIS tools.</p>
                </div>
                <div class="module-card" data-href="https://spatialturn.github.io/DataCuration/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-artempodrez-6779716.jpg" alt="Data Curation">
                    <a href="https://spatialturn.github.io/DataCuration/" target="_blank">Data Curation</a>
                    <p>Understand geospatial data curation techniques.</p>
                </div>
                <div class="module-card" data-href="https://spatialturn.github.io/CaseStudyFoodDesert/" onclick="window.open(this.dataset.href, '_blank');">
                    <img src="/pexels-wendywei-1656663.jpg" alt="Food Desert">
                    <a href="https://spatialturn.github.io/CaseStudyFoodDesert/" target="_blank">Case Studies</a>
                    <p>Utilizing GIS Tools to Apply in Real World Scenarios.</p>
                </div>
            </div>
            <div id="map"></div>
        </div>
        <footer>
            <p>&copy; 2025 Geospatial Training Tutorials. <a href="mailto:support@geospatialtutorials.com">Contact Us</a> | <a href="/privacy">Privacy Policy</a></p>
        </footer>
    </div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Search Functionality - Commented out for now
        /*
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const cards = document.querySelectorAll('.module-card');
            cards.forEach(card => {
                const text = card.querySelector('a').textContent.toLowerCase() + card.querySelector('p').textContent.toLowerCase();
                card.style.display = text.includes(searchTerm) ? 'block' : 'none';
            });
        });
        */

        // Dynamically size map to match modules
        function resizeMap() {
            const modules = document.querySelector('.modules');
            const map = document.getElementById('map');
            if (modules && map) {
                const modulesWidth = modules.offsetWidth;
                map.style.width = `${Math.min(modulesWidth, 1200)}px`;
                const modulesHeight = modules.offsetHeight;
                map.style.height = `${modulesHeight}px`;
                map.style.margin = '20px auto';

                // Invalidate Leaflet map size to adjust rendering
                if (window.map) {
                    window.map.invalidateSize();
                }
            }
        }

        // Run on load and resize
        window.addEventListener('load', resizeMap);
        window.addEventListener('resize', resizeMap);

        // Map Initialization
        var map = L.map('map').setView([40.42, -86.92], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        L.marker([40.42, -86.92]).addTo(map)
            .bindPopup('Purdue University')
            .openPopup();
    </script>
</body>
</html>