NoYouTubeVideo/redirect.html at master · MarvinAmine/NoYouTubeVideo · 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Choose a Better Way - YouTube Blocker</title>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="redirect.css">
</head>

<body>

  <!-- NEW: Toggle button for blocking (top left) with power icon -->
  <label class="toggle-switch">
    <!-- Hidden checkbox to store the actual on/off state -->
    <input type="checkbox" id="toggleBlockingCheckbox" />

    <!-- The slider background -->
    <span class="slider"></span>

    <!-- Label text that displays ON/OFF or any custom text -->
    <span id="toggleBlockingState" class="toggle-state-label"></span>
  </label>
  <div class="breeze-overlay"></div>
  <div class="breeze-overlay-2"></div>
  <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
    🌙 Dark Mode
  </button>
  <div class="container">
    <div class="header" tabindex="-1">
      <div class="logo-container">
        <img src="icons/block-Photoroom.png" alt="YouTube Blocker Logo" class="logo">
        <div class="music-badge" role="note">
          <span>🎵</span> YouTube Music™ remains accessible
          <div class="music-badge-tooltip">
            Your favorite music stays on. This extension only helps you choose better activities over YouTube™ videos.
          </div>
        </div>
      </div>
      <h1>Regain Control of Your Time</h1>
      <p class="intro-message">
        Choose a productive alternative or reflect on why you're here.
      </p>
    </div>

    <div id="progressBanner" class="progress-banner" role="status" aria-live="polite">
      <!-- Progress message will be inserted here dynamically -->
    </div>

    <div class="stats-container">
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value" id="timeSavedToday">0</div>
          <div class="stat-label">Minutes Saved Today</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="weeklyMinutes">0</div>
          <div class="stat-label">Minutes Saved This Week</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="streakDays">0</div>
          <div class="stat-label">Day Streak</div>
        </div>
      </div>
    </div>

    <!-- New Chart Container for Time Passed Graph -->
    <div class="chart-container" style="margin: 20px auto; max-width: 400px;">
      <canvas id="timeChart" width="400" height="200"></canvas>
    </div>

    <div class="alternatives">
      <div class="alternative-card card-fun" role="button" tabindex="0"
        aria-label="Fun & Recharge: Enjoy quick games or creative ways to recharge">
        <div class="card-icon">🎮</div>
        <div class="card-title">Fun & Recharge</div>
        <div class="card-description">
          Quick games and activities to boost your energy
        </div>
      </div>

      <div class="alternative-card card-learn" role="button" tabindex="0"
        aria-label="Learn Something New: Explore interesting articles and inspiring content">
        <div class="card-icon">📚</div>
        <div class="card-title">Learn Something New</div>
        <div class="card-description">
          Expand your knowledge in just a few minutes
        </div>
      </div>

      <div class="alternative-card card-move" role="button" tabindex="0"
        aria-label="Move Your Body: Quick exercises and stretches">
        <div class="card-icon">🌿</div>
        <div class="card-title">Move Your Body</div>
        <div class="card-description">
          Energize yourself with quick movement breaks
        </div>
      </div>

      <div class="alternative-card card-relax" role="button" tabindex="0"
        aria-label="Relax & Meditate: Find peace with quick mindfulness exercises">
        <div class="card-icon">🧘</div>
        <div class="card-title">Relax & Meditate</div>
        <div class="card-description">
          Reset your mind with brief meditation
        </div>
      </div>

      <div class="alternative-card card-reflect" role="button" tabindex="0"
        aria-label="Reflect & Journal: Quick journaling for clarity">
        <div class="card-icon">✍️</div>
        <div class="card-title">Reflect & Journal</div>
        <div class="card-description">
          Gain clarity through quick writing
        </div>
      </div>
    </div>

    <div class="quote" role="note">
      Every minute counts. Choose what fuels you.
    </div>

    <div class="reflection-section" style="scroll-margin-top: 0;" tabindex="-1">
      <div class="reflection-panel">
        <div class="reflection-header">
          <h3>Before continuing to YouTube, share one thought on what you're avoiding:</h3>
          <div class="bypass-countdown" id="bypassCountdown">Taking a moment to reflect...</div>
        </div>

        <div class="reflection-input-group">
          <textarea class="reflection-input" id="reflectionInput" placeholder="Your reflection..." rows="3"
            aria-label="Reflection on what you're avoiding"></textarea>
          <div class="reflection-save-feedback" id="reflectionFeedback">
            <span class="checkmark">✓</span> Reflection saved
          </div>
        </div>

        <div class="reflection-actions">
          <button class="pause-button" id="pauseButton" aria-label="Pause YouTube blocking for 10 minutes">
            Pause Blocking for 10 Minutes
            <div class="button-tooltip">Temporarily allow YouTube for 10 minutes without reflection</div>
          </button>
          <button class="bypass-button" id="bypassButton" disabled aria-label="Continue to YouTube after reflection">
            Continue to YouTube
            <div class="button-tooltip">Bypass block once, after reflecting</div>
          </button>
        </div>

        <div class="past-reflections-toggle">
          <button class="toggle-button" id="togglePastReflections" aria-label="Toggle past reflections">
            <span class="toggle-icon">📝</span>
            View Past Reflections
          </button>
        </div>

        <div class="past-reflections-panel" id="pastReflectionsPanel">
          <div class="past-reflections-list" id="pastReflectionsList">
            <!-- Past reflections will be inserted here dynamically -->
          </div>
        </div>
      </div>
    </div>

    <div class="bypass-container">
      <div class="reflection-container">
        <!-- Remove duplicate content since we moved it above -->
      </div>
    </div>

    <div class="modal-overlay" id="choiceModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
      <div class="modal" role="document">
        <div class="modal-header">
          <h3 class="modal-title" id="modalTitle"></h3>
        </div>
        <div class="choice-list" id="choiceList" role="list" tabindex="0">
          <!-- Choices will be inserted here dynamically -->
        </div>
        <div class="modal-close">
          <button class="modal-close-button" id="modalCloseButton" aria-label="Close activity choices">
            Choose something else
          </button>
          <button class="modal-close-button" id="modalRestoreButton" aria-label="Restore default activities">
            Restore Defaults
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="footer fade-in">
    <div class="footer-message" role="note">
      This tool isn't here to stop you. It's here to help you decide what matters most today.
    </div>

    <div class="footer-links">
      <a href="https://noyoutubevideo.com/privacy" class="footer-link"
        data-tooltip="All usage data is stored locally on your device. No personal information is collected or transmitted externally.">Privacy
        Policy</a>
      <span class="separator">|</span>
      <a href="https://noyoutubevideo.com/terms" class="footer-link"
        data-tooltip="This extension is provided as-is, focusing on helping you make mindful choices about your time.">Terms
        of Service</a>
    </div>

    <div class="footer-data">
      Your data stays with you: All productivity tracking is stored locally on your device.
    </div>
  </div>
  <script src="scroll.js"></script>
  <script src="stats.js"></script>
  <script src="reflection.js"></script>
  <script src="popup.js"></script>
  <script src="theme.js"></script>
  <script src="common.js"></script>
  <script src="timeChart.js"></script>
</body>

</html>