EuroBytes Buttons

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<div class="container">

  <button id="ThemeSwitcher-holder" style="width: 75px;  text-align: center;  position: fixed;  right: 1%;">
    <i class="fa-solid fa-moon" id="ThemeSwitcher"></i>
  </button>

  <h1>EuroBytes Buttons</h1>

  <h2>
    Input types
  </h2>

  <form name="EuroCMSForms" action="">

    <label for="button">button</label>
    <input type="button" id="button" name="button" value="Click Me!">

    <label class="custom-inputs">One
      <input type="checkbox" name="checkbox" id="checkbox">
      <span class="checkmark"></span>
    </label>

    <label class="custom-inputs">Two
      <input type="checkbox" name="checkbox2" id="checkbox2">
      <span class="checkmark"></span>
    </label>

    <label for="color">color</label>
    <input type="color" id="color" name="color" required value="#454545">

    <label for="date">date</label>
    <input type="date" id="date" name="date" required>

    <label for="datetime-local">datetime-local</label>
    <input type="datetime-local" id="datetime-local" name="datetime-local" required>

    <label for="email">email</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required>

    <!--     <label for="file">file</label>
    <input type="file" id="file" name="file"> -->


    <label class="custom-inputs">
      <input type="file" name="file" id="file" multiple style="display: none;">
      <span class="checkmark file">Select file to upload</span>
    </label>

    <br>


    <label for="hidden">hidden</label>
    <input type="hidden" id="hidden" name="hidden">

    <label for="image">image</label>
    <input type="image" id="image" name="image" src="" alt="Submit" width="40" height="40">

    <label for="month">month</label>
    <input type="month" id="month" name="month" min="1" max="12" placeholder="1-12"...

CSS

:root {
  --background-color: #F9F9F9;
  --text-color: #454545;
  --border-color: #CCCCCC;

  --border-focus-color: #33C3F0;

  --object-background-color: #EEEEEE;

  --nav-menu-color: rgb(216, 212, 207) !important;
  --nav-menu-background-color: rgb(135, 16, 7) !important;
  --box-shadow: rgba(0, 0, 0, 0.75);

  --border-radius: 5px;

  --link-color: #3465A4;
  --section-background-color: #FFFFFF;


  /* Additive Color Model (RGB) */

  --color-red: #FF0000;

  --color-green: #008000FF;
  --color-light-green: lightgreen;
  --color-dark-green: darkgreen;
  --color-blue: blue;

  /*
        Subtractive Color Model (CMY/CMYK)
    */

  --color-cyan: cyan;
  --color-magenta: magenta;
  --color-yellow: yellow;
  --color-black: black;

}

/* Dark theme variables */

[data-theme="dark"] {
  --text-color: rgb(188, 183, 174);
  --background-color: rgb(27, 30, 31);
  --border-color: rgb(62, 68, 70);
  --border-focus-color: rgb(62, 68, 70);


  --object-background-color: rgb(34, 36, 38);

  --nav-menu-color: rgb(205, 200, 194) !important;
  --nav-menu-background-color: rgb(108, 13, 6) !important;

  --box-shadow: rgba(0, 0, 0, 0.75);

  --section-background-color: rgb(24, 26, 27);

  --link-color: rgb(118, 167, 212);

  --color-red: #8B0000FF;

  --color-green: #006400FF;

}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;

  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;

  line-height: 2em;
  background-color: var(--background-color);
  color: var(--text-color);
}

.container {

  border: 1px solid var(--border-color);
  border-radius: 5px;

  background: var(--object-background-color) !important;
  color: var(--text-color);
  padding: 20px 30px;

  margin-top: 5%;
  margin-bottom: 5%;

}

h1 {
 ...

JavaScript

// Function to switch theme
function switchTheme() {
  const ThemeSwitcher = document.getElementById("ThemeSwitcher");
  const savedTheme = localStorage.getItem("theme");

  if (savedTheme === "dark") {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light"); // Save theme preference to localStorage

    ThemeSwitcher.setAttribute("class", "fa-solid fa-moon");
  } else {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark"); // Save theme preference to localStorage

    ThemeSwitcher.setAttribute("class", "fa-solid fa-sun");
  }
}

// Load theme preference from localStorage
function loadTheme() {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme) {
    document.documentElement.setAttribute("data-theme", savedTheme);
  } else {
    document.documentElement.setAttribute("data-theme", "light"); // Default theme
  }
}

// Apply theme on page load
document.addEventListener("DOMContentLoaded", loadTheme);

document
  .getElementById("ThemeSwitcher-holder")
  .addEventListener("click", function () {
    switchTheme();
  });

// Form Validation
/* document.getElementById('EuroCMSForms').addEventListener('click', function() {
  validateForm();
});


function validateForm() {
  let x = document.forms["EuroCMSForms"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
} */

/* ***** ***** ***** ***** *****
  CUSTOM SELECT
***** ***** ***** ***** ******/
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
 ...