1.4.6 test

hoseki-inc · Jun 8, 2023 · fead1e4 · fead1e4
1 parent d35cb61
commit fead1e4
Show file tree

Hide file tree

Showing 11 changed files with 8,453 additions and 406 deletions.
diff --git a/compile-sass.js b/compile-sass.js
@@ -0,0 +1,19 @@
+const sass = require('sass');
+const fs = require('fs');
+
+const inputFile = './sass/main.scss';
+const outputFile = './css/main.css';
+
+sass.render(
+  {
+    file: inputFile,
+  },
+  (err, result) => {
+    if (err) {
+      console.error(err);
+    } else {
+      fs.writeFileSync(outputFile, result.css.toString());
+      console.log('Sass compiled successfully!');
+    }
+  }
+);
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,167 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f2f2f2;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.button-container {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.button-container button {
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #2196f3;
+  background-color: #ffeb3b;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.button-container button:hover {
+  background-color: #ffe608;
+}
+
+dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+}
+dialog .input-container {
+  margin-bottom: 20px;
+}
+dialog .input-container input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+dialog .dialog-button-container {
+  text-align: right;
+}
+dialog .dialog-button-container button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+dialog .dialog-button-container button:hover {
+  background-color: #0056b3;
+}
+
+.table {
+  display: table;
+  width: 75%;
+  align-items: center;
+  align-self: center;
+  margin-bottom: 20px;
+  border-collapse: collapse;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  margin-left: 200px;
+}
+.table .heading {
+  display: table-row;
+  background-color: #2196f3;
+  color: #fff;
+  font-weight: bold;
+}
+.table .heading .cell {
+  display: table-cell;
+  padding: 10px;
+}
+.table .row {
+  display: table-row;
+}
+.table .row:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.table .row .cell {
+  display: table-cell;
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+}
+
+section.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #007bff;
+  color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+section.nav img {
+  height: 30px;
+  width: auto;
+  margin-right: 10px;
+}
+section.nav .btn-div {
+  display: flex;
+}
+section.nav .btn-div button {
+  margin-left: 10px;
+  padding: 5px 10px;
+  background-color: transparent;
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+section.nav .btn-div button.alert {
+  background-color: red;
+  border-color: red;
+}
+section.nav .btn-div button:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+div.no-drag {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 50px auto;
+  max-width: 600px;
+  text-align: center;
+}
+div.no-drag h1.main-msg {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+div.no-drag p {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,16 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+
+function compileSass() {
+  return gulp
+    .src('./sass/main.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./css'));
+}
+
+function watchFiles() {
+  gulp.watch('./sass/**/*.scss', compileSass);
+}
+
+exports.default = gulp.series(compileSass, watchFiles);
+
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="./src/index.css">
+    <link rel="stylesheet" href="./css/main.css">
     <title>Hoseki Admin</title>
 
   </head>
@@ -16,46 +16,42 @@
       </div>
     </section>
 
-    Title: <input id="title" />
-    <button class="no-drag" id="btn">Set</button>
-    <button id="btn2">Open a File</button>
-    File path: <strong id="filePath"></strong>
+
 
 
     <div class="no-drag">
       <h1 class="main-msg">Hello Hoseki! Meh</h1>
-      <p>Welcome to your Electron application v1.4.3</p>
+      <p>Welcome to your Electron application v1.4.6</p>
       <p id="p1">First paragraph</p>
       <p id="p2">Second paragraph</p>
       <p id="p3">Third paragraph</p>
     </div>
 
+    <div class="button-container">
+      <button id="openDialogButton">
+        Enter your info.
+      </button>
+    </div>
+
+    <dialog id="infoDialog">
+      <div class="input-container">
+        <input id="nameInput" type="text" placeholder="Enter your name" />
+        <input id="ageInput" type="text" placeholder="Enter your age" />
+        <input id="jobInput" type="text" placeholder="Enter your job" />
+      </div>
+      <div class="dialog-button-container">
+        <button id="okButton" type="submit">
+          OK
+        </button>
+      </div>
+    </dialog>
+
     <div class="table jobs">
       <div class="heading">
         <div class="cell">Name</div>
         <div class="cell">Age</div>
         <div class="cell">Job</div>
       </div>
-      <div class="row" name="Tyler" age="31" job="Autism">
-        <div id="name" class="cell">Tyler</div>
-        <div class="cell">31</div>
-        <div class="cell">Autism</div>
-      </div>
-      <div class="row">
-        <div class="cell">Ricky</div>
-        <div class="cell">31</div>
-        <div class="cell">Gay</div>
-      </div>
-      <div class="row">
-        <div class="cell">Danilo</div>
-        <div class="cell">33</div>
-        <div class="cell">SUPER Gay</div>
-      </div>
-      <div class="row">
-        <div class="cell">Sam</div>
-        <div class="cell">31</div>
-        <div class="cell">Based</div>
-      </div>
     </div>
 
     <script type="module" src="/src/renderer.js"></script>