sudo/main-page.html at main · sknasrul/sudo · 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <title>Dev Nasrul</title>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Parkinsans:ital,wght@0,500&display=swap');
    body{
        font-family: Parkinsans, sans-serif;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    header{
        display:flex;
        align-items: center;
        height: 2rem;
        justify-content:space-between;
        background: #F0F4F9;
        font-size: 1.3rem;
        padding:.7rem;
        border-radius:2rem;
        svg:active{scale: .9;}
    }
    .img{
        display: block;
        margin: 0 auto;
        width: 8rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        background-position: -200% 0;
    }
    #intro{
        font-size: 2rem;
        text-align: center;
        color: #4070F4;
        margin-top: 1rem;
        text-shadow: 1.5rem 1rem .5rem rgba(62, 111, 244, .1);
        font-weight: 500;
    }
    #intro::after{
        content: '|';
        font-size: 2.5rem;
        animation: b 1s infinite;
        font-family: cursive;
    }
    @keyframes b{
        50%{opacity: 0;}
    }
    @keyframes shimmer{
      100%{background-position: 200% 0;}
    }
    #repo{
        position: fixed;
        height: 5rem;
        width: 100%;
        left: 0;
        bottom: 0;
        transition: 0.3s;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
        b{
            font-size: 1.3rem;
            position: relative;
            margin: 1.5rem;
        }
        border-top: 3px solid whitesmoke;
        backdrop-filter: blur(15px);
    }
    hr{
        background: whitesmoke;
        color: red;
        border-radius: 1rem;
        width: 50px;
        height: 5px;
    }
</style>
</head>
<body>
    <header>
        <svg onclick="document.body.style.filter = document.body.style.filter ? '' : 'blur(15px)';" width="35" viewBox="0 0 24 24"><path d="M3 8a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1m0 8a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1"></path></svg>
        Dev Nasrul
        <svg onclick="window.location.href='login'" width="35" viewBox="0 0 24 24"><g fill="#200E32" transform="translate(3 2)"> <ellipse cx="9" cy="5.556" opacity=".4" rx="5.625" ry="5.556"></ellipse> <path d="M17.9902354,16.6757991 L17.9902354,16.6757991 C17.9953097,16.5967226 17.9953097,16.5174327 17.9902354,16.4383562 C17.9679741,16.1461262 17.885058,15.8607505 17.7461199,15.5981735 C17.1993012,14.5296804 15.6662559,14.0456621 14.3870907,13.7716895 C13.4744565,13.5817014 12.5471782,13.4595545 11.6139387,13.4063927 L10.6374767,13.3333333 L10.1980688,13.3333333 L9.6512501,13.3333333 L8.34279105,13.3333333 L7.79597234,13.3333333 L7.35656445,13.3333333 L6.38010248,13.4063927 C5.44686291,13.4595545 4.51958466,13.5817014 3.60695046,13.7716895 C2.32778527,14.0091324 0.794739971,14.5022831 0.247921264,15.5981735 C0.10898315,15.8607505 0.0260670984,16.1461262 0.00380576968,16.4383562 C-0.00126858989,16.5174327 -0.00126858989,16.5967226 0.00380576968,16.6757991 L0.00380576968,16.6757991 C-0.000879294659,16.7548861 -0.000879294659,16.834155 0.00380576968,16.913242 C0.0303656032,17.2029741 0.116574533,17.4851701 0.257685884,17.7442922 C0.804504591,18.8127854 2.33754989,19.2968037 3.61671508,19.5707763 C4.53104892,19.7518719 5.45762024,19.8739256 6.3898671,19.9360731 L7.36632907,20 L7.60067995,20 L7.80573696,20 L10.2078334,20 L10.4128904,20 L10.6472413,20 L11.6237033,19.9360731 C12.5559501,19.8739256 13.4825215,19.7518719 14.3968553,19.5707763 C15.6760205,19.3242009 17.2090658,18.8401826 17.7558845,17.7442922 C17.890425,17.4769528 17.9730826,17.1893744 18,16.8949772 C18.0012406,16.8218031 17.9979804,16.748623 17.9902354,16.6757991 Z"></path></g></svg>
    </header>
    <img class="img" style="margin-top: 25dvh;" src="static/photo.jpg">
    <div id="intro"></div>
    <div id="repo">
        <hr>
        <b>Repositories</b>
    </div>
<script>
    const t = document.getElementById('intro');
    l = ['Sk Nasrul', 'Sk Nasrul Islam'];
    let ts = 100, es = 50, pb = 1000, c = 0, i = true, ti = 0, int;
    function type() {
        const ct = l[c];
        if (i) {
            t.textContent += ct[ti];
            ti++;
            if (ti === ct.length) {
                i = false;
                setTimeout(() => {
                    clearInterval(int);
                    int = setInterval(erase, es);
                }, pb);
            }}
    }
    function erase() {
        if (!i) {
            t.textContent = t.textContent.slice(0, -1);
            if (t.textContent === '') {
                clearInterval(int);
                c = (c + 1) % l.length;
                ti = 0;
                i = true;
                setTimeout(() => {
                    int = setInterval(type, ts);
                }, pb);
            }
        }
    }
    int = setInterval(type, ts);


    let lastTouchY = 0;
let canRun = true;

let ele = document.getElementById("repo");
function onScrollUp() {
  console.log("Tried to scroll up!");
  repo.style="height:5rem;";

}

function onScrollDown() {
    repo.style="height:90%;";

    console.log("Tried to scroll down!");
}

// Mouse wheel detection
window.addEventListener("wheel", function (e) {
  if (!canRun) return;

  if (e.deltaY < 0) {
    onScrollUp();
  } else if (e.deltaY > 0) {
    onScrollDown();
  }

  canRun = false;
  setTimeout(() => (canRun = true), 300);
});

// Touch swipe detection (for mobile)
window.addEventListener("touchstart", function (e) {
  lastTouchY = e.touches[0].clientY;
});

window.addEventListener("touchmove", function (e) {
  if (!canRun) return;

  let currentY = e.touches[0].clientY;
  if (currentY > lastTouchY + 10) {
    onScrollUp();
    canRun = false;
  } else if (currentY < lastTouchY - 10) {
    onScrollDown();
    canRun = false;
  }

  setTimeout(() => (canRun = true), 300);
});

    document.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, { passive: false });

</script>
</body>
</html>