TubeFocus-Extension/popup.html at main · usnaveen/TubeFocus-Extension · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>TUBE FOCUS</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="popup-container">
    <!-- Header & Toggles -->
    <header>
      <div class="header-left vertical-stack">
        <span>TUBE</span>
        <span>FOCUS</span>
      </div>
      <!-- Timer Display (Digital Clock Style) -->
      <div class="timer-container">
        <span id="timerDisplay" class="digital-timer">⏳</span>
      </div>
      <div class="toggles">
        <button id="toggleOn" class="active">On</button>
        <button id="toggleOff" class="active">Off</button>
      </div>
    </header>

    <!-- Tabs -->
    <nav class="tabs">
      <button data-tab="setup" class="active">Setup</button>
      <button data-tab="current">Current</button>
      <button data-tab="summary">Summary</button>
    </nav>

    <div style="padding: 0 0.5rem; margin-top: 0.5rem;">
      <button id="openDashboard"
        style="width: 100%; border: 2px solid var(--accent); background: transparent; color: var(--text); padding: 0.5rem; border-radius: 4px; cursor: pointer; font-weight: bold; font-family: inherit; font-size: 0.85rem; opacity: 0.9;">
        Open TubeFocus Dashboard ↗
      </button>
    </div>

    <!-- Setup -->
    <section id="setup" class="active">
      <label for="goalInput"> Define your goal in detail:</label>
      <input type="text" id="goalInput" placeholder="e.g. Learn React component lifecycle">
      <label for="sessionDuration">Session duration (minutes):</label>
      <input type="number" id="sessionDuration" min="1" value="25">

      <!-- Coach Instructions -->
      <label for="coachMode">Coach Mode:</label>
      <select id="coachMode" class="coach-mode-select">
        <option value="balanced">🎯 Balanced (Default)</option>
        <option value="strict">🚫 Strict - No distractions allowed</option>
      </select>

      <label style="display:flex; align-items:center; gap:8px; margin-top:8px; font-size:0.85rem;">
        <input type="checkbox" id="coachEnabled" checked>
        Enable Coach Interventions
      </label>

      <div id="customInstructionsContainer" style="display: none; margin-top: 8px;">
        <textarea id="coachInstructions"
          placeholder="e.g., Allow gaming videos for 10 min breaks, remind me to stretch every 30 min..."
          style="width: 100%; min-height: 60px; padding: 8px; border-radius: 4px; border: 2px solid var(--border); background: var(--panel); color: var(--text); font-size: 12px; resize: vertical;"></textarea>
      </div>

      <button id="startSession" class="action">Start Session</button>
      <button id="stopSession" class="action" disabled>Stop Session</button>
    </section>

    <!-- Current -->
    <section id="current">
      <div class="stats-container">
        <h3>📊 Session Stats</h3>
        <div class="stat-row">
          <span class="stat-label">Videos Watched:</span>
          <span id="videosWatched" class="stat-value">0</span>
        </div>
        <div class="stat-row">
          <span class="stat-label">Average Score:</span>
          <span id="averageScore" class="stat-value">–</span>
        </div>
        <div class="stat-row">
          <span class="stat-label">Current Video:</span>
          <span id="currentScore" class="stat-value">–</span>
        </div>
        <div class="stat-row">
          <span class="stat-label">Watch Time:</span>
          <span id="watchTime" class="stat-value">0m</span>
        </div>
        <div class="stat-row">
          <span class="stat-label">Session Status:</span>
          <span id="sessionStatus" class="stat-value status-indicator">●</span>
        </div>
      </div>

      <!-- Coach Message -->
      <div id="coachMessage" class="coach-message"
        style="margin-top: 16px; padding: 12px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border-radius: 8px; border-left: 3px solid #667eea; display: none;">
        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
          <span style="font-size: 1.2em;">🧠</span>
          <span style="font-weight: bold; color: #667eea;">AI Coach</span>
        </div>
        <p id="coachText" style="margin: 0; font-size: 0.9em; color: var(--text);"></p>
      </div>

      <!-- Video Actions -->
      <div style="margin-top: 16px; display: flex; gap: 8px;">
        <button id="saveVideoButton" class="action"
          style="flex: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-size: 0.85em; padding: 10px;">
          <span>📚 Save to Library</span>
        </button>
      </div>

      <div style="margin-top: 8px; display: flex; gap: 8px;">
        <button id="highlightButton" class="action"
          style="flex: 1; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); font-size: 0.85em; padding: 10px;">
          <span>✨ Highlight Section</span>
        </button>
      </div>

      <div id="saveVideoStatus" class="status-message"></div>
    </section>

    <!-- History removed (moved to Focus Hub) -->

    <!-- Summary -->
    <section id="summary">
      <h2>Session Summary</h2>
      <div id="summaryMessage"></div>
      <canvas id="scoreChart" width="240" height="120"></canvas>
    </section>

  </div>


  <!-- Chart.js library -->
  <script src="libs/chart.min.js"></script>
  <script src="popup.js"></script>
</body>

</html>