GitUncovered/index.html at main · div360/GitUncovered · 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
<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <script src='assets/bootstrap/js/bootstrap.min.js'></script>
    <style>
        body {
            background-image: url('assets/images/home-bg.svg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 100vh;
            width: 100vw;
            margin: 0px;
            padding: 0px;
        }

        #mainImage{
            width:25vw;
            height:auto;
            margin-top: 5rem;
        }

        #username {
            width: 20vw;
            margin-right: 1rem;
        }

        #heading {
            font-size: 3rem;
        }

        #description {
            font-size: 1rem;
        }

        @media(max-width: 992px) {
            .container {
                flex-direction: column-reverse;
            }
            #mainImage {
                min-width: 80vw;
                min-height: 40vh;
            }

            #text {
                margin: 0px;
                padding: 0px;
                width: 80vw;
                margin-top: 3rem;
            }

            #heading {
                font-size: 5rem;
            }

            #description {
                font-size: 2rem;
            }

            #username, #submit {
                font-size: 2rem;
                width: 80vw;
                margin-right: 1rem;
            }


        }

    </style>

</head>
<body>
    <div class="container d-flex flex-lg-row flex-md-column-reverse justify-content-lg-center align-items-lg-center">
        <div class="d-flex flex-column" style="width: 30vw;">
            <div id="text" class="d-flex flex-column text-white">
                <div id="heading" class="font-monospace">GitUncovered</div>
                <div id="description" class="mt-2 mb-2 font-monospace">Discover the world of coding with GitUncovered. Enter a GitHub username and explore their repositories at your fingertips. Dive deeper into open-source and uncover the treasures of coding. GitUncovered - your gateway to the universe of GitHub.</div>
            </div>
            <div class="form-group d-flex flex-row pt-3">
                <input id="username" type="text" class="form-control" placeholder="Enter the username...">
                <button id="submit" class="btn btn-primary">Submit</button>
            </div>
            </div>
        <div>
            <img id="mainImage" src="./assets/images/earth-man.svg" class="img-fluid" alt="">
        </div>
    </div>


    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
            localStorage.clear();

            $('#username').on('keypress', function (e) {
                if (e.which == 13) {
                    $('#submit').click();
                }
            });

            $('#submit').click(function() {
                var username = $('#username').val();
                var githubUsernameRegex = /^[a-z\d]{0,38}$/i;
                if (username == "" || username == null || username == " ") {
                    alert('Please enter a Github username');
                    return false;
                } else {
                    console.log('Valid username')
                    localStorage.setItem('username', username);
                    window.location.href = "main.html";
                }
            });

        });
    </script>
</body>
</html>