version 14.0.0

stack-analyze · Jul 11, 2024 · b2d11ba · b2d11ba
1 parent 233c257
commit b2d11ba
Show file tree

Hide file tree

Showing 27 changed files with 181 additions and 24 deletions.
diff --git a/app/components/cryptoItem.js b/app/components/cryptoItem.js
@@ -51,7 +51,7 @@ class CryptoInfo extends HTMLElement {
 
     styles.textContent = `
       .container {
-        background-color: rgba(255, 255, 255, 0.25);
+        background-color: rgba(255, 255, 255, 0.05);
         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
         backdrop-filter: blur(4px);
         border-radius: 10px;
@@ -60,6 +60,7 @@ class CryptoInfo extends HTMLElement {
         margin: 16px 8px;
         display: flex;
         align-items: center;
+        color: #ccc;
       }
       
       .container strong {
@@ -75,7 +76,6 @@ class CryptoInfo extends HTMLElement {
       }
       
       .coin-neutral, .coin-positive, .coin-negative {
-        background-color: #000;
         font-weight: bold;
       }
       

diff --git a/app/components/links.js b/app/components/links.js
@@ -64,6 +64,10 @@ module.exports = [
         page: '../twitch-info/index.html',
         title: 'twitch search'
       },
+      {
+      	page: '../deezer/index.html',
+      	title: 'deezer search'
+      }
     ]
   },
   {

diff --git a/app/deezer/index.html b/app/deezer/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- normalize -->
+  <link rel="stylesheet" href="../../node_modules/normalize.css/normalize.css" />
+  <!-- global css -->
+  <link rel="stylesheet" href="../styles/global.css" />
+  <!-- main css -->
+  <link rel="stylesheet" href="main.css" />
+  <title>deezer search</title>
+</head>
+
+<body>
+  <navbar-stack></navbar-stack>
+
+  <main class="container">
+  	<section class="app-glass">
+  		<fieldset class="input-field">
+  			<input type="text" id="search" class="input-field-text" placeholder="enter a search query" required />
+  		</fieldset>
+  		<fieldset class="input-field">
+  			<button id="analyze-button" class="btn-submit full-btn">start search</button>
+  		</fieldset>
+  	</section>
+
+  	<section id="albums" class="albums"></section>
+  </main>
+
+  <!-- render window script -->
+  <script async src="renderer.js"></script>
+</body>
+
+</html>
diff --git a/app/deezer/main.css b/app/deezer/main.css
@@ -0,0 +1,34 @@
+.albums {
+	height: 70vh;
+	overflow: auto;
+	margin-top: 10px;
+}
+
+.album {
+	display: grid;
+	grid-template-areas: 
+		"img title"
+		"img list";
+	margin-bottom: 8px;
+	padding: 10px;
+	color: #fff;
+}
+
+.album-img {
+	grid-area: img;
+	display: block;
+	border-radius: 7%;
+	width: 128px;
+}
+
+.album-title {
+	grid-area: title;
+	margin-block: 8px;
+	font-size: 1.1em;
+}
+
+.album-desc {
+	margin: 0;
+	padding: 0;
+	grid-area: list;
+}
diff --git a/app/deezer/renderer.js b/app/deezer/renderer.js
@@ -0,0 +1,73 @@
+// modules
+const { ipcRenderer } = require('electron')
+const axios = require('axios')
+const toast = require('../scripts/toast')
+
+// DOM elements
+const search = document.querySelector('#search')
+const analyzeButton = document.querySelector('#analyze-button')
+const albumsList = document.querySelector('#albums')
+
+// method
+const deezerSearch = async () => {
+	if(!search.value) {
+		return toast('this field is required')
+	}
+
+	try {
+		const { data } = await axios.get(
+			'https://api.deezer.com/search/album', {
+				params: {
+			 		q: search.value
+				}
+		})
+
+		data.data.forEach((album) => {
+			// create Elements
+			const albumContainer = document.createElement('article')
+			const albumCover = document.createElement('img')
+			const albumName = document.createElement('h2')
+			const albumInfoList = document.createElement('ul')
+			const albumRecordType = document.createElement('li')
+			const albumArtist = document.createElement('li')
+			const albumTotalTracks = document.createElement('li')
+			const albumLyricsType = document.createElement('li')
+
+			albumContainer.classList.add('app-glass', 'album')
+
+			// image
+			albumCover.src = album?.cover_medium ?? '../images/not-found.jpg'
+			albumCover.alt = album.id
+			albumCover.classList.add('album-img')
+
+			// album title
+			albumName.textContent = album.title
+			albumName.classList.add('album-title')
+
+			// list elements
+			albumInfoList.classList.add('album-desc')
+
+			albumArtist.textContent = `artist: ${album.artist.name}`
+			albumRecordType.textContent = `record type: ${album.record_type}`
+			albumTotalTracks.textContent = `tracks: ${album.nb_tracks}`
+			albumLyricsType.textContent = album.explicit_lyrics 
+				? 'explicit lyrics' 
+				: 'clean lyrics'
+
+			albumInfoList.append(albumArtist, albumRecordType, albumTotalTracks, albumLyricsType)
+
+			// append elements
+			albumContainer.append(albumCover, albumName, albumInfoList)
+			albumsList.append(albumContainer)
+		})
+	} catch(err) { toast(err.message) }
+}
+
+analyzeButton.addEventListener('click', () => {
+	deezerSearch()
+	search.value = ''
+})
+
+ipcRenderer.on('clear-stack', () => {
+  albumsContainer.innerHTML = ''
+})
diff --git a/app/github-info/index.html b/app/github-info/index.html
@@ -30,7 +30,7 @@
         </section>
         <section class="card app-glass">
                     <figure class="card-image">
-                        <img id="profile" class="profile-github" src="../images/no-found.jpg" alt="profile github">
+                        <img id="profile" class="profile-github" src="../images/not-found.jpg" alt="profile github">
                     </figure>
                     <article class="card-content">
                         <h2 id="git-user" class="card-title">no-info</h2>

diff --git a/app/images/seyyahi2/seyyahi2-1.jpeg b/app/images/seyyahi2/seyyahi2-1.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-10.jpeg b/app/images/seyyahi2/seyyahi2-10.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-11.jpeg b/app/images/seyyahi2/seyyahi2-11.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-12.jpeg b/app/images/seyyahi2/seyyahi2-12.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-13.jpeg b/app/images/seyyahi2/seyyahi2-13.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-14.jpeg b/app/images/seyyahi2/seyyahi2-14.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-2.jpeg b/app/images/seyyahi2/seyyahi2-2.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-3.jpeg b/app/images/seyyahi2/seyyahi2-3.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-4.jpeg b/app/images/seyyahi2/seyyahi2-4.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-5.jpeg b/app/images/seyyahi2/seyyahi2-5.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-6.jpeg b/app/images/seyyahi2/seyyahi2-6.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-7.jpeg b/app/images/seyyahi2/seyyahi2-7.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-8.jpeg b/app/images/seyyahi2/seyyahi2-8.jpeg
diff --git a/app/images/seyyahi2/seyyahi2-9.jpeg b/app/images/seyyahi2/seyyahi2-9.jpeg
diff --git a/app/main.js b/app/main.js
@@ -111,7 +111,7 @@ const createWindow = () => {
   const menu = Menu.buildFromTemplate(templateMenu)
 
   // Set The Menu to the Main Window
-  Menu.setApplicationMenu(menu)
+  // Menu.setApplicationMenu(menu)
 }
 
 app.whenReady().then(() => {

diff --git a/app/pokemon-info/renderer.js b/app/pokemon-info/renderer.js
@@ -76,7 +76,6 @@ const pokemonInfo = async () => {
 
 	} catch(err) {
 		toast(err.message)
-		console.error(err.message)
 	}
 
 	if (typeof result === 'number') {

diff --git a/app/styles/global.css b/app/styles/global.css
@@ -9,7 +9,8 @@
 body {
   font-family: 'Roboto', sans-serif;
   font-display: block;
-  background-image: linear-gradient(to right, #5614b0, #dbd65c);
+  background-color: #000;
+  background-image: linear-gradient(to right, #000000, #434343);
 }
 
 .input-field, .input-field-text {
@@ -24,11 +25,11 @@ body {
 }
 
 .app-glass {
-  background: rgba(255, 255, 255, 0.10);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  background: rgb(255 255 255 / 10%);
+  box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
   backdrop-filter: blur(30px);
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid rgb(255 255 255 18%);
 }
 
 /* buttons */
@@ -37,7 +38,7 @@ body {
 }
 
 .btn-submit:disabled {
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgb(255 255 255 / 10%);
 }
 
 .btn-submit, .btn-submit:disabled {
@@ -84,11 +85,11 @@ body {
 
 /* glass */
 .glass {
-  background: rgba(255, 255, 255, 0.25);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  background: rgb(255 255 255 / 25%);
+  box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
   backdrop-filter: blur(4px);
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid rgb(255 255 255 / 18%);
 }
 
 /* toast */
@@ -100,10 +101,10 @@ body {
   color: #fff;
   text-align: center;
   background: rgba(246, 0, 0, 0.30);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  box-shadow: 0 8px 32px 0 rgb(31, 38, 135 / 37%);
   backdrop-filter: blur(20.0px);
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255 255 255 / 18%);
   padding: 16px;
   position: fixed;
   z-index: 1;
@@ -143,6 +144,6 @@ body {
 
 @media (hover: hover) {
   .btn-submit:hover {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(0 0 0 20%);
   }
 }
diff --git a/app/wallpapers/index.html b/app/wallpapers/index.html
@@ -21,6 +21,7 @@
   			<option class="wallpaper-opt" value="">select a wallpapers option:</option>
   			<option class="wallpaper-opt" value="sol-moon">sol, moon</option>
   			<option class="wallpaper-opt" value="dimensions">dimensions</option>
+  			<option class="wallpaper-opt" value="seyyahi2">seyyahi2</option>
   		</select>
   	</fieldset>
 

diff --git a/app/wallpapers/renderer.js b/app/wallpapers/renderer.js
@@ -7,10 +7,11 @@ const wallpaperElement = document.querySelector('#wallpapers')
 const stackPopover = document.querySelector('#stack')
 
 // wallpaper list
-const wallpaperOptions = ['sol-moon', 'dimensions']
+const wallpaperOptions = ['sol-moon', 'dimensions', 'seyyahi2']
 const wallapersList = {
 	'sol-moon': [...Array(20).keys()],
-	dimensions: [...Array(12).keys()]
+	dimensions: [...Array(12).keys()],
+	seyyahi2: [...Array(14).keys()]
 }
 
 // events

diff --git a/changelog.md b/changelog.md
@@ -2,6 +2,14 @@
 
 stack-analyze desktop all version and notable changes, fixed, remove and new additions in code.
 
+## version 14.0.0
+### Added 
+- deezer search tool
+- seyyahi2 wallpaper pack
+### changed
+- css background
+> npm version 1.3.0 & 1.3.1
+
 ## version 13.0.0
 ### Added css validator
 > npm version 1.2.9 & pwa 2.1.0

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gui-stack-analyze",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "GUI version inspired from npm module stack-analyze 1.0.5 and browser extension",
   "main": "app/main.js",
   "repository": {
@@ -26,19 +26,19 @@
   "author": "Intermachine Developers",
   "license": "MIT",
   "dependencies": {
-    "axios": "^1.6.7",
-    "chart.js": "^4.4.2",
+    "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
     "css-validator": "^0.11.0",
     "html-validator": "^6.0.1",
     "normalize.css": "^8.0.1",
-    "systeminformation": "^5.22.0",
+    "systeminformation": "^5.22.11",
     "timeago.js": "^4.0.2",
     "w3c-css-validator": "^1.3.2",
     "wapalyzer": "^6.10.65"
   },
   "devDependencies": {
-    "electron": "^29.1.0",
+    "electron": "^31.2.0",
     "electron-builder": "^24.13.3",
-    "eslint": "^8.57.0"
+    "eslint": "^9.6.0"
   }
 }