base_inline.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <META http-equiv="Content-Style-Type" content="text/css">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="icon" type="image/x-icon" sizes="32x32" href="{{ url_for("static", filename="cv_db/favicon.ico") }}">
  8. {% if js %}
  9. <script type="text/javascript" src="{{ url_for("static", filename="cv_db/js/jquery.js") }}"></script>
  10. <script type="text/javascript">
  11. var do_alert;
  12. $(document).ready( function() {
  13. try {
  14. do_alert = function(s_in) {
  15. s_in = String(s_in).replace("\n", "<br />");
  16. $("#div_alert").show();
  17. //document.getElementById("div_alert").innerHTML = s_in;
  18. $("#div_alert").html(s_in);
  19. }//end of do_alert function
  20. $.fn.redraw =function(){
  21. $(this).each(function(){var redraw =this.offsetHeight;});
  22. };//end of $.fn.redraw function
  23. var s_server_url = "{{ url }}";
  24. $.each($("ul.nav").find("a"), function(ix, a) {
  25. if (s_server_url.endsWith($(a).attr("href"))) { $(a).attr("aria-current", "true"); } else { $(a).attr("aria-current", ""); }
  26. });// end of .each on nav links
  27. // alert([s_url, s_server_url]);
  28. var s_msg = "";
  29. {% with messages = get_flashed_messages() %}
  30. {% if messages %}
  31. s_msg = "{{ messages[-1] }}";
  32. {% endif %}
  33. {% endwith %}
  34. if (String(s_msg).length>0) {
  35. window.setTimeout( function() {
  36. $("#div_alert").toggleClass("warning");
  37. do_alert(s_msg);
  38. }, 300);
  39. }
  40. } catch(e) {
  41. var s_err = String(e.name) + "\nmessage:" + String(e.message);
  42. s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
  43. alert("Error! " + s_err);
  44. }//end of catch
  45. });//end of document ready
  46. </script>
  47. {% endif %}{# end of js check #}
  48. <title>C.V. Database - {% block title %}{% endblock %}</title>
  49. <!-- static/cv_db/css/styles.css -->
  50. <style>
  51. @font-face {
  52. font-family: CaviarDreams;
  53. src:
  54. local("CaviarDreams"),
  55. url("{{ url_for("static", filename="cv_db/css/alteram/CaviarDreams.woff") }}") format("woff"),
  56. url("{{ url_for("static", filename="cv_db/css/alteram/CaviarDreams.ttf") }}") format('truetype');
  57. font-weight: normal;
  58. }
  59. @font-face {
  60. font-family: CaviarDreams;
  61. src:
  62. local("CaviarDreams"),
  63. url("{{ url_for("static", filename="cv_db/css/alteram/CaviarDreams_Bold.woff") }}") format("woff"),
  64. url("{{ url_for("static", filename="cv_db/css/alteram/CaviarDreams_Bold.ttf") }}") format('truetype');
  65. font-weight: bold;
  66. font-style: normal;
  67. }
  68. :root {
  69. --primary-color: rgb(39, 37, 92);
  70. --accent-color: rgb(250, 122, 30);
  71. --accent-light: rgba(250, 122, 30, 0.8);
  72. --accent-lighter: rgba(250, 122, 30, 0.1);
  73. --background-color: white;
  74. --table-header-bg: rgba(39, 37, 92, 0.9);
  75. --table-row-hover: rgba(250, 122, 30, 0.05);
  76. --table-border: rgba(39, 37, 92, 0.2);
  77. } /* end of :root */
  78. * {
  79. margin: 0;
  80. padding: 0;
  81. box-sizing: border-box;
  82. } /* end of * */
  83. body {
  84. font-family: CaviarDreams, Arial, sans-serif;
  85. background-color: var(--background-color);
  86. color: var(--primary-color);
  87. min-height: 100vh;
  88. display: flex;
  89. flex-direction: column;
  90. } /* end of body */
  91. .background-container {
  92. position: fixed;
  93. top: 0;
  94. left: 0;
  95. width: 100%;
  96. height: 100vh;
  97. background-image: url("{{ url_for("static", filename="cv_db/css/alteram/alteram1_1_600x197.png") }}");
  98. background-repeat: no-repeat;
  99. background-position: center;
  100. background-attachment: fixed;
  101. background-size: contain;
  102. z-index: -1;
  103. opacity: 0.15;
  104. } /* end of .background-container */
  105. h2 {
  106. font-family: CaviarDreams, Arial, sans-serif;
  107. font-size: 14pt;
  108. background-color: white;
  109. color: rgb(39, 37, 92);
  110. } /* end of h2 */
  111. .title h2 {
  112. font-family: CaviarDreams, Arial, sans-serif;
  113. color: var(--primary-color);
  114. font-size: 2rem;
  115. margin-bottom: 2rem;
  116. text-align: center;
  117. } /* end of .title h2 */
  118. nav {
  119. display: flex;
  120. align-items: center;
  121. } /* end of nav */
  122. ul.nav {
  123. list-style: none;
  124. display: flex;
  125. gap: 1rem;
  126. justify-content: center;
  127. } /* end of ul.nav */
  128. ul.nav li a {
  129. color: var(--accent-color);
  130. text-decoration: none;
  131. font-weight: 600;
  132. padding: 0.75rem 1.5rem;
  133. border-radius: 4px;
  134. transition: all 0.3s ease;
  135. background-color: transparent;
  136. border: 2px solid var(--accent-color);
  137. } /* end of ul.nav li a */
  138. ul.nav li a:hover,
  139. ul.nav li a[aria-current="true"] {
  140. background-color: var(--accent-color);
  141. color: white;
  142. transform: translateY(-2px);
  143. box-shadow: 0 4px 12px rgba(250, 122, 30, 0.2);
  144. } /* end of combination of ul.nav li a:hover, ul.nav li a[aria-current="true"] */
  145. main {
  146. padding-top: 250px;
  147. min-height: calc(100vh - 100px);
  148. justify-content: center;
  149. } /* end of main */
  150. a {
  151. color: rgb(250,122,30);
  152. } /* end of a */
  153. a.visited {
  154. color: rgb(250,122,30);
  155. } /* end of a.visited */
  156. #tbl_layout {
  157. border: 0px solid transparent;
  158. } /* end of #tbl_layout */
  159. #tbl_layout td {
  160. text-align: left;
  161. } /* end of #tbl_layout td
  162. .td_nav {
  163. width: 20%;
  164. } /* end of td.nav */
  165. .td_top {
  166. vertical-align: top;
  167. } /* end of .td_top */
  168. div {
  169. line-height: 1.2;
  170. margin-bottom: 10px;
  171. } /* end of div */
  172. table.multirow {
  173. border: 2px solid DimGray;
  174. }
  175. table.multirow tr {
  176. vertical-align: top;
  177. }
  178. table.multirow th {
  179. text-align: left;
  180. border: 1px solid DimGray;
  181. }
  182. table.multirow td {
  183. text-align: left;
  184. border: 1px solid DimGray;
  185. }
  186. .header-container {
  187. display: flex;
  188. flex-direction: column;
  189. gap: 1rem;
  190. padding: 5 2rem;
  191. justify-content: space-between;
  192. max-width: 1140px;
  193. margin: 0 auto;
  194. align-items: center;
  195. } /* end of .header-container */
  196. .logo-area {
  197. width: 180px;
  198. height: 60px;
  199. background-image: url("{{ url_for("static", filename="cv_db/css/alteram/alteram1_1_600x197.png") }}");
  200. background-size: contain;
  201. background-repeat: no-repeat;
  202. background-position: left center;
  203. margin-left: -250px;
  204. } /* end of .logo-area */
  205. .content-container {
  206. max-width: 1140px;
  207. margin: 2rem auto;
  208. padding: 0 2rem;
  209. } /* end of .content-container */
  210. .table-container {
  211. background: rgba(255, 255, 255, 0.95);
  212. border-radius: 8px;
  213. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  214. overflow: hidden;
  215. margin: 2rem auto;
  216. width: 100%; /* Increased width */
  217. max-width: 1400px; /* Optional: limit max width */
  218. display: flex;
  219. justify-content: center; /* centers the table */
  220. padding: 2rem;
  221. } /* end of .table-container */
  222. .data-table {
  223. width: 90%; /* increase or adjust to 100% if needed */
  224. border-collapse: collapse;
  225. border: 1px solid var(--table-border);
  226. background-color: rgba(255, 255, 255, 0.95);
  227. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  228. border-radius: 8px;
  229. overflow: hidden;
  230. } /* end of .data-table */
  231. .data-table th {
  232. background-color: var(--table-header-bg);
  233. color: white;
  234. padding: 1rem;
  235. font-weight: bold;
  236. border: 1px solid rgba(39, 37, 92, 0.2);
  237. text-align: left;
  238. } /* end of .data-table th */
  239. .data-table td {
  240. padding: 1rem;
  241. border-bottom: 1px solid var(--table-border);
  242. border: 1px solid rgba(39, 37, 92, 0.2);
  243. text-align: left;
  244. } /* end of .data-table td */
  245. .data-table tbody tr:hover {
  246. background-color: var(--table-row-hover);
  247. } /* end of .data-table tbody tr:hover */
  248. #div_alert {
  249. position: fixed;
  250. bottom: 20px;
  251. left: 50%;
  252. transform: translateX(-50%);
  253. background-color: var(--accent-color);
  254. color: white;
  255. padding: 1rem 2rem;
  256. border-radius: 4px;
  257. z-index: 1000;
  258. display: none;
  259. max-width: 80%;
  260. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  261. } /* end of #div_alert */
  262. #div_alert.warning {
  263. background-color: #e53e3e;
  264. } /* end of #div_alert.warning */
  265. .content {
  266. flex: 1;
  267. max-width: 500px;
  268. margin: 2rem auto;
  269. padding: 2rem;
  270. background: rgba(255, 255, 255, 0.95);
  271. border-radius: 8px;
  272. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  273. } /* end of .content */
  274. @media (max-width: 768px) {
  275. .content {
  276. margin: 1rem;
  277. padding: 1.5rem;
  278. } /* end of .content inside media ? */
  279. } /* end of @media (max-width: 768px) */
  280. header {
  281. background-color: rgba(255, 255, 255, 0.95);
  282. padding: 1rem 0;
  283. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  284. position: fixed;
  285. width: 100%;
  286. top: 0;
  287. z-index: 100;
  288. } /* end of header */
  289. ul.nav li {
  290. display: inline-block;
  291. } /* end of ul.nav li */
  292. form {
  293. display: flex;
  294. flex-direction: column;
  295. gap: 1.5rem;
  296. } /* end of form */
  297. label {
  298. color: var(--primary-color);
  299. font-weight: bold;
  300. display: block;
  301. margin-bottom: 0.5rem;
  302. } /* end of label */
  303. input[type="text"],
  304. input[type="password"] {
  305. width: 100%;
  306. padding: 0.75rem;
  307. border: 2px solid rgba(39, 37, 92, 0.2);
  308. border-radius: 4px;
  309. font-family: inherit;
  310. font-size: 1rem;
  311. transition: border-color 0.3s ease;
  312. /* end of input[type="text"], input[type="password"]} */
  313. input[type="text"]:focus,
  314. input[type="password"]:focus {
  315. outline: none;
  316. border-color: var(--accent-color);
  317. } /* end of input[type="text"]:focus, input[type="password"]:focus */
  318. input[type="submit"] {
  319. background-color: var(--accent-color);
  320. color: white;
  321. border: none;
  322. padding: 1rem;
  323. border-radius: 4px;
  324. font-family: inherit;
  325. font-weight: bold;
  326. font-size: 1rem;
  327. cursor: pointer;
  328. transition: all 0.3s ease;
  329. } /* input[type="submit */
  330. input[type="submit"]:hover {
  331. transform: translateY(-2px);
  332. box-shadow: 0 4px 12px rgba(250, 122, 30, 0.2);
  333. } /* end of input[type="submit"]:hover */
  334. </style>
  335. <style>
  336. .data-table th { /* my own */
  337. color: white;
  338. }
  339. </style>
  340. {% block head_extra %}{% endblock head_extra %}
  341. </head>
  342. <body>
  343. {% from "macros/console.html" import console_replacement %}
  344. {# { console_replacement() } #}
  345. <header>
  346. <div class="header-container">
  347. <div class="logo-area"></div>
  348. <nav>
  349. <ul class="nav" role="navigation">
  350. {% if current_user %}
  351. <li><a href="{{ url_for("main.index") }}">Landing page</a></li>
  352. {% if current_user.bl_admin %}
  353. <li><a href="{{ url_for("main.qualifications") }}">Qualifications</a></li>
  354. <li><a href="{{ url_for("main.roles") }}">Positions | Roles</a></li>
  355. <li><a href="{{ url_for("main.users") }}">Access User Profiles</a></li>
  356. {% endif %}{# end of checking for bl_admin #}
  357. {% if current_user.bl_capture or current_user.bl_admin %}
  358. <li><a href="{{ url_for("main.capture_record") }}">Capture record</a></li>
  359. {% endif %}{# end of checking if either bl_capture or bl_admin #}
  360. <li><a href="{{ url_for("auth.logout") }}">Logout</a></li>
  361. {% else %}
  362. <li><a href="{{ url_for("auth.login") }}">Login</a></li>
  363. {% endif %}
  364. </ul>
  365. </nav>
  366. </div><!-- end of div.header-container -->
  367. </header>
  368. <main>
  369. <div class="background-container"></div>
  370. <div class="content-container content">
  371. <div id="div_alert" style="text-align: center;" aria-live="assertive">&nbsp;</div>
  372. {% block content %}{% endblock %}
  373. </div><!-- end of div.content -->
  374. </main>
  375. </body>
  376. </html>