qq

main/src/main/java/gsp/technologies/main/core/answer/AnswerEntity.java

@@ -0,0 +1,37 @@
+package gsp.technologies.main.core.answer;
+
+import org.hibernate.annotations.OnDelete;
+import org.hibernate.annotations.OnDeleteAction;
+
+import gsp.technologies.main.core.question.QuestionEntity;
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.ManyToOne;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+@Builder
+@Entity
+public class AnswerEntity {
+    @Id
+    @GeneratedValue(strategy=GenerationType.AUTO)
+    private Long id;
+    private String body;
+    private Boolean correct;
+    private String description;
+
+    @ManyToOne(fetch = FetchType.EAGER, optional = false)
+    @JoinColumn(name = "question", referencedColumnName = "id")
+    @OnDelete(action = OnDeleteAction.CASCADE)
+    private QuestionEntity question;
+
+}

main/src/main/java/gsp/technologies/main/core/answer/AnswerRepository.java

@@ -0,0 +1,12 @@
+package gsp.technologies.main.core.answer;
+
+import java.util.Collection;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface AnswerRepository extends JpaRepository<AnswerEntity, Long> {
+
+    Collection<AnswerEntity> findAllByQuestionId(Long qid);
+}

main/src/main/java/gsp/technologies/main/core/answer/AnswerService.java

@@ -0,0 +1,25 @@
+package gsp.technologies.main.core.answer;
+
+import java.util.Collection;
+
+import org.springframework.stereotype.Service;
+
+@Service
+public class AnswerService {
+    private final AnswerRepository repo;
+
+    public AnswerService(AnswerRepository repository) {
+        this.repo = repository;
+    }
+
+    public AnswerEntity save(AnswerEntity entity) {
+        return repo.save(entity);
+    }
+
+
+    public Collection<AnswerEntity> findAllByQuestionId(Long qid) {
+        return repo.findAllByQuestionId(qid);
+        
+    }
+
+}

main/src/main/java/gsp/technologies/main/core/question/QuestionEntity.java

@@ -4,7 +4,6 @@ import org.hibernate.annotations.OnDelete;
 import org.hibernate.annotations.OnDeleteAction;
 
 import gsp.technologies.main.core.course.CourseEntity;
-import gsp.technologies.main.core.organization.OrganizationEntity;
 import jakarta.persistence.Entity;
 import jakarta.persistence.FetchType;
 import jakarta.persistence.GeneratedValue;

main/src/main/java/gsp/technologies/main/core/question/QuestionRepository.java

@@ -1,9 +1,13 @@
 package gsp.technologies.main.core.question;
 
+import java.util.Collection;
+
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.stereotype.Repository;
 
 @Repository
 public interface QuestionRepository extends JpaRepository<QuestionEntity, Long> {
 
+    Collection<QuestionEntity> findQuestionsByCourseId(Long id);
+
 }

main/src/main/java/gsp/technologies/main/core/question/QuestionService.java

@@ -24,4 +24,12 @@ public class QuestionService {
         repo.deleteById(id);
     }
 
+    public Collection<QuestionEntity> findQuestionsByCourseId(Long id) {
+        return repo.findQuestionsByCourseId(id);
+    }
+
+    public QuestionEntity findById(Long qid) {
+        return repo.findById(qid).get();
+    }
+
 }

main/src/main/java/gsp/technologies/main/face/supplier/SupAnswerController.java

@@ -0,0 +1,23 @@
+package gsp.technologies.main.face.supplier;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import gsp.technologies.main.core.answer.AnswerService;
+
+@Controller
+@RequestMapping(path = "/supplier")
+public class SupAnswerController {
+    private static final Logger log = LoggerFactory.getLogger(SupAnswerController.class);
+
+    @Autowired
+    private AnswerService answerService;
+
+    public SupAnswerController(AnswerService answerService) {
+        this.answerService = answerService;
+    }
+
+}

main/src/main/java/gsp/technologies/main/face/supplier/SupCourseController.java

@@ -8,12 +8,17 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 
 import gsp.technologies.main.core.account.AccountService;
+import gsp.technologies.main.core.answer.AnswerEntity;
+import gsp.technologies.main.core.answer.AnswerService;
 import gsp.technologies.main.core.course.CourseEntity;
 import gsp.technologies.main.core.course.CourseService;
+import gsp.technologies.main.core.question.QuestionEntity;
+import gsp.technologies.main.core.question.QuestionService;
 
 import org.springframework.web.bind.annotation.PostMapping;
 
@@ -26,11 +31,19 @@ public class SupCourseController {
     @Autowired
     private CourseService courseService;
 
+    @Autowired
+    private QuestionService questionService;
+
+    @Autowired
+    private AnswerService answerService;
+
     @Autowired
     private AccountService accountService;
     
-    public SupCourseController(CourseService courseService, AccountService accountService) {
+    public SupCourseController(CourseService courseService, QuestionService questionService, AnswerService answerService, AccountService accountService) {
         this.courseService = courseService;
+        this.questionService = questionService;
+        this.answerService = answerService;
         this.accountService = accountService;
     }
 
@@ -63,4 +76,81 @@ public class SupCourseController {
         
         return "redirect:/supplier/courses";
     }
+
+    @GetMapping("/courses/{id}/questions")
+    public String questions(@PathVariable(name = "id", required = true) Long id,
+        Model model) {
+        log.info("GET /supplier/courses/{}/questions", id);
+
+        if (id == Long.parseLong("0")) {
+            model.addAttribute("courses", courseService.findAll());
+            return "/pages/supplier/questions";
+        }
+
+        model.addAttribute("questions", questionService.findQuestionsByCourseId(id));
+
+        model.addAttribute("courses", courseService.findAll());
+
+        model.addAttribute("course", courseService.findById(id));
+        return "/pages/supplier/questions";
+    }
+
+    @PostMapping("/courses/{id}/questions")
+    public String createQuestion(@PathVariable(name = "id", required = true) Long id,
+            @RequestParam(name = "question-body", required = true) String body) {
+        log.info("POST /supplier/courses/{}/questions", id);
+        QuestionEntity entity = QuestionEntity.builder()
+            .body(body)
+            .course(courseService.findById(id))
+            .build();
+        questionService.save(entity);
+        
+        return "redirect:/supplier/courses/" + id + "/questions";
+    }
+
+    @GetMapping("/courses/{id}/questions/{qid}/delete")
+    public String deleteQuestion(@PathVariable(name = "id", required = true) Long id,
+            @PathVariable(name = "qid", required = true) Long qid) {
+        log.info("GET /supplier/courses/{}/questions/{}/delete", id, qid);
+        questionService.delete(qid);
+        return "redirect:/supplier/courses/" + id + "/questions";
+    }
+
+    @GetMapping("/courses/{id}/questions/{qid}/answers")
+    public String answers(Model model,
+            @PathVariable(name = "id", required = true) Long id,
+            @PathVariable(name = "qid", required = true) Long qid) {
+        log.info("GET /supplier/courses/{}/questions/{}/answers", id, qid);
+        model.addAttribute("answers", answerService.findAllByQuestionId(qid));
+        model.addAttribute("question", questionService.findById(qid));
+        return "/pages/supplier/answers";
+    }
+
+    @PostMapping("/courses/{id}/questions/{qid}/answers")
+    public String answerCrate(
+        @PathVariable(name = "id", required = true) Long id,
+        @PathVariable(name = "qid", required = true) Long qid,
+        @RequestParam(name="body", required = true) String body,
+        @RequestParam(name="description", required = false) String description,
+        @RequestParam(name="correct", required = false) Boolean correct
+    ){
+        log.info("POST /supplier/courses/{}/questions/{}/answers", id, qid);
+
+        if (correct == null) correct = false;
+        if (description == null) description = "";
+
+        AnswerEntity entity = AnswerEntity.builder()
+            .body(body)
+            .correct(correct)
+            .description(description)
+            .question(questionService.findById(qid))
+            .build();
+        answerService.save(entity);
+
+        return "redirect:/supplier/courses/"
+            + id
+            + "/questions/"
+            + qid
+            + "/answers";
+    }
 }

main/src/main/java/gsp/technologies/main/face/user/UserQuizController.java

@@ -1,5 +1,8 @@
 package gsp.technologies.main.face.user;
 
+import java.util.ArrayList;
+import java.util.Collection;
+
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -10,17 +13,31 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 
 import gsp.technologies.main.core.account.AccountService;
+import gsp.technologies.main.core.answer.AnswerEntity;
+import gsp.technologies.main.core.answer.AnswerService;
+import gsp.technologies.main.core.question.QuestionEntity;
+import gsp.technologies.main.core.question.QuestionService;
 
 
 @Controller
 @RequestMapping(path = "/user")
 public class UserQuizController {
     private static final Logger log = LoggerFactory.getLogger(UserQuizController.class);
+
     @Autowired
     private AccountService accountService;
 
-    public UserQuizController(AccountService accountService) {
+    @Autowired
+    private QuestionService questionService;
+
+    @Autowired
+    private AnswerService answerService;
+
+
+    public UserQuizController(AccountService accountService, QuestionService questionService, AnswerService answerService) {
         this.accountService = accountService;
+        this.questionService = questionService;
+        this.answerService = answerService;
     }
 
     @GetMapping("/quiz")
@@ -34,7 +51,18 @@ public class UserQuizController {
 
         model.addAttribute("account", accountService.findById(Long.valueOf(accountid)));
 
+        Collection<QuestionEntity> questions = questionService.findQuestionsByCourseId(Long.parseLong(courseid));
+        model.addAttribute("questions", questions);
+
+        Collection<AnswerEntity> answers = new ArrayList<>();
+        for (QuestionEntity entity : questions) {
+            answers.addAll(answerService.findAllByQuestionId(entity.getId()));
+        }
+
+        model.addAttribute("answers", answers);
+
 
+        // model.addAttribute("answers", answerService.findAnswersByCourseId(Long.parseLong(courseid)));
         return "pages/user/quiz";
     }
 }

main/src/main/resources/static/content/courses/102/main.md

@@ -0,0 +1,21 @@
+# Дефектоскопист. Разрушающий контроль
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis inventore eveniet sunt modi deserunt, officia saepe aut in architecto id eaque reiciendis ullam eos deleniti minima, facere asperiores temporibus necessitatibus.

main/src/main/resources/templates/pages/supplier/answers.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>exam-answers</title>
+    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>
+</head>
+<header>
+    <!-- Кнопки навигации -->
+    <div th:insert="~{shards/navi :: supplier}"></div>
+</header>
+
+<body>
+    <!-- Курс -->
+    <!-- Вопрос -->
+    <div th:insert="~{shards/answers :: info(question=${question})}"></div>
+    <!-- Добавить ответ -->
+    <div th:insert="~{shards/answers :: create(question=${question})}"></div>
+    
+    <!-- Список ответов -->
+    <ul>
+        <li th:each="answer : ${answers}">
+            <div th:insert="~{shards/answers :: answer(answer=${answer})}"></div>
+        </li>
+    </ul>
+</body>
+
+<footer>
+    <div th:insert="~{shards/footer :: copy}"></div>
+</footer>
+</html>

main/src/main/resources/templates/pages/supplier/questions.html

@@ -14,14 +14,25 @@ xmlns:th="http://www.thymeleaf.org">
 </header>
 
 <body>
-    <h1>Вопросы</h1>
+    <!-- Смена текущего курса -->
+    <div th:insert="~{shards/questions :: course-select(courses=${courses})}"></div>
+
     <!-- Давление нового вопроса -->
-    <div th:insert="~{shards/questions :: create(courses=${courses})}"></div>
+    <div th:if="${course}" th:insert="~{shards/questions :: create(course=${course})}"></div>
     <!-- Перечень вопросов -->
-    <div th:insert="~{shards/questions :: list(questions=${questions})}"></div>
+    <div th:if="${questions}" th:insert="~{shards/questions :: list(questions=${questions})}"></div>
 </body>
 
 <footer>
     <div th:insert="~{shards/footer :: copy}"></div>
 </footer>
+<script>
+    var courseSelect = document.getElementById('course-select');
+
+    courseSelect.addEventListener('change', function() {
+        var courseId = courseSelect.value;
+        window.location.href = '/supplier/courses/' + courseId + '/questions';
+    });
+
+</script>
 </html>

main/src/main/resources/templates/pages/user/quiz.html

@@ -21,7 +21,7 @@ xmlns:th="http://www.thymeleaf.org">
 </header>
 <body>
     <!-- опрос -->
-    <!-- <div th:insert="~{shards/quizes :: main}"></div> -->
+    <div th:insert="~{shards/quizes :: main(questions=${questions}, answers=${answers})}"></div>
 </body>
 <footer>
     <div th:insert="~{shards/footer :: copy}"></div>

main/src/main/resources/templates/shards/answers.html

@@ -0,0 +1,98 @@
+<!-- Коллекция фрагментов для построения страницы организаций -->
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+    
+  <body>
+    <div th:fragment="info(question)">
+        <hr>
+        <h2>Курс: <span th:text="${question.course.name}"></span></h2>
+        <h2>Вопрос: <span th:text="${question.body}"></span></h2>
+        
+    </div>
+
+    <!-- Единичный ответ -->
+    <div th:fragment="answer(answer)">
+        <hr>
+        <h2>Ответ:</h2>
+        <p th:text="${answer.body}"></p>
+        <p>----------------</p>
+        <p><b>Статус ответа: </b><span th:text="${answer.correct}"></span></p>
+        <p>----------------</p>
+        <p><b>Пояснения к ответу: </b><span th:text="${answer.description}"></span></p>
+        <!-- редактировать -->
+        <!-- удалить -->
+         
+    </div>
+
+    <!-- Добавление нового ответа -->
+    <div th:fragment="create">
+        <hr>
+        <h2>Добавление нового ответа:</h2>
+        <form th:action="@{/supplier/courses/{id}/questions/{qid}/answers(id=${question.course.id}, qid=${question.id})}" th:method="post">
+            <label for="body">Содержание ответа: </label>
+            <br>
+            <textarea rows="5" cols="66" id="body" name="body" placeholder="введите текст ответа тут..." required></textarea>
+            <br>
+            <p><input type="checkbox" name="correct" value="true"> Верный ответ</p>
+            <label for="description">Обоснование верного ответа, ссылки на источники:</label>
+            <br>
+            <textarea rows="5" cols="66" id="description" name="description" placeholder="укажите пояснения к ответу тут ..." ></textarea>
+            <br>
+            <br>
+            <input type="submit" value="Добавить">
+        </form>
+    </div>
+
+
+    <!-- Смена текущего курса -->
+    <!-- <div th:fragment="course-select(courses)">
+      <hr>
+        <label for="course-select"><b>Сменить текущий курс: </b></label>
+        <select id="course-select" name="courseid">
+            <option value="0" disabled selected>курс</option>
+            <option th:each="option : ${courses}" th:value="${option.id}" th:text="${option.name}"></option>
+        </select>
+        <br>
+    </div> -->
+
+    <!-- Перечень вопросов -->
+    <!-- <div th:fragment="list(questions)">
+        <hr>
+        <h2>Список вопросов:</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Название курса</th>
+              <th>Содержание вопроса</th>
+              <th>Действия</th>
+              <th>Ответы</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr th:each="question : ${questions}">
+              <td th:text="${question.course.name}"></td>
+              <td th:text="${question.body}"></td>
+              <td>
+                <a th:href="@{/supplier/courses/{id}/questions/{qid}/delete(id=${question.course.id}, qid=${question.id})}">Удалить вопрос</a>
+                <a th:href="@{/supplier/courses/{id}/questions/{qid}/answers(id=${question.course.id}, qid=${question.id})}">Добавить ответ</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+    </div> -->
+
+    
+
+    <!-- Редактирование организации -->
+    <!-- <div th:fragment="edit(organization)">
+        <hr>
+        <h2>Редактирование организации: <span th:text="${organization.name}"></span></h2>
+        <form th:action="@{/supplier/organizations/{id}/edit(id=${organization.id})}" th:method="post">
+            <label for="name" >Название организации: </label>
+            <input type="text" th:name="name" th:value="${organization.name}">
+            <br>
+            <input type="submit" value="Сохранить">
+        </form>
+    </div> -->
+  </body>
+</html>

main/src/main/resources/templates/shards/courses.html

@@ -22,6 +22,7 @@
               <td>
                 <a th:href="@{/supplier/courses/{id}/edit(id=${course.id})}">Редактировать</a>
                 <a th:href="@{/supplier/courses/{id}/delete(id=${course.id})}">Удалить</a>
+                <a th:href="@{/supplier/courses/{id}/questions(id=${course.id})}">Вопросы</a>
               </td>
             </tr>
           </tbody>

main/src/main/resources/templates/shards/questions.html

@@ -3,7 +3,18 @@
 <html xmlns:th="http://www.thymeleaf.org">
     
   <body>
-    <!-- Перечень организаций -->
+    <!-- Смена текущего курса -->
+    <div th:fragment="course-select(courses)">
+      <hr>
+        <!-- селект курса -->
+        <label for="course-select"><b>Сменить текущий курс: </b></label>
+        <select id="course-select" name="courseid">
+            <option value="0" disabled selected>курс</option>
+            <option th:each="option : ${courses}" th:value="${option.id}" th:text="${option.name}"></option>
+        </select>
+        <br>
+    </div>
+    <!-- Перечень вопросов -->
     <div th:fragment="list(questions)">
         <hr>
         <h2>Список вопросов:</h2>
@@ -21,8 +32,8 @@
               <td th:text="${question.course.name}"></td>
               <td th:text="${question.body}"></td>
               <td>
-                <a th:href="@{/supplier/questions/{id}/delete(id=${question.id})}">Удалить вопрос</a>
+                <a th:href="@{/supplier/courses/{id}/questions/{qid}/delete(id=${question.course.id}, qid=${question.id})}">Удалить вопрос</a>
-                <a th:href="@{/supplier/answers/{id}(id=${question.id})}">Добавить ответ</a>
+                <a th:href="@{/supplier/courses/{id}/questions/{qid}/answers(id=${question.course.id}, qid=${question.id})}">Добавить ответ</a>
               </td>
             </tr>
           </tbody>
@@ -30,21 +41,20 @@
     </div>
 
     <!-- Добавление нового вопроса -->
-    <div th:fragment="create(courses)">
+    <div th:fragment="create(course)">
+        <hr>
+        <h1>Вопросы  к курсу: [[${course.name}]]</h1>
         <hr>
         
         <h2>Добавление нового вопроса:</h2>
-        <form th:action="@{/supplier/questions}" th:method="post">
+        <form th:action="@{/supplier/courses/{id}/questions(id=${course.id})}" th:method="post">
-            <!-- селект курса -->
+            
-            <label for="course-select">Выберите курс</label>
+
-            <select id="course-select" name="courseid">
+            <input type="hidden" name="courseid" th:value="${course.id}">
-                <option value="0" disabled selected>курс</option>
+
-                <option th:each="option : ${courses}" th:value="${option.id}" th:text="${option.name}"></option>
-            </select>
-            <br>
             <label for="questions-body">Содержание вопроса: </label>
             <br>
-            <textarea rows="5" cols="33" id="question-body" name="question-body" placeholder="введите вопрос тут..." required></textarea>
+            <textarea rows="5" cols="66" id="question-body" name="question-body" placeholder="введите вопрос тут..." required></textarea>
             <br>
             <input type="submit" value="Добавить">
         </form>

main/src/main/resources/templates/shards/quizes.html

@@ -3,9 +3,22 @@
 <html xmlns:th="http://www.thymeleaf.org">
     
   <body>
-    <div th:fragment="main">
+    <div th:fragment="main(questions, answers)">
       <hr>
-      <h1>ОПРОС</h1>
+      <h1>Вопросы:</h1>
+      <div th:each="question : ${questions}">
+        <!-- <li th:text="${question.body}"> -->
+        <li th:text="${question.body}">
+          <div th:each="answer : ${answers}">
+            <p th:if="${answer.question.id == question.id}" th:text="${answer.body}"></p>
+          </div>
+        </li>
+      </div>
+      <!-- <p>------------</p> -->
+      <!-- <ul th:each="answer : ${answers}">
+        <li th:text="${answer.body}"></li>
+      </ul> -->
+
     </div>
   </body>
 </html>