Take Attendance
\n\n \n \n
\n \n
\n \n 
body.html
Changed around line 1
+
+
Teacher Attendance Tracker
+
Simple, elegant attendance management for educators
+
+
+
+
+
Take Attendance
+
+
+
+
+
+
Students
+
+
+
+
+
+
+
Attendance Records
+
+
+
+
+
+
Made with ❤️ for educators
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://attend.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Teacher Attendance Tracker
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "a68b89c9-32d2-468c-b1cd-16ad1013c208",
+ "object": "chat.completion",
+ "created": 1735395149,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nattend.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://attend.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Teacher Attendance Tracker\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n\n\n \n \n\n \n \n \n\n\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #f5f5f5;\n --accent-color: #ff6b6b;\n --text-color: #333;\n --border-radius: 8px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--secondary-color);\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n color: var(--primary-color);\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.attendance-form {\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 2rem;\n}\n\n.date-picker {\n margin-bottom: 1.5rem;\n}\n\n.date-picker input {\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n\n.student-list {\n margin-bottom: 1.5rem;\n}\n\n#student-list {\n list-style: none;\n}\n\n#student-list li {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem;\n border-bottom: 1px solid #eee;\n}\n\n#student-list li:last-child {\n border-bottom: none;\n}\n\n#save-attendance {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n width: 100%;\n font-size: 1rem;\n transition: background 0.3s ease;\n}\n\n#save-attendance:hover {\n background: #357abd;\n}\n\n.attendance-records {\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nfooter {\n text-align: center;\n margin-top: 2rem;\n color: #666;\n}\n\n@media (max-width: 600px) {\n body {\n padding: 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .attendance-form,\n .attendance-records {\n padding: 1rem;\n }\n}\n---script.js---\n// Sample student data\nconst students = [\n \"Alice Johnson\",\n \"Bob Smith\",\n \"Charlie Brown\",\n \"Diana Prince\",\n \"Edward Cullen\"\n];\n\n// Initialize the student list\nfunction initStudentList() {\n const studentList = document.getElementById('student-list');\n studentList.innerHTML = students.map(student => `\n \n ${student}\n \n \n `).join('');\n}\n\n// Save attendance function\nfunction saveAttendance() {\n const date = document.getElementById('date').value;\n const attendanceRecords = [];\n \n document.querySelectorAll('#student-list li').forEach((li, index) => {\n const status = li.querySelector('.attendance-status').value;\n attendanceRecords.push({\n student: students[index],\n status: status\n });\n });\n \n const record = {\n date: date,\n attendance: attendanceRecords\n };\n \n displayRecord(record);\n}\n\n// Display attendance record\nfunction displayRecord(record) {\n const recordsContainer = document.getElementById('records-container');\n const recordElement = document.createElement('div');\n recordElement.className = 'record';\n recordElement.innerHTML = `\n
Teacher Attendance Tracker
\nSimple, elegant attendance management for educators
\n${record.date}
\n- \n ${record.attendance.map(entry => `\n
- ${entry.student}: ${entry.status} \n `).join('')}\n
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 244,
+ "completion_tokens": 1280,
+ "total_tokens": 1524,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 244
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # attend.scroll.pub
+ Website generated by DeepSeek from prompt: make a website with which a teacher can take attendance
script.js
Changed around line 1
+ // Sample student data
+ const students = [
+ "Alice Johnson",
+ "Bob Smith",
+ "Charlie Brown",
+ "Diana Prince",
+ "Edward Cullen"
+ ];
+
+ // Initialize the student list
+ function initStudentList() {
+ const studentList = document.getElementById('student-list');
+ studentList.innerHTML = students.map(student => `
+
+ ${student}
+
+
+
+
+
+
+ `).join('');
+ }
+
+ // Save attendance function
+ function saveAttendance() {
+ const date = document.getElementById('date').value;
+ const attendanceRecords = [];
+
+ document.querySelectorAll('#student-list li').forEach((li, index) => {
+ const status = li.querySelector('.attendance-status').value;
+ attendanceRecords.push({
+ student: students[index],
+ status: status
+ });
+ });
+
+ const record = {
+ date: date,
+ attendance: attendanceRecords
+ };
+
+ displayRecord(record);
+ }
+
+ // Display attendance record
+ function displayRecord(record) {
+ const recordsContainer = document.getElementById('records-container');
+ const recordElement = document.createElement('div');
+ recordElement.className = 'record';
+ recordElement.innerHTML = `
+
${record.date}
+
+ ${record.attendance.map(entry => `
+ ${entry.student}: ${entry.status}
+ `).join('')}
+
+ `;
+ recordsContainer.prepend(recordElement);
+ }
+
+ // Event listeners
+ document.addEventListener('DOMContentLoaded', initStudentList);
+ document.getElementById('save-attendance').addEventListener('click', saveAttendance);
style.css
Changed around line 1
+ :root {
+ --primary-color: #4a90e2;
+ --secondary-color: #f5f5f5;
+ --accent-color: #ff6b6b;
+ --text-color: #333;
+ --border-radius: 8px;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--secondary-color);
+ padding: 2rem;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ h1 {
+ color: var(--primary-color);
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .attendance-form {
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ margin-bottom: 2rem;
+ }
+
+ .date-picker {
+ margin-bottom: 1.5rem;
+ }
+
+ .date-picker input {
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ }
+
+ .student-list {
+ margin-bottom: 1.5rem;
+ }
+
+ #student-list {
+ list-style: none;
+ }
+
+ #student-list li {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem;
+ border-bottom: 1px solid #eee;
+ }
+
+ #student-list li:last-child {
+ border-bottom: none;
+ }
+
+ #save-attendance {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ width: 100%;
+ font-size: 1rem;
+ transition: background 0.3s ease;
+ }
+
+ #save-attendance:hover {
+ background: #357abd;
+ }
+
+ .attendance-records {
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+
+ footer {
+ text-align: center;
+ margin-top: 2rem;
+ color: #666;
+ }
+
+ @media (max-width: 600px) {
+ body {
+ padding: 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .attendance-form,
+ .attendance-records {
+ padding: 1rem;
+ }
+ }