Merge branch 'main' into main

.gitignore

@@ -14,3 +14,4 @@ src/test/
 .DS_Store
 swiper-bundle.css
 scripts/missing_translations.json
+

README.md

@@ -3,7 +3,7 @@
 
 # 🌘 Lunar Phase Card
 
-<img src="https://raw.githubusercontent.com/ngocjohn/lunar-phase-card/main/assets/header.gif" style="border-radius: 8px" />
+<a href="#"><img src="https://raw.githubusercontent.com/ngocjohn/lunar-phase-card/main/assets/header.gif" style="border-radius: 8px" /></a>
 
 ##
 
@@ -26,8 +26,14 @@
 
 | Language Code | Language (Native Name) |
 | ------------- | ---------------------- |
+| `ca.json`     | Català                 |
 | `cs.json`     | Čeština                |
+| `da.json`     | Dansk                  |
+| `de.json`     | Deutsch                |
 | `en.json`     | English                |
+| `fr.json`     | Français               |
+| `id.json`     | Bahasa Indonesia       |
+| `pt.json`     | Português (Brasil)     |
 
 </details>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lunar-phase-card",
-  "version": "1.1.1-beta",
+  "version": "1.3.0-beta_1",
   "description": "Lovelace custom card for tracking Moon phases",
   "keywords": [
     "home-assistant",
@@ -13,7 +13,8 @@
   "author": "Viet Ngoc",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ngocjohn/lunar-phase-card"
+    "url": "https://github.com/ngocjohn/lunar-phase-card",
+    "repo": "ngocjohn/lunar-phase-card"
   },
   "module": "lunar-phase-card.js",
   "license": "MIT",

src/const.ts

@@ -1,6 +1,8 @@
-import { version } from '../package.json';
+import { version, repository } from '../package.json';
+import { FontSizeOptions, FontTextTransformOptions } from './types';
 
-export const CARD_VERSION = version;
+export const REPOSITORY = repository.repo;
+export const CARD_VERSION = `v${version}`;
 export const BASE_REFRESH_INTERVAL = 30 * 1000; // 30 seconds
 
 import moon_phase_0 from './images/moon_phase_0.png';
@@ -41,3 +43,20 @@ export const MOON_IMAGES = [
   moon_phase_14,
   moon_phase_15,
 ];
+
+export const FONTSIZES: FontSizeOptions[] = ['auto', 'small', 'medium', 'large', 'x-large', 'xx-large'];
+export const FONTSTYLES: FontTextTransformOptions[] = ['none', 'capitalize', 'uppercase', 'lowercase'];
+
+export const FONTCOLORS: string[] = [
+  'white',
+  'black',
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'orange',
+  'purple',
+  'pink',
+  'brown',
+  'gray',
+];

src/css/editor.css

@@ -10,35 +10,58 @@
   display: flex;
 }
 
-ha-select,
 ha-textfield {
   display: block;
   width: 100%;
-  margin-bottom: 8px;
 }
 
-ha-formfield {
-  padding-bottom: 8px;
+
+ha-select {
   width: 100%;
 }
 
-ha-expansion-panel .container {
-  padding: 0px 1rem !important;
+
+.font-config-content {
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  margin-bottom: 8px;
+  align-items: center;
+}
+
+.font-config-type {
+  color: var(--secondary-text-color);
+  display: flex;
+  padding: 8px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.font-config-type .title {
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.font-config-type .desc {
+  font-weight: 400;
 }
 
 .right-icon {
   padding-inline: 0.5rem;
   cursor: pointer;
 }
+
 .custom-background-wrapper {
   display: inline-flex;
   align-items: center;
   gap: 1rem;
   text-wrap: nowrap;
 }
+
 .file-input {
   display: none;
 }
+
 .file-upload {
   cursor: pointer;
   display: inline-block;
@@ -47,17 +70,58 @@ ha-expansion-panel .container {
   border-radius: 8px;
   color: var(--primary-text-color);
 }
+
 .file-upload:hover {
   background-color: var(--primary-color);
 }
+
 .radios-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .version {
-  margin-top: 1rem;
+  margin-top: 2rem;
   color: var(--secondary-text-color);
-  text-align: start;
+  justify-content: space-around;
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: absolute;
+  bottom: auto;
+}
+
+.version .update {
+  color: var(--accent-color);
+  opacity: 0.7;
+}
+
+#toast {
+  visibility: hidden;
+  opacity: 0;
+  max-height: 0;
+}
+
+#toast.show {
+  visibility: visible;
+  opacity: 1;
+  max-height: 100px;
+  animation: fadeIn 0.3s ease-in-out forwards;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+ha-alert {
+  width: 100%;
 }
+
+ha-alert>.alert-icon {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 0.5rem;
+}