NetPulse/dataentry.html at main · akcealan/NetPulse · 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html class="light" lang="tr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NetPulse - Veri Girişi</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              "primary": "#5D9CEC",
              "background-light": "#F9FAFB",
              "background-dark": "#1F2937",
              "text-light": "#333333",
              "text-dark": "#F9FAFB",
            },
            fontFamily: {
              "display": ["Inter", "sans-serif"]
            },
            borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
          },
        },
      }
    </script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-text-light dark:text-text-dark">
<div class="relative flex min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<header class="sticky top-0 z-10 flex items-center justify-between whitespace-nowrap border-b border-gray-200/80 dark:border-gray-700/80 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm px-6 lg:px-10 py-3">
<div class="flex items-center gap-4 text-text-light dark:text-text-dark">
<div class="size-7 text-primary">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4H17.3334V17.3334H30.6666V30.6666H44V44H4V4Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-xl font-bold leading-tight tracking-[-0.015em]">NetPulse</h2>
</div>
<div class="hidden lg:flex flex-1 justify-center gap-8">
<a class="text-text-light/80 dark:text-text-dark/80 hover:text-primary dark:hover:text-primary text-sm font-medium leading-normal" href="index.html">Panel</a>
<a class="text-primary text-sm font-medium leading-normal" href="dataentry.html">Veri Girişi</a>
<a class="text-text-light/80 dark:text-text-dark/80 hover:text-primary dark:hover:text-primary text-sm font-medium leading-normal" href="stats.html">İstatistikler</a>
<a class="text-text-light/80 dark:text-text-dark/80 hover:text-primary dark:hover:text-primary text-sm font-medium leading-normal" href="timer.html">Kronometre</a>
<a class="text-text-light/80 dark:text-text-dark/80 hover:text-primary dark:hover:text-primary text-sm font-medium leading-normal" href="settings.html">Ayarlar</a>
</div>
<div class="flex items-center gap-4">
<button class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 w-10 bg-gray-200/70 dark:bg-gray-700/70 text-text-light dark:text-text-dark hover:bg-gray-300 dark:hover:bg-gray-600">
<span class="material-symbols-outlined dark:hidden">dark_mode</span>
<span class="material-symbols-outlined hidden dark:inline">light_mode</span>
</button>
<button class="lg:hidden flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 w-10 bg-gray-200/70 dark:bg-gray-700/70 text-text-light dark:text-text-dark hover:bg-gray-300 dark:hover:bg-gray-600">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</header>
<div class="px-4 md:px-8 flex flex-1 justify-center py-5">
<div class="layout-content-container flex flex-col w-full">
<div class="flex flex-wrap justify-between gap-3 p-4">
<p class="text-4xl font-black leading-tight tracking-[-0.033em] min-w-72 text-text-light dark:text-text-dark">Yeni Çalışma Kaydı Ekle</p>
</div>
<div class="flex flex-col lg:flex-row gap-8 p-4">
<div class="w-full lg:w-1/3 space-y-4">
<div class="flex flex-col items-stretch gap-3">
<button id="addCourseBtn" class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-primary text-white text-base font-bold leading-normal tracking-[0.015em] w-full">
<span class="truncate">Yeni Ders Ekle</span>
</button>
<button id="addTopicBtn" class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-gray-200 dark:bg-gray-700 text-text-light dark:text-text-dark text-base font-bold leading-normal tracking-[0.015em] w-full">
<span class="truncate">Yeni Konu Ekle</span>
</button>
</div>
<div class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow">
<h3 class="font-bold text-lg mb-2 text-text-light dark:text-text-dark">Konular</h3>
<ul id="topicsList" class="space-y-2 text-text-light/80 dark:text-text-dark/80">
<li>- Konuları görmek için bir ders seçin -</li>
</ul>
</div>
</div>
<div class="w-full lg:w-2/3">
<div class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Tarih</p>
<div class="flex w-full flex-1 items-stretch rounded-lg">
<input id="dateInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" type="date"/>
</div>
</label>
<label class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Ders</p>
<select id="courseSelect" class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal appearance-none bg-no-repeat bg-right" style="background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724px%27 height=%2724px%27 fill=%27%23333%27 viewBox=%270 0 256 256%27%3e%3cpath d=%27M215.39 92.94a8 8 0 00-11.38 0L128 169.37 51.94 93.31a8 8 0 00-11.32 11.32l82.05 82.05a8 8 0 0011.32 0l81.4-81.4a8 8 0 000-12.34z%27%3e%3c/path%3e%3c/svg%3e');">
<option value="">Ders Seçin</option>
</select>
</label>
</div>
<label class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Konu</p>
<select id="topicSelect" class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-gray-400 dark:text-gray-500 focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-gray-100 dark:bg-gray-800 focus:border-primary h-14 p-[15px] text-base font-normal leading-normal appearance-none bg-no-repeat bg-right" disabled="" style="background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724px%27 height=%2724px%27 fill=%27%239CA3AF%27 viewBox=%270 0 256 256%27%3e%3cpath d=%27M215.39 92.94a8 8 0 00-11.38 0L128 169.37 51.94 93.31a8 8 0 00-11.32 11.32l82.05 82.05a8 8 0 0011.32 0l81.4-81.4a8 8 0 000-12.34z%27%3e%3c/path%3e%3c/svg%3e');">
<option value="">Konu Seçin</option>
</select>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<label class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Doğru</p>
<input id="correctInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" placeholder="0" type="number" min="0"/>
</label>
<label class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Yanlış</p>
<input id="incorrectInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" placeholder="0" type="number" min="0"/>
</label>
<label class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Boş</p>
<input id="blankInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" placeholder="0" type="number" min="0"/>
</label>
</div>
<div class="flex flex-col flex-1">
<p class="text-base font-medium leading-normal pb-2 text-text-light dark:text-text-dark">Çalışma Süresi</p>
<div class="grid grid-cols-3 gap-2">
<label class="flex flex-col flex-1">
<input id="hoursInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" placeholder="Saat" type="number" min="0"/>
</label>
<label class="flex flex-col flex-1">
<input id="minutesInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" placeholder="Dakika" type="number" min="0"/>
</label>
<label class="flex flex-col flex-1">
<input id="secondsInput" class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border border-[#dbe0e6] dark:border-gray-600 bg-white dark:bg-gray-700 focus:border-primary h-14 placeholder:text-gray-400 dark:placeholder:text-gray-500 p-[15px] text-base font-normal leading-normal" placeholder="Saniye" type="number" min="0"/>
</label>
</div>
</div>
<div class="flex justify-end pt-4">
<button id="addSessionBtn" class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-8 bg-[#4CAF50] text-white text-base font-bold leading-normal tracking-[0.015em]">
<span class="truncate">Yeni Çalışma Kaydı Ekle</span>
</button>
</div>
</div>
</div>
</div>
<div class="p-4 mt-8">
<h2 class="text-2xl font-bold mb-4 text-text-light dark:text-text-dark">Son Kayıtlar</h2>
<div class="overflow-x-auto rounded-lg shadow bg-white dark:bg-gray-800">
<table class="w-full text-left text-text-light dark:text-text-dark">
<thead class="border-b border-gray-200 dark:border-gray-700">
<tr>
<th class="px-6 py-4 font-semibold">Tarih</th>
<th class="px-6 py-4 font-semibold">Ders</th>
<th class="px-6 py-4 font-semibold">Konu</th>
<th class="px-6 py-4 font-semibold text-center">Doğru</th>
<th class="px-6 py-4 font-semibold text-center">Yanlış</th>
<th class="px-6 py-4 font-semibold text-center">Boş</th>
<th class="px-6 py-4 font-semibold text-center">Net</th>
<th class="px-6 py-4 font-semibold text-center">Süre (dk)</th>
</tr>
</thead>
                <tbody id="sessionsTableBody">
                    <!-- Sessions will be dynamically loaded here -->
                </tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<!-- Modal: Yeni Ders Ekle -->
<div id="addCourseModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-6 transform transition-all">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-text-light dark:text-text-dark">Yeni Ders Ekle</h3>
            <button onclick="closeModal('addCourseModal')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-text-light dark:text-text-dark mb-2">Ders Adı</label>
                <input id="courseNameInput" type="text" placeholder="Örn: Matematik"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-text-light dark:text-text-dark focus:outline-none focus:ring-2 focus:ring-primary"/>
            </div>
            <div class="flex gap-3">
                <button onclick="closeModal('addCourseModal')"
                    class="flex-1 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 text-text-light dark:text-text-dark hover:bg-gray-100 dark:hover:bg-gray-700 font-medium transition-colors">
                    İptal
                </button>
                <button onclick="saveCourse()"
                    class="flex-1 px-4 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 font-bold transition-colors">
                    Ekle
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Yeni Konu Ekle -->
<div id="addTopicModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-6 transform transition-all">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-text-light dark:text-text-dark">Yeni Konu Ekle</h3>
            <button onclick="closeModal('addTopicModal')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-text-light dark:text-text-dark mb-2">Ders Seçin</label>
                <select id="modalCourseSelect"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-text-light dark:text-text-dark focus:outline-none focus:ring-2 focus:ring-primary">
                    <option value="">Ders Seçin</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-text-light dark:text-text-dark mb-2">Konu Adı</label>
                <input id="topicNameInput" type="text" placeholder="Örn: Türev"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-text-light dark:text-text-dark focus:outline-none focus:ring-2 focus:ring-primary"/>
            </div>
            <div class="flex gap-3">
                <button onclick="closeModal('addTopicModal')"
                    class="flex-1 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 text-text-light dark:text-text-dark hover:bg-gray-100 dark:hover:bg-gray-700 font-medium transition-colors">
                    İptal
                </button>
                <button onclick="saveTopic()"
                    class="flex-1 px-4 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 font-bold transition-colors">
                    Ekle
                </button>
            </div>
        </div>
    </div>
</div>

</div>
<script src="js/storage.js"></script>
<script src="js/dataentry.js"></script>
<script src="js/theme.js"></script>
</body></html>