v1 finished

jpbonch · May 10, 2023 · 5a717c9 · 5a717c9
1 parent df1dceb
commit 5a717c9
Show file tree

Hide file tree

Showing 7 changed files with 298 additions and 80 deletions.
diff --git a/globe.png b/globe.png
diff --git a/icon.ico b/icon.ico
diff --git a/index.html b/index.html
@@ -57,14 +57,17 @@
     line-height: 40px;
     vertical-align: middle;
     white-space: nowrap;
-    overflow: hidden
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 webview{
     width: 100%;
     height: 100%;
     position: fixed;
-    top: 60px;
+    top: 61px;
     left: 0;
     display: inline-flex !important;
 }
@@ -113,9 +116,8 @@
     color: yellowgreen;
     border: 1px solid yellowgreen;
     font-family: 'Fira Code', monospace;
-    float: right;
-    margin-top: 5px;
-    margin-right: 5px;
+    margin-left: auto;
+    margin-right: 10px;
 }
 
 #traffic{
@@ -142,6 +144,7 @@
     width: 100%;
     -webkit-user-select: none;
     user-select: none;
+    border-bottom: 1px solid yellowgreen;
 }
 
 
@@ -172,7 +175,7 @@
 #currentZoom {
     position: absolute;
     top: 10px;
-    left: 5px;
+    left: 10px;
     outline: 0;
     color: yellowgreen;
     font-family: 'Fira Code', monospace;
@@ -223,7 +226,7 @@
 .favicon{
     width: 15px;
     height: 15px;
-    margin-left: -10px;
+    margin-left: auto;
     padding: 4px;
     display: inline-block;
 }
@@ -236,6 +239,8 @@
     top:0;
     left: 0;
     display: none;
+    border: 2px solid yellowgreen;
+    width: 250px;
 }
 
 @media screen and (max-width: 300px){ 
@@ -259,6 +264,35 @@
     }
 }
 
+.contextButton{
+    padding: 5px;
+}
+
+.contextButton:hover{
+    cursor: default;
+    background-color: #486017;
+}
+
+#navigation > button:hover{
+    background-color: #486017;
+}
+
+#traffic > button:hover{
+    background-color: #486017;
+}
+
+#zoomInButton, #zoomOutButton{
+    background-color: black;
+    color: yellowgreen;
+    border: 1px solid yellowgreen;
+}
+
+.zoomButtonDiv{
+    position: absolute;
+    right: 5px;
+    top: 10px;
+}
+
 
 
     </style>
@@ -291,7 +325,7 @@
 
 </div>
 <div id="tabs-container">
-<div class="smalltab">☆</div>
+<!-- <div class="smalltab">☆</div> -->
     <div id="tabs">
 
 
@@ -308,19 +342,22 @@
 </div>
 <div id="zoomMenu">
     <span id="currentZoom"></span>
+    <div class="zoomButtonDiv">
+    <button id="zoomInButton">+</button>
+    <button id="zoomOutButton">-</button>
+    </div>
 </div>
 <div id="contextmenu">
-    <div>Back</div>
-    <div>Forward</div>
-    <div>Reload</div>
-    <div>Print</div>
-    <div>View page source</div>
-    <div>Inspect</div>
+    <div class="contextButton" id="contextBack">Back</div>
+    <div class="contextButton" id="contextForward">Forward</div>
+    <div class="contextButton" id="contextReload">Reload</div>
+    <div class="contextButton" id="contextPrint">Print</div>
+    <div class="contextButton" id="contextSource">View page source</div>
+    <div class="contextButton" id="contextInspect">Inspect</div>
 </div>
 <div id="contextmenuSelect">
-    <div>Copy</div>
-    <div>Search Google</div>
-    <div>Inspect</div>
+    <div class="contextButton" id="contextCopy">Copy</div>
+    <div class="contextButton" id="contextSelectInspect">Inspect</div>
 </div>
  <div id="webviews">
 

diff --git a/main.js b/main.js
@@ -3,6 +3,7 @@ const path = require("path");
 
 const createWindow = () => {
   const win = new BrowserWindow({
+    icon: path.join(__dirname, "/icon.ico"),
     autoHideMenuBar: true,
     webPreferences: {
       webviewTag: true,

diff --git a/newtab.html b/newtab.html
@@ -1,12 +1,93 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>New Tab</title>
-</head>
-<body>
-    <p style="color:red; font-size: 100px;">pica</p>
-</body>
-</html>
+    <style>
+      body {
+        background-color: black;
+        color: yellowgreen;
+      }
+
+      input {
+        border: 1px solid yellowgreen;
+        background-color: black;
+        font-family: 'Fira Code', monospace;
+        font-size: large;
+        width: 40vw;
+        height: 30px;
+        color: yellowgreen
+      }
+
+      input:focus{
+        outline: none;
+      }
+
+      h1{
+        font-family: 'Fira Code', monospace;
+      }
+
+
+      pre{
+        margin-right: 10%;
+        color: rgb(113, 151, 36);
+        position: absolute;
+        top: 45%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .rightdiv{
+        position: absolute;
+        top: 45%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+      <pre>
+        .eeeeeeeee
+        .$$$$$$$$P"
+       .$$$$$$$$P
+      z$$$$$$$$P
+     z$$$$$$$$"
+    z$$$$$$$$"
+   d$$$$$$$$"
+  d$$$$$$$$"
+.d$$$$$$$P
+.$$$$$$$$P
+.$$$$$$$$$.........
+.$$$$$$$$$$$$$$$$$$"
+z$$$$$$$$$$$$$$$$$P"
+-**********$$$$$$$P
+           d$$$$$$"
+         .d$$$$$$"
+        .$$$$$$P"
+       z$$$$$$P
+      d$$$$$$"
+     .d$$$$$$"
+     .$$$$$$$"
+     z$$$$$$$beeeeee
+     d$$$$$$$$$$$$$*
+     ^""""""""$$$$$"
+             d$$$*
+            d$$$"
+           d$$*
+          d$P"
+         .$$"
+        .$P"
+       .$"
+      .P"
+     ."     
+    /"
+    </pre>
+      <div class="rightdiv">
+        <h1>Joule Browser</h1>
+        <input type="text" id="mainSearch"/>
+      </div>
+  </body>
+</html>