Code-N-Code.github.io/index.html at main · Code-N-Code/Code-N-Code.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Company Directory</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <!-- FontAwesome for Icons -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"
    crossorigin="anonymous"></script>
</head>

<body class="bg-gradient-to-br from-gray-50 to-indigo-50 min-h-screen font-sans flex flex-col">
  <div class="flex-grow max-w-6xl mx-auto py-12 px-6">

    <!-- Header -->
    <h1 id="pageTitle"
      class="text-5xl font-extrabold text-center bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-12">
      Company Directory
    </h1>

    <!-- Search Bar -->
    <div class="flex justify-center mb-10 relative">
      <input type="text" id="searchBox" placeholder="Search companies..."
        class="w-full md:w-2/3 px-5 py-3 pl-12 rounded-2xl border border-gray-300 shadow-sm bg-white/70 backdrop-blur focus:outline-none focus:ring-2 focus:ring-indigo-500 transition" />
    </div>

    <!-- Dynamic Company List -->
    <div id="companyList" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3"></div>
  </div>

  <!-- Footer -->
  <footer class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white mt-16">
    <div class="max-w-6xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-3 gap-10">

      <!-- About Section -->
      <div>
        <h3 class="text-xl font-bold mb-3">About This Directory</h3>
        <p class="text-sm leading-relaxed text-gray-100">
          Curated & maintained by <span class="font-semibold">Ajaya Dwivedi</span>.
          Bringing you authentic company data and brand details in one place.
        </p>
      </div>

      <!-- Quick Links -->
      <div class="text-center">
        <h3 class="text-xl font-bold mb-3">Quick Links</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-200 transition">About</a></li>
          <li><a href="#" class="hover:text-gray-200 transition">Contact</a></li>
          <li><a href="#" class="hover:text-gray-200 transition">Privacy Policy</a></li>
        </ul>
      </div>

      <!-- Social + Contact -->
      <div class="text-center md:text-right">
        <h3 class="text-xl font-bold mb-3">Follow / Contact Us</h3>
        <div class="flex md:justify-end justify-center gap-4">
          <a href="mailto:contact@example.com"
            class="w-10 h-10 flex items-center justify-center bg-white/20 rounded-full hover:bg-white/40 transition"
            title="Email">
            <i class="fa-solid fa-envelope"></i>
          </a>
          <a href="#"
            class="w-10 h-10 flex items-center justify-center bg-white/20 rounded-full hover:bg-white/40 transition"
            title="LinkedIn">
            <i class="fa-brands fa-linkedin-in"></i>
          </a>
          <a href="#"
            class="w-10 h-10 flex items-center justify-center bg-white/20 rounded-full hover:bg-white/40 transition"
            title="Twitter">
            <i class="fa-brands fa-twitter"></i>
          </a>
          <a href="#"
            class="w-10 h-10 flex items-center justify-center bg-white/20 rounded-full hover:bg-white/40 transition"
            title="GitHub">
            <i class="fa-brands fa-github"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="border-t border-white/20 mt-8">
      <p class="text-center text-sm py-4">&copy; <span id="year"></span> Company Directory. All rights reserved.</p>
    </div>
  </footer>

  <script>
    async function loadCompanies() {
      try {
        // Fetch Excel
        const response = await fetch("companies.xlsx");
        const arrayBuffer = await response.arrayBuffer();

        // Parse with SheetJS
        const workbook = XLSX.read(arrayBuffer, { type: "array" });
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        const data = XLSX.utils.sheet_to_json(sheet);

        const list = document.getElementById("companyList");

        // Generate cards dynamically
        data.forEach(row => {
          const companyName = row["Company Name"];
          const brandName = row["Brand Name"] || companyName;
          const key = companyName.toLowerCase();

          // Save in localStorage
          localStorage.setItem(key, JSON.stringify(row));

          // Create card
          const card = document.createElement("a");
          card.href = `company-details.html?company=${encodeURIComponent(companyName)}`;
          card.className =
            "company-card block p-6 bg-white/70 backdrop-blur rounded-2xl shadow-md hover:shadow-2xl hover:scale-[1.03] transition transform";
          card.innerHTML = `
            <h2 class="text-2xl font-semibold text-indigo-600">${companyName}</h2>
            <p class="text-gray-500">${brandName}</p>
          `;
          list.appendChild(card);
        });

      } catch (err) {
        console.error("Error loading companies.xlsx:", err);
      }
    }

    // Search filter
    document.getElementById("searchBox").addEventListener("keyup", function () {
      const filter = this.value.toLowerCase();
      document.querySelectorAll(".company-card").forEach(card => {
        const text = card.innerText.toLowerCase();
        card.style.display = text.includes(filter) ? "" : "none";
      });
    });

    loadCompanies();

    // Auto-update year in footer
    document.getElementById("year").textContent = new Date().getFullYear();
  </script>
</body>

</html>