Index: app.py
===================================================================
--- app.py	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ app.py	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -1,7 +1,6 @@
-from flask import Flask, render_template, jsonify, request, session
+from flask import Flask, render_template, jsonify, request, session, redirect
 from utils.database_manager import DatabaseManager
+from utils.auth_manager import AuthManager
 import hashlib
-from utils.auth_manager import AuthManager
-from flask import Flask, render_template, jsonify, request, session, redirect
 
 app = Flask(__name__)
@@ -74,6 +73,6 @@
 
 @app.route('/reports/equipment-usage')
-def reports():
-    """SQL Извештаи"""
+def equipment_usage_report():
+    """SQL Извештаи за опрема"""
     usage_report = DatabaseManager.get_equipment_usage_report()
     if usage_report:
@@ -96,4 +95,5 @@
             'message': 'Грешка при генерирање на извештај'
         })
+
 @app.route('/login', methods=['GET', 'POST'])
 def login():
@@ -115,5 +115,5 @@
 @app.route('/register', methods=['GET', 'POST'])
 def register():
-    teachers = DatabaseManager.get_all_teachers()  # Земи наставници
+    teachers = DatabaseManager.get_all_teachers()
     
     if request.method == 'POST':
@@ -125,5 +125,4 @@
         teacher_id = request.form.get('teacher_id') if role == 'student' else None
         
-        # Хеширај лозинка
         password_hash = AuthManager.hash_password(password)
         
@@ -143,14 +142,29 @@
 @app.route('/dashboard')
 def dashboard():
+    """Dashboard со статистики според улога"""
     if 'user_id' not in session:
         return redirect('/login')
     
     if session['role'] == 'teacher':
-        # Dashboard за наставник
-        return render_template('dashboard_teacher.html', user_name=session['user_name'])
-    else:
-        # Dashboard за студент
-        return render_template('dashboard_student.html', user_name=session['user_name'])
-    
+        stats = None
+        try:
+            stats = DatabaseManager.get_teacher_dashboard_statistics(session['user_id'])
+        except:
+            stats = {'student_count': 0, 'reaction_count': 0, 'experiment_count': 0, 'activity_count': 0}
+        
+        return render_template('dashboard_teacher.html', 
+                             user_name=session['user_name'],
+                             stats=stats)
+    else:
+        stats = None
+        try:
+            stats = DatabaseManager.get_student_statistics(session['user_id'])
+        except:
+            stats = {'experiment_count': 0, 'element_count': 0, 'equipment_count': 0, 'reaction_count': 0}
+        
+        return render_template('dashboard_student.html', 
+                             user_name=session['user_name'],
+                             stats=stats)
+
 @app.route('/elements/add', methods=['GET', 'POST'])
 def add_element():
@@ -169,5 +183,7 @@
         teacher_id = session['user_id']
         
-        element_id = DatabaseManager.add_element(symbol, name, atomic_number, atomic_weight,melting_point,boiling_point, hazard_type, description, teacher_id)
+        element_id = DatabaseManager.add_element(symbol, name, atomic_number, atomic_weight,
+                                                melting_point, boiling_point, hazard_type, 
+                                                description, teacher_id)
         
         if element_id:
@@ -225,5 +241,4 @@
         return redirect('/login')
     
-    # Овде се случува tracking - кога корисникот кликне на "Детали"
     DatabaseManager.track_element_view(session['user_id'], element_id)
     
@@ -233,4 +248,5 @@
     else:
         return redirect('/elements')
+
 @app.route('/my_students')
 def my_students():
@@ -258,5 +274,4 @@
         return redirect('/login')
     
-    # Земи детали за експериментот
     experiments = DatabaseManager.get_all_experiments()
     experiment = None
@@ -269,5 +284,4 @@
         return redirect('/experiments')
     
-    # Земи ја опремата за експериментот
     equipment = DatabaseManager.get_experiment_equipment(experiment_id)
     
@@ -297,5 +311,6 @@
         teacher_id = session['user_id']
         
-        equipment_id = DatabaseManager.add_lab_equipment(name, equipment_type, description, safety_info, teacher_id)
+        equipment_id = DatabaseManager.add_lab_equipment(name, equipment_type, description, 
+                                                        safety_info, teacher_id)
         
         if equipment_id:
@@ -311,5 +326,4 @@
         return redirect('/login')
     
-    # Track дека корисникот ја погледнал опремата
     DatabaseManager.track_equipment_view(session['user_id'], equipment_id)
     
@@ -345,5 +359,6 @@
         description = request.form['description']
         
-        if DatabaseManager.update_element(element_id, symbol, name, atomic_number, atomic_weight, melting_point, boiling_point, hazard_type, description):
+        if DatabaseManager.update_element(element_id, symbol, name, atomic_number, atomic_weight, 
+                                         melting_point, boiling_point, hazard_type, description):
             return redirect('/elements')
         else:
@@ -374,5 +389,4 @@
     return render_template('edit_equipment.html', equipment=equipment)
 
-
 @app.route('/reactions')
 def reactions():
@@ -386,5 +400,5 @@
 @app.route('/reactions/add', methods=['GET', 'POST'])
 def add_reaction():
-    """Додај нова реакција - само за професори"""
+    """Додавање реакција со автоматско креирање експеримент"""
     if 'user_id' not in session or session['role'] != 'teacher':
         return redirect('/login')
@@ -397,12 +411,17 @@
         product = request.form['product']
         conditions = request.form['conditions']
+        safety_warning = request.form.get('safety_warning', 'Стандардни безбедносни мерки')
         teacher_id = session['user_id']
         
-        reaction_id = DatabaseManager.add_reaction(teacher_id, element1_id, element2_id, product, conditions)
-        
-        if reaction_id:
+        result = DatabaseManager.create_reaction_and_experiment(
+            teacher_id, element1_id, element2_id, product, conditions, safety_warning
+        )
+        
+        if result:
             return redirect('/reactions')
         else:
-            return render_template('add_reaction.html', elements=elements, error='Грешка при додавање реакција')
+            return render_template('add_reaction.html', 
+                                 elements=elements, 
+                                 error='Грешка при додавање реакција и експеримент')
     
     return render_template('add_reaction.html', elements=elements)
@@ -416,10 +435,9 @@
     elements = DatabaseManager.get_all_elements()
     
-    # Различни темплејти според улогата
     if session['role'] == 'teacher':
         return render_template('laboratory.html', 
                              elements=elements, 
                              user_role=session['role'])
-    else:  # student
+    else:
         return render_template('virtual_laboratory.html', 
                              elements=elements, 
@@ -436,9 +454,11 @@
     element2_symbol = data.get('element2')
     
-    # Проверка во базата за реакција
     reactions = DatabaseManager.get_all_reactions()
     for reaction in reactions:
         if ((reaction['element1_symbol'] == element1_symbol and reaction['element2_symbol'] == element2_symbol) or
             (reaction['element1_symbol'] == element2_symbol and reaction['element2_symbol'] == element1_symbol)):
+            
+            experiment = DatabaseManager.get_experiment_by_reaction(reaction['reaction_id'])
+            
             return jsonify({
                 'success': True,
@@ -446,4 +466,5 @@
                 'conditions': reaction['conditions'],
                 'reaction_id': reaction['reaction_id'],
+                'experiment_id': experiment['experiment_id'] if experiment else None,
                 'elements': f"{reaction['element1_name']} + {reaction['element2_name']}"
             })
@@ -454,5 +475,4 @@
     })
 
-    
 @app.route('/api/check-reaction', methods=['POST'])
 def check_reaction():
@@ -465,5 +485,4 @@
     element2_symbol = data.get('element2')
     
-    # Најди реакција во базата
     reactions = DatabaseManager.get_all_reactions()
     for reaction in reactions:
@@ -503,5 +522,6 @@
             return redirect('/reactions')
         else:
-            return render_template('edit_reaction.html', reaction=reaction, elements=elements, error='Грешка при ажурирање')
+            return render_template('edit_reaction.html', reaction=reaction, elements=elements, 
+                                  error='Грешка при ажурирање')
     
     return render_template('edit_reaction.html', reaction=reaction, elements=elements)
@@ -516,9 +536,9 @@
         return redirect('/reactions')
     else:
-        return redirect('/reactions')  # Со грешка, но сепак назад
+        return redirect('/reactions')
 
 @app.route('/save-experiment', methods=['POST'])
 def save_experiment():
-    """Зачувај симулација како експеримент"""
+    """Зачувување на учество во експеримент"""
     if 'user_id' not in session:
         return jsonify({'error': 'Неавторизиран пристап'})
@@ -526,24 +546,27 @@
     data = request.get_json()
     reaction_id = data.get('reaction_id')
-    result_description = data.get('result', 'Успешно извршена симулација')
-    safety_warning = data.get('safety_warning', 'Симулирана реакција - без реални ризици')
-    
-    # За експерименти, teacher_id е секогаш потребен
-    # Ако е студент, користи го неговиот teacher_id
-    if session['role'] == 'teacher':
-        teacher_id = session['user_id']
-    else:
-        # Земи го teacher_id на студентот
-        student_info = DatabaseManager.get_user_by_id(session['user_id'])
-        teacher_id = student_info.get('teacher_id') if student_info else None
-        
-        if not teacher_id:
-            return jsonify({'success': False, 'message': 'Не може да се пронајде професор'})
-    
-    # Зачувај експеримент
-    experiment_id = DatabaseManager.insert_experiment(teacher_id, reaction_id, result_description, safety_warning)
+    
+    experiment = DatabaseManager.get_experiment_by_reaction(reaction_id)
+    
+    if not experiment:
+        if session['role'] != 'teacher':
+            return jsonify({
+                'success': False, 
+                'message': 'Не постои експеримент за оваа реакција. Контактирајте го вашиот професор.'
+            })
+        
+        result_description = data.get('result', 'Експериментална симулација')
+        safety_warning = data.get('safety_warning', 'Стандардни безбедносни мерки')
+        
+        experiment_id = DatabaseManager.insert_experiment(
+            session['user_id'], 
+            reaction_id, 
+            result_description, 
+            safety_warning
+        )
+    else:
+        experiment_id = experiment['experiment_id']
     
     if experiment_id:
-        # Додај учество на корисникот
         DatabaseManager.track_experiment_participation(session['user_id'], experiment_id)
         return jsonify({'success': True, 'experiment_id': experiment_id})
@@ -551,11 +574,29 @@
         return jsonify({'success': False, 'message': 'Грешка при зачувување'})
 
+@app.route('/reports/student_experiments')
+def student_experiments_report():
+    """Извештај за експерименти на студенти"""
+    if 'user_id' not in session or session['role'] != 'teacher':
+        return redirect('/login')
+    
+    teacher_id = session['user_id']
+    experiments = DatabaseManager.get_students_experiments_for_teacher(teacher_id)
+    
+    return render_template('reports/student_experiments.html', 
+                         student_experiments=experiments)
+
 @app.route('/my-experiments')
 def my_experiments():
-    """Мои експерименти - за тековен корисник"""
-    if 'user_id' not in session:
-        return redirect('/login')
-    
-    experiments = DatabaseManager.get_user_experiments(session['user_id'])
+    """Приказ на експерименти според улога"""
+    if 'user_id' not in session:
+        return redirect('/login')
+    
+    if session['role'] == 'student':
+        # 🔑 земи експерименти каде студентот учествувал
+        experiments = DatabaseManager.get_student_participation_experiments(session['user_id'])
+    else:
+        # 🔑 земи експерименти креирани од професорот
+        experiments = DatabaseManager.get_user_experiments(session['user_id'])
+    
     return render_template('my_experiments.html', 
                          experiments=experiments, 
@@ -563,4 +604,18 @@
                          user_role=session['role'])
 
+
+@app.route('/api/dashboard-stats')
+def dashboard_stats():
+    """API endpoint за статистики на dashboard"""
+    if 'user_id' not in session:
+        return jsonify({'error': 'Неавторизиран пристап'})
+    
+    if session['role'] == 'student':
+        stats = DatabaseManager.get_student_statistics(session['user_id'])
+    else:
+        stats = DatabaseManager.get_teacher_dashboard_statistics(session['user_id'])
+    
+    return jsonify(stats)
+
 if __name__ == '__main__':
     app.run(debug=True)
Index: templates/add_reaction.html
===================================================================
--- templates/add_reaction.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/add_reaction.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -1,15 +1,15 @@
 {% extends "base.html" %}
-{% block title %}Додај реакција{% endblock %}
+{% block title %}Додај нова реакција{% endblock %}
 
 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-8">
+<div class="row">
+    <div class="col-md-8 offset-md-2">
         <div class="card">
-            <div class="card-header">
-                <h3>Додај нова хемиска реакција</h3>
+            <div class="card-header bg-primary text-white">
+                <h4>Додај нова реакција и експеримент</h4>
             </div>
             <div class="card-body">
                 {% if error %}
-                    <div class="alert alert-danger">{{ error }}</div>
+                <div class="alert alert-danger">{{ error }}</div>
                 {% endif %}
                 
@@ -17,47 +17,73 @@
                     <div class="row">
                         <div class="col-md-6">
-                            <div class="mb-3">
-                                <label for="element1_id" class="form-label">Првин елемент</label>
-                                <select class="form-select" name="element1_id" required>
-                                    <option value="">Избери првин елемент</option>
+                            <h5 class="text-primary mb-3">Реактанти</h5>
+                            
+                            <div class="form-group">
+                                <label for="element1_id">Прв елемент:</label>
+                                <select class="form-control" name="element1_id" id="element1_id" required>
+                                    <option value="">-- Избери елемент --</option>
                                     {% for element in elements %}
-                                    <option value="{{ element.element_id }}">{{ element.symbol }} - {{ element.element_name }}</option>
+                                    <option value="{{ element.element_id }}">
+                                        {{ element.symbol }} - {{ element.element_name }}
+                                    </option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="element2_id">Втор елемент:</label>
+                                <select class="form-control" name="element2_id" id="element2_id" required>
+                                    <option value="">-- Избери елемент --</option>
+                                    {% for element in elements %}
+                                    <option value="{{ element.element_id }}">
+                                        {{ element.symbol }} - {{ element.element_name }}
+                                    </option>
                                     {% endfor %}
                                 </select>
                             </div>
                         </div>
+                        
                         <div class="col-md-6">
-                            <div class="mb-3">
-                                <label for="element2_id" class="form-label">Втор елемент</label>
-                                <select class="form-select" name="element2_id" required>
-                                    <option value="">Избери втор елемент</option>
-                                    {% for element in elements %}
-                                    <option value="{{ element.element_id }}">{{ element.symbol }} - {{ element.element_name }}</option>
-                                    {% endfor %}
-                                </select>
+                            <h5 class="text-success mb-3">Резултати</h5>
+                            
+                            <div class="form-group">
+                                <label for="product">Продукт на реакцијата:</label>
+                                <input type="text" class="form-control" name="product" id="product" 
+                                       placeholder="пр. H2O, NaCl, CO2" required>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="conditions">Услови за реакцијата:</label>
+                                <textarea class="form-control" name="conditions" id="conditions" rows="3"
+                                          placeholder="Опишете температура, притисок, катализатори...">Стандардни услови</textarea>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="mb-3">
-                        <label for="product" class="form-label">Продукт на реакцијата</label>
-                        <input type="text" class="form-control" name="product" maxlength="50" 
-                               placeholder="H2O, NaCl, CO2..." required>
-                        <small class="form-text text-muted">Пример: H2O (Вода), NaCl (Сол)</small>
-                    </div>
+                    <hr>
                     
-                    <div class="mb-3">
-                        <label for="conditions" class="form-label">Услови за реакцијата</label>
-                        <textarea class="form-control" name="conditions" rows="3" 
-                                  placeholder="Опишете ги условите потребни за реакцијата (температура, притисок, катализатор...)"></textarea>
-                        <small class="form-text text-muted">Пример: Нормална температура, присуство на катализатор</small>
+                    <div class="row">
+                        <div class="col-12">
+                            <h5 class="text-warning mb-3">Безбедносни информации за експериментот</h5>
+                            
+                            <div class="form-group">
+                                <label for="safety_warning">Безбедносни предупредувања:</label>
+                                <textarea class="form-control" name="safety_warning" id="safety_warning" rows="3"
+                                          placeholder="Внесете безбедносни мерки и предупредувања...">Стандардни безбедносни мерки</textarea>
+                            </div>
+                        </div>
                     </div>
                     
                     <div class="alert alert-info">
-                        <strong>Напомена:</strong> Оваа реакција ќе биде достапна за сите студенти во виртуелната лабораторија.
+                        <strong>Напомена:</strong> При креирање на реакцијата, автоматски ќе се креира и експеримент 
+                        кој студентите ќе можат да го извршуваат во виртуелната лабораторија.
                     </div>
                     
-                    <button type="submit" class="btn btn-success">Додај реакција</button>
-                    <a href="/reactions" class="btn btn-secondary">Откажи</a>
+                    <div class="text-center">
+                        <button type="submit" class="btn btn-success">
+                            <i class="bi bi-plus-circle"></i> Креирај реакција и експеримент
+                        </button>
+                        <a href="/reactions" class="btn btn-secondary">Откажи</a>
+                    </div>
                 </form>
             </div>
@@ -65,3 +91,24 @@
     </div>
 </div>
+
+<script>
+// Провери дали се избрани различни елементи
+document.getElementById('element1_id').addEventListener('change', function() {
+    validateElements();
+});
+
+document.getElementById('element2_id').addEventListener('change', function() {
+    validateElements();
+});
+
+function validateElements() {
+    const elem1 = document.getElementById('element1_id').value;
+    const elem2 = document.getElementById('element2_id').value;
+    
+    if (elem1 && elem2 && elem1 === elem2) {
+        alert('Мора да изберете два различни елементи!');
+        document.getElementById('element2_id').value = '';
+    }
+}
+</script>
 {% endblock %}
Index: templates/dashboard_student.html
===================================================================
--- templates/dashboard_student.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/dashboard_student.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -10,12 +10,13 @@
 </div>
 
+<!-- Главни картички -->
 <div class="row mt-4">
-    <div class="col-md-4">
-        <div class="card mb-3">
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-primary text-white">
-                <h5>Хемиски елементи</h5>
+                <h5><i class="bi bi-flask"></i> Хемиски елементи</h5>
             </div>
             <div class="card-body">
-                <p>Истражете ги достапните хемиски елементи</p>
+                <p>Истражете ги достапните хемиски елементи и нивните својства</p>
                 <a href="/elements" class="btn btn-primary">Прегледај елементи</a>
             </div>
@@ -23,11 +24,11 @@
     </div>
     
-    <div class="col-md-4">
-        <div class="card mb-3">
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-success text-white">
-                <h5>Лабораториска опрема</h5>
+                <h5><i class="bi bi-tools"></i> Лабораториска опрема</h5>
             </div>
             <div class="card-body">
-                <p>Погледнете ја достапната опрема</p>
+                <p>Запознајте се со достапната лабораториска опрема</p>
                 <a href="/equipment" class="btn btn-success">Прегледај опрема</a>
             </div>
@@ -35,36 +36,26 @@
     </div>
     
-    <div class="col-md-4">
-        <div class="card mb-3">
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-danger text-white">
-                <h5>Виртуелна лабораторија</h5>
+                <h5><i class="bi bi-radioactive"></i> Виртуелна лабораторија</h5>
             </div>
             <div class="card-body">
-                <p>Извршете хемиски експерименти</p>
+                <p>Симулирајте хемиски реакции и учествувајте во експерименти</p>
                 <a href="/laboratory" class="btn btn-danger">Отвори лабораторија</a>
             </div>
         </div>
     </div>
-    <div class="col-md-4">
-    <div class="card">
-        <div class="card-header bg-warning text-dark">
-            <h5>Мои експерименти</h5>
-        </div>
-        <div class="card-body">
-            <p>Прегледајте ги вашите експерименти</p>
-            <a href="/my-experiments" class="btn btn-warning">Види експерименти</a>
-        </div>
-    </div>
-</div>
 </div>
 
-<div class="row mt-3">
-    <div class="col-md-6">
-        <div class="card">
+<!-- Втор ред картички -->
+<div class="row">
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-warning text-dark">
-                <h5>Мои експерименти</h5>
+                <h5><i class="bi bi-journal-text"></i> Мои експерименти</h5>
             </div>
             <div class="card-body">
-                <p>Прегледајте ги вашите експерименти</p>
+                <p>Прегледајте ги експериментите во кои сте учествувале</p>
                 <a href="/my-experiments" class="btn btn-warning">Види експерименти</a>
             </div>
@@ -72,15 +63,78 @@
     </div>
     
-    <div class="col-md-6">
-        <div class="card">
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-info text-white">
-                <h5>Напредок</h5>
+                <h5><i class="bi bi-diagram-3"></i> Реакции</h5>
             </div>
             <div class="card-body">
-                <p>Следете го вашиот напредок</p>
-                <a href="/my-progress" class="btn btn-info">Види напредок</a>
+                <p>Прегледајте ги дефинираните хемиски реакции</p>
+                <a href="/reactions" class="btn btn-info">Види реакции</a>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
+            <div class="card-header text-white" style="background: linear-gradient(45deg, #667eea, #764ba2);">
+                <h5><i class="bi bi-graph-up"></i> Мој напредок</h5>
+            </div>
+            <div class="card-body">
+                <p>Следете го вашиот напредок и активности</p>
+                <button class="btn btn-secondary" onclick="showProgress()">Види напредок</button>
             </div>
         </div>
     </div>
 </div>
+
+<!-- Статистики -->
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="card bg-light">
+            <div class="card-body">
+                <h5 class="card-title">Брза статистика</h5>
+                <div class="row text-center">
+                    <div class="col-md-3">
+                        <h4 id="exp-count">0</h4>
+                        <p class="text-muted">Мои експерименти</p>
+                    </div>
+                    <div class="col-md-3">
+                        <h4 id="elem-count">0</h4>
+                        <p class="text-muted">Прегледани елементи</p>
+                    </div>
+                    <div class="col-md-3">
+                        <h4 id="equip-count">0</h4>
+                        <p class="text-muted">Користена опрема</p>
+                    </div>
+                    <div class="col-md-3">
+                        <h4 id="reaction-count">0</h4>
+                        <p class="text-muted">Симулирани реакции</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    
+// Функција за прикажување напредок
+function showProgress() {
+    alert('Функционалноста за напредок ќе биде достапна наскоро!');
+}
+
+// Вчитај статистики (може да се повика од backend)
+document.addEventListener('DOMContentLoaded', function() {
+    // Вчитај реални статистики
+    fetch('/api/dashboard-stats')
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('exp-count').textContent = data.experiment_count || 0;
+            document.getElementById('elem-count').textContent = data.element_count || 0;
+            document.getElementById('equip-count').textContent = data.equipment_count || 0;
+            document.getElementById('reaction-count').textContent = data.reaction_count || 0;
+        })
+        .catch(error => console.error('Грешка при вчитување статистики:', error));
+});
+</script>
 {% endblock %}
Index: templates/dashboard_teacher.html
===================================================================
--- templates/dashboard_teacher.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/dashboard_teacher.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -1,4 +1,4 @@
 {% extends "base.html" %}
-{% block title %}Dashboard - Наставник{% endblock %}
+{% block title %}Dashboard - Професор{% endblock %}
 
 {% block content %}
@@ -6,13 +6,14 @@
     <div class="col-12">
         <h2>Добредојде, {{ user_name }}!</h2>
-        <p class="lead">Наставничка контролна табла</p>
-    </div>
-</div>
-
+        <p class="lead">Професорска контролна табла</p>
+    </div>
+</div>
+
+<!-- Управување со содржина -->
 <div class="row mt-4">
-    <div class="col-md-4">
-        <div class="card mb-3">
+    <div class="col-md-3 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-primary text-white">
-                <h5>Хемиски елементи</h5>
+                <h5><i class="bi bi-flask"></i> Хемиски елементи</h5>
             </div>
             <div class="card-body">
@@ -23,12 +24,12 @@
         </div>
     </div>
-
-    <div class="col-md-4">
-        <div class="card mb-3">
+    
+    <div class="col-md-3 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-success text-white">
-                <h5>Лабораториска опрема</h5>
-            </div>
-            <div class="card-body">
-                <p>Управување со лабораториска опрема</p>
+                <h5><i class="bi bi-tools"></i> Лабораториска опрема</h5>
+            </div>
+            <div class="card-body">
+                <p>Управување со опрема</p>
                 <a href="/equipment" class="btn btn-outline-success btn-sm">Прегледај</a>
                 <a href="/equipment/add" class="btn btn-success btn-sm">Додај нова</a>
@@ -36,12 +37,12 @@
         </div>
     </div>
-
-    <div class="col-md-4">
-        <div class="card mb-3">
+    
+    <div class="col-md-3 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-warning text-dark">
-                <h5>Реакции</h5>
-            </div>
-            <div class="card-body">
-                <p>Креирање на хемиски реакции</p>
+                <h5><i class="bi bi-diagram-3"></i> Реакции</h5>
+            </div>
+            <div class="card-body">
+                <p>Креирање на реакции</p>
                 <a href="/reactions" class="btn btn-outline-warning btn-sm">Прегледај</a>
                 <a href="/reactions/add" class="btn btn-warning btn-sm">Додај нова</a>
@@ -49,53 +50,154 @@
         </div>
     </div>
-    <div class="col-md-3">
-        <div class="card mb-3">
+    
+    <div class="col-md-3 mb-3">
+        <div class="card h-100">
             <div class="card-header bg-danger text-white">
-                <h5>Експерименти</h5>
-            </div>
-            <div class="card-body">
-                <p>Преглед на сите експерименти</p>
-                <a href="/experiments" class="btn btn-outline-danger btn-sm">Сите експерименти</a>
-                <a href="/my-experiments" class="btn btn-danger btn-sm">Мои експерименти</a>
-            </div>
-        </div>
-    </div>
-    <div class="col-md-4">
+                <h5><i class="bi bi-radioactive"></i> Лабораторија</h5>
+            </div>
+            <div class="card-body">
+                <p>Тестирај реакции</p>
+                <a href="/laboratory" class="btn btn-danger">Отвори</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Експерименти и студенти -->
+<div class="row">
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
+            <div class="card-header text-white" style="background: linear-gradient(45deg, #FF6B6B, #4ECDC4);">
+                <h5><i class="bi bi-journal-check"></i> Експерименти</h5>
+            </div>
+            <div class="card-body">
+                <p>Преглед на експерименти</p>
+                <a href="/experiments" class="btn btn-outline-info btn-sm">Сите</a>
+                <a href="/my-experiments" class="btn btn-info btn-sm">Мои</a>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
+            <div class="card-header bg-info text-white">
+                <h5><i class="bi bi-people"></i> Студенти</h5>
+            </div>
+            <div class="card-body">
+                <p>Следете го напредокот на студентите</p>
+                <a href="/my_students" class="btn btn-info">Види студенти</a>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4 mb-3">
+        <div class="card h-100">
+            <div class="card-header bg-secondary text-white">
+                <h5><i class="bi bi-file-earmark-bar-graph"></i> Извештаи</h5>
+            </div>
+            <div class="card-body">
+                <p>Детални статистики</p>
+                <a href="/reports" class="btn btn-secondary">Види извештаи</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Брзи акции -->
+<div class="row mt-4">
+    <div class="col-12">
         <div class="card">
-            <div class="card-header bg-purple text-white"
-                style="background: linear-gradient(45deg, #6f42c1, #007bff) !important;">
-                <h5>Виртуелна лабораторија</h5>
-            </div>
-            <div class="card-body">
-                <p>Интерактивни симулации на реакции</p>
-                <a href="/laboratory" class="btn btn-primary">Отвори лабораторија</a>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="row mt-3">
-    <div class="col-md-6">
-        <div class="card">
-            <div class="card-header bg-info text-white">
-                <h5>Студенти</h5>
-            </div>
-            <div class="card-body">
-                <p>Следете го напредокот на вашите студенти</p>
-                <a href="/my_students" class="btn btn-info">Види студенти</a>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-md-6">
-        <div class="card">
-            <div class="card-header bg-secondary text-white">
-                <h5>Извештаи</h5>
-            </div>
-            <div class="card-body">
-                <p>Детални статистики и извештаи</p>
-                <a href="/reports" class="btn btn-secondary">Види извештаи</a>
-            </div>
-        </div>
-    </div>
-</div>
+            <div class="card-header bg-dark text-white">
+                <h5><i class="bi bi-lightning"></i> Брзи акции</h5>
+            </div>
+            <div class="card-body">
+                <div class="btn-group" role="group">
+                    <a href="/reactions/add" class="btn btn-outline-primary">
+                        <i class="bi bi-plus-circle"></i> Нова реакција
+                    </a>
+                    <a href="/elements/add" class="btn btn-outline-success">
+                        <i class="bi bi-plus-circle"></i> Нов елемент
+                    </a>
+                    <a href="/equipment/add" class="btn btn-outline-warning">
+                        <i class="bi bi-plus-circle"></i> Нова опрема
+                    </a>
+                    <a href="/reports/student_experiments" class="btn btn-outline-info">
+                        <i class="bi bi-graph-up"></i> Експерименти на студенти
+                    </a>
+                    <a href="/reports/low_activity_students" class="btn btn-outline-danger">
+                        <i class="bi bi-exclamation-triangle"></i> Неактивни студенти
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Статистики -->
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="card bg-light">
+            <div class="card-body">
+                <h5 class="card-title">Статистики на системот</h5>
+                <div class="row text-center">
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h3 class="text-primary" id="student-count">0</h3>
+                            <p class="text-muted">Мои студенти</p>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h3 class="text-success" id="reaction-count">0</h3>
+                            <p class="text-muted">Креирани реакции</p>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h3 class="text-warning" id="experiment-count">0</h3>
+                            <p class="text-muted">Вкупно експерименти</p>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h3 class="text-info" id="activity-count">0</h3>
+                            <p class="text-muted">Активности денес</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.stat-box {
+    padding: 15px;
+    border-radius: 10px;
+    transition: transform 0.3s;
+}
+.stat-box:hover {
+    transform: translateY(-5px);
+}
+</style>
+
+<script>
+// Вчитај статистики при вчитување на страна
+document.addEventListener('DOMContentLoaded', function() {
+    // TODO: Повикај API за статистики
+    loadTeacherStatistics();
+});
+
+function loadTeacherStatistics() {
+    fetch('/api/dashboard-stats')
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('student-count').textContent = data.student_count || 0;
+            document.getElementById('reaction-count').textContent = data.reaction_count || 0;
+            document.getElementById('experiment-count').textContent = data.experiment_count || 0;
+            document.getElementById('activity-count').textContent = data.activity_count || 0;
+        })
+        .catch(error => console.error('Грешка при вчитување статистики:', error));
+}
+</script>
 {% endblock %}
Index: templates/experiments_list.html
===================================================================
--- templates/experiments_list.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/experiments_list.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -1,53 +1,115 @@
 {% extends "base.html" %}
-{% block title %}Експерименти{% endblock %}
+{% block title %}Сите експерименти{% endblock %}
 
 {% block content %}
 <div class="row">
     <div class="col-12">
-        <h2>Сите експерименти</h2>
-        <p class="text-muted">Листа на изведени експерименти во системот</p>
+        <h2>🧪 Сите експерименти во системот</h2>
+        <p class="text-muted">
+            {% if user_role == 'teacher' %}
+            Преглед на сите експерименти (професорски пристап)
+            {% else %}
+            Преглед на јавно достапни експерименти
+            {% endif %}
+        </p>
     </div>
 </div>
 
+{% if experiments %}
 <div class="row mt-3">
     {% for experiment in experiments %}
     <div class="col-md-6 mb-4">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between">
-                <h5>Експеримент #{{ experiment.experiment_id }}</h5>
-                <small class="text-muted">{{ experiment.time_stamp.strftime('%d.%m.%Y %H:%M') if experiment.time_stamp }}</small>
+        <div class="card h-100">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">
+                    <span class="badge bg-primary">#{{ experiment.experiment_id }}</span>
+                    {{ experiment.element1_symbol }} + {{ experiment.element2_symbol }}
+                </h5>
+                <small class="text-muted">
+                    {{ experiment.time_stamp.strftime('%d.%m.%Y') if experiment.time_stamp }}
+                </small>
             </div>
             <div class="card-body">
-                <h6 class="card-title text-primary">
-                    {{ experiment.element1_symbol }} + {{ experiment.element2_symbol }} → {{ experiment.product }}
+                <h6 class="card-title text-success">
+                    <strong>Продукт:</strong> {{ experiment.product }}
                 </h6>
                 
-                <p><strong>Реакција:</strong> {{ experiment.element1_name }} + {{ experiment.element2_name }}</p>
-                
-                <p><strong>Услови:</strong> {{ experiment.conditions or 'Стандардни услови' }}</p>
-                
-                <p><strong>Резултат:</strong> {{ experiment.result }}</p>
+                <div class="mb-3">
+                    <p class="mb-2">
+                        <strong>Реакција:</strong> 
+                        {{ experiment.element1_name }} + {{ experiment.element2_name }}
+                    </p>
+                    
+                    <p class="mb-2">
+                        <strong>Услови:</strong> 
+                        <span class="text-muted">{{ experiment.conditions or 'Стандардни услови' }}</span>
+                    </p>
+                    
+                    <p class="mb-2">
+                        <strong>Резултат:</strong> 
+                        <span class="text-muted">{{ experiment.result[:100] }}{% if experiment.result|length > 100 %}...{% endif %}</span>
+                    </p>
+                </div>
                 
                 {% if experiment.safety_warning %}
-                <div class="alert alert-warning alert-sm p-2">
-                    <strong>Безбедност:</strong> {{ experiment.safety_warning }}
+                <div class="alert alert-warning py-2 mb-3">
+                    <small><strong>⚠️ Безбедност:</strong> {{ experiment.safety_warning }}</small>
                 </div>
                 {% endif %}
                 
-                <p class="text-muted"><small>Креиран од: {{ experiment.created_by }}</small></p>
-                
-                <a href="/experiments/{{ experiment.experiment_id }}" class="btn btn-info btn-sm">Детали</a>
+                <div class="d-flex justify-content-between align-items-center">
+                    <small class="text-muted">
+                        <strong>Креирано од:</strong> {{ experiment.created_by }}
+                    </small>
+                    <a href="/experiments/{{ experiment.experiment_id }}" class="btn btn-sm btn-outline-info">
+                        Детали →
+                    </a>
+                </div>
             </div>
         </div>
-    </div>
-    {% else %}
-    <div class="col-12">
-        <div class="alert alert-info">Нема изведени експерименти во системот.</div>
     </div>
     {% endfor %}
 </div>
 
-<div class="mt-3">
-    <a href="/dashboard" class="btn btn-primary">Назад до Dashboard</a>
+<!-- Пагинација (ако има многу експерименти) -->
+{% if experiments|length > 12 %}
+<nav aria-label="Page navigation">
+    <ul class="pagination justify-content-center">
+        <li class="page-item disabled">
+            <a class="page-link" href="#" tabindex="-1">Previous</a>
+        </li>
+        <li class="page-item active"><a class="page-link" href="#">1</a></li>
+        <li class="page-item"><a class="page-link" href="#">2</a></li>
+        <li class="page-item"><a class="page-link" href="#">3</a></li>
+        <li class="page-item">
+            <a class="page-link" href="#">Next</a>
+        </li>
+    </ul>
+</nav>
+{% endif %}
+
+{% else %}
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="alert alert-info text-center">
+            <h4>Нема експерименти во системот</h4>
+            {% if user_role == 'teacher' %}
+            <p>Започнете со креирање на реакции и експерименти.</p>
+            <a href="/reactions/add" class="btn btn-primary">Додај реакција</a>
+            {% else %}
+            <p>Сè уште нема извршени експерименти. Бидете први!</p>
+            <a href="/laboratory" class="btn btn-primary">Отвори лабораторија</a>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endif %}
+
+<div class="mt-4 text-center">
+    <a href="/dashboard" class="btn btn-secondary">🏠 Dashboard</a>
+    <a href="/laboratory" class="btn btn-success">🔬 Лабораторија</a>
+    {% if user_role == 'teacher' %}
+    <a href="/reactions" class="btn btn-info">⚗️ Реакции</a>
+    {% endif %}
 </div>
 {% endblock %}
Index: templates/laboratory.html
===================================================================
--- templates/laboratory.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/laboratory.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -1,4 +1,4 @@
 {% extends "base.html" %}
-{% block title %}Виртуелна лабораторија{% endblock %}
+{% block title %}Лабораторија - Професор{% endblock %}
 
 {% block content %}
@@ -6,6 +6,6 @@
     <div class="row">
         <div class="col-12 text-center mb-4">
-            <h2>Виртуелна хемиска лабораторија</h2>
-            <p class="lead">Изберете два елементи за да видите дали можат да реагираат</p>
+            <h2>🧬 Професорска лабораторија</h2>
+            <p class="lead">Тестирајте реакции и креирајте експерименти</p>
         </div>
     </div>
@@ -18,11 +18,11 @@
                     <div style="display: grid; grid-template-columns: 1fr 150px 1fr; gap: 40px; align-items: center; margin-bottom: 40px;">
                         
-                        <!-- Првин елемент -->
+                        <!-- Прв елемент -->
                         <div class="text-center">
-                            <div id="element1-display" style="width: 130px; height: 130px; border: 3px dashed #007bff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: #f8f9fa; transition: all 0.3s ease;">
+                            <div id="element1-display" style="width: 130px; height: 130px; border: 3px dashed #6f42c1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: #f8f9fa; transition: all 0.3s ease;">
                                 <span style="color: #666;">Избери<br>Елемент 1</span>
                             </div>
                             <select class="form-select mt-3" id="element1-select" style="max-width: 200px; margin: 15px auto;">
-                                <option value="">-- Избери првин елемент --</option>
+                                <option value="">-- Избери прв елемент --</option>
                                 {% for element in elements %}
                                 <option value="{{ element.symbol }}" data-name="{{ element.element_name }}">
@@ -35,14 +35,14 @@
                         <!-- Центар со копче -->
                         <div class="text-center">
-                            <div style="font-size: 24px; color: #28a745; font-weight: bold; margin-bottom: 15px;">+</div>
-                            <button class="btn btn-success btn-lg" id="react-btn" disabled onclick="simulateReaction()" style="border-radius: 20px; padding: 12px 25px;">
-                                Реагирај
+                            <div style="font-size: 24px; color: #6f42c1; font-weight: bold; margin-bottom: 15px;">+</div>
+                            <button class="btn btn-primary btn-lg" id="react-btn" disabled onclick="testReaction()" style="border-radius: 20px; padding: 12px 25px; background: linear-gradient(45deg, #6f42c1, #007bff);">
+                                🔬 Тестирај
                             </button>
-                            <div style="font-size: 24px; color: #007bff; font-weight: bold; margin-top: 15px;">→</div>
+                            <div style="font-size: 24px; color: #6f42c1; font-weight: bold; margin-top: 15px;">→</div>
                         </div>
                         
                         <!-- Втор елемент -->
                         <div class="text-center">
-                            <div id="element2-display" style="width: 130px; height: 130px; border: 3px dashed #007bff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: #f8f9fa; transition: all 0.3s ease;">
+                            <div id="element2-display" style="width: 130px; height: 130px; border: 3px dashed #6f42c1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: #f8f9fa; transition: all 0.3s ease;">
                                 <span style="color: #666;">Избери<br>Елемент 2</span>
                             </div>
@@ -61,9 +61,39 @@
                     <div id="result-area" style="display: none; margin-top: 30px;">
                         <div class="card" id="result-card">
-                            <div class="card-body text-center">
+                            <div class="card-body">
                                 <div id="result-content"></div>
-                                <button class="btn btn-primary mt-3" id="save-experiment-btn" onclick="saveAsExperiment()" style="display: none;">
-                                    Зачувај како експеримент
-                                </button>
+                                
+                                <!-- Акции за професор -->
+                                <div id="teacher-actions" class="mt-4 text-center" style="display: none;">
+                                    <button class="btn btn-success" onclick="createNewReaction()">
+                                        ➕ Креирај нова реакција
+                                    </button>
+                                    <button class="btn btn-warning" onclick="testAsStudent()">
+                                        👨‍🎓 Тестирај како студент
+                                    </button>
+                                </div>
+                                
+                                <!-- Форма за нова реакција -->
+                                <div id="new-reaction-form" style="display: none;" class="mt-4">
+                                    <h5>Креирај нова реакција и експеримент</h5>
+                                    <div class="form-group">
+                                        <label>Продукт:</label>
+                                        <input type="text" id="product-input" class="form-control" placeholder="Внеси продукт на реакцијата">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Услови:</label>
+                                        <textarea id="conditions-input" class="form-control" rows="2" placeholder="Опиши услови за реакцијата"></textarea>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Безбедносни предупредувања:</label>
+                                        <textarea id="safety-input" class="form-control" rows="2" placeholder="Внеси безбедносни информации"></textarea>
+                                    </div>
+                                    <button class="btn btn-primary" onclick="saveNewReaction()">
+                                        💾 Зачувај реакција и експеримент
+                                    </button>
+                                    <button class="btn btn-secondary" onclick="cancelNewReaction()">
+                                        ❌ Откажи
+                                    </button>
+                                </div>
                             </div>
                         </div>
@@ -77,8 +107,7 @@
 <div class="mt-4 text-center">
     <a href="/dashboard" class="btn btn-secondary">Назад до Dashboard</a>
-    {% if user_role == 'teacher' %}
-        <a href="/reactions" class="btn btn-info">Управувај реакции</a>
-    {% endif %}
-    <a href="/experiments" class="btn btn-warning">Види експерименти</a>
+    <a href="/reactions" class="btn btn-info">📋 Управувај реакции</a>
+    <a href="/experiments" class="btn btn-warning">📊 Сите експерименти</a>
+    <a href="/my-experiments" class="btn btn-success">📝 Мои експерименти</a>
 </div>
 
@@ -109,6 +138,6 @@
             <div style="font-size: 12px; margin-top: 5px; color: white;">${name}</div>
         `;
-        display.style.borderColor = '#28a745';
-        display.style.background = 'linear-gradient(45deg, #28a745, #20c997)';
+        display.style.borderColor = '#6f42c1';
+        display.style.background = 'linear-gradient(45deg, #6f42c1, #007bff)';
         
         selectedElements[elementKey] = { symbol: value, name: name };
@@ -117,5 +146,5 @@
             '<span style="color: #666;">Избери<br>Елемент 1</span>' : 
             '<span style="color: #666;">Избери<br>Елемент 2</span>';
-        display.style.borderColor = '#007bff';
+        display.style.borderColor = '#6f42c1';
         display.style.background = '#f8f9fa';
         
@@ -129,10 +158,9 @@
 }
 
-function simulateReaction() {
+function testReaction() {
     if (!selectedElements.element1 || !selectedElements.element2) return;
     
-    // Анимација на копчето
     const btn = document.getElementById('react-btn');
-    btn.innerHTML = 'Проверувам...';
+    btn.innerHTML = '⏳ Проверувам...';
     btn.disabled = true;
     
@@ -149,22 +177,23 @@
     .then(response => response.json())
     .then(data => {
-        showResult(data);
-        btn.innerHTML = 'Реагирај';
+        showTeacherResult(data);
+        btn.innerHTML = '🔬 Тестирај';
         btn.disabled = false;
     })
     .catch(error => {
         console.error('Грешка:', error);
-        btn.innerHTML = 'Реагирај';
+        btn.innerHTML = '🔬 Тестирај';
         btn.disabled = false;
     });
 }
 
-function showResult(data) {
+function showTeacherResult(data) {
     const resultArea = document.getElementById('result-area');
     const resultCard = document.getElementById('result-card');
     const resultContent = document.getElementById('result-content');
-    const saveBtn = document.getElementById('save-experiment-btn');
+    const teacherActions = document.getElementById('teacher-actions');
     
     resultArea.style.display = 'block';
+    document.getElementById('new-reaction-form').style.display = 'none';
     
     if (data.success) {
@@ -172,6 +201,6 @@
         resultCard.className = 'card border-success';
         resultContent.innerHTML = `
-            <h4 class="text-success">Успешна реакција!</h4>
-            <div style="font-size: 24px; font-weight: bold; margin: 20px 0; color: #28a745;">
+            <h4 class="text-success">✅ Постои реакција!</h4>
+            <div style="font-size: 24px; font-weight: bold; margin: 20px 0; color: #28a745; text-align: center;">
                 ${selectedElements.element1.symbol} + ${selectedElements.element2.symbol} → ${data.product}
             </div>
@@ -184,55 +213,74 @@
                 </div>
             </div>
+            <div class="alert alert-info mt-3">
+                <strong>Reaction ID:</strong> ${data.reaction_id}<br>
+                <small>Оваа реакција веќе постои во системот и студентите можат да ја користат.</small>
+            </div>
         `;
-        saveBtn.style.display = 'inline-block';
+        teacherActions.style.display = 'block';
+        
     } else {
         currentReactionData = null;
         resultCard.className = 'card border-warning';
         resultContent.innerHTML = `
-            <h4 class="text-warning">Реакцијата не е пронајдена</h4>
-            <p class="mb-3">${data.message}</p>
-            <div style="font-size: 18px; color: #856404; margin: 15px 0;">
+            <h4 class="text-warning">⚠️ Реакцијата не постои</h4>
+            <div style="font-size: 18px; color: #856404; margin: 15px 0; text-align: center;">
                 ${selectedElements.element1.symbol} + ${selectedElements.element2.symbol} → ?
             </div>
-            {% if user_role == 'teacher' %}
-            <div class="mt-3">
-                <a href="/reactions/add" class="btn btn-primary btn-sm">Додај ја оваа реакција</a>
-            </div>
-            {% endif %}
+            <div class="alert alert-warning">
+                <strong>Оваа реакција не е дефинирана во системот.</strong><br>
+                Можете да ја додадете како нова реакција и автоматски да креирате експеримент.
+            </div>
         `;
-        saveBtn.style.display = 'none';
+        teacherActions.style.display = 'block';
     }
 }
 
-function saveAsExperiment() {
-    if (!currentReactionData) return;
-    
-    const saveBtn = document.getElementById('save-experiment-btn');
-    saveBtn.innerHTML = 'Зачувувам...';
-    saveBtn.disabled = true;
-    
-    fetch('/save-experiment', {
+function createNewReaction() {
+    document.getElementById('new-reaction-form').style.display = 'block';
+    document.getElementById('teacher-actions').style.display = 'none';
+}
+
+function cancelNewReaction() {
+    document.getElementById('new-reaction-form').style.display = 'none';
+    document.getElementById('teacher-actions').style.display = 'block';
+}
+
+function saveNewReaction() {
+    const product = document.getElementById('product-input').value;
+    const conditions = document.getElementById('conditions-input').value;
+    const safety = document.getElementById('safety-input').value;
+    
+    if (!product) {
+        alert('Внесете продукт на реакцијата!');
+        return;
+    }
+    
+    // Прво креирај реакција
+    fetch('/reactions/add', {
         method: 'POST',
         headers: {
-            'Content-Type': 'application/json',
+            'Content-Type': 'application/x-www-form-urlencoded',
         },
-        body: JSON.stringify({
-            reaction_id: currentReactionData.reaction_id,
-            result: `Симулирана реакција: ${currentReactionData.elements} → ${currentReactionData.product}`,
-            safety_warning: 'Симулирана реакција - без реални ризици'
+        body: new URLSearchParams({
+            element1_id: selectedElements.element1.id,
+            element2_id: selectedElements.element2.id,
+            product: product,
+            conditions: conditions
         })
     })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            alert('Експериментот е успешно зачуван!');
-            saveBtn.innerHTML = 'Зачувано!';
-            saveBtn.className = 'btn btn-success mt-3';
+    .then(response => {
+        if (response.ok) {
+            alert('Реакцијата и експериментот се успешно креирани!');
+            window.location.href = '/reactions';
         } else {
-            alert('Грешка при зачувување: ' + data.message);
-            saveBtn.innerHTML = 'Зачувај како експеримент';
-            saveBtn.disabled = false;
+            alert('Грешка при креирање на реакцијата');
         }
     });
+}
+
+function testAsStudent() {
+    // Редиректирај на студентски поглед
+    window.location.href = '/virtual-laboratory';
 }
 </script>
Index: templates/my_experiments.html
===================================================================
--- templates/my_experiments.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/my_experiments.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -5,89 +5,123 @@
 <div class="row">
     <div class="col-12">
-        <h2>Мои експерименти</h2>
-        <p class="text-muted">{{ user_name }} ({{ user_role }})</p>
+        <h2>📊 Мои експерименти</h2>
+        <p class="text-muted">
+            <strong>{{ user_name }}</strong> | 
+            <span class="badge bg-{{ 'primary' if user_role == 'teacher' else 'success' }}">
+                {{ 'Професор' if user_role == 'teacher' else 'Студент' }}
+            </span>
+        </p>
     </div>
 </div>
 
+{% if experiments %}
+<!-- Статистики -->
 <div class="row mt-3">
+    <div class="col-md-3">
+        <div class="card text-center">
+            <div class="card-body">
+                <h3 class="text-success">{{ experiments|map(attribute='product')|unique|list|length }}</h3>
+                <p class="text-muted mb-0">Различни продукти</p>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="card text-center">
+            <div class="card-body">
+                <h3 class="text-warning">{{ experiments|selectattr('safety_warning')|list|length }}</h3>
+                <p class="text-muted mb-0">Со предупредувања</p>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="card text-center">
+            <div class="card-body">
+                <h3 class="text-info">
+                    {% if experiments[0].participation_timestamp %}
+                        {{ experiments[0].participation_timestamp.strftime('%d.%m') }}
+                    {% elif experiments[0].time_stamp %}
+                        {{ experiments[0].time_stamp.strftime('%d.%m') }}
+                    {% endif %}
+                </h3>
+                <p class="text-muted mb-0">Последен експеримент</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Листа на експерименти -->
+<div class="row mt-4">
     {% for experiment in experiments %}
     <div class="col-md-6 col-lg-4 mb-4">
-        <div class="card shadow-sm">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <span class="badge bg-primary">Експеримент #{{ experiment.experiment_id }}</span>
-                <small class="text-muted">{{ experiment.participation_timestamp.strftime('%d.%m.%Y %H:%M') if experiment.participation_timestamp }}</small>
+        <div class="card shadow-sm h-100">
+            <div class="card-header bg-gradient" style="background: linear-gradient(45deg, #667eea, #764ba2);">
+                <div class="d-flex justify-content-between align-items-center text-white">
+                    <span><i class="bi bi-flask"></i> Експеримент #{{ experiment.experiment_id }}</span>
+                    <small>
+                        {% if experiment.participation_timestamp %}
+                            {{ experiment.participation_timestamp.strftime('%d.%m.%Y') }}
+                        {% elif experiment.time_stamp %}
+                            {{ experiment.time_stamp.strftime('%d.%m.%Y') }}
+                        {% endif %}
+                    </small>
+                </div>
             </div>
             <div class="card-body">
+                <!-- Реакција -->
                 <div class="reaction-equation text-center mb-3 p-3 bg-light rounded">
-                    <strong style="font-size: 18px;">
-                        {{ experiment.element1_symbol }} + {{ experiment.element2_symbol }} → {{ experiment.product.split('(')[0].strip() }}
+                    <strong style="font-size: 18px; color: #764ba2;">
+                        {{ experiment.element1_symbol }} + {{ experiment.element2_symbol }} → {{ experiment.product }}
                     </strong>
                 </div>
                 
-                <div class="mb-2">
-                    <strong>Реактанти:</strong> {{ experiment.element1_name }} + {{ experiment.element2_name }}
-                </div>
-                
-                <div class="mb-2">
-                    <strong>Продукт:</strong> {{ experiment.product }}
-                </div>
-                
-                <div class="mb-2">
-                    <strong>Услови:</strong> {{ experiment.conditions or 'Стандардни услови' }}
-                </div>
-                
-                <div class="mb-3">
-                    <strong>Резултат:</strong> {{ experiment.result[:100] }}{% if experiment.result|length > 100 %}...{% endif %}
-                </div>
-                
-                {% if experiment.safety_warning %}
-                <div class="alert alert-warning alert-sm p-2">
-                    <small><strong>Безбедност:</strong> {{ experiment.safety_warning }}</small>
-                </div>
-                {% endif %}
-                
-                <div class="text-center">
-                    <button class="btn btn-info btn-sm" onclick="showExperimentDetails({ experiment,experiment_id })">
-                        Детални информации
-                    </button>
+                <!-- Детали -->
+                <div class="experiment-details">
+                    <p class="mb-2">
+                        <strong>Реактанти:</strong><br>
+                        <span class="text-muted">{{ experiment.element1_name }} + {{ experiment.element2_name }}</span>
+                    </p>
+                    
+                    <p class="mb-2">
+                        <strong>Услови:</strong><br>
+                        <span class="text-muted">{{ experiment.conditions or 'Стандардни услови' }}</span>
+                    </p>
+                    
+                    <p class="mb-2">
+                        <strong>Резултат:</strong><br>
+                        <span class="text-muted">{{ experiment.result[:80] }}{% if experiment.result|length > 80 %}...{% endif %}</span>
+                    </p>
+                    
+                    {% if experiment.safety_warning %}
+                    <div class="alert alert-warning py-2 px-2 mb-2">
+                        <small><strong>⚠️ Безбедност:</strong> {{ experiment.safety_warning }}</small>
+                    </div>
+                    {% endif %}
+                    
+                    {% if experiment.participation_timestamp or experiment.time_stamp %}
+                    <p class="text-muted text-center mt-3 mb-0">
+                        <small>
+                            <i class="bi bi-clock"></i> 
+                            {% if experiment.participation_timestamp %}
+                                {{ experiment.participation_timestamp.strftime('%H:%M:%S') }}
+                            {% else %}
+                                {{ experiment.time_stamp.strftime('%H:%M:%S') }}
+                            {% endif %}
+                        </small>
+                    </p>
+                    {% endif %}
                 </div>
             </div>
         </div>
     </div>
-    {% else %}
+    {% endfor %}
+</div>
+{% else %}
+<!-- Нема експерименти -->
+<div class="row mt-4">
     <div class="col-12">
         <div class="alert alert-info text-center">
-            <h4>Нема извршени експерименти</h4>
-            <p>Започнете со користење на виртуелната лабораторија за да создадете експерименти.</p>
-            <a href="/laboratory" class="btn btn-primary">Отвори лабораторија</a>
-        </div>
-    </div>
-    {% endfor %}
-</div>
-
-{% if experiments %}
-<div class="row mt-4">
-    <div class="col-12">
-        <div class="card bg-light">
-            <div class="card-body">
-                <div class="row text-center">
-                    <div class="col-md-3">
-                        <h4>{{ experiments|length }}</h4>
-                        <p class="text-muted">Вкупно експерименти</p>
-                    </div>
-                    <div class="col-md-3">
-                        <h4>{{ experiments|map(attribute='product')|unique|list|length }}</h4>
-                        <p class="text-muted">Различни продукти</p>
-                    </div>
-                    <div class="col-md-3">
-                        <h4>{{ experiments|selectattr('safety_warning')|list|length }}</h4>
-                        <p class="text-muted">Со безбедносни предупредувања</p>
-                    </div>
-                    <div class="col-md-3">
-                        <h4>{{ experiments[0].participation_timestamp.strftime('%B %Y') if experiments }}</h4>
-                        <p class="text-muted">Последна активност</p>
-                    </div>
-                </div>
-            </div>
+            <h4>📚 Немате извршено експерименти</h4>
+            <p>Започнете со користење на виртуелната лабораторија за да создадете ваши експерименти.</p>
+            <a href="/laboratory" class="btn btn-primary">🔬 Отвори лабораторија</a>
         </div>
     </div>
@@ -95,14 +129,10 @@
 {% endif %}
 
-<div class="mt-4">
-    <a href="/dashboard" class="btn btn-secondary">Назад до Dashboard</a>
-    <a href="/laboratory" class="btn btn-success">Нов експеримент</a>
+<div class="mt-4 text-center">
+    <a href="/dashboard" class="btn btn-secondary">🏠 Dashboard</a>
+    <a href="/laboratory" class="btn btn-success">➕ Нов експеримент</a>
+    {% if user_role == 'teacher' %}
+    <a href="/experiments" class="btn btn-info">📋 Сите експерименти</a>
+    {% endif %}
 </div>
-
-<script>
-function showExperimentDetails(experimentId) {
-    // Ова може да се прошири со modal или redirect
-    alert('Експеримент #' + experimentId + '\nДетални информации ќе бидат додадени во иднина.');
-}
-</script>
 {% endblock %}
Index: templates/reports/student_experiments.html
===================================================================
--- templates/reports/student_experiments.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
+++ templates/reports/student_experiments.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+{% block title %}Експерименти на студенти{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <h2>📊 Експерименти на моите студенти</h2>
+        <p class="text-muted">Детален преглед на активности</p>
+    </div>
+</div>
+
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Студент</th>
+                        <th>Експеримент</th>
+                        <th>Реакција</th>
+                        <th>Продукт</th>
+                        <th>Датум</th>
+                        <th>Резултат</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for exp in student_experiments %}
+                    <tr>
+                        <td>
+                            <strong>{{ exp.student_name }}</strong><br>
+                            <small class="text-muted">ID: {{ exp.student_id }}</small>
+                        </td>
+                        <td>
+                            <span class="badge bg-primary">#{{ exp.experiment_id }}</span>
+                        </td>
+                        <td>
+                            {{ exp.element1_symbol }} + {{ exp.element2_symbol }}
+                        </td>
+                        <td>
+                            <span class="text-success">{{ exp.product }}</span>
+                        </td>
+                        <td>
+                            {{ exp.participation_date.strftime('%d.%m.%Y %H:%M') if exp.participation_date }}
+                        </td>
+                        <td>
+                            <small>{{ exp.result[:50] }}...</small>
+                        </td>
+                    </tr>
+                    {% else %}
+                    <tr>
+                        <td colspan="6" class="text-center text-muted">
+                            Нема експерименти од студенти
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<div class="mt-4 text-center">
+    <a href="/reports" class="btn btn-secondary">Назад кон извештаи</a>
+    <a href="/my_students" class="btn btn-info">Види студенти</a>
+</div>
+{% endblock %}
Index: templates/virtual_laboratory.html
===================================================================
--- templates/virtual_laboratory.html	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ templates/virtual_laboratory.html	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -1,66 +1,78 @@
 {% extends "base.html" %}
-{% block title %}Виртуелна лабораторија{% endblock %}
+{% block title %}Виртуелна лабораторија - Студент{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12 text-center mb-4">
-        <h2>Виртуелна хемиска лабораторија</h2>
-        <p class="lead">Изберете елементи за да видите дали постои реакција</p>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12 text-center mb-4">
+            <h2>🧪 Виртуелна хемиска лабораторија</h2>
+            <p class="lead">Изберете два елементи за да симулирате реакција</p>
+        </div>
     </div>
-</div>
-
-<div class="row justify-content-center">
-    <div class="col-md-10">
-        <div class="card">
-            <div class="card-body">
-                <div class="reaction-workspace" style="display: grid; grid-template-columns: 1fr 200px 1fr; gap: 30px; align-items: center; margin-bottom: 40px;">
-                    <!-- Првин елемент -->
-                    <div class="element-selector text-center">
-                        <div class="element-display" id="element1-display" style="width: 120px; height: 120px; border: 3px dashed #ccc; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: white;">
-                            <span>Избери<br>Елемент 1</span>
+
+    <div class="row justify-content-center">
+        <div class="col-md-10">
+            <div class="card shadow-lg">
+                <div class="card-body p-4">
+                    <!-- Симулациска област -->
+                    <div style="display: grid; grid-template-columns: 1fr 150px 1fr; gap: 40px; align-items: center; margin-bottom: 40px;">
+                        
+                        <!-- Прв елемент -->
+                        <div class="text-center">
+                            <div id="element1-display" style="width: 130px; height: 130px; border: 3px dashed #007bff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: #f8f9fa; transition: all 0.3s ease;">
+                                <span style="color: #666;">Избери<br>Елемент 1</span>
+                            </div>
+                            <select class="form-select mt-3" id="element1-select" style="max-width: 200px; margin: 15px auto;">
+                                <option value="">-- Избери прв елемент --</option>
+                                {% for element in elements %}
+                                <option value="{{ element.symbol }}" data-name="{{ element.element_name }}">
+                                    {{ element.symbol }} - {{ element.element_name }}
+                                </option>
+                                {% endfor %}
+                            </select>
                         </div>
-                        <select class="form-select mt-3" id="element1-select">
-                            <option value="">-- Избери елемент --</option>
-                            {% for element in elements %}
-                            <option value="{{ element.symbol }}" data-name="{{ element.element_name }}" data-id="{{ element.element_id }}">
-                                {{ element.symbol }} - {{ element.element_name }}
-                            </option>
-                            {% endfor %}
-                        </select>
+                        
+                        <!-- Центар со копче -->
+                        <div class="text-center">
+                            <div style="font-size: 24px; color: #28a745; font-weight: bold; margin-bottom: 15px;">+</div>
+                            <button class="btn btn-success btn-lg" id="react-btn" disabled onclick="simulateReaction()" style="border-radius: 20px; padding: 12px 25px;">
+                                ⚗️ Реагирај
+                            </button>
+                            <div style="font-size: 24px; color: #007bff; font-weight: bold; margin-top: 15px;">→</div>
+                        </div>
+                        
+                        <!-- Втор елемент -->
+                        <div class="text-center">
+                            <div id="element2-display" style="width: 130px; height: 130px; border: 3px dashed #007bff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: #f8f9fa; transition: all 0.3s ease;">
+                                <span style="color: #666;">Избери<br>Елемент 2</span>
+                            </div>
+                            <select class="form-select mt-3" id="element2-select" style="max-width: 200px; margin: 15px auto;">
+                                <option value="">-- Избери втор елемент --</option>
+                                {% for element in elements %}
+                                <option value="{{ element.symbol }}" data-name="{{ element.element_name }}">
+                                    {{ element.symbol }} - {{ element.element_name }}
+                                </option>
+                                {% endfor %}
+                            </select>
+                        </div>
                     </div>
                     
-                    <!-- Стрелка и копче -->
-                    <div class="reaction-arrow text-center">
-                        <div style="font-size: 30px; color: #666; margin-bottom: 10px;">+</div>
-                        <button class="btn btn-primary" id="react-btn" disabled onclick="performReaction()">Реагирај</button>
-                        <div style="font-size: 30px; color: #666; margin-top: 10px;">→</div>
+                    <!-- Резултат област -->
+                    <div id="result-area" style="display: none; margin-top: 30px;">
+                        <div class="card" id="result-card">
+                            <div class="card-body text-center">
+                                <div id="result-content"></div>
+                                
+                                <!-- Копче за учество во експеримент - САМО ЗА СТУДЕНТИ -->
+                                <button class="btn btn-primary mt-3" id="participate-btn" onclick="participateInExperiment()" style="display: none;">
+                                    📝 Запиши учество во експеримент
+                                </button>
+                                
+                                <div id="experiment-details" style="display: none; margin-top: 20px;">
+                                    <!-- Тука ќе се прикажат деталите за експериментот -->
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    
-                    <!-- Втор елемент -->
-                    <div class="element-selector text-center">
-                        <div class="element-display" id="element2-display" style="width: 120px; height: 120px; border: 3px dashed #ccc; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; background: white;">
-                            <span>Избери<br>Елемент 2</span>
-                        </div>
-                        <select class="form-select mt-3" id="element2-select">
-                            <option value="">-- Избери елемент --</option>
-                            {% for element in elements %}
-                            <option value="{{ element.symbol }}" data-name="{{ element.element_name }}" data-id="{{ element.element_id }}">
-                                {{ element.symbol }} - {{ element.element_name }}
-                            </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                </div>
-                
-                <!-- Резултат -->
-                <div class="result-area" id="result-area" style="display: none;">
-                    <div class="alert" id="result-content"></div>
-                    {% if user_role == 'teacher' %}
-                    <div class="text-center">
-                        <button class="btn btn-warning" onclick="createExperiment()" id="create-experiment-btn" style="display: none;">
-                            Создај експеримент од оваа реакција
-                        </button>
-                    </div>
-                    {% endif %}
                 </div>
             </div>
@@ -71,21 +83,19 @@
 <div class="mt-4 text-center">
     <a href="/dashboard" class="btn btn-secondary">Назад до Dashboard</a>
-    <a href="/reactions" class="btn btn-info">Види сите реакции</a>
+    <a href="/my-experiments" class="btn btn-warning">📊 Мои Експерименти</a>
 </div>
 
 <script>
 let selectedElements = {};
-let currentReaction = null;
+let currentReactionData = null;
+let currentExperimentId = null;
 
 document.addEventListener('DOMContentLoaded', function() {
-    const element1Select = document.getElementById('element1-select');
-    const element2Select = document.getElementById('element2-select');
-    
-    element1Select.addEventListener('change', function() {
+    document.getElementById('element1-select').addEventListener('change', function() {
         updateElementDisplay(this, 'element1-display', 'element1');
         checkReactionReady();
     });
     
-    element2Select.addEventListener('change', function() {
+    document.getElementById('element2-select').addEventListener('change', function() {
         updateElementDisplay(this, 'element2-display', 'element2');
         checkReactionReady();
@@ -97,26 +107,27 @@
     const value = select.value;
     const name = select.options[select.selectedIndex]?.dataset?.name || '';
-    const id = select.options[select.selectedIndex]?.dataset?.id || '';
     
     if (value) {
         display.innerHTML = `
-            <div style="font-size: 36px; font-weight: bold;">${value}</div>
-            <div style="font-size: 12px; margin-top: 5px;">${name}</div>
+            <div style="font-size: 36px; font-weight: bold; color: white;">${value}</div>
+            <div style="font-size: 12px; margin-top: 5px; color: white;">${name}</div>
         `;
-        display.style.borderColor = '#4ECDC4';
-        display.style.background = 'linear-gradient(45deg, #4ECDC4, #44A08D)';
-        display.style.color = 'white';
-        
-        selectedElements[elementKey] = { symbol: value, name: name, id: id };
+        display.style.borderColor = '#28a745';
+        display.style.background = 'linear-gradient(45deg, #28a745, #20c997)';
+        
+        selectedElements[elementKey] = { symbol: value, name: name };
     } else {
         display.innerHTML = displayId === 'element1-display' ? 
-            '<span>Избери<br>Елемент 1</span>' : 
-            '<span>Избери<br>Елемент 2</span>';
-        display.style.borderColor = '#ccc';
-        display.style.background = 'white';
-        display.style.color = 'black';
+            '<span style="color: #666;">Избери<br>Елемент 1</span>' : 
+            '<span style="color: #666;">Избери<br>Елемент 2</span>';
+        display.style.borderColor = '#007bff';
+        display.style.background = '#f8f9fa';
         
         delete selectedElements[elementKey];
     }
+    
+    // Ресетирај резултат кога се менуваат елементите
+    document.getElementById('result-area').style.display = 'none';
+    document.getElementById('participate-btn').style.display = 'none';
 }
 
@@ -126,8 +137,13 @@
 }
 
-function performReaction() {
+function simulateReaction() {
     if (!selectedElements.element1 || !selectedElements.element2) return;
     
-    fetch('/api/check-reaction', {
+    const btn = document.getElementById('react-btn');
+    btn.innerHTML = '⏳ Проверувам...';
+    btn.disabled = true;
+    
+    // Повикај API за симулација на реакција
+    fetch('/api/simulate-reaction', {
         method: 'POST',
         headers: {
@@ -142,8 +158,12 @@
     .then(data => {
         showResult(data);
+        btn.innerHTML = '⚗️ Реагирај';
+        btn.disabled = false;
     })
     .catch(error => {
-        console.error('Error:', error);
-        showResult({success: false, message: 'Грешка при проверката'});
+        console.error('Грешка:', error);
+        btn.innerHTML = '⚗️ Реагирај';
+        btn.disabled = false;
+        alert('Грешка при симулација на реакцијата');
     });
 }
@@ -151,46 +171,133 @@
 function showResult(data) {
     const resultArea = document.getElementById('result-area');
+    const resultCard = document.getElementById('result-card');
     const resultContent = document.getElementById('result-content');
-    const createBtn = document.getElementById('create-experiment-btn');
+    const participateBtn = document.getElementById('participate-btn');
     
     resultArea.style.display = 'block';
     
     if (data.success) {
-        currentReaction = data;
-        resultContent.className = 'alert alert-success';
+        currentReactionData = data;
+        
+        // За студенти - прикажи резултат и можност за учество во експеримент
+        resultCard.className = 'card border-success';
         resultContent.innerHTML = `
-            <h4>Успешна реакција!</h4>
-            <div style="font-size: 20px; font-weight: bold; margin: 15px 0; text-align: center;">
+            <h4 class="text-success">✅ Успешна реакција!</h4>
+            <div style="font-size: 24px; font-weight: bold; margin: 20px 0; color: #28a745;">
                 ${selectedElements.element1.symbol} + ${selectedElements.element2.symbol} → ${data.product}
             </div>
-            <p><strong>Продукт:</strong> ${data.product}</p>
-            <p><strong>Услови:</strong> ${data.conditions || 'Стандардни услови'}</p>
+            <div class="row">
+                <div class="col-md-6">
+                    <strong>Продукт:</strong> ${data.product}
+                </div>
+                <div class="col-md-6">
+                    <strong>Услови:</strong> ${data.conditions || 'Стандардни услови'}
+                </div>
+            </div>
+            <div class="alert alert-info mt-3">
+                <small>ℹ️ За да го зачувате овој резултат, запишете учество во експеримент</small>
+            </div>
         `;
         
-        if (createBtn) {
-            createBtn.style.display = 'inline-block';
+        // Прикажи копче за учество во експеримент
+        participateBtn.style.display = 'inline-block';
+        
+    } else {
+        currentReactionData = null;
+        resultCard.className = 'card border-warning';
+        resultContent.innerHTML = `
+            <h4 class="text-warning">⚠️ Реакцијата не е дефинирана</h4>
+            <p class="mb-3">${data.message}</p>
+            <div style="font-size: 18px; color: #856404; margin: 15px 0;">
+                ${selectedElements.element1.symbol} + ${selectedElements.element2.symbol} → ?
+            </div>
+            <div class="alert alert-warning">
+                <small>Оваа реакција сè уште не е додадена во системот. Контактирајте го вашиот професор.</small>
+            </div>
+        `;
+        participateBtn.style.display = 'none';
+    }
+}
+
+function participateInExperiment() {
+    if (!currentReactionData) return;
+    
+    const participateBtn = document.getElementById('participate-btn');
+    participateBtn.innerHTML = '⏳ Запишувам...';
+    participateBtn.disabled = true;
+    
+    // Зачувај учество во експеримент
+    fetch('/save-experiment', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            reaction_id: currentReactionData.reaction_id,
+            result: `Симулирана реакција: ${currentReactionData.elements} → ${currentReactionData.product}`,
+            safety_warning: 'Виртуелна симулација - безбедно извршено'
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            participateBtn.innerHTML = '✅ Успешно запишано!';
+            participateBtn.className = 'btn btn-success mt-3';
+            participateBtn.disabled = true;
+            
+            // Прикажи детали за експериментот
+            document.getElementById('experiment-details').style.display = 'block';
+            document.getElementById('experiment-details').innerHTML = `
+                <div class="alert alert-success">
+                    <h5>🎉 Успешно учество во експеримент!</h5>
+                    <p>Експеримент ID: #${data.experiment_id}</p>
+                    <p>Вашето учество е запишано. Можете да го видите во <a href="/my-experiments">Мои Експерименти</a></p>
+                </div>
+            `;
+            
+            // По 3 секунди ресетирај за нов експеримент
+            setTimeout(() => {
+                resetExperiment();
+            }, 5000);
+            
+        } else {
+            alert('Грешка при запишување: ' + (data.message || 'Непозната грешка'));
+            participateBtn.innerHTML = '📝 Запиши учество во експеримент';
+            participateBtn.disabled = false;
         }
-    } else {
-        currentReaction = null;
-        resultContent.className = 'alert alert-warning';
-        resultContent.innerHTML = `
-            <h4>Реакцијата не е дефинирана</h4>
-            <p>${data.message}</p>
-            {% if user_role == 'teacher' %}
-            <p><a href="/reactions/add" class="btn btn-sm btn-primary">Додај ја оваа реакција</a></p>
-            {% endif %}
-        `;
-        
-        if (createBtn) {
-            createBtn.style.display = 'none';
-        }
-    }
-}
-
-function createExperiment() {
-    if (!currentReaction) return;
-    
-    // Тука би се отворил modal или форма за креирање експеримент
-    alert('Функцијата за креирање експеримент ќе биде имплементирана во следната фаза.');
+    })
+    .catch(error => {
+        console.error('Грешка:', error);
+        alert('Грешка при запишување на учеството');
+        participateBtn.innerHTML = '📝 Запиши учество во експеримент';
+        participateBtn.disabled = false;
+    });
+}
+
+function resetExperiment() {
+    // Ресетирај селекција
+    document.getElementById('element1-select').value = '';
+    document.getElementById('element2-select').value = '';
+    
+    // Ресетирај приказ
+    document.getElementById('element1-display').innerHTML = '<span style="color: #666;">Избери<br>Елемент 1</span>';
+    document.getElementById('element1-display').style.borderColor = '#007bff';
+    document.getElementById('element1-display').style.background = '#f8f9fa';
+    
+    document.getElementById('element2-display').innerHTML = '<span style="color: #666;">Избери<br>Елемент 2</span>';
+    document.getElementById('element2-display').style.borderColor = '#007bff';
+    document.getElementById('element2-display').style.background = '#f8f9fa';
+    
+    // Скриј резултати
+    document.getElementById('result-area').style.display = 'none';
+    document.getElementById('participate-btn').style.display = 'none';
+    document.getElementById('experiment-details').style.display = 'none';
+    
+    // Ресетирај податоци
+    selectedElements = {};
+    currentReactionData = null;
+    
+    // Оневозможи копче за реакција
+    document.getElementById('react-btn').disabled = true;
 }
 </script>
Index: utils/database_manager.py
===================================================================
--- utils/database_manager.py	(revision 14fe7c26eea0eb44ab5dbcea992e11378a7f6d4e)
+++ utils/database_manager.py	(revision dfb03fea3a363812cf0c96d117a912bec2c6be49)
@@ -3,4 +3,30 @@
 
 class DatabaseManager:
+    @staticmethod
+    def get_connection():
+        # Ова е новиот метод што ќе реши грешката
+        return psycopg2.connect(
+            host='localhost',
+            port=9999,
+            database='db_202425z_va_prj_simlab25',
+            user='db_202425z_va_prj_simlab25_owner',
+            password='c9e5ebb7d332',
+            cursor_factory=RealDictCursor
+        )
+
+    @staticmethod
+    def execute_query(query, params=None):
+        try:
+            conn = DatabaseManager.get_connection()
+            cursor = conn.cursor()
+            cursor.execute(query, params or ())
+            result = cursor.fetchall()
+            cursor.close()
+            conn.close()
+            return result
+        except Exception as e:
+            print(f"Грешка во execute_query: {e}")
+            return None
+        
     @staticmethod
     def test_connection():
@@ -924,3 +950,428 @@
             print(f"Грешка: {e}")
             return None
-                            
+    
+    # Додајте овие нови методи во DatabaseManager класата (database_manager.py)
+
+    @staticmethod
+    def create_reaction_and_experiment(teacher_id, element1_id, element2_id, product, conditions, safety_warning=None):
+        """Креирај реакција и автоматски креирај експеримент (за професори)"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332'
+            )
+            cursor = conn.cursor()
+            
+            # Прво креирај реакција
+            cursor.execute('''
+                INSERT INTO reaction (teacher_id, element1_id, element2_id, product, conditions)
+                VALUES (%s, %s, %s, %s, %s)
+                RETURNING reaction_id
+            ''', (teacher_id, element1_id, element2_id, product, conditions))
+            
+            reaction_id = cursor.fetchone()[0]
+            
+            # Автоматски креирај експеримент за оваа реакција
+            cursor.execute('''
+                INSERT INTO experiment (teacher_id, reaction_id, result, safety_warning, time_stamp)
+                VALUES (%s, %s, %s, %s, CURRENT_TIMESTAMP)
+                RETURNING experiment_id
+            ''', (teacher_id, reaction_id, 
+                f'Експеримент за реакција: {product}', 
+                safety_warning or 'Стандардни безбедносни мерки'))
+            
+            experiment_id = cursor.fetchone()[0]
+            
+            conn.commit()
+            cursor.close()
+            conn.close()
+            
+            return {'reaction_id': reaction_id, 'experiment_id': experiment_id}
+        except Exception as e:
+            print(f"Грешка при креирање реакција и експеримент: {e}")
+            return None
+
+    @staticmethod
+    def get_experiment_by_reaction(reaction_id):
+        """Најди експеримент за дадена реакција"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            cursor.execute('''
+                SELECT * FROM experiment 
+                WHERE reaction_id = %s
+                ORDER BY time_stamp DESC
+                LIMIT 1
+            ''', (reaction_id,))
+            result = cursor.fetchone()
+            cursor.close()
+            conn.close()
+            return dict(result) if result else None
+        except Exception as e:
+            print(f"Грешка: {e}")
+            return None
+
+    @staticmethod
+    def get_students_experiments_for_teacher(teacher_id):
+        """Земи експерименти на студенти за конкретен професор"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            cursor.execute('''
+                SELECT 
+                    u.user_name || ' ' || u.user_surname AS student_name,
+                    s.student_id,
+                    e.experiment_id,
+                    e.result,
+                    e.time_stamp,
+                    r.product,
+                    el1.symbol as element1_symbol,
+                    el2.symbol as element2_symbol,
+                    up.participation_timestamp as participation_date
+                FROM student s
+                JOIN "User" u ON s.student_id = u.user_id
+                JOIN userparticipatesinexperiment up ON s.student_id = up.user_id
+                JOIN experiment e ON up.experiment_id = e.experiment_id
+                JOIN reaction r ON e.reaction_id = r.reaction_id
+                JOIN elements el1 ON r.element1_id = el1.element_id
+                JOIN elements el2 ON r.element2_id = el2.element_id
+                WHERE s.teacher_id = %s
+                ORDER BY up.participation_timestamp DESC
+            ''', (teacher_id,))
+            result = cursor.fetchall()
+            cursor.close()
+            conn.close()
+            return result
+        except Exception as e:
+            print(f"Грешка: {e}")
+            return []
+    
+    @staticmethod
+    def get_student_statistics(student_id):
+        """Земи статистики за студент"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            
+            # Статистики за студентот
+            cursor.execute('''
+                SELECT 
+                    (SELECT COUNT(*) FROM userparticipatesinexperiment WHERE user_id = %s) as experiment_count,
+                    (SELECT COUNT(*) FROM userviewselement WHERE user_id = %s) as element_count,
+                    (SELECT COUNT(*) FROM userviewslabequipment WHERE user_id = %s) as equipment_count,
+                    (SELECT COUNT(DISTINCT r.reaction_id) 
+                    FROM userparticipatesinexperiment up
+                    JOIN experiment e ON up.experiment_id = e.experiment_id
+                    JOIN reaction r ON e.reaction_id = r.reaction_id
+                    WHERE up.user_id = %s) as reaction_count
+            ''', (student_id, student_id, student_id, student_id))
+            
+            result = cursor.fetchone()
+            cursor.close()
+            conn.close()
+            return dict(result) if result else {'experiment_count': 0, 'element_count': 0, 'equipment_count': 0, 'reaction_count': 0}
+        except Exception as e:
+            print(f"Грешка: {e}")
+            return {'experiment_count': 0, 'element_count': 0, 'equipment_count': 0, 'reaction_count': 0}
+
+    @staticmethod
+    def get_teacher_dashboard_statistics(teacher_id):
+        """Земи статистики за професорски dashboard"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            
+            # Број на студенти
+            cursor.execute('SELECT COUNT(*) as count FROM student WHERE teacher_id = %s', (teacher_id,))
+            student_count = cursor.fetchone()['count']
+            
+            # Број на креирани реакции
+            cursor.execute('SELECT COUNT(*) as count FROM reaction WHERE teacher_id = %s', (teacher_id,))
+            reaction_count = cursor.fetchone()['count']
+            
+            # Број на експерименти
+            cursor.execute('SELECT COUNT(*) as count FROM experiment WHERE teacher_id = %s', (teacher_id,))
+            experiment_count = cursor.fetchone()['count']
+            
+            # Активности денес (експерименти од студенти денес)
+            cursor.execute('''
+                SELECT COUNT(*) as count 
+                FROM userparticipatesinexperiment up
+                JOIN student s ON up.user_id = s.student_id
+                WHERE s.teacher_id = %s 
+                AND DATE(up.participation_timestamp) = CURRENT_DATE
+            ''', (teacher_id,))
+            activity_today = cursor.fetchone()['count']
+            
+            cursor.close()
+            conn.close()
+            
+            return {
+                'student_count': student_count,
+                'reaction_count': reaction_count,
+                'experiment_count': experiment_count,
+                'activity_count': activity_today
+            }
+        except Exception as e:
+            print(f"Грешка: {e}")
+            return {
+                'student_count': 0,
+                'reaction_count': 0,
+                'experiment_count': 0,
+                'activity_count': 0
+            }
+        
+    # Додајте ги овие методи во вашиот DatabaseManager класа (database_manager.py)
+
+    @staticmethod
+    def create_reaction_and_experiment(teacher_id, element1_id, element2_id, product, conditions, safety_warning=None):
+        """Креирај реакција и автоматски креирај експеримент"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332'
+            )
+            cursor = conn.cursor()
+            
+            # Прво креирај реакција
+            cursor.execute('''
+                INSERT INTO reaction (teacher_id, element1_id, element2_id, product, conditions)
+                VALUES (%s, %s, %s, %s, %s)
+                RETURNING reaction_id
+            ''', (teacher_id, element1_id, element2_id, product, conditions))
+            
+            reaction_id = cursor.fetchone()[0]
+            
+            # Автоматски креирај експеримент за оваа реакција
+            cursor.execute('''
+                INSERT INTO experiment (teacher_id, reaction_id, result, safety_warning, time_stamp)
+                VALUES (%s, %s, %s, %s, CURRENT_TIMESTAMP)
+                RETURNING experiment_id
+            ''', (teacher_id, reaction_id, 
+                f'Експеримент за: {product}', 
+                safety_warning or 'Стандардни безбедносни мерки'))
+            
+            experiment_id = cursor.fetchone()[0]
+            
+            conn.commit()
+            cursor.close()
+            conn.close()
+            
+            print(f"Успешно креирани: Реакција #{reaction_id} и Експеримент #{experiment_id}")
+            return {'reaction_id': reaction_id, 'experiment_id': experiment_id}
+        except Exception as e:
+            print(f"Грешка при креирање реакција и експеримент: {e}")
+            if conn:
+                conn.rollback()
+                conn.close()
+            return None
+
+    @staticmethod
+    def get_experiment_by_reaction(reaction_id):
+        """Најди експеримент за дадена реакција"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            cursor.execute('''
+                SELECT * FROM experiment 
+                WHERE reaction_id = %s
+                ORDER BY time_stamp DESC
+                LIMIT 1
+            ''', (reaction_id,))
+            result = cursor.fetchone()
+            cursor.close()
+            conn.close()
+            return dict(result) if result else None
+        except Exception as e:
+            print(f"Грешка при барање експеримент: {e}")
+            return None
+
+    @staticmethod
+    def get_student_statistics(student_id):
+        """Земи статистики за студент"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            
+            cursor.execute('''
+                SELECT 
+                    (SELECT COUNT(*) FROM userparticipatesinexperiment WHERE user_id = %s) as experiment_count,
+                    (SELECT COUNT(*) FROM userviewselement WHERE user_id = %s) as element_count,
+                    (SELECT COUNT(*) FROM userviewslabequipment WHERE user_id = %s) as equipment_count,
+                    (SELECT COUNT(DISTINCT r.reaction_id) 
+                    FROM userparticipatesinexperiment up
+                    JOIN experiment e ON up.experiment_id = e.experiment_id
+                    JOIN reaction r ON e.reaction_id = r.reaction_id
+                    WHERE up.user_id = %s) as reaction_count
+            ''', (student_id, student_id, student_id, student_id))
+            
+            result = cursor.fetchone()
+            cursor.close()
+            conn.close()
+            return dict(result) if result else {'experiment_count': 0, 'element_count': 0, 'equipment_count': 0, 'reaction_count': 0}
+        except Exception as e:
+            print(f"Грешка при статистики за студент: {e}")
+            return {'experiment_count': 0, 'element_count': 0, 'equipment_count': 0, 'reaction_count': 0}
+
+    @staticmethod
+    def get_teacher_dashboard_statistics(teacher_id):
+        """Земи статистики за професорски dashboard"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            
+            cursor.execute('SELECT COUNT(*) as count FROM student WHERE teacher_id = %s', (teacher_id,))
+            student_count = cursor.fetchone()['count']
+            
+            cursor.execute('SELECT COUNT(*) as count FROM reaction WHERE teacher_id = %s', (teacher_id,))
+            reaction_count = cursor.fetchone()['count']
+            
+            cursor.execute('SELECT COUNT(*) as count FROM experiment WHERE teacher_id = %s', (teacher_id,))
+            experiment_count = cursor.fetchone()['count']
+            
+            cursor.execute('''
+                SELECT COUNT(*) as count 
+                FROM userparticipatesinexperiment up
+                JOIN student s ON up.user_id = s.student_id
+                WHERE s.teacher_id = %s 
+                AND DATE(up.participation_timestamp) = CURRENT_DATE
+            ''', (teacher_id,))
+            activity_today = cursor.fetchone()['count']
+            
+            cursor.close()
+            conn.close()
+            
+            return {
+                'student_count': student_count,
+                'reaction_count': reaction_count,
+                'experiment_count': experiment_count,
+                'activity_count': activity_today
+            }
+        except Exception as e:
+            print(f"Грешка при dashboard статистики: {e}")
+            return {
+                'student_count': 0,
+                'reaction_count': 0,
+                'experiment_count': 0,
+                'activity_count': 0
+            }
+
+    @staticmethod
+    def get_students_experiments_for_teacher(teacher_id):
+        """Земи експерименти на студенти за конкретен професор"""
+        try:
+            conn = psycopg2.connect(
+                host='localhost', port=9999,
+                database='db_202425z_va_prj_simlab25',
+                user='db_202425z_va_prj_simlab25_owner',
+                password='c9e5ebb7d332',
+                cursor_factory=RealDictCursor
+            )
+            cursor = conn.cursor()
+            cursor.execute('''
+                SELECT 
+                    u.user_name || ' ' || u.user_surname AS student_name,
+                    s.student_id,
+                    e.experiment_id,
+                    e.result,
+                    e.time_stamp,
+                    r.product,
+                    el1.symbol as element1_symbol,
+                    el2.symbol as element2_symbol,
+                    up.participation_timestamp as participation_date
+                FROM student s
+                JOIN "User" u ON s.student_id = u.user_id
+                JOIN userparticipatesinexperiment up ON s.student_id = up.user_id
+                JOIN experiment e ON up.experiment_id = e.experiment_id
+                JOIN reaction r ON e.reaction_id = r.reaction_id
+                JOIN elements el1 ON r.element1_id = el1.element_id
+                JOIN elements el2 ON r.element2_id = el2.element_id
+                WHERE s.teacher_id = %s
+                ORDER BY up.participation_timestamp DESC
+            ''', (teacher_id,))
+            result = cursor.fetchall()
+            cursor.close()
+            conn.close()
+            return result
+        except Exception as e:
+            print(f"Грешка: {e}")
+            return []
+    @staticmethod
+    def get_student_participation_experiments(student_id):
+        query = '''
+            SELECT ep.user_id,
+                r.product,
+                r.conditions,
+                el1.symbol AS element1_symbol,
+                el2.symbol AS element2_symbol,
+                el1.element_name AS element1_name,
+                el2.element_name AS element2_name,
+                e.result,
+                e.safety_warning,
+                e.time_stamp,
+                e.experiment_id
+            FROM userparticipatesinexperiment ep
+            JOIN experiment e ON ep.experiment_id = e.experiment_id
+            JOIN reaction r ON e.reaction_id = r.reaction_id
+            JOIN elements el1 ON r.element1_id = el1.element_id
+            JOIN elements el2 ON r.element2_id = el2.element_id
+            WHERE ep.user_id = %s
+            ORDER BY e.time_stamp DESC
+        '''
+        return DatabaseManager.execute_query(query, (student_id,))
+
+    @staticmethod
+    def execute_query(query, params=None):
+        conn = DatabaseManager.get_connection()
+        cur = conn.cursor()
+        cur.execute(query, params or ())
+        result = cur.fetchall()
+        cur.close()
+        conn.close()
+        return result
