Brandefy

by Alex Cowan

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


<div class="navbar">
  <div class="dropdown">
    <button class="dropbtn">Shop
    </button>
    <div class="dropdown-content">
      <a href="#">Skincare</a>
      <a href="#">Moisturizer</a>
      <a href="#">De-aging</a>
    </div>
  </div>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#subscribe">Subscribe</a>
  <a href="#login">Login</a>
  <div class="search-container">
    <input type="text" id="searchInput" placeholder="Enter your product...">
    <button onclick="searchProduct()">Search</button>
  </div>
  <div class="background"></div>
  <div class="content">
  </div>
</div>


<div class="background"></div>
<div class="content">
  <header>
    <h1>brandefy</h1>
  </header>
</div>

<script type="module">

  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.6.0/firebase-analytics.js";
  
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {

    apiKey: "AIzaSyDWNTqk_QnOwEKBzab5FD9NUsDC5xxDQ7Q",

    authDomain: "brandefy-user-database.firebaseapp.com",

    databaseURL: "https://brandefy-user-database-default-rtdb.firebaseio.com",
    projectId: "brandefy-user-database",
    storageBucket: "brandefy-user-database.appspot.com",
    messagingSenderId: "862207940177",
    appId: "1:862207940177:web:0a48e25f8d2947c1f38a70",
    measurementId: "G-N7MTFJGHK9"
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics =...

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', serif;
  color: #000000;
}

.background {
  background-image: url('https://brandefyskin.com/cdn/shop/files/k.png?v=1698942228*');
  background-size: cover;
  background-position: Top;
  background-attachment: fixed;
  opacity: 0.8;
  /* Adjust the opacity as desired */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Place it behind the content */
}

.content {
  position: relative;
  z-index: 1;
  /* Place it above the background */
}
body {
  font-family:serif;
}

.navbar {
  overflow: hidden;
  background-color: #000;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  position: grid;
}

.dropdown {
  float: left;
  overflow: hidden;
  display: inline-block;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: white;
  outline: none;
  color: white;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #eaff9b;
  position: relative;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: grid;
  position: absolute;
  opacity: 1;

}
header {
  text-align: center;
  padding: 0px 200px;
}

header h1 {
  font-size: 60px;
  color: white;
  margin: 10px;
  z-index:1;
  cursor: pointer;
}

.search-container {
  text-align: right;
  margin-top: 8px;
  margin-bottom: 8px;
}

.search-container input[type="text"] {
  padding: 12px;
  border-radius: 8px;
  width: 200px;
  background-color: rgba(255, 255,...

JavaScript

var db = firebase.firestore();
//https: //jsfiddle.net/Eganp/0j261bxe/11/#
function searchProduct() {
  var mainProductCard = document.querySelector(".main-product-card");
  mainProductCard.style.display = "block"; // Show the main-product-card

  // Get the input element by its id
  const searchInput = document.getElementById("searchInput");

  // Retrieve the user's input from the input element
  const userInput = searchInput.value;

  // Log the user's input to the console
  console.log("User searched for:", userInput);
}

function addToCart(productName, price) {
  console.log("User added product to cart: " + productName + " - $" + price);
}

function showProductCard(cardId, buttonId) {
  var productCard1 = document.getElementById("product-card-1");
  var productCard2 = document.getElementById("product-card-2");
  var productCard3 = document.getElementById("product-card-3");

  productCard1.style.display = "none";
  productCard2.style.display = "none";
  productCard3.style.display = "none";

  var selectedCard = document.getElementById(cardId);
  selectedCard.style.display = "block";

  // Reset the color of all buttons
  document.getElementById("formulaMatch").classList.remove("clicked-formulaMatch");
  document.getElementById("lowestPrice").classList.remove("clicked-lowestPrice");
  document.getElementById("highestRated").classList.remove("clicked-highestRated");

  // Set the color for the clicked button
  document.getElementById(buttonId).classList.add("clicked-" + buttonId);

  console.log("User compared:", buttonId);
}