KhalisFoundation · Gauravjeetsingh · Dec 4, 2023 · Dec 4, 2023 · Dec 5, 2023 · Dec 8, 2023
diff --git a/.htmlhintrc b/.htmlhintrc
@@ -2,13 +2,12 @@
   "tagname-lowercase": true,
   "attr-lowercase": true,
   "attr-value-double-quotes": true,
-    "attr-no-duplication": true,
+  "attr-no-duplication": true,
   "doctype-first": true,
   "tag-pair": true,
   "spec-char-escape": true,
   "id-unique": true,
   "src-not-empty": true,
-  "attr-no-duplication": true,
   "title-require": true,
 
   "alt-require": true,

diff --git a/src/index.html b/src/index.html
@@ -8,7 +8,8 @@
 
 <body>
   <div id="viewer">
-    <div class="viewer-wrapper"></div>
+    <div class="viewer-wrapper">
+    </div>
     <div class="debug-info"></div>
   </div>
   <script type="text/javascript" src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>

diff --git a/src/scss/_clouds.scss b/src/scss/_clouds.scss
@@ -0,0 +1,25 @@
+.theme-clouds {
+  background-color: #fff;
+  background-image: url('images/clouds-video.png');
+
+  .slide-gurbani {
+    color: #0e2654;
+    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.7);
+  }
+
+  .slide-translation {
+    color: #003a8c;
+  }
+
+  .slide-teeka {
+    color: #033780;
+  }
+
+  .slide-transliteration {
+    color: #80878a;
+  }
+
+  .logo path {
+    fill: #e0e0e0;
+  }
+}
diff --git a/src/scss/_melancholy.scss b/src/scss/_melancholy.scss
@@ -0,0 +1,24 @@
+.theme-melancholy {
+  background-color: #fff;
+  background-image: url('images/melancholy.png');
+
+  .slide-gurbani {
+    color: #fcfefe;
+  }
+
+  .slide-translation {
+    color: #fde5ab;
+  }
+
+  .slide-teeka {
+    color: #86a3ba;
+  }
+
+  .slide-transliteration {
+    color: #f1f5f4;
+  }
+
+  .logo path {
+    fill: #e0e0e0;
+  }
+}
diff --git a/src/scss/_ocean.scss b/src/scss/_ocean.scss
@@ -0,0 +1,3 @@
+.theme-ocean {
+  background-image: url('images/ocean-theme.png');
+}
diff --git a/src/scss/images/clouds-video.png b/src/scss/images/clouds-video.png
diff --git a/src/scss/images/melancholy.png b/src/scss/images/melancholy.png
diff --git a/src/scss/images/ocean-theme.png b/src/scss/images/ocean-theme.png
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -36,7 +36,10 @@ $viewer-padding: 30px;
   "high-contrast",
   "low-light",
   "nirbaan",
-  "dhan-guru-nanak";
+  "dhan-guru-nanak",
+  "ocean",
+  "clouds",
+  "melancholy";
 
 /* Custom Styles */
 html {

diff --git a/src/scss/themes/_theme-clouds.scss b/src/scss/themes/_theme-clouds.scss
@@ -0,0 +1,14 @@
+$themeClouds: (
+  type: 'light',
+  background-color: #07ccf3,
+  gurbani: #0e2654,
+  translation: #003a8c,
+  teeka: #033780,
+  transliteration: #80878a,
+  visraam: #d20b0b,
+  yamki: #c2951a,
+);
+
+.theme-clouds {
+  @include generateTheme($themeClouds...);
+}
diff --git a/src/scss/themes/_theme-melancholy.scss b/src/scss/themes/_theme-melancholy.scss
@@ -0,0 +1,14 @@
+$themeMelancholy: (
+  type: 'dark',
+  background-color: #38987b,
+  gurbani: #fcfefe,
+  translation: #fde5ab,
+  teeka: #86a3ba,
+  transliteration: #f1f5f4,
+  visraam: #ffa5a5,
+  yamki: #ffde00,
+);
+
+.theme-melancholy {
+  @include generateTheme($themeMelancholy...);
+}
diff --git a/src/scss/themes/_theme-ocean.scss b/src/scss/themes/_theme-ocean.scss
@@ -0,0 +1,14 @@
+$themeDark: (
+  type: 'dark',
+  background-color: #000,
+  gurbani: #fff,
+  translation: #e2e2e2,
+  teeka: #c6c6c6,
+  transliteration: #ababab,
+  visraam: #c0392b,
+  yamki: #ffc500,
+);
+
+.theme-ocean {
+  @include generateTheme($themeDark...);
+}
diff --git a/src/scss/themes/_themes.scss b/src/scss/themes/_themes.scss
@@ -16,4 +16,7 @@
 @import 'theme-low-light';
 @import 'theme-moody-blue';
 @import 'theme-dhan-guru-nanak.scss';
-@import 'theme-nirbaan';
+@import 'theme-nirbaan';
+@import 'theme-ocean';
+@import 'theme-clouds';
+@import 'theme-melancholy';
diff --git a/src/scss/themes/helpers/_theme-generator.scss b/src/scss/themes/helpers/_theme-generator.scss
@@ -77,15 +77,15 @@
     color: $gurbani;
   }
 
-  .translation {
+  .slide-translation {
     color: $translation;
   }
 
-  .teeka {
+  .slide-teeka {
     color: $teeka;
   }
 
-  .transliteration {
+  .slide-transliteration {
     color: $transliteration;
   }
 

diff --git a/src/scss/viewer.scss b/src/scss/viewer.scss
@@ -1,6 +1,13 @@
 $gurbanithick: 'gurbaniakharthick';
 $gurbani: 'gurbaniakhar';
 
+.verse-slide-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 10;
+}
+
 .shabad-deck {
   height: 100vh;
   padding: 15px 0;

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,29 +1,29 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const path = require("path");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
 
 const plugins = [
   new HtmlWebpackPlugin({
-    template: path.resolve(__dirname, "src", "index.html"),
+    template: path.resolve(__dirname, 'src', 'index.html'),
   }),
   new MiniCssExtractPlugin({
-    filename: "app.[hash].css",
+    filename: 'app.[hash].css',
   }),
 ];
 
 module.exports = {
-  mode: "production",
+  mode: 'production',
   entry: [
-    path.resolve(__dirname, "src", "js", "index.js"),
-    path.resolve(__dirname, "src", "scss", "index.scss"),
+    path.resolve(__dirname, 'src', 'js', 'index.js'),
+    path.resolve(__dirname, 'src', 'scss', 'index.scss'),
   ],
   module: {
     rules: [
       {
         test: /\.html$/,
         use: [
           {
-            loader: "html-loader",
+            loader: 'html-loader',
             options: {
               minimize: true,
             },
@@ -32,34 +32,34 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
       },
       {
         test: /\.ttf$/,
         type: 'asset/resource',
         generator: {
-            filename: './fonts/[name][ext]',
+          filename: './fonts/[name][ext]',
         },
       },
       {
         test: /\.jpg$/,
         type: 'asset/resource',
         generator: {
-            filename: './images/[name][ext]',
+          filename: './images/[name][ext]',
         },
       },
       {
         test: /\.png$/,
         type: 'asset/resource',
         generator: {
-            filename: './images/[name][ext]',
+          filename: './images/[name][ext]',
         },
       },
     ],
   },
   output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "app.[hash].js",
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'app.[hash].js',
   },
   plugins,
 };