+
1
2
3
-
calc
+
calc
theme
@@ -78,6 +80,7 @@
theme
+
diff --git a/src/constants/themes.js b/src/constants/themes.js
index 012af57..9dbb1c8 100644
--- a/src/constants/themes.js
+++ b/src/constants/themes.js
@@ -31,6 +31,9 @@ export const themes = {
{ name: '--key-blue-shadow', value: '#1c6166' },
{ name: '--key-red-background', value: '#d03f2f' },
{ name: '--key-red-shadow', value: '#93261a' },
+ { name: '--guide-text', value: '#3d3d33' },
+ { name: '--guide-button', value: '#182034' },
+ { name: '--guide-button-disabled', value: '#b4a597' },
]
},
'Dark': {
@@ -47,6 +50,9 @@ export const themes = {
{ name: '--key-blue-shadow', value: '#851c9c' },
{ name: '--key-red-background', value: '#00decf' },
{ name: '--key-red-shadow', value: '#00decf' },
+ { name: '--guide-text', value: '#d3cdcd' },
+ { name: '--guide-button', value: '#f7de43' },
+ { name: '--guide-button-disabled', value: '#b4a597' },
]
}
}
diff --git a/src/css/index.css b/src/css/index.css
index 1d8ddd3..94975d9 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -25,7 +25,7 @@
--key-red-background : #d03f2f;
--key-red-shadow : #93261a;
- --transition: 1s;
+ --transition: 0.5s;
}
/* Background settings */
@@ -225,3 +225,52 @@ input[type=range]::-ms-thumb {
.toggle input{
width: 100%;
}
+
+
+/* Estilo personalizado para o tooltip */
+.custom-tooltip {
+ background-color: var(--background);
+ color: var(--guide-text);
+ border-radius: 10px;
+ padding: 15px;
+ font-size: 16px;
+}
+
+/* Estilo personalizado para o destaque */
+.custom-highlight {
+ border: 2px solid var(--key-red-background);
+}
+
+.introjs-button {
+ background-color: var(--key-background);
+ color: var(--guide-button);
+ border: 1px solid var(--key-background);
+ border-radius: 5px;
+ box-shadow: 1px 1.5px 1px var(--key-shadow);
+ transition: var(--transition);
+ text-shadow: none;
+}
+
+.introjs-button:focus {
+ box-shadow: 1px 1.5px 1px var(--key-shadow);
+ border: 1px solid var(--guide-button);
+ background-color: var(--key-background);
+ color: var(--guide-button);
+}
+
+.introjs-button:hover {
+ background-color: var(--key-background);
+ color: var(--guide-button);
+ border: 1px solid var(--key-background);
+}
+
+.introjs-disabled, .introjs-disabled:hover {
+ border-color: transparent;
+ box-shadow: none;
+ color: var(--guide-button-disabled);
+}
+
+.introjs-dontShowAgain label {
+ background-color: transparent;
+ color: var(--guide-text)
+}
diff --git a/src/js/guide.js b/src/js/guide.js
new file mode 100644
index 0000000..e25673f
--- /dev/null
+++ b/src/js/guide.js
@@ -0,0 +1,57 @@
+export class Guide {
+ #intro
+ #config
+
+ constructor() {
+ this.#intro = introJs.tour()
+ this.#config = {
+ steps: [],
+ dontShowAgain: true,
+ dontShowAgainLabel: 'Não mostrar novamente',
+ nextLabel: 'Próximo',
+ prevLabel: 'Anterior',
+ doneLabel: 'Finalizar',
+ }
+ }
+
+ loadSteps() {
+ this.#config.steps = [
+ {
+ title: 'Bem-vindo(a)!',
+ intro: 'Este é um guia rápido para ajudar a configurar o aplicativo.',
+ tooltipClass: 'custom-tooltip',
+ highlightClass: 'custom-highlight'
+ },
+ {
+ element: document.querySelector('#key-selector-container'),
+ title: 'Temas favoritos',
+ intro: 'É possível associar um tema a uma tecla do teclado. Clique em um dos temas abaixo e pressione uma tecla para associar.',
+ position: 'right',
+ tooltipClass: 'custom-tooltip',
+ highlightClass: 'custom-highlight'
+ },
+ {
+ element: document.querySelector('#reset-theme'),
+ title: 'Voltar ao padrão',
+ intro: 'Caso deseje voltar para configuração padrão, clique aqui.',
+ tooltipClass: 'custom-tooltip',
+ highlightClass: 'custom-highlight'
+ },
+ {
+ element: document.querySelector('#btnTheme'),
+ title: 'Escolher tema',
+ intro: 'Altere o tema do aplicativo com um clique.',
+ tooltipClass: 'custom-tooltip',
+ highlightClass: 'custom-highlight'
+ }
+ ]
+ }
+
+ loadConfig () {
+ this.#intro.setOptions(this.#config)
+ }
+
+ start () {
+ this.#intro.start()
+ }
+}
diff --git a/src/js/main.js b/src/js/main.js
index f13dbfb..70168fe 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,19 +1,25 @@
import { Calculator } from './calculator.js'
import { ThemeManager } from './themeManager.js'
+import { Guide } from './guide.js'
import { themes } from '../constants/index.js'
-const display = document.getElementById('display')
-const calculator = new Calculator(display)
-
-const btnTheme = document.getElementById('btnTheme')
-const keySelectors = document.querySelectorAll('.key-selector')
-const themeManager = new ThemeManager(themes, btnTheme, keySelectors)
-
document.addEventListener('DOMContentLoaded', () => {
+ const display = document.getElementById('display')
+ const calculator = new Calculator(display)
+
+ const btnTheme = document.getElementById('btnTheme')
+ const keySelectors = document.querySelectorAll('.key-selector')
+ const themeManager = new ThemeManager(themes, btnTheme, keySelectors)
+
themeManager.setPreferColorSchemeTheme()
themeManager.applyStoredKeys()
+ const guide = new Guide()
+ guide.loadSteps()
+ guide.loadConfig()
+ guide.start()
+
document.querySelectorAll('.add-input').forEach(button => {
button.addEventListener('click', () => {
const value = button.dataset.operation || button.value