M-Devaraj-github.io/admin.html at main · devaraj22/M-Devaraj-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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Submit Feedback</title>
  <style>
    body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f4f4f9; }
    .container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 350px; }
    input, textarea, select { width: 100%; margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
    button:hover { background: #0056b3; }
    h2 { text-align: center; color: #333; }
  </style>
</head>
<body>

<div class="container">
  <h2>Rate Us!</h2>
  <input type="text" id="name" placeholder="Your Name" required>

  <label>Rating:</label>
  <select id="rating">
    <option value="5">⭐⭐⭐⭐⭐ (5)</option>
    <option value="4">⭐⭐⭐⭐ (4)</option>
    <option value="3">⭐⭐⭐ (3)</option>
    <option value="2">⭐⭐ (2)</option>
    <option value="1">⭐ (1)</option>
  </select>

  <textarea id="message" placeholder="Your Message..." rows="4"></textarea>
  <button id="submitBtn">Send Feedback</button>
</div>

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/12.0.0/firebase-app.js";
  import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/12.0.0/firebase-database.js";

  // YOUR CONFIGURATION
  const firebaseConfig = {
      apiKey: "AIzaSyDv2IZjs4dyC4w2Tne4jqFVCyHN-J6oFF0",
      authDomain: "t-stephen-ai-portfolio.firebaseapp.com",
      databaseURL: "https://t-stephen-ai-portfolio-default-rtdb.firebaseio.com",
      projectId: "t-stephen-ai-portfolio",
      storageBucket: "t-stephen-ai-portfolio.appspot.com",
      messagingSenderId: "493827826934",
      appId: "1:493827826934:web:0f0e3a03fe56c25c5338d7"
  };

  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);

  document.getElementById('submitBtn').addEventListener('click', () => {
    const name = document.getElementById('name').value;
    const rating = document.getElementById('rating').value;
    const message = document.getElementById('message').value;

    if(name && message) {
      // Create a reference to the 'ratings' list
      const ratingsRef = ref(db, 'ratings');
      // Push creates a unique ID automatically
      const newRatingRef = push(ratingsRef);

      set(newRatingRef, {
        name: name,
        rating: rating,
        message: message,
        timestamp: Date.now() // Saving the time is useful for sorting later
      }).then(() => {
        alert("Feedback sent! Thank you.");
        // Clear inputs
        document.getElementById('name').value = '';
        document.getElementById('message').value = '';
      }).catch((error) => {
        alert("Error sending data: " + error.message);
      });
    } else {
      alert("Please fill in your name and message.");
    }
  });
</script>

</body>
</html>