hackclub · Aryansjc · Mar 16, 2025 · Mar 16, 2025 · Mar 17, 2025 · Mar 17, 2025
diff --git a/background.js b/background.js
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,28 @@
+{
+  "manifest_version": 3,
+  "name": "Screen Time Tracker",
+  "version": "1.0",
+  "description": "Tracks time spent on websites and provides detailed usage statistics",
+  "permissions": [
+    "storage",
+    "tabs",
+    "activeTab",
+    "alarms"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+} 
diff --git a/popup.css b/popup.css
@@ -0,0 +1,171 @@
+body {
+  font-family: 'Segoe UI', Arial, sans-serif;
+  width: 350px;
+  margin: 0;
+  background: #f8f9fa;
+  color: #2c3e50;
+}
+
+.container {
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  margin: 8px;
+}
+
+h1 {
+  font-size: 20px;
+  margin-top: 0;
+  color: #1a73e8;
+  text-align: center;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 16px;
+  margin-top: 16px;
+  color: #3c4043;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 0 8px;
+}
+
+.tab-button {
+  flex: 1;
+  background: none;
+  border: none;
+  padding: 12px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #5f6368;
+  transition: all 0.3s ease;
+  position: relative;
+  font-weight: 500;
+}
+
+.tab-button:hover {
+  color: #1a73e8;
+}
+
+.tab-button.active {
+  color: #1a73e8;
+}
+
+.tab-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #1a73e8;
+  transition: all 0.3s ease;
+}
+
+.tab-content {
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.tab-content.active {
+  display: block;
+  opacity: 1;
+}
+
+.total-time {
+  margin-bottom: 20px;
+  font-weight: 500;
+  background: #f1f3f4;
+  padding: 12px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.stats-container {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.site-stat {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f8f9fa;
+  margin-bottom: 8px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.site-stat:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.site-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.site-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #202124;
+  font-weight: 500;
+}
+
+.site-time {
+  margin-left: 12px;
+  color: #5f6368;
+  font-weight: 500;
+}
+
+.bar-container {
+  height: 6px;
+  width: 100%;
+  background-color: #e8eaed;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.bar {
+  height: 100%;
+  background-color: #1a73e8;
+  border-radius: 8px;
+  transition: width 0.3s ease;
+}
+
+.stats-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.stats-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.stats-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.stats-container::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+#weeklyChart {
+  margin-top: 16px;
+  border-radius: 8px;
+  padding: 8px;
+  background: white;
+} 
diff --git a/popup.html b/popup.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Screen Time Tracker</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Screen Time Tracker</h1>
+
+    <div class="tabs">
+      <button id="todayTab" class="tab-button active">Today</button>
+      <button id="historyTab" class="tab-button">History</button>
+    </div>
+
+    <div id="todayView" class="tab-content active">
+      <h2>Today's Activity</h2>
+      <div class="total-time">
+        <span>Total screen time: </span>
+        <span id="totalTime">0m</span>
+      </div>
+      <div id="todayStats" class="stats-container"></div>
+    </div>
+
+    <div id="historyView" class="tab-content">
+      <h2>Last 7 Days</h2>
+      <div id="historyStats" class="stats-container"></div>
+      <canvas id="weeklyChart" width="300" height="200"></canvas>
+    </div>
+  </div>
+
+  <script src="chart.min.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html> 
diff --git a/popup.js b/popup.js
diff --git a/submissions/Screen Time Tracker/README.md b/submissions/Screen Time Tracker/README.md
@@ -0,0 +1,19 @@
+# BrowserBuddy Grant Program
+
+BrowserBuddy, by Hack Club, supports teenagers in building and publishing their own browser extensions. Participants receive a $30 grant, which includes a $5 Chrome Developer License and $25 for additional prizes, to launch their extensions to the Chrome Web Store.
+
+## How It Works
+
+1. **Brainstorm**: Think of a unique idea for an extension.
+2. **Develop & Test**: Build and test your extension with at least 10 users.
+3. **Submit & Publish**: Submit your project by November 20th, and get your extension live on Chrome and Firefox.
+
+## Requirements
+
+- Unique, problem-solving extensions.
+- Open-source code.
+- Compatible with Chrome-based and Firefox browsers.
+
+## Resources
+
+For assistance, join the [#browser-buddy](https://hackclub.slack.com/archives/C07MQBTNVRU) channel on Slack. Check out the [BrowserBuddy website](https://browserbuddy.hackclub.com/) for more details.
diff --git a/submissions/Screen Time Tracker/background.js b/submissions/Screen Time Tracker/background.js
diff --git a/submissions/Screen Time Tracker/icons/icon128.png b/submissions/Screen Time Tracker/icons/icon128.png
diff --git a/submissions/Screen Time Tracker/icons/icon16.png b/submissions/Screen Time Tracker/icons/icon16.png
diff --git a/submissions/Screen Time Tracker/icons/icon48.png b/submissions/Screen Time Tracker/icons/icon48.png
diff --git a/submissions/Screen Time Tracker/manifest.json b/submissions/Screen Time Tracker/manifest.json
@@ -0,0 +1,28 @@
+{
+  "manifest_version": 3,
+  "name": "Screen Time Tracker",
+  "version": "1.0",
+  "description": "Tracks time spent on websites and provides detailed usage statistics",
+  "permissions": [
+    "storage",
+    "tabs",
+    "activeTab",
+    "alarms"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}