Hugging Face's logo

Spaces:
cntyaz
/
tokisunshineacademy
Running

App Files Community
cntyaz commited on
Commit
3397baf
·
verified ·
1 Parent(s): 0a776a7

write the backend for me to interract with the enduser

Browse files
Files changed (3) hide show
  1. api.php +106 -0
  2. contact.html +219 -0
  3. index.html +7 -7
api.php ADDED
@@ -0,0 +1,106 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```php
2
+ <?php
3
+ header("Content-Type: application/json");
4
+ header("Access-Control-Allow-Origin: *");
5
+ header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
6
+ header("Access-Control-Allow-Headers: Content-Type");
7
+
8
+ // Database configuration
9
+ $servername = "localhost";
10
+ $username = "your_username";
11
+ $password = "your_password";
12
+ $dbname = "tokigunesparkevleri_db";
13
+
14
+ // Create connection
15
+ $conn = new mysqli($servername, $username, $password, $dbname);
16
+
17
+ // Check connection
18
+ if ($conn->connect_error) {
19
+ die(json_encode(["error" => "Connection failed: " . $conn->connect_error]));
20
+ }
21
+
22
+ // Handle different API endpoints
23
+ $request = $_SERVER['REQUEST_URI'];
24
+ $method = $_SERVER['REQUEST_METHOD'];
25
+
26
+ // Contact form submission
27
+ if ($method === 'POST' && strpos($request, '/api/contact') !== false) {
28
+ $data = json_decode(file_get_contents('php://input'), true);
29
+
30
+ $name = $data['name'] ?? '';
31
+ $email = $data['email'] ?? '';
32
+ $phone = $data['phone'] ?? '';
33
+ $message = $data['message'] ?? '';
34
+
35
+ if (empty($name) || empty($email) || empty($message)) {
36
+ http_response_code(400);
37
+ echo json_encode(["error" => "Missing required fields"]);
38
+ exit;
39
+ }
40
+
41
+ $stmt = $conn->prepare("INSERT INTO contacts (name, email, phone, message, created_at) VALUES (?, ?, ?, ?, NOW())");
42
+ $stmt->bind_param("ssss", $name, $email, $phone, $message);
43
+
44
+ if ($stmt->execute()) {
45
+ echo json_encode(["success" => "Message sent successfully"]);
46
+ } else {
47
+ http_response_code(500);
48
+ echo json_encode(["error" => "Failed to send message"]);
49
+ }
50
+
51
+ $stmt->close();
52
+ exit;
53
+ }
54
+
55
+ // Get Instagram posts
56
+ if ($method === 'GET' && strpos($request, '/api/instagram') !== false) {
57
+ $result = $conn->query("SELECT * FROM instagram_posts ORDER BY post_date DESC LIMIT 6");
58
+
59
+ $posts = [];
60
+ while ($row = $result->fetch_assoc()) {
61
+ $posts[] = [
62
+ 'id' => $row['id'],
63
+ 'image_url' => $row['image_url'],
64
+ 'author' => $row['author'],
65
+ 'author_image' => $row['author_image'],
66
+ 'content' => $row['content'],
67
+ 'likes' => $row['likes'],
68
+ 'posted_at' => $row['post_date']
69
+ ];
70
+ }
71
+
72
+ echo json_encode($posts);
73
+ exit;
74
+ }
75
+
76
+ // Newsletter subscription
77
+ if ($method === 'POST' && strpos($request, '/api/newsletter') !== false) {
78
+ $data = json_decode(file_get_contents('php://input'), true);
79
+ $email = $data['email'] ?? '';
80
+
81
+ if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
82
+ http_response_code(400);
83
+ echo json_encode(["error" => "Invalid email address"]);
84
+ exit;
85
+ }
86
+
87
+ $stmt = $conn->prepare("INSERT INTO newsletter_subscribers (email, subscribed_at) VALUES (?, NOW())");
88
+ $stmt->bind_param("s", $email);
89
+
90
+ if ($stmt->execute()) {
91
+ echo json_encode(["success" => "Subscribed successfully"]);
92
+ } else {
93
+ http_response_code(500);
94
+ echo json_encode(["error" => "Subscription failed"]);
95
+ }
96
+
97
+ $stmt->close();
98
+ exit;
99
+ }
100
+
101
+ // Default response for unknown endpoints
102
+ http_response_code(404);
103
+ echo json_encode(["error" => "Endpoint not found"]);
104
+ $conn->close();
105
+ ?>
106
+ ```
contact.html ADDED
@@ -0,0 +1,219 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>İletişim - Toki Güneşparkevleri Kız AİHL</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
13
+ }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50 font-sans">
17
+ <!-- Header (Same as index.html) -->
18
+ <header class="gradient-bg text-white shadow-lg">
19
+ <div class="container mx-auto px-4 py-6">
20
+ <div class="flex flex-col md:flex-row items-center justify-between">
21
+ <div class="flex items-center mb-4 md:mb-0">
22
+ <div class="bg-white rounded-full p-2 mr-4">
23
+ <img src="http://static.photos/blue/200x200/42" alt="School Logo" class="w-16 h-16 rounded-full object-cover">
24
+ </div>
25
+ <div>
26
+ <h1 class="text-2xl font-bold">Toki Güneşparkevleri</h1>
27
+ <p class="text-blue-100">Kız Anadolu İmam Hatip Lisesi</p>
28
+ </div>
29
+ </div>
30
+ <nav class="flex space-x-6">
31
+ <a href="index.html" class="hover:text-blue-200 transition flex items-center">
32
+ <i data-feather="home" class="mr-1"></i> Ana Sayfa
33
+ </a>
34
+ <a href="#" class="hover:text-blue-200 transition flex items-center">
35
+ <i data-feather="info" class="mr-1"></i> Hakkımızda
36
+ </a>
37
+ <a href="contact.html" class="hover:text-blue-200 transition flex items-center">
38
+ <i data-feather="mail" class="mr-1"></i> İletişim
39
+ </a>
40
+ </nav>
41
+ </div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- Contact Form Section -->
46
+ <section class="py-16">
47
+ <div class="container mx-auto px-4 max-w-4xl">
48
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">İletişim Formu</h2>
49
+
50
+ <form id="contactForm" class="bg-white rounded-xl shadow-lg p-8">
51
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
52
+ <div>
53
+ <label for="name" class="block text-gray-700 font-medium mb-2">Ad Soyad*</label>
54
+ <input type="text" id="name" name="name" required
55
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
56
+ </div>
57
+ <div>
58
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Adresi*</label>
59
+ <input type="email" id="email" name="email" required
60
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
61
+ </div>
62
+ </div>
63
+ <div class="mb-6">
64
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefon Numarası</label>
65
+ <input type="tel" id="phone" name="phone"
66
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
67
+ </div>
68
+ <div class="mb-6">
69
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mesajınız*</label>
70
+ <textarea id="message" name="message" rows="5" required
71
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
72
+ </div>
73
+ <div class="text-center">
74
+ <button type="submit" class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:bg-blue-700 transition">
75
+ Mesaj Gönder
76
+ </button>
77
+ </div>
78
+ <div id="responseMessage" class="mt-4 text-center hidden"></div>
79
+ </form>
80
+ </div>
81
+ </section>
82
+
83
+ <!-- Contact Info Section -->
84
+ <section class="py-16 bg-gray-100">
85
+ <div class="container mx-auto px-4">
86
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
87
+ <div class="bg-white rounded-xl shadow-md p-6 text-center">
88
+ <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
89
+ <i data-feather="map-pin" class="text-white w-6 h-6"></i>
90
+ </div>
91
+ <h3 class="text-xl font-bold mb-2">Adres</h3>
92
+ <p class="text-gray-600">Güneşparkevleri Mahallesi, Toki Konutları Yanı, Istanbul</p>
93
+ </div>
94
+ <div class="bg-white rounded-xl shadow-md p-6 text-center">
95
+ <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
96
+ <i data-feather="phone" class="text-white w-6 h-6"></i>
97
+ </div>
98
+ <h3 class="text-xl font-bold mb-2">Telefon</h3>
99
+ <p class="text-gray-600">0 (212) 123 45 67</p>
100
+ <p class="text-gray-600">0 (555) 123 45 67</p>
101
+ </div>
102
+ <div class="bg-white rounded-xl shadow-md p-6 text-center">
103
+ <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
104
+ <i data-feather="mail" class="text-white w-6 h-6"></i>
105
+ </div>
106
+ <h3 class="text-xl font-bold mb-2">Email</h3>
107
+ <p class="text-gray-600">[email protected]</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Footer (Same as index.html) -->
114
+ <footer class="gradient-bg text-white pt-12 pb-6">
115
+ <div class="container mx-auto px-4">
116
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
117
+ <div>
118
+ <h3 class="text-xl font-bold mb-4">Toki Güneşparkevleri</h3>
119
+ <p class="text-blue-100">Kız Anadolu İmam Hatip Lisesi olarak modern eğitim anlayışıyla geleneksel değerleri buluşturuyoruz.</p>
120
+ </div>
121
+ <div>
122
+ <h4 class="font-bold mb-4">Hızlı Linkler</h4>
123
+ <ul class="space-y-2">
124
+ <li><a href="index.html" class="text-blue-100 hover:text-white transition">Ana Sayfa</a></li>
125
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Hakkımızda</a></li>
126
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Eğitim Programları</a></li>
127
+ <li><a href="contact.html" class="text-blue-100 hover:text-white transition">İletişim</a></li>
128
+ </ul>
129
+ </div>
130
+ <div>
131
+ <h4 class="font-bold mb-4">İletişim</h4>
132
+ <ul class="space-y-2">
133
+ <li class="flex items-center">
134
+ <i data-feather="map-pin" class="mr-2 w-4 h-4"></i>
135
+ <span class="text-blue-100">Güneşparkevleri, Istanbul</span>
136
+ </li>
137
+ <li class="flex items-center">
138
+ <i data-feather="phone" class="mr-2 w-4 h-4"></i>
139
+ <span class="text-blue-100">0 (212) 123 45 67</span>
140
+ </li>
141
+ <li class="flex items-center">
142
+ <i data-feather="mail" class="mr-2 w-4 h-4"></i>
143
+ <span class="text-blue-100">[email protected]</span>
144
+ </li>
145
+ </ul>
146
+ </div>
147
+ <div>
148
+ <h4 class="font-bold mb-4">Sosyal Medya</h4>
149
+ <div class="flex space-x-4">
150
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
151
+ <i data-feather="instagram"></i>
152
+ </a>
153
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
154
+ <i data-feather="facebook"></i>
155
+ </a>
156
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
157
+ <i data-feather="twitter"></i>
158
+ </a>
159
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
160
+ <i data-feather="youtube"></i>
161
+ </a>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ <div class="border-t border-blue-400 pt-6 text-center text-blue-100">
166
+ <p>© 2023 Toki Güneşparkevleri Kız Anadolu İmam Hatip Lisesi. Tüm hakları saklıdır.</p>
167
+ </div>
168
+ </div>
169
+ </footer>
170
+
171
+ <script>
172
+ feather.replace();
173
+
174
+ // Handle contact form submission
175
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
176
+ e.preventDefault();
177
+
178
+ const formData = {
179
+ name: document.getElementById('name').value,
180
+ email: document.getElementById('email').value,
181
+ phone: document.getElementById('phone').value,
182
+ message: document.getElementById('message').value
183
+ };
184
+
185
+ fetch('/api/contact', {
186
+ method: 'POST',
187
+ headers: {
188
+ 'Content-Type': 'application/json'
189
+ },
190
+ body: JSON.stringify(formData)
191
+ })
192
+ .then(response => response.json())
193
+ .then(data => {
194
+ const responseDiv = document.getElementById('responseMessage');
195
+ responseDiv.classList.remove('hidden');
196
+
197
+ if (data.error) {
198
+ responseDiv.textContent = data.error;
199
+ responseDiv.classList.add('text-red-500');
200
+ responseDiv.classList.remove('text-green-500');
201
+ } else {
202
+ responseDiv.textContent = 'Mesajınız başarıyla gönderildi!';
203
+ responseDiv.classList.add('text-green-500');
204
+ responseDiv.classList.remove('text-red-500');
205
+ document.getElementById('contactForm').reset();
206
+ }
207
+ })
208
+ .catch(error => {
209
+ console.error('Error:', error);
210
+ const responseDiv = document.getElementById('responseMessage');
211
+ responseDiv.classList.remove('hidden');
212
+ responseDiv.textContent = 'Bir hata oluştu. Lütfen daha sonra tekrar deneyin.';
213
+ responseDiv.classList.add('text-red-500');
214
+ responseDiv.classList.remove('text-green-500');
215
+ });
216
+ });
217
+ </script>
218
+ </body>
219
+ </html>
index.html CHANGED
@@ -46,17 +46,17 @@
46
  </div>
47
  </div>
48
  <nav class="flex space-x-6">
49
- <a href="#" class="hover:text-blue-200 transition flex items-center">
50
  <i data-feather="home" class="mr-1"></i> Ana Sayfa
51
  </a>
52
  <a href="#" class="hover:text-blue-200 transition flex items-center">
53
  <i data-feather="info" class="mr-1"></i> Hakkımızda
54
  </a>
55
- <a href="#" class="hover:text-blue-200 transition flex items-center">
56
- <i data-feather="instagram" class="mr-1"></i> Instagram
57
  </a>
58
  </nav>
59
- </div>
60
  </div>
61
  </header>
62
 
@@ -257,12 +257,12 @@
257
  <div>
258
  <h4 class="font-bold mb-4">Hızlı Linkler</h4>
259
  <ul class="space-y-2">
260
- <li><a href="#" class="text-blue-100 hover:text-white transition">Ana Sayfa</a></li>
261
  <li><a href="#" class="text-blue-100 hover:text-white transition">Hakkımızda</a></li>
262
  <li><a href="#" class="text-blue-100 hover:text-white transition">Eğitim Programları</a></li>
263
- <li><a href="#" class="text-blue-100 hover:text-white transition">İletişim</a></li>
264
  </ul>
265
- </div>
266
  <div>
267
  <h4 class="font-bold mb-4">İletişim</h4>
268
  <ul class="space-y-2">
 
46
  </div>
47
  </div>
48
  <nav class="flex space-x-6">
49
+ <a href="index.html" class="hover:text-blue-200 transition flex items-center">
50
  <i data-feather="home" class="mr-1"></i> Ana Sayfa
51
  </a>
52
  <a href="#" class="hover:text-blue-200 transition flex items-center">
53
  <i data-feather="info" class="mr-1"></i> Hakkımızda
54
  </a>
55
+ <a href="contact.html" class="hover:text-blue-200 transition flex items-center">
56
+ <i data-feather="mail" class="mr-1"></i> İletişim
57
  </a>
58
  </nav>
59
+ </div>
60
  </div>
61
  </header>
62
 
 
257
  <div>
258
  <h4 class="font-bold mb-4">Hızlı Linkler</h4>
259
  <ul class="space-y-2">
260
+ <li><a href="index.html" class="text-blue-100 hover:text-white transition">Ana Sayfa</a></li>
261
  <li><a href="#" class="text-blue-100 hover:text-white transition">Hakkımızda</a></li>
262
  <li><a href="#" class="text-blue-100 hover:text-white transition">Eğitim Programları</a></li>
263
+ <li><a href="contact.html" class="text-blue-100 hover:text-white transition">İletişim</a></li>
264
  </ul>
265
+ </div>
266
  <div>
267
  <h4 class="font-bold mb-4">İletişim</h4>
268
  <ul class="space-y-2">