oceanis-dev/resources.html at main · BioEcoOcean/oceanis-dev · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive OCEANIS</title>
  <link rel="stylesheet" href="styles.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="resource-list.js"></script>
  <div class="logo-container">
    <img src="images/bioecoocean_logo.png" alt="BioEcoOcean Logo" height="100px">
    <img src="images/iode-unesco.png" alt="BioEcoOcean Logo" height="100px">
    <img src="images/OBIS_logo.png" alt="BioEcoOcean Logo" height="100px">
  </div>
</head>
<body>
  <header>
    <nav>
      <div class="navbar">OCEANIS - Collaborative Planning for Integrated Ocean Action</div>
                <div class="hamburger" onclick="toggleMenu()">
                <div></div>
                <div></div>
                <div></div>
      </div>
      <div class="navbar-menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="resources.html">Resources</a></li>
          <li><a href="contributers.html">Contributors</a></li>
        </ul>
      </div>
    </nav>
    <script>
            function toggleMenu() {
                const navMenu = document.querySelector(".navbar-menu");
                navMenu.classList.toggle("show");
            }
      </script>
  </header>
<div class="content">
<h1> Resources</h1>
<p>Here you will find a list of resources that are relevant to each of the OCEANIS components. Check each box to display resources associated with a specific component.</p>
<br><br>
<p><em>Under development: more content to come!</em></p><br>
<p>Resources:</p>
<div id="filter-controls" class="tag-filter">

  <!-- Checkboxes will be dynamically generated here -->
</div>
<div>
    <label class="switch-small">
      <input type="checkbox" id="exclusive-filter-toggle">
      <span class="slider-small"></span>
    </label><span id="toggle-label-small">Show only resources with selected tags exclusively</span>
    <button id="select-all-btn">Select All</button>
    <button id="deselect-all-btn">Deselect All</button>
  </div>
<div id="resources-list">
  <!-- Resource list will be dynamically generated here -->
</div>
</div>
<footer class="footer">
  <div class="footer-flex">
    <div class="footer-col">
            <img src="images/bioecoocean_logo.png" alt="BioEcoOcean Logo" height="50px" style="filter: brightness(100)">
            <br>
            <img src="images/OBIS_logo.png" alt="OBIS Logo" height="50px" style="filter: brightness(100)">
        </div>
    <div class="footer-col">
        <p><img src="images/GitHub_Logo-white.png" alt="GitHub Logo" height="20px"> <a href="https://github.com/BioEcoOcean/blueprint-dev">GitHub development repository</a> <br>
          <b>Disclaimer:</b> AI (ChatGPT-4 and -5) was used to support the development of this application. All code generated was reviewed, tested, and edited as necessary before being implemented.</p>
    </div>
    <div class="footer-col">
      <p><b>Funding:</b> Funded by the European Union under the Horizon Europe Programme, Grant Agreement No. 101136748 (BioEcoOcean). Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or the European Research Executive Agency (REA). Neither the European Union nor the granting authority can be held responsible for them.</p>
    </div>
  </div>
</footer>

</body>
</html>