Envoyez-moi des cryptos !

Visitez le dépôt d'origine - Bento

👇Indice

• 👇Indice
• ✨Fonctionnalités
• 🚀Usage
  • Comme page d'accueil
  • Comme nouvel onglet
• 🎨Personnalisation
  • 👋Général : nom, arrière-plan de l'image et salutations
  • 🏷️Liens de bouton
  • 📑Liste des liens
  • ⛈️Météo : clé API, icônes et unité
  • 💛Couleurs
  • 🌑Thème de changement automatique

✨Fonctionnalités

• Fichier de configuration facile .
• Mode sombre/clair , vous pouvez les basculer et il sera enregistré dans le stockage local.
• Le format de l' horloge et de la date peut être réglé sur 24 heures (par défaut) ou 12 heures.
• Les salutations sont faciles à modifier.
• Variables pour les couleurs personnalisées et les tailles de police dans le

  style.css

  code.
• Icônes toutes les icônes proviennent de Feather Icons (certaines autres que je les ai créées avec les icônes Feather comme base)
• Fichiers javascript modulaires pour une lecture facile.

🚀Usage

Comme page d'accueil

1. Fourchez ce dépôt
2. Activer le service des pages Github

   Settings > GitHub Pages > Source [master branch] > Save

3. Définissez-le comme page d'accueil :
   • Cliquez sur le bouton de menu. et sélectionnez Options. Préférences.
   • Cliquez sur le panneau Accueil.
   • Cliquez sur le menu à côté de Page d'accueil et nouvelles fenêtres et choisissez d'afficher les URL personnalisées et ajoutez votre

     Github Pages link

Comme nouvel onglet

Vous pouvez utiliser différents modules complémentaires/extensions pour cela

• Si vous utilisez Firefox : page Nouvel onglet personnalisée
• Si vous utilisez Chromium (Brave, Vivaldi, Chrome) : URL de nouvel onglet personnalisée

🎨Personnalisation

Presque toutes les personnalisations peuvent être gérées dans le

config.js

👋Général : nom, arrière-plan de l'image et salutations

Pour changer le nom par défaut, les salutations et si vous voulez avoir une image de fond ou ouvrir vos liens dans de nouveaux onglets, éditez les premières configurations dans le fichier

config.js

 // General
  name: 'John',
  imageBackground: false,
  openInNewTab: true,

  // Greetings
  greetingMorning: 'Good morning!',
  greetingAfternoon: 'Good afternoon,',
  greetingEvening: 'Good evening,',
  greetingNight: 'Go to Sleep!',

Vous pouvez changer l'arrière-plan en remplaçant le

background.jpg

fichier dans

assets

le dossier.

🏷️Liens de bouton

Pour modifier les boutons, il vous suffit de modifier la liste suivante dans le

config.js

cards: [
    {
      id: '1',
      name: 'Github',
      icon: 'github',
      link: 'https://github.com/',
    },
    {
      id: '2',
      name: 'Mail',
      icon: 'mail',
      link: 'https://mail.protonmail.com/',
    },
    {
      id: '3',
      name: 'Todoist',
      icon: 'trello',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '4',
      name: 'Calendar',
      icon: 'calendar',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '5',
      name: 'Reddit',
      icon: 'bookmark',
      link: 'https://reddit.com',
    },
    {
      id: '6',
      name: 'Odysee',
      icon: 'youtube',
      link: 'https://odysee.com/',
    },
  ],

📑Liste des liens

La même chose se produit avec les liens de la liste, vous pouvez changer l'icône de la liste (également en utilisant des icônes en forme de plume) et les liens :

  //Icons
  firstListIcon: 'music',
  secondListIcon: 'coffee',

  // Links
  lists: {
    firstList: [
      {
        name: 'Inspirational',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
      {
        name: 'Classic',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
      {
        name: 'Oldies',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
      {
        name: 'Rock',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
    ],
    secondList: [
      {
        name: 'Linkedin',
        link: 'https://linkedin.com/',
      },
      {
        name: 'Figma',
        link: 'https://figma.com/',
      },
      {
        name: 'Dribbble',
        link: 'https://dribbble.com',
      },
      {
        name: 'Telegram',
        link: 'https://webk.telegram.org',
      },
    ],
  },

⛈️Météo : clé API, icônes et unité

Pour configurer le widget Météo, vous aurez besoin d'une clé API de :

https://openweathermap.org/

https://www.latlong.net/

Enfin, choisissez un jeu d'icônes :

• Nord Utilisation du schéma de couleurs Nord et des couleurs faciles à voir
• OneDark ( Par défaut ) Utilisation du jeu de couleurs One Dark Pro
• Thème Dark For White réservé aux utilisateurs qui souhaitent un look minimaliste
• Thème White For Dark réservé aux utilisateurs qui souhaitent un look minimaliste

Enfin, ajoutez-les simplement au

config.js

  // Weather
  weatherKey: 'InsertYourAPIKeyHere123456',
  weatherIcons: 'OneDark',
  weatherUnit: 'C',
  weatherLatitude: '37.774929',
  weatherLongitude: '-122.419418',

💛Couleurs

Dans le

app.css

/* Light theme  */

:root {
  --accent: #61b0f1; /* Hover color */
  --bg: #f5f5f5; /* Background color */
  --sbg: #e4e6e6; /* Cards color */
  --fg: #3a3a3a; /* Foreground color */
  --sfg: #3a3a3a; /* Sceondary Foreground color */
}

/* Dark theme  */

.darktheme {
  --accent: #61b0f1; /* Hover color */
  --bg: #19171a; /* Background color */
  --sbg: #201e21; /* Cards color */
  --fg: #d8dee9; /* Foreground color */
  --sfg: #3a3a3a; /* Secondary Foreground color */
}

🌑Thème de changement automatique

Le thème peut être automatiquement modifié par le thème actuel de l'OS ou des heures personnalisées que vous pouvez modifier dans le

config.js

  // Autochange
  autoChangeTheme: true,

  // Autochabge by OS
  changeThemeByOS: false, 

  // Autochange by hour options (24hrs format, string must be in: hh:mm)
  changeThemeByHour: true, // If it's true, it will use the values below:
  hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour
  hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour