SkipPi/index.html at main · imfarhat/SkipPi · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SkipPi</title>
    <link rel="icon" type="image/png" href="./icon.PNG" />
    <link rel="stylesheet" href="./output.css" />
  </head>
  <body class="overflow-hidden">
    <div id="/container" class="p-3 w-[26rem] flex flex-col gap-3">
      <main id="/title" class="flex items-center justify-center">
        <img
          src="./icon-wide.png"
          alt="SkipPi"
          loading="eager"
          class="aspect-video h-[4.5rem] -ml-8 -mt-7 -mb-4 mix-blend-multiply saturate-[1.25] select-none"
        />
      </main>
      <section
        id="/status"
        class="flex flex-col gap-1 items-start justify-center"
      >
        <span class="font-semibold">Status:</span>

        <span
          id="running"
          class="py-1.5 px-3 bg-green-600 text-white rounded-md hidden w-fit"
        >
          Running
        </span>
        <span
          id="stopped"
          class="py-1.5 px-3 bg-red-500 text-white rounded-md w-fit"
        >
          Stopped
        </span>
      </section>

      <section
        id="adCountSection"
        class="flex flex-col gap-1 items-start justify-center hidden"
      >
        <span class="font-semibold">Skip Count:</span>
        <div class="py-1.5 px-3 bg-blue-600 text-white rounded-md w-fit">
          <span id="adCountSpan">0</span> YouTube Ads
        </div>
      </section>

      <section
        id="statsNotLoaded"
        class="flex flex-col gap-1 mt-6 mb-2.5 items-center justify-center hidden"
      >
        <div class="font-semibold animate-bounce">Oops!</div>
        <span class="py-1.5 px-3 bg-blue-600 text-white rounded-md">
          Want detailed stats? Re-open this pop-up!
        </span>
        <span class="py-1"
          >Please wait for the page to load & re-open this pop-up.</span
        >
      </section>

      <section
        id="notOnYT"
        class="flex flex-col gap-1 mt-6 mb-2.5 items-center justify-center"
      >
        <div class="font-semibold animate-bounce">Oops!</div>
        <button
          id="openYouTube"
          class="py-1.5 px-3 bg-blue-600 active:bg-blue-700 transition text-white rounded-md select-none"
        >
          Open YouTube
        </button>
        <span class="py-1">
          Seems like now you're not browsing YouTube in this tab.
        </span>
      </section>

      <section
        id="savings"
        class="flex flex-col gap-1 items-start justify-center hidden"
      >
        <span class="font-semibold">You Saved:</span>
        <div class="flex flex-row gap-2.5 items-center justify-center">
          <span
            id="adCountInSSpan"
            class="py-1.5 px-3 bg-blue-600 text-white rounded-md w-fit"
          >
            <span id="adCountInS">0</span> Seconds
          </span>
          <span id="sEqualsM" class="hidden">=</span>
          <span
            id="adCountInMSpan"
            class="py-1.5 px-3 bg-blue-600 text-white rounded-md w-fit hidden"
          >
            <span id="adCountInM">0</span> Minutes
          </span>
          <span id="mEqualsH" class="hidden">=</span>
          <span
            id="adCountInHSpan"
            class="py-1.5 px-3 bg-blue-600 text-white rounded-md w-fit hidden"
          >
            <span id="adCountInH">0</span> Hours
          </span>
        </div>
      </section>

      <footer
        id="/credits"
        class="flex flex-wrap items-center justify-between gap-2 mt-5 -mb-1.5"
      >
        <a
          href="https://farhat.vercel.app"
          target="_blank"
          rel="noopener noreferrer"
          class="text-xs w-fit"
        >
          <span class="flex flex-row gap-1 items-center justify-center">
            Developed by I. Farhat
          </span>
        </a>

        <a
          href="https://farhateservices.pages.dev/"
          target="_blank"
          rel="noopener noreferrer"
          class="text-xs w-fit"
        >
          <div class="flex flex-row gap-1 items-center justify-center">
            <!-- Powered by -->
            <img
              src="./fesa-logo-head-black.png"
              alt="Farhat e Services & Assistance"
              loading="eager"
              class="h-5 filter bg-blend-multiply"
            />
            <span>Farhat e Services & Assistance</span>
          </div>
        </a>
      </footer>
    </div>
    <svg
      class="absolute w-full -z-10 -bottom-[2rem] opacity-35 rotate-[189deg]"
    >
      <path d="M 0 50 C 150 150 300 0 500 80 L 500 0 L 0 0" fill="blue"></path>
      <path
        d="M 0 50 C 150 150 330 -30 500 50 L 500 0 L 0 0"
        fill="white"
        opacity="0.5"
      ></path>
      <path
        d="M 0 50 C 215 150 250 0 500 100 L 500 0 L 0 0"
        fill="white"
        opacity="0.5"
      ></path>
    </svg>

    <svg class="absolute w-full -z-10 -top-[1.25rem] opacity-35">
      <path d="M 0 50 C 150 150 300 0 500 80 L 500 0 L 0 0" fill="blue"></path>
      <path
        d="M 0 50 C 150 150 330 -30 500 50 L 500 0 L 0 0"
        fill="white"
        opacity="0.5"
      ></path>
      <path
        d="M 0 50 C 215 150 250 0 500 100 L 500 0 L 0 0"
        fill="white"
        opacity="0.5"
      ></path>
    </svg>
  </body>
  <script src="./index.js"></script>
</html>