API tools faq
paste
Advertisement
max2201111

template/index.html very good bez GT

max2201111
Jun 16th, 2024
627
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.30 KB | Science | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Translation App</title>
  7.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  8.     <style>
  9.         .translation-content {
  10.             display: none;
  11.         }
  12.         .counter {
  13.             position: absolute;
  14.             top: 20px;
  15.             left: 50%;
  16.             transform: translateX(-50%);
  17.             font-size: 18px;
  18.             border: 2px solid #000;
  19.             border-radius: 50%;
  20.             padding: 10px;
  21.             width: 50px;
  22.             height: 50px;
  23.             display: flex;
  24.             align-items: center;
  25.             justify-content: center;
  26.             text-align: center;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="container mt-5">
  32.         <div class="counter">
  33.             {{ session['correct'] }}/{{ session['total'] }}
  34.         </div>
  35.         <h1>Welcome, {{ current_user.username }}!</h1>
  36.         <form action="{{ url_for('index') }}" method="POST" class="form-inline mb-3">
  37.             <input type="text" name="term" class="form-control mr-2" placeholder="Enter term">
  38.             <select name="direction" class="form-control mr-2">
  39.                 <option value="en_cz">English to Czech</option>
  40.                 <option value="cz_en">Czech to English</option>
  41.             </select>
  42.             <button type="submit" class="btn btn-primary">Translate</button>
  43.         </form>
  44.  
  45.         {% with messages = get_flashed_messages(with_categories=true) %}
  46.         {% if messages %}
  47.         <div class="alert alert-info">
  48.             {% for category, message in messages %}
  49.             <p>{{ message }}</p>
  50.             {% endfor %}
  51.         </div>
  52.         {% endif %}
  53.         {% endwith %}
  54.  
  55.         {% if error %}
  56.         <div class="alert alert-danger">{{ error }}</div>
  57.         {% endif %}
  58.  
  59.         <div class="btn-group mb-3" role="group" aria-label="Basic example">
  60.             <form action="{{ url_for('delete_all') }}" method="POST">
  61.                 <button type="submit" class="btn btn-danger">Delete All Translations</button>
  62.             </form>
  63.             <form action="{{ url_for('reset_counter') }}" method="POST">
  64.                 <button type="submit" class="btn btn-warning">Reset Counter</button>
  65.             </form>
  66.             <a href="{{ url_for('quiz') }}" id="take-quiz-btn" class="btn btn-info">Take a Quiz</a>
  67.             <a href="{{ url_for('logout') }}" class="btn btn-secondary">Logout</a>
  68.         </div>
  69.  
  70.         <h2>Your Translations (EN-CZ)</h2>
  71.         <ul class="list-group mb-3">
  72.             {% for translation in en_cz_translations %}
  73.             <li class="list-group-item">
  74.                 <strong>{{ translation.term }}</strong>
  75.                 <div class="float-right">
  76.                     <button class="btn btn-sm btn-secondary toggle-btn" type="button">Toggle</button>
  77.                     <form action="{{ url_for('delete', id=translation.id) }}" method="POST" class="d-inline">
  78.                         <button type="submit" class="btn btn-sm btn-danger">Delete</button>
  79.                     </form>
  80.                 </div>
  81.                 <div class="translation-content mt-2">
  82.                     {% for trans_group in translation.translations %}
  83.                         <ul>
  84.                             {% for trans in trans_group %}
  85.                                 <li>
  86.                                     {% if trans.morf %}
  87.                                         <strong>Morfo: </strong>{{ trans.morf }}<br>
  88.                                     {% endif %}
  89.                                     {% if trans.desc %}
  90.                                         <strong>Desc: </strong>{{ trans.desc|safe }}<br>
  91.                                     {% endif %}
  92.                                     {% if trans.note %}
  93.                                         <strong>Note: </strong>{{ trans.note|safe }}<br>
  94.                                     {% endif %}
  95.                                     {% if trans.samples %}
  96.                                         <strong>Samples: </strong>
  97.                                         <ul>
  98.                                             {% for sample in trans.samples %}
  99.                                             <li>{{ sample|safe }}</li>
  100.                                             {% endfor %}
  101.                                         </ul>
  102.                                     {% endif %}
  103.                                     {% if trans.trans %}
  104.                                         <strong>Translations: </strong>
  105.                                         <ul>
  106.                                             {% for t in trans.trans %}
  107.                                             <li>{{ t|safe }}</li>
  108.                                             {% endfor %}
  109.                                         </ul>
  110.                                     {% endif %}
  111.                                     {% if trans.coll2 %}
  112.                                         <strong>Collocations: </strong>
  113.                                         <ul>
  114.                                             {% for coll in trans.coll2 %}
  115.                                             <li>{{ coll|safe }}</li>
  116.                                             {% endfor %}
  117.                                         </ul>
  118.                                     {% endif %}
  119.                                 </li>
  120.                             {% endfor %}
  121.                         </ul>
  122.                     {% endfor %}
  123.                 </div>
  124.             </li>
  125.             {% endfor %}
  126.         </ul>
  127.  
  128.         <h2>Your Translations (CZ-EN)</h2>
  129.         <ul class="list-group mb-3">
  130.             {% for translation in cz_en_translations %}
  131.             <li class="list-group-item">
  132.                 <strong>{{ translation.term }}</strong>
  133.                 <div class="float-right">
  134.                     <button class="btn btn-sm btn-secondary toggle-btn" type="button">Toggle</button>
  135.                     <form action="{{ url_for('delete', id=translation.id) }}" method="POST" class="d-inline">
  136.                         <button type="submit" class="btn btn-sm btn-danger">Delete</button>
  137.                     </form>
  138.                 </div>
  139.                 <div class="translation-content mt-2">
  140.                     {% for trans_group in translation.translations %}
  141.                         <ul>
  142.                             {% for trans in trans_group %}
  143.                                 <li>
  144.                                     {% if trans.morf %}
  145.                                         <strong>Morfo: </strong>{{ trans.morf }}<br>
  146.                                     {% endif %}
  147.                                     {% if trans.desc %}
  148.                                         <strong>Desc: </strong>{{ trans.desc|safe }}<br>
  149.                                     {% endif %}
  150.                                     {% if trans.note %}
  151.                                         <strong>Note: </strong>{{ trans.note|safe }}<br>
  152.                                     {% endif %}
  153.                                     {% if trans.samples %}
  154.                                         <strong>Samples: </strong>
  155.                                         <ul>
  156.                                             {% for sample in trans.samples %}
  157.                                             <li>{{ sample|safe }}</li>
  158.                                             {% endfor %}
  159.                                         </ul>
  160.                                     {% endif %}
  161.                                     {% if trans.trans %}
  162.                                         <strong>Translations: </strong>
  163.                                         <ul>
  164.                                             {% for t in trans.trans %}
  165.                                             <li>{{ t|safe }}</li>
  166.                                             {% endfor %}
  167.                                         </ul>
  168.                                     {% endif %}
  169.                                     {% if trans.coll2 %}
  170.                                         <strong>Collocations: </strong>
  171.                                         <ul>
  172.                                             {% for coll in trans.coll2 %}
  173.                                             <li>{{ coll|safe }}</li>
  174.                                             {% endfor %}
  175.                                         </ul>
  176.                                     {% endif %}
  177.                                 </li>
  178.                             {% endfor %}
  179.                         </ul>
  180.                     {% endfor %}
  181.                 </div>
  182.             </li>
  183.             {% endfor %}
  184.         </ul>
  185.     </div>
  186.     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  187.     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  188.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  189.     <script>
  190.         document.addEventListener('DOMContentLoaded', function() {
  191.             var toggleButtons = document.querySelectorAll('.toggle-btn');
  192.             toggleButtons.forEach(function(button) {
  193.                 button.addEventListener('click', function() {
  194.                     var content = this.parentElement.nextElementSibling;
  195.                     if (content.style.display === 'none' || content.style.display === '') {
  196.                         content.style.display = 'block';
  197.                     } else {
  198.                         content.style.display = 'none';
  199.                     }
  200.                 });
  201.             });
  202.  
  203.             document.getElementById('take-quiz-btn').addEventListener('click', function() {
  204.                 fetch('/get_translations')
  205.                     .then(response => response.json())
  206.                     .then(data => {
  207.                         console.log('Translations:', data.translations);
  208.                         // Perform any additional actions with the data here
  209.                         window.location.href = "{{ url_for('quiz') }}";
  210.                     })
  211.                     .catch(error => {
  212.                         console.error('Error fetching translations:', error);
  213.                     });
  214.             });
  215.         });
  216.     </script>
  217. </body>
  218. </html>
  219.  
  220.  
  221.  
  222.  
  223.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!