base.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1"
  8. >
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  10. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  13. <title>
  14. {% block title %}APP{% endblock %}
  15. </title>
  16. <link
  17. rel = "icon"
  18. href = "static/logo/hometag_logo.png"
  19. type = "image/x-icon"
  20. >
  21. </head>
  22. <style>
  23. .navbar-nav-right {
  24. position: absolute;
  25. top: 2px;
  26. right: 0px;
  27. list-style-type: none;
  28. }
  29. .navbar-nav-middle {
  30. position: absolute;
  31. top: 5px;
  32. right: 380px;
  33. list-style-type: none;
  34. }
  35. a {
  36. font-size: 18px;
  37. }
  38. .navbar-nav > li{
  39. padding-left:30px;
  40. }
  41. body {
  42. font: 400 15px/1.8 "Lato", sans-serif;
  43. }
  44. </style>
  45. <body>
  46. <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
  47. <a class="navbar-brand" href="/"><img src="static/logo/hometag_logo.png" alt="hometag_logo" id="logo" width="40"/></a></a>
  48. <!-- Search Function for search Art-->
  49. <ul class="navbar-nav">
  50. {% if user.is_authenticated %} <!-- shows only if user is logged in -->
  51. <li class="nav-item">
  52. <a class="nav-link" href="/">Market</a>
  53. <a class="nav-link" href="/create_art">Create Art</a>
  54. </li>
  55. </ul>
  56. <ul class="navbar-nav-right">
  57. <li class="nav-item">
  58. <a href="/profile">Profile</a>
  59. <a href="/logout"><img src="static/logo/logout_logo.gif" alt="logout_logo" id="logo" width="86"/></a>
  60. </li>
  61. </ul>
  62. {% else %}
  63. <li class="nav-item">
  64. <a class="nav-link" href="/">Market</a>
  65. </li>
  66. </ul>
  67. <ul class="navbar-nav-right">
  68. <li class="nav-item">
  69. <a href="/login">Login</a>
  70. <a href="/register">Register</a>
  71. </li>
  72. </ul>
  73. {% endif %}
  74. </ul>
  75. <form action="" method="POST" class="navbar-nav-middle">
  76. <input
  77. type="search_art"
  78. class="form-control"
  79. id="search_art"
  80. name="search_art"
  81. placeholder="Seach Art"
  82. />
  83. <label for="search_art"></label>
  84. </div>
  85. </form>
  86. </nav>
  87. <!-- For Flash Errors to User -->
  88. {% with messages = get_flashed_messages(with_categories=true) %}
  89. {% if messages %}
  90. {% for category, message in messages %}
  91. {% if category == 'error' %}
  92. <div class="alert alert-danger alter-dismissable fade show", role="alert" style="z-index:2;">
  93. {{ message }}
  94. <button type="button" class="close" data-dismiss="alert">
  95. <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
  96. </button>
  97. </div>
  98. {% else %}
  99. <div class="alert alert-success alter-dismissable fade show", role="alert" style="z-index:2;">
  100. {{ message }}
  101. <button type="button" class="close" data-dismiss="alert">
  102. <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
  103. </button>
  104. </div>
  105. {% endif %}
  106. {% endfor %}
  107. {% endif %}
  108. {% endwith %}
  109. <div class="container" style="position:relative; top:200px;"> <!-- added the style here for backend testing! -->
  110. {% block content %}
  111. {% endblock %}
  112. </div>
  113. {% block modal %}{% endblock %}
  114. {% block script %}{% endblock %}
  115. </body>
  116. </html>