environmental-supercomputing/index.html at main · pythonpoet/environmental-supercomputing · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impact calculator</title>
    <link rel="icon" href="img/surf.svg" type="image/icon type">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header class="header">
        <nav class="navbar" aria-label="Main Navigation">
            <ul class="nav-list">
                <li><a href="index.html">Home</a></li>
                <li><a href="impact-calculator.html">Impact Calculator</a></li>
                <li><a href="best-practices.html">Best Practices</a></li>
            </ul>
        </nav>
    </header>
    <div class="scrollable-container">

    <section class="hero">
        <img src="sustainable.jpg" alt="Sustainable" class="hero-image">
        <div class="hero-text-box">
            <h1>Calculate the environmental impact of your supercomputer project!</h1>
            <p>Only because your code runs in the cloud doesn't mean that your code doesn't affect the earth.
                By 2030, 20% of the world's electricity is expected to be consumed by internet and communication technology.<sup><a href="https://pisrt.org/psr-press/journals/easl-vol-3-issue-2-2020/new-perspectives-on-internet-electricity-use-in-2030/">1</a></sup> <br>You should optimise your code and reduce your carbon footprint.

            </p>
        </div>

        <div class="button-container">
            <a href="impact-calculator.html" class="cta-button">Calculate My Environmental Impact</a>
        </div>
        <p class="scroll-annotation-new">Scroll down to explore more</p>
    </section>


        <div class="info-page content">
            <div class="overlay"></div>
            <div class="tile">
                <img src="img/power2.png" alt="Lightning Icon" class="invert-colors centered-icon">
                <h2>What is inefficient supercomputing?</h2>
                <p>Inefficient supercomputing means not using high-performance computing (HPC) resources properly and efficiently. This inefficiency can arise from various factors, including poorly optimized software, inadequate hardware configurations, or ineffective resource management. We are focusing on poorly optimised software here. </p>
            </div>
            <div class="tile">
                <img src="img/drop.png" alt="Drop Icon" class="centered-icon">
                <h2>What are the consequences of inefficient supercomputing?</h2>
                <p>Running inefficient code on supercomputers will lead to software bottlenecks resulting in slowed processing speed and wasted resources. Electricity and water consumption will increase as more power is needed to chew through inefficient code and more water is required to cool the hot powerful hardware. Bad code may also have hardware utilization, resource allocation, and scalability issues leading to improper use of the hardware based on what the program needs. </p>
            </div>
            <div class="tile">
                <img src="img/book.png" alt="Book Icon" class="centered-icon">
                <h2>What can we do?</h2>
                <p>Our environmental impact calculator works by taking inputs (Processor time spent (hours), Type of node, Total data generated (GiB), Total duration of project (days)) and calaulates the energy used and emissions emitted by running such code on SURF's supercomputer (Snellius).
		We aim to make users of Snellius more aware of the impact of running their code and encourage them to write more efficient code by giving them tips (best practices). If you are a researcher or programmer and wish to learn more about code efficiency and supercomputing environmental impact,
		feel free to use our impact calculator and read our best practices guide.</p>
            </div>
        </div>
        <div class="about-section">
            <h1>About Us</h1>
            <section class="about-cards">
                <div class="about-card">
                    <h2 class="card-header">Who are we?</h2>
                    <p><img src="img/university.svg" alt="University Icon"> We are six students of Computational Social Science at the University of Amsterdam. This website is our Digital Behavioural Change Intervention to incentivize researchers to practice more environmentally sustainable coding. </p>
                </div>
                <div class="about-card">
                    <h2 class="card-header">Our goals:</h2>
                    <p><img src="img/awareness.svg" alt="Awareness Icon"> Spread awareness</p>
                    <p><img src="img/target.svg" alt="Impact Icon"> Incenvitize more sustainable coding</p>
                </div>
                <div class="about-card">
                    <h2 class="card-header">Our collaborators:</h2>
                    <p style="display: flex; align-items: center; justify-content: center;">
                        <a href="https://uva.nl"><img src="img/uva.svg" alt="UvA Logo" style="width: 50px; height: auto; margin-right: 10px;"></a>
                        <a href="https://www.surf.nl"><img src="img/surf.svg" alt="SURF Logo" style="width: 80px; height: auto;"></a>
                    </p>
		    <p>We are in collaboration with SURF. This website aims to help SURF's interests, while following our program at the UvA.</p>
                </div>
            </section>
        </div>
    </div>
</body>
</html>