website/screenshots.html at main · jostroOS/website · 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
<!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">
    <meta name="description" content="Screenshots captured on Jostro OS">
    <meta name="keywords" content="jostro,jostros,jostroos,jostro os,twister">
    <meta name="theme-color" content="#ef0a6a">
    <meta property="og:site_name" content="Jostro OS">
    <meta property="og:title" content="Screenshots">
    <meta name="og:description" content="Screenshots captured on Jostro OS">
    <meta name="og:image" itemprop="image" content="https://jostroos.ml/icons/jostro.png">
    <link rel="shortcut icon" href="icons/favicon.ico" sizes="48x48">
    <link rel="bookmark" href="icons/favicon.ico">
    <link href="common.css" rel="stylesheet" type="text/css">
    <link href="article.css" rel="stylesheet" type="text/css">
    <title>Screenshots - Jostro OS</title>
    <style>
        #wallpaper, #main-container, #show{
            transition: 0.3s ease;
        }
        img{
            transition: 0.3s ease;
            width: 15vw;
            min-width: 200px;
            margin: 0 20px 20px 0;
            border: 5px solid #b6359c;
            border-radius: 20px;
            cursor: pointer;
        }
        img:hover{
            border-color: #ef0a6a;
        }
        #show{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 3;
            cursor: pointer;
        }
        #shade{
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
        }
        #large-image{
            position: absolute;
            left: 10vw;
            top: calc(50vh - 45vw/2);
            width: 80vw;
            height: 45vw;
            border: 5px solid #ef0a6a;
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="wallpaper"></div>
    <div id="main-container">
        <header>
            <nav>
                <ul id="bar">
                    <li><a id="nav-logo" href="https://jostroos.ml/"></a></li>
                    <li><a id="nav-home" href="index.html">Home</a></li>
                    <li><a id="nav-install" href="install.html">Install Instructions</a></li>
                    <li><a id="nav-screenshots" class="now" href="screenshots.html">Screenshots</a></li>
                    <li><a id="nav-about" href="about.html">About</a></li>
                </ul>
            </nav>
        </header>
        <div id="text-area">
            <h1>Screenshots</h1>
            <h3 id="description">Real screenshots captured on Jostro OS.</h3>
            <img id="img1" src="screenshots/1.png" alt="OOF This should be a screenshot, but it can't load." onclick="showImg(1)">
        </div>
        <footer>
            <p id="copyright">© 2021 Jostro Project. All Rights Reserved.</p>
        </footer>
    </div>
    <div id="show" onclick="showImg()">
        <div id="shade"></div>
        <div id="large-image"></div>
    </div>
    <script>
        const show = document.getElementById("show");
        const largeImage = document.getElementById("large-image");
        if (window.innerWidth <= 620){
            document.getElementById("nav-install").innerHTML = "Install";
        }
        var large = false;
        function showImg(imgNum){
            if (!large && imgNum){
                largeImage.style.backgroundImage= "url('screenshots/" + imgNum + ".png')";
                show.style.display = "block";
                large = true;
            }else{
                show.style.display = "none";
                large = false;
            }
        }
    </script>
</body>
</html>