added in a local webtorrent client we will call "βeacon"

src/about.html

@@ -158,12 +158,12 @@
             Roadmap
           </a>
           <a
-            href="https://btorrent.xyz/"
+            href="torrent/torrent.html"
             class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
             target="_self"
             rel="noopener noreferrer"
           >
-            βTorrent
+            βeacon
           </a>
         </div>
         <p

src/getting-started.html

@@ -158,12 +158,12 @@
             Roadmap
           </a>
           <a
-            href="https://btorrent.xyz/"
+            href="torrent/torrent.html"
             class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
             target="_self"
             rel="noopener noreferrer"
           >
-            βTorrent
+            βeacon
           </a>
         </div>
         <p

src/index.html

@@ -421,12 +421,12 @@
             Roadmap
           </a>
           <a
-            href="https://btorrent.xyz/"
+            href="torrent/torrent.html"
             class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
             target="_self"
             rel="noopener noreferrer"
           >
-            βTorrent
+            βeacon
           </a>
         </div>
         <p

src/ipns.html

@@ -157,12 +157,12 @@
             Roadmap
           </a>
           <a
-            href="https://btorrent.xyz/"
+            href="torrent/torrent.html"
             class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
             target="_self"
             rel="noopener noreferrer"
           >
-            βTorrent
+            βeacon
           </a>
         </div>
         <p

src/roadmap.html

@@ -139,12 +139,12 @@
             Roadmap
           </a>
           <a
-            href="https://btorrent.xyz/"
+            href="torrent/torrent.html"
             class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
             target="_self"
             rel="noopener noreferrer"
           >
-            βTorrent
+            βeacon
           </a>
         </div>
         <p

src/torrent/style.css

@@ -19,14 +19,19 @@ body {
   width: 100%;
 }
 
+/* Container used in header & footer */
+.container {
+  width: 95%;
+  max-width: 95%;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
 /* Header styling */
 .header-torrent {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 2rem;
-  margin-bottom: 2rem;
   background-color: var(--color-bg);
+  margin-bottom: 2rem;
+  /* No extra horizontal padding so it lines up with .container */
 }
 
 .logo-container {
@@ -37,166 +42,26 @@ body {
 .bitvid-logo {
   height: 4rem;
   width: auto;
-  margin-right: 1.5rem;
+  /* Adjust spacing around the logo if needed */
-}
+  margin-bottom: 0.5rem;
-
-.views {
-  display: flex;
-  gap: 1rem;
-}
-
-.view-link {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.view-link:hover {
-  color: var(--color-secondary);
-  text-decoration: underline;
 }
 
 /* Footer styling */
 .footer-torrent {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
-  text-align: center;
+  padding-bottom: 2rem;
   margin-top: 2rem;
   background-color: var(--color-bg);
-}
-
-.footer-link {
-  text-decoration: none;
-  color: #6b7280;
-  margin: 0 0.25rem;
-  transition: color 0.2s;
-}
-
-.footer-link:hover {
-  color: var(--color-secondary);
-  text-decoration: underline;
-}
-
-.footer-inline-links {
-  display: inline-block;
-  margin-top: 0.5rem;
-}
-
-.ipns-text {
-  margin-top: 0.5rem;
-  font-size: 0.8rem;
-  color: #6b7280;
-}
-
-.ipns-link {
-  color: #3b82f6;
-  text-decoration: underline;
-}
-
-.container {
-  width: 95%;
-  max-width: 95%;
-  margin: 0 auto;
-  padding: 1rem;
-}
-
-/* Table Cells */
-th,
-td {
-  padding: 2px 15px;
-  max-width: 200px;
-  overflow: auto;
-  white-space: nowrap;
-  color: var(--color-text);
-}
-
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-li {
-  margin-bottom: 0;
-  color: var(--color-text);
-}
-
-/* Spinner / Loading overlay */
-.spinner {
-  position: absolute;
-  top: 30%;
-  left: 30%;
-  width: 40%;
-  height: 40%;
-  z-index: 1000;
-  background-color: #1e293b;
-  border-radius: 0.75rem;
-  opacity: 0.8;
   text-align: center;
-  box-shadow: var(--shadow-md);
 }
 
-.spinner-icon {
+/* If you want to override the generic footer rules, remove them or unify here:
-  position: relative;
+footer {
-  top: 50%;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: -100px;
+  margin-top: 4rem;
-  font-size: 200px;
+  padding-top: 2rem;
-  transform: translateY(-50%);
 }
+*/
 
-/* Danger (Red) Buttons */
+/* Additional styling remains unchanged... */
-.button.button-danger,
-button.button-danger,
-input[type="submit"].button-danger,
-input[type="reset"].button-danger,
-input[type="button"].button-danger {
-  color: #fff;
-  background-color: #f43f5e;
-  border-color: #f43f5e;
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-  transition: background-color 0.2s, transform 0.2s;
-  cursor: pointer;
-}
-.button.button-danger:hover,
-button.button-danger:hover,
-input[type="submit"].button-danger:hover,
-input[type="reset"].button-danger:hover,
-input[type="button"].button-danger:hover,
-.button.button-danger:focus,
-button.button-danger:focus,
-input[type="submit"].button-danger:focus,
-input[type="reset"].button-danger:focus,
-input[type="button"].button-danger:focus {
-  background-color: #dc2626;
-  border-color: #dc2626;
-  transform: translateY(-1px);
-}
-
-/* Optionally for "Open torrent file" and "Seed files" if using those classes */
-.open-torrent-btn,
-.seed-files-btn {
-  color: #bdbdbd;
-  background-color: #f43f5e;
-  border: 1px solid #f43f5e;
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: background-color 0.2s, transform 0.2s;
-}
-.open-torrent-btn:hover,
-.seed-files-btn:hover {
-  background-color: #dc2626;
-  border-color: #dc2626;
-  transform: translateY(-1px);
-}
-
-/* Any other grid or custom layout */
-.grid {
-  margin-bottom: 20px;
-  width: 100%;
-  height: 200px;
-}
-.download-button {
-  margin-left: 10px;
-}

src/torrent/torrent.html

@@ -3,20 +3,21 @@
   <head>
     <base href="./" />
     <meta charset="UTF-8" />
-    <title>bitvid | Browser WebTorrent Client</title>
+    <title>bitvid βeacon | A Browser Based WebTorrent Client</title>
     <meta
       name="description"
-      content="bitvid uses βTorrent. βTorrent is a fully-featured Browser WebTorrent Client"
+      content="bitvid βeacon uses code from βTorrent. βTorrent is a fully-featured Browser WebTorrent Client"
     />
     <meta
       name="keywords"
       content="bitvid, client, webtorrent, browser, torrent, stream, bittorrent, torrenting, sharing, filesharing"
     />
-    <meta name="author" content="Diego Rodríguez Baquero - DiegoRBaquero" />
+
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
     <!-- Scripts: webtorrent, angular, etc. -->
-    <script src="https://cdn.jsdelivr.net/combine/npm/webtorrent/webtorrent.min.js,npm/moment@2,npm/angular@1.5/angular.min.js,npm/angular-route@1.5/angular-route.min.js,npm/angular-sanitize@1.5/angular-sanitize.min.js,npm/angular-ui-grid@3/ui-grid.min.js,gh/matowens/ng-notify/dist/ng-notify.min.js,npm/ng-file-upload@12.2.13/dist/ng-file-upload.min.js"></script>
+    <script src="bundle.min.js"></script>
 
     <!-- External styles -->
     <link
@@ -37,120 +38,120 @@
   </head>
 
   <body ng-controller="BTorrentCtrl" ng-cloak="">
-    <!-- Header -->
+    <!-- Header with container -->
     <header class="header-torrent">
-      <div class="logo-container">
+      <div class="container">
-        <img
+        <div class="logo-container">
-          src="../assets/svg/bitvid-logo-light-mode.svg"
+          <img
-          alt="bitvid Logo"
+            src="../assets/svg/bitvid-logo-light-mode.svg"
-          class="bitvid-logo"
+            alt="bitvid Logo"
-        />
+            class="bitvid-logo"
-      </div>
+          />
-      <!-- Only show links if there's no active torrent -->
+        </div>
-      <div class="views" ng-show="$root.client.torrents.length == 0">
-        <a ng-href="#/" class="view-link">Full</a>
-        <a ng-href="#/download" class="view-link">Single Download</a>
-        <a ng-href="#/view" class="view-link">Stream / View</a>
       </div>
     </header>
 
-    <!-- Where the 'view.html', 'download.html', or 'full.html' content will appear -->
+    <!-- Main content -->
     <div id="viewer" ng-style="$root.viewerStyle"></div>
     <div id="view" ng-view></div>
 
-    <!-- Footer -->
+    <!-- Footer with container -->
     <footer class="footer-torrent">
-      <a
+      <div class="container">
-        href="http://bitvid.network/"
-        class="footer-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        bitvid.network
-      </a>
-      |
-      <a
-        href="https://bitvid.btc.us"
-        class="footer-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        bitvid.btc.us
-      </a>
-      |
-      <a
-        href="https://bitvid.eth.limo"
-        class="footer-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        bitvid.eth.limo
-      </a>
-      |
-      <div class="footer-inline-links">
         <a
-          href="https://github.com/PR0M3TH3AN/bitvid"
+          href="http://bitvid.network/"
-          class="footer-link"
+          class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
           target="_blank"
           rel="noopener noreferrer"
         >
-          GitHub
+          bitvid.network
         </a>
+        |
         <a
-          href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
+          href="https://bitvid.btc.us"
-          class="footer-link"
+          class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
           target="_blank"
           rel="noopener noreferrer"
         >
-          Nostr
+          bitvid.btc.us
         </a>
+        |
         <a
-          href="https://habla.news/p/nprofile1qyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qgdwaehxw309ahx7uewd3hkcqgswaehxw309ahx7um5wgh8w6twv5q3yamnwvaz7tm0venxx6rpd9hzuur4vgqzpzf6x8a95eyp99dmwm4zmkx4a3cxgrnwdtfe3ej504m3aqjk4ugldyww3a"
+          href="https://bitvid.eth.limo"
-          class="footer-link"
+          class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
           target="_blank"
           rel="noopener noreferrer"
         >
-          Blog
+          bitvid.eth.limo
         </a>
-        <a
+        |
-          href="../getting-started.html"
+        <div class="mt-2 space-x-4">
-          class="footer-link"
+          <a
-          target="_self"
+            href="https://github.com/PR0M3TH3AN/bitvid"
-          rel="noopener noreferrer"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Nostr
+          </a>
+          <a
+            href="https://habla.news/p/nprofile1qyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qgdwaehxw309ahx7uewd3hkcqgswaehxw309ahx7um5wgh8w6twv5q3yamnwvaz7tm0venxx6rpd9hzuur4vgqzpzf6x8a95eyp99dmwm4zmkx4a3cxgrnwdtfe3ej504m3aqjk4ugldyww3a"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Blog
+          </a>
+          <a
+            href="../getting-started.html"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_self"
+            rel="noopener noreferrer"
+          >
+            Getting Started
+          </a>
+          <a
+            href="../about.html"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_self"
+            rel="noopener noreferrer"
+          >
+            About
+          </a>
+          <a
+            href="../roadmap.html"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_self"
+            rel="noopener noreferrer"
+          >
+            Roadmap
+          </a>
+          <a
+            href="torrent.html"
+            class="text-gray-500 hover:text-gray-400 transition-colors duration-200"
+            target="_self"
+            rel="noopener noreferrer"
+          >
+            βeacon
+          </a>
+        </div>
+        <p
+          class="mt-2 text-xs text-gray-600 font-mono break-all max-w-full overflow-hidden"
         >
-          Getting Started
+          IPNS:
-        </a>
+          <a href="ipns.html" class="text-blue-600 underline">
-        <a
+            k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1
-          href="../about.html"
+          </a>
-          class="footer-link"
+        </p>
-          target="_self"
-          rel="noopener noreferrer"
-        >
-          About
-        </a>
-        <a
-          href="../roadmap.html"
-          class="footer-link"
-          target="_self"
-          rel="noopener noreferrer"
-        >
-          Roadmap
-        </a>
-        <a
-          href="torrent.html"
-          class="footer-link"
-          target="_self"
-          rel="noopener noreferrer"
-        >
-          Torrent
-        </a>
       </div>
-      <p class="ipns-text">
-        IPNS:
-        <a href="../ipns.html" class="ipns-link">
-          k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1
-        </a>
-      </p>
     </footer>
 
     <!-- Processing Spinner -->
@@ -158,7 +159,7 @@
       <i class="fa fa-spinner fa-spin spinner-icon"></i>
     </div>
 
-    <!-- Our local Angular code -->
+    <!-- Local Angular code -->
     <script src="app.js"></script>
   </body>
 </html>

src/torrent/views/download.html

@@ -1,140 +0,0 @@
-<div class="container">
-  <!-- Hide this portion if torrents are already added -->
-  <div
-    ng-hide="$root.client.torrents.length != 0"
-    style="vertical-align: middle; text-align: center"
-  >
-    <div class="row">
-      <!-- On submit, call addMagnet() -->
-      <form class="no-margin" ng-submit="addMagnet()">
-        <label>Enter magnet, hash or http(s) .torrent</label>
-        <input
-          type="text"
-          placeholder="magnet, hash or http(s) .torrent"
-          ng-model="torrentInput"
-          ng-disabled="$root.disabled"
-          style="width: 50%"
-        />
-      </form>
-    </div>
-    <div class="row">
-      <label>or...</label>
-      <!-- Open torrent file button in red -->
-      <button
-        type="file"
-        ngf-select="$root.openTorrentFile($file)"
-        ng-disabled="$root.disabled"
-        class="button button-danger"
-      >
-        <i class="fa fa-folder-open"></i> Open torrent file
-      </button>
-    </div>
-  </div>
-
-  <!-- If there's a selected torrent, show its info -->
-  <div class="div" ng-if="selectedTorrent" style="text-align: center">
-    <div class="four columns" style="overflow: auto">
-      <h4>Information</h4>
-      <table class="u-full-width">
-        <tbody>
-          <tr>
-            <td>Name</td>
-            <td>{{$root.selectedTorrent.name}}</td>
-          </tr>
-          <tr>
-            <td>Size</td>
-            <td>{{$root.selectedTorrent.length | pbytes}}</td>
-          </tr>
-          <tr>
-            <td>Completed</td>
-            <td>
-              {{$root.selectedTorrent.progress | progress}}
-              ({{$root.selectedTorrent.downloaded | pbytes}})
-            </td>
-          </tr>
-          <tr>
-            <td>Peers</td>
-            <td>{{$root.selectedTorrent.numPeers}}</td>
-          </tr>
-          <tr>
-            <td>↓ Speed</td>
-            <td>{{$root.selectedTorrent.downloadSpeed | pbytes:1}}</td>
-          </tr>
-          <tr>
-            <td>ETA</td>
-            <td>{{$root.selectedTorrent.timeRemaining | humanTime}}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="four columns">
-      <h4>Files</h4>
-      <table class="u-full-width" style="margin: auto">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Size</th>
-            <th>Priority</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="files" ng-repeat="file in $root.selectedTorrent.files">
-            <td ng-hide="file.done">{{file.name}}</td>
-            <td ng-show="file.done">
-              <a
-                ng-href="{{file.url}}"
-                download="{{file.name}}"
-                target="_self"
-                ng-show="file.done"
-                >{{file.name}}</a
-              >
-            </td>
-            <td>{{file.length | pbytes}}</td>
-            <td>
-              <select
-                class="no-margin"
-                name="{{file.name}}Priority"
-                ng-model="file.priority"
-                ng-init="file.priority = '0'"
-                ng-change="$root.changePriority(file)"
-              >
-                <option value="1">High Priority</option>
-                <option value="0" selected="">Low Priority</option>
-                <option value="-1">Don't download</option>
-              </select>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <h5>↑ Click a file to download it</h5>
-    </div>
-
-    <div class="four columns">
-      <h4>Share</h4>
-      <ul style="text-align: justify">
-        <li>
-          <a ng-href="#{{$root.selectedTorrent.infoHash}}" target="_blank"
-            >βTorrent</a
-          >
-        </li>
-        <li>
-          <a ng-href="{{$root.selectedTorrent.magnetURI}}" target="_blank"
-            >Magnet URI</a
-          >
-        </li>
-        <li>
-          <a
-            ng-href="{{$root.selectedTorrent.safeTorrentFileURL}}"
-            target="_self"
-            download="{{$root.selectedTorrent.fileName}}"
-            >.torrent</a
-          >
-        </li>
-        <li>
-          <strong>Hash: </strong>{{$root.selectedTorrent.infoHash}}
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>

src/torrent/views/full.html

@@ -82,7 +82,7 @@
       <ul>
         <li>
           <a ng-href="#{{$root.selectedTorrent.infoHash}}" target="_blank"
-            >βTorrent</a
+            >bitvid</a
           >
         </li>
         <li>
@@ -98,9 +98,7 @@
             >.torrent</a
           >
         </li>
-        <li>
+        <li><strong>Hash: </strong>{{$root.selectedTorrent.infoHash}}</li>
-          <strong>Hash: </strong>{{$root.selectedTorrent.infoHash}}
-        </li>
       </ul>
     </div>
 
@@ -150,10 +148,9 @@
 
   <div class="center">
     <strong>
-      Client Stats:
+      Client Stats: ↓ {{$root.client.downloadSpeed | pbytes}}/s · ↑
-      ↓ {{$root.client.downloadSpeed | pbytes}}/s ·
+      {{$root.client.uploadSpeed | pbytes}}/s · Ratio: {{$root.client.ratio |
-      ↑ {{$root.client.uploadSpeed | pbytes}}/s ·
+      number:2}}
-      Ratio: {{$root.client.ratio | number:2}}
     </strong>
   </div>
 </div>

src/torrent/views/view.html

@@ -1,50 +0,0 @@
-<div class="container">
-  <!-- Hide form if there are already torrents in progress -->
-  <div
-    ng-hide="$root.client.torrents.length != 0"
-    style="vertical-align: middle; text-align: center"
-  >
-    <div class="row">
-      <form class="no-margin" ng-submit="addMagnet()">
-        <label>Enter magnet, hash or http(s) .torrent</label>
-        <input
-          type="text"
-          placeholder="magnet, hash or http(s) .torrent"
-          ng-model="torrentInput"
-          ng-disabled="$root.disabled"
-          style="width: 50%"
-        />
-      </form>
-    </div>
-    <div class="row">
-      <label>or...</label>
-      <!-- Open torrent file button in red -->
-      <button
-        type="file"
-        ngf-select="$root.openTorrentFile($file)"
-        ng-disabled="$root.disabled"
-        class="button button-danger"
-      >
-        <i class="fa fa-folder-open"></i> Open torrent file
-      </button>
-    </div>
-  </div>
-
-  <!-- If a torrent is selected, show its progress -->
-  <div
-    class="div"
-    ng-if="selectedTorrent"
-    style="text-align: center"
-  >
-    Downloaded
-    {{$root.selectedTorrent.downloaded | pbytes}} /
-    {{$root.selectedTorrent.length | pbytes}}
-    ({{$root.selectedTorrent.progress | progress}})
-    at
-    {{$root.selectedTorrent.downloadSpeed | pbytes:1}}
-    from
-    {{$root.selectedTorrent.numPeers}} peers.
-    ETA:
-    {{$root.selectedTorrent.timeRemaining | humanTime}}
-  </div>
-</div>