Added a basic UI

The start of a basic UI. The rest is still WIP Functionallity is almost non existent at this point
ElderINTERalliance · Sep 7, 2019 · ca89b62 · ca89b62
1 parent f304014
commit ca89b62
Show file tree

Hide file tree

Showing 15 changed files with 619 additions and 7 deletions.
diff --git a/background.svg b/background.svg
diff --git a/bottomgradientlight.svg b/bottomgradientlight.svg
diff --git a/counselors/counselor1.png b/counselors/counselor1.png
diff --git a/counselors/counselor3.png b/counselors/counselor3.png
diff --git a/counselors/driehaus.png b/counselors/driehaus.png
diff --git a/counselors/graham.png b/counselors/graham.png
diff --git a/counselors/kinross.png b/counselors/kinross.png
diff --git a/counselors/listerman.png b/counselors/listerman.png
diff --git a/counselors/montgomery.png b/counselors/montgomery.png
diff --git a/fitty.min.js b/fitty.min.js
diff --git a/index.html b/index.html
@@ -6,9 +6,29 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
     <link href="main.css" rel="stylesheet">
+    <script src="fitty.min.js"></script>
+    <script src="main.js"></script>
     <title>catia</title>
 </head>
 <body>
-    <h1>anonymous counseling</h1>
+
+    <div class="draggable"></div>
+
+    <h1 class="toptext" id="toptextmain">anonymous </br>counseling</h1>
+
+    <div id="resumesession" class="button"><h2 class="buttontext">resume session</h2></div>
+    <div id="newsession" class="button"><h2 class="buttontext">new session</h2></div>
+
+    <div id="newsessionnext" class="button"><h2 class="buttontext">next</h2></div>
+
+    <div id="counselors">
+        <div class="counselor" onclick="this.classList.add('selected')"><div class="imagecontainer"><img class="counselorimg" src="counselors/kinross.png" onerror="this.style.display='none'"/></div><h2 class="counselorname">Mrs. Kinross</h2></div>
+        <div class="counselor" onclick="this.classList.add('selected')"><div class="imagecontainer"><img class="counselorimg" src="counselors/driehaus.png" onerror="this.style.display='none'"/></div><h2 class="counselorname">Mr. Driehaus</h2></div>
+        <div class="counselor" onclick="this.classList.add('selected')"><div class="imagecontainer"><img class="counselorimg" src="counselors/listerman.png" onerror="this.style.display='none'"/></div><h2 class="counselorname">Mr. Listerman</h2></div>
+        <div class="counselor" onclick="this.classList.add('selected')"><div class="imagecontainer"><img class="counselorimg" src="counselors/graham.png" onerror="this.style.display='none'"/></div><h2 class="counselorname">Mrs. Graham</h2></div>
+        <div class="counselor" onclick="this.classList.add('selected')"><div class="imagecontainer"><img class="counselorimg" src="counselors/montgomery.png" onerror="this.style.display='none'"/></div><h2 class="counselorname">Ms. Montgomery</h2></div>
+    </div>
+
+    <div class="bottomgradient"></div>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -2,9 +2,10 @@ var {app, BrowserWindow} = require('electron')
 
 function createwindow(){
     let win = new BrowserWindow({
-        frame: true,
-        width: 1080,
-        height: 720,
+        frame: false,
+        width: 720,
+        height: 480,
+        transparent: false,
         webPreferences: {
             nodeIntegration: true
         }

diff --git a/main.css b/main.css
@@ -1,9 +1,148 @@
+.draggable{
+    -webkit-app-region: drag;
+    width: 100%;
+    height: 25px;
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    margin: 0px;
+    padding: 0px;
+}
+
 h1{
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
-    width: 70%;
+    width: 100%;
     overflow: hidden;
-    font-size: 72px;
+    font-size: 80px;
+    margin: 0px;
+    color: #35353f;
+    line-height: 90px;
+}
+
+.toptext{
+    padding-top: 15px;
+    padding-left: 30px;
+}
+
+.button, .button:hover{
+    background-image: linear-gradient(to right, #2e9eea, #3666ea);
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600px;
+    color: white;
+    /*width: 200px;*/
+    padding-right: 20px;
+    padding-left: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-align: center;
+    border-radius: 5px;
+    position: absolute;
+    right: 25px;
+    bottom: 25px;
+    cursor: pointer;
+    z-index: 20;
+}
+
+#resumesession{
+    background-image: linear-gradient(to right, #ff7f6a, #ff6a94);
+    position: absolute;
+    right: 235px;
+    bottom: 25px;
+}
+
+h2.buttontext{
     margin: 0px;
+}
+
+img{
+    -webkit-user-drag: none;
+}
+
+body{
+    overflow-x: hidden;
+    margin: 0px;
+    -webkit-user-select: none;
+}
+
+body::-webkit-scrollbar{
+    background-color: gray;
+    width: 10px;
+}
+
+body::-webkit-scrollbar-track{
+    background-color: #d7d7ff;
+    width: 10px;
+}
+
+body::-webkit-scrollbar-thumb{
+    background-color: #35353f4d;
+    width: 10px;
+    border-radius: 10px;
+}
+
+body::-webkit-scrollbar-button{
+    display: none;
+}
+
+#newsessionnext{
+    display: none;
+    position: fixed;
+}
+
+#counselors{
+    width: 70%;
+    display: none;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 150px));
+    padding: 25px;
+}
+
+.counselor{
+    width: 150px;
+    height: 150px;
+    background-color: #d7d7ff;
+    border-radius: 150px;
+    counter-increment: grid-item;
+    position: relative;
+    margin-bottom: 35px;
+    cursor: pointer;
+}
+
+.counselorname{
+    position: absolute;
+    bottom: -30px;
+    margin: auto;
+    font-family: 'Montserrat', sans-serif;
     color: #35353f;
+}
+
+.selected, .counselor:hover{
+    background-image: linear-gradient(to right, #2e9eea, #3666ea);
+}
+
+.imagecontainer{
+    width: 140px;
+    height: 140px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 148px;
+}
+
+.counselorimg{
+    width: 70%;
+    margin-left: 15%;
+}
+
+.bottomgradient{
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 10;
+    width: 100%;
+    height: 100px;
+    background-image: url("bottomgradientlight.svg");
+    background-repeat: repeat-x;
+    background-position: -100px;
+    pointer-events: none;
 }
diff --git a/main.js b/main.js
@@ -0,0 +1,11 @@
+window.onload = function(){
+    document.getElementById("newsession").addEventListener('click', function(){
+        document.getElementById("toptextmain").innerHTML = "select a </br>counselor";
+        document.getElementById("newsession").style.display = "none";
+        document.getElementById("resumesession").style.display = "none";
+        document.getElementById("newsessionnext").style.display = "block";
+        document.getElementById("counselors").style.display = "grid";
+        var fitties = fitty('.counselorname');
+        fitties[0].fit();
+    });
+};
diff --git a/package.json b/package.json
@@ -18,5 +18,6 @@
   "homepage": "https://github.com/ElderINTERalliance/catia#readme",
   "devDependencies": {
     "electron": "^6.0.7"
-  }
+  },
+  "dependencies": {}
 }