Tech4Bio2025.github.io/SponsorsPage.js at main · marinetech/Tech4Bio2025.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
153
154
155
class SponsorsPage extends HTMLElement {
    connectedCallback() {
        const sponsers = [
            {
                img: "./img/ANL_logo.png",
                alt: "ANL_logo",
                sponsor_name: "Haifa University",
                sponsor_title: "Charney School of Marine Sciences"
            },
            {
                img: "./img/LogoSchool.png",
                alt: "LogoSchool",
                sponsor_name: "Haifa University",
                sponsor_title: "Charney School of Marine Sciences"
            },
            {
                img: "./img/LogoMorrisKahn.png",
                alt: "LogoMorrisKahn",
                sponsor_name: "Morris Kahn",
                sponsor_title: "Morris Kahn Marine Research Station, University of Haifa"
            },
            {
                img: "./img/labust_logo.png",
                alt: "labust_logo",
                sponsor_name: "labust",
                sponsor_title: "Haifa University"
            },
            {
                img: "./img/UWINLABUSTFINALhorizontalni1.png",
                alt: "UWIN_LABUST_logo",
                sponsor_name: "UWIN",
                sponsor_title: "ERA CHAIR IN INTERNET OF UNDERWATER THINGS AT LABUST1"
            },
            {
                img: "./img/CoE_Marble_pozitiv_horizontalni.png",
                alt: "MarbleLogo",
                sponsor_name: "Marble",
                sponsor_title: "Centre of Excellence in Maritime Robotics and Technologies"
            },
            {
                img: "./img/merci.jpg",
                alt: "merciLogo",
                sponsor_name: "merci",
                sponsor_title: "Mediterranean Sea Research Center of Israel"
            }
        ]

        /*
              this.innerHTML = `
                  <div class="sponsors">
                      <img src="img/Vertical wave.png" alt="Vertical wave" class="background-content-demos">

                      <div class="demos-container">
                          <img src="img/wave.png" alt="wave" class="wave">
                          <h2 class="wave-line-h2">Sponsors</h2>
                          <img src="img/wave.png" alt="wave" class="wave miror">
                      </div>

                      <ul class="sponsors-list">

                          <li class="sponsor-item">
                              <img src="./img/ANL_logo.png" alt="ANL_logo" class="sponsor-logo">
                             <div class="card-info">
                              <p class="sponsor-name">ANL</p>
                              <p class="sponsor-title">Underwater Acoustic and Navigation Laboratory, University of Haifa
      </p>
      </div>
      </li>

                          <li class="sponsor-item">
                          <img src="./img/LogoSchool.png" alt="LogoSchool" class="sponsor-logo">
                                                   <div class="card-info">

                                                   <p class="sponsor-name">Haifa University</p>
                                                   <p class="sponsor-title">Charney School of Marine Sciences
                                                   </p>
                                                   </div>
                          </li>

                          <li class="sponsor-item">
                              <img src="./img/LogoMorrisKahn.png" alt="LogoMorrisKahn" class="sponsor-logo">
                                                                          <div class="card-info">
       <p class="sponsor-name">Morris Kahn</p>
                              <p class="sponsor-title">Morris Kahn Marine Research Station, University of Haifa
      </p>
                                                   </div>

                          </li>

                          <!--
                          <li class="sponsor-item">
                              <img src="./img/labust_logo.png" alt="labust_logo" class="sponsor-logo">
                              <p class="sponsor-name">labust</p>
                              <p class="sponsor-title">Haifa University</p>
                          </li>
                          -->

                          <li class="sponsor-item">
                              <img src="./img/UWINLABUSTFINALhorizontalni1.png" alt="UWIN_LABUST_logo" class="sponsor-logo">
                              <p class="sponsor-name">UWIN</p>
                              <p class="sponsor-title">ERA CHAIR IN INTERNET OF UNDERWATER THINGS AT LABUST1
      </p>
                          </li>

                          <li class="sponsor-item">
                              <img src="./img/CoE_Marble_pozitiv_horizontalni.png" alt="MarbleLogo" class="sponsor-logo">
                              <p class="sponsor-name">Marble</p>
                              <p class="sponsor-title">entre of Excellence in Maritime Robotics and Technologies
      for Sustainable Blue Economy</p>
                          </li>

                      </ul>
                  </div>
              `;
              */

        this.innerHTML = `
            <div class="sponsors">
                <img src="img/Vertical wave.png" alt="Vertical wave" class="background-content-demos">

                <div class="demos-container">
                    <img src="img/wave.png" alt="wave" class="wave">
                    <h2 class="wave-line-h2">Sponsors</h2>
                    <img src="img/wave.png" alt="wave" class="wave miror">
                </div>

                <ul class="sponsors-list" id="sponsorsList"></ul>
            </div>
        `;

        this.fillList(sponsers);
    }

    fillList(sponsers) {
        // Because the table is appended to ‘this’, we can find the <tbody>:
        const sponsorsList = this.querySelector('#sponsorsList');
        sponsorsList.innerHTML = '';

        sponsers.forEach(sponser => {
            sponsorsList.innerHTML += `
                <li class="sponsor-item">
                    <img src=${sponser.img} alt=${sponser.alt} class="sponsor-logo">
                   <div class="filler"></div>
                    <div class="card-info">
                        <p class="sponsor-name">${sponser.sponsor_name}</p>
                        <p class="sponsor-title">${sponser.sponsor_title}</p>
                    </div>
                </li>
            `;

        });
    }
}

customElements.define('sponsors-page', SponsorsPage);