Free-Fall/information.html at main · GeorgiMY/Free-Fall · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="assets/logo.png">
    <title data-i18n="information">Information</title>
    <link rel="stylesheet" href="information.css">
    <script src="translations.js"></script>
    <script src="languageSwitcher.js"></script>
    <script src="https://kit.fontawesome.com/673bbe22a9.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <div class="logo" data-i18n="welcome">Welcome to Free Fall</div>

        <div class="language-switcher">
            <select id="languageSelect" onchange="setLanguage(this.value)">
                <option value="en" data-i18n="english">English</option>
                <option value="bg" data-i18n="bulgarian">Bulgarian</option>
            </select>
        </div>

        <div class="hamburger">
            <span class="fas fa-bars"></span>
        </div>

        <nav class="nav-bar">
            <ul>
                <li><a href="index.html" data-i18n="home">Home</a></li>
                <li><a href="templates.html" data-i18n="startSimulation">Start Simulation</a></li>
                <li><a href="#" class="active" data-i18n="information">Information</a></li>
                <li><a href="contact.html" data-i18n="contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="section">
        <div class="container">
            <div class="content-section">
                <div class="title">
                    <h1 data-i18n="projectInfo">All About the Project</h1>
                </div>
                <div class="content">
                    <h2 data-i18n="projectPhilosophy">Project Philosophy</h2>
                    <h3 data-i18n="whyCreated">Why did I create it?</h3>
                    <p data-i18n="whyCreatedText">Since I was young, I've been extremely motivated to understand how and
                        why the universe works the way it does. Years ago, I reached the conclusion that physics is the
                        best way to learn this. One of the concepts in physics that I'm very interested in is
                        <strong>gravity</strong>.
                    </p>
                    <h3 data-i18n="projectGoals">Project Goals</h3>
                    <p data-i18n="projectGoalsText">The main goal is to help students and teachers. To help students
                        understand what gravity is, and to give teachers a tool that allows them to visualize it.<br>
                        The second goal is to motivate and encourage people to study physics, and to help enthusiasts
                        and those already interested by making the learning process easier.</p>

                    <h2 style="margin-top: 100px" data-i18n="objectProperties">What is what? What does each object
                        property in the project serve?</h2>
                    <h3 data-i18n="arrow">The Arrow</h3>
                    <p data-i18n="arrowText">The arrow above the object shows the direction of movement, and its length
                        shows the speed. The higher the speed, the longer the arrow. The arrow only appears if the
                        object is in motion.</p>
                    <img src="assets/arrow.PNG" style="height: 150px; width: auto;" alt="">
                    <h3 data-i18n="trail">The Trail</h3>
                    <p data-i18n="trailText">This is the trace that an object leaves when it moves. After approximately
                        a minute, the trail begins to disappear.</p>
                    <img src="assets/trail.PNG" style="height: 150px; width: auto;" alt="">
                </div>
            </div>

            <div class="image-section">
                <img src="assets/liftarn-Light-bulb.png" alt="">
            </div>
        </div>
    </div>

    <script>
        hamburger = document.querySelector(".hamburger");
        hamburger.onclick = function () {
            navBar = document.querySelector(".nav-bar");
            navBar.classList.toggle("active");
        }
    </script>
</body>

</html>