Created Website

README.md

@@ -1,2 +1,2 @@
-# PyBrowser
-My own little Python Browser.
+# TurboWarp-Extension-Creator
+Easily create extensions for TurboWarp.

download.js

@@ -0,0 +1,70 @@
+function if_then_else_return(condition, then_return, else_return){
+  if (condition) {return then_return;} else {return else_return;}
+}
+
+function getOS(){
+  if (navigator.userAgent.includes("Mac OS")) return "macOS";
+  if (navigator.userAgent.includes("Linux")) return "Linux";
+  if (navigator.userAgent.includes("Windows")) return "Windows";
+  return "Other";
+}
+
+function getArchitecture(){
+  if (navigator.userAgent.includes("x64")){
+    return "64";
+  } else {
+    return "32";
+  }
+}
+
+async function loadDownloadButton(){
+  var lastest_version = await fetch('https://samuellouf.github.io/api/PyBrowser/update.json').then(result => result.text());
+  lastest_version = JSON.parse(lastest_version);
+
+  var download_button = document.querySelector('#page #download a.downloadbutton button');
+  var download_link = document.querySelector('#page #download a.downloadbutton');
+
+  download_button.innerHTML = 'Download version ' + lastest_version.lastest_version + ' for <img src="' + if_then_else_return(getOS() == 'Windows', 'windows', if_then_else_return(getOS() == 'macOS', 'macOS', 'linux')) + '.svg" width="24"> ' + getOS();
+
+  download_link.href = 'javascript: download();';
+}
+
+async function loadVersions(){
+  var versions = await fetch('https://samuellouf.github.io/api/PyBrowser/versions.json').then(result => result.text()).then(r => JSON.parse(r));
+  const addOptionInSelect = (name, value, select) => {
+    var opt = document.createElement('option');
+    opt.innerText = name;
+    opt.value = value;
+    document.querySelector(select).appendChild(opt);
+  }
+  versions.forEach((version) => {
+    if (!(version.toString().includes('.'))) version = String(version) + '.0'
+    addOptionInSelect(version, version, '#selectanotherversion');
+  });
+}
+
+// This download function can work all by itself
+async function download(version='lastest', os=if_then_else_return(getOS() == 'Windows', 'win', if_then_else_return(getOS() == 'macOS', 'macOS', 'linux'))){
+  if (version == 'lastest'){
+    var lastest_version = await fetch('https://samuellouf.github.io/api/PyBrowser/update.json').then(result => result.text());
+    lastest_version = JSON.parse(lastest_version);
+    version = lastest_version.lastest_version;
+  }
+  const link = document.createElement("a");
+  link.href = 'https://github.com/samuellouf/PyBrowser/releases/download/v' + version + '/PyBrowser-v' + version + '.zip';
+  link.download = 'PyBrowser-v' + version + '.zip';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+loadVersions();
+loadDownloadButton();
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const download_urlparam = urlParams.get('download');
+
+if (download_urlparam != null){
+  download();
+}

header.css

@@ -0,0 +1,33 @@
+.sticky {
+  position: fixed;
+  width: 100%;
+  top: 5px;
+}
+
+.topnav{
+  overflow: hidden;
+  background-color: #ff4d4d;
+  z-index: 100;
+}
+
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+  transition-duration: 0.5s;
+}
+
+.topnav a:hover {
+  background-color: #d94242;
+  color: black;
+  transition-duration: 0.5s;
+}
+
+.topnav a.active {
+  background-color: #ff4d4d#04AA6D;
+  color: white;
+  transition-duration: 0.5s;
+}

header.js

@@ -0,0 +1,18 @@
+// When the user scrolls the page, execute myFunction
+window.onscroll = function() {myFunction()};
+window.onload = function() {myFunction()};
+
+// Get the header
+var header = document.querySelector("header");
+
+// Get the offset position of the navbar
+var sticky = header.offsetTop;
+
+// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+  if (window.pageYOffset > sticky) {
+    header.classList.add("sticky");
+  } else {
+    header.classList.remove("sticky");
+  }
+}

index.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>PyBrowser</title>
+    <meta charset="utf-8">
+    <link rel="icon" href="./favicon.ico" />
+    <!--Styles-->
+    <link rel="stylesheet" href="./style.css"/>
+    <link rel="stylesheet" href="./header.css"/>
+    <link rel="stylesheet" href="./stylizedinputs.css"/>
+    <meta name="theme-color" content="#ff4d4d" />
+  </head>
+  <body>
+    <span id="top"></span>
+    <a href="#top"><span class="gototop"><span>⬆️</span></span></a>
+    <section id="home">
+      <br>
+
+      <div class="snapshot">
+        <div class="slideshow-container">
+
+          <div class="mySlides fade">
+            <div class="numbertext">1 / 4</div>
+            <img src="screenshot1.png">
+            <div class="text"><font color="#000000">PyBrowser</font></div>
+          </div>
+
+          <div class="mySlides fade">
+            <div class="numbertext">2 / 4</div>
+            <img src="screenshot2.png">
+            <div class="text">Private navigation</div>
+          </div>
+
+          <div class="mySlides fade">
+            <div class="numbertext">3 / 4</div>
+            <img src="screenshot3.png">
+            <div class="text">Color customization</div>
+          </div>
+
+          <div class="mySlides fade">
+            <div class="numbertext">4 / 4</div>
+            <img src="screenshot4.png">
+            <div class="text">Change name</div>
+          </div>
+
+          <a class="prev" onclick="plusSlides(-1)">❮</a>
+          <a class="next" onclick="plusSlides(1)">❯</a>
+
+          </div>
+          <br>
+
+          <div style="text-align:center">
+            <span class="dot" onclick="currentSlide(1)"></span> 
+            <span class="dot" onclick="currentSlide(2)"></span> 
+            <span class="dot" onclick="currentSlide(3)"></span> 
+            <span class="dot" onclick="currentSlide(4)"></span> 
+          </div>
+      </div>
+      <br>
+      <div class="presentation">
+        <div class="text">
+          <p>A free, open-source, Python-made web browser.</p>
+          <a href="#download"><button class="stylizedbutton" style="color: black; background-color: white;"><img src="" width="16">Download it</button></a>
+        </div>
+      </div>
+      <br>
+      <section id="links" class="centeritems">
+        <a href="https://github.com/samuellouf/PyBrowser"><button class="stylizedbutton">See on GitHub</button></a>
+        <a href="#download" onclick="setActive('download');"><button class="stylizedbutton">Download</button></a>
+      </section>
+    </section>
+    <header class="topnav">
+      <a href="#home" onclick="setActive('home');">Home</a>
+      <a href="#about" onclick="setActive('about');">About</a>
+      <a href="#download" onclick="setActive('download');">Download</a>
+      <a href="#functionalities" onclick="setActive('functionalities');">Functionalities</a>
+      <a href="#bugs" onclick="setActive('bugs');">Bugs and issues</a>
+    </header>
+    <section id="page">
+      <section id="about">
+        <br>
+        <h1 class="title">About</h1>
+        <br>
+        <p class="aboutparagraph">PyBrowser is a free, open-source, Python-made browser. </p>
+        <br>
+      </section>
+      <section id="download">
+        <br>
+        <h1 class="title">Download</h1>
+        <br>
+        <div class="bigdownloadbutton">
+          <a href="" class="downloadbutton"><button class="stylizedbutton" style="background-color: #505050; outline-color: #707070; font-size: 2em;">Download</button></a>
+        </div>
+        <br>
+        <br>
+        <h1 align="center">or</h1>
+        <br>
+        <br>
+        <div class="selectanother">
+          <div class="select">
+            <select class="anotheros" id="selectanotheros">
+              <option value="">Select an other OS</option>
+              <option value="win">Windows (x32/x64)</option>
+              <option value="macOS">MacOS</option>
+              <option value="linux">Linux (x64)</option>
+            </select>
+          </div>
+          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
+          <div class="select">
+            <select class="anotherversion" id="selectanotherversion">
+              <option value="">Select an other version</option>
+              <span class="versions"></span>
+            </select>
+          </div>
+        </div>
+        <br>
+        <div class="centeritems">
+          <a href="javascript: download(document.querySelector('#download div.select select.anotherversion').value, document.querySelector('#download div.select select.anotheros').value);"><button class="stylizedbutton" style="background-color: #505050; outline-color: #707070;">Download</button></a>
+        </div>
+        <br>
+        <br>
+      </section>
+      <section id="functionalities">
+        <br>
+        <h1 class="title">Functionalities</h1>
+        <br>
+        <ul>
+          <li>Browse on the internet (<i>of course</i>)</li>
+          <li>Use Private navigation</li>
+          <li>Check updates</li>
+          <li>Fullscreen</li>
+          <li>Rename window</li>
+          <li>Customize color theme</li>
+          <li>Change language</li>
+        </ul>
+        <br>
+      </section>
+      <section id="bugs">
+        <br>
+        <h1 class="title">Bugs and issues</h1>
+        <br>
+        <p>If you have found any bug or issue in PyBrowser, please report it in issues.</p>
+        <input type="text" placeholder="Issue name" class="stylizedinput">
+        <textarea class="stylizedinput" placeholder="The detailed issue"></textarea>
+        <div class="centeritems">
+          <a href="javascript: sendIssue(document.querySelector('#bugs input').value, document.querySelector('#bugs textarea').value);"><button class="stylizedbutton" style="background-color: #30a14e; outline-color: #3fc257; font-size: 1.5em;">Report an bug</button></a>
+        </div>
+        <br>
+      </section>
+    </section>
+    <footer>
+      <br>
+      <p>By @samuellouf - (on <a href="https://github.com/samuellouf/">GitHub</a>)</p>
+      <p>Any problems? Report them <a href="https://github.com/samuellouf/PyBrowser/issues">here</a>.</p>
+      <p>-</p>
+      <div class="links"><a href="https://github.com/samuellouf/PyBrowser/">See on GitHub</a></div>
+      <br><br>
+    </footer>
+    <!--Scripts-->
+    <script src="./script.js"></script>
+    <script src="./header.js"></script>
+    <script src="./download.js"></script>
+  </body>
+</html>

script.js

@@ -0,0 +1,55 @@
+function setActive(page){
+  try {
+    if (document.querySelector('header').innerHTML.includes('active')){
+      var activepage = document.querySelector('header.topnav a.active');
+      activepage.classList.remove('active');
+    }
+  } catch (error){}
+
+  if (page == '' || page == '/'){
+    document.querySelector('header.topnav a').classList.add('active');
+  } else {
+    document.querySelector('header.topnav a[href="#' + page + '"]').classList.add('active');
+  }
+}
+
+if (window.location.href.includes('#')){
+  setActive(window.location.hash.replace('#', ''));
+} else {
+  setActive('home');
+}
+
+function sendIssue(title, body = '', assignees = 'samuellouf'){
+  var link = `https://github.com/samuellouf/PyBrowser/issues/new?labels=bug&body=${body}&title=${title}&assignees=${assignees}`;
+  var a = document.createElement('a');
+  a.href = link;
+  a.target = '_blank'
+  a.click();
+}
+
+let slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+  if (n > slides.length) {slideIndex = 1}    
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";  
+  }
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "flex";  
+  dots[slideIndex-1].className += " active";
+}