summaryrefslogtreecommitdiffhomepage
path: root/backend/src/main/resources/templates/layout.html
diff options
context:
space:
mode:
authorrealtradam <[email protected]>2024-07-28 20:00:49 -0400
committerrealtradam <[email protected]>2024-07-28 20:00:49 -0400
commitfc34d9853386b6dbf270a10862a47a052f1fb151 (patch)
tree20ebca59324d88eab8b867306dd251a27cd91699 /backend/src/main/resources/templates/layout.html
parentc24839e8f8b4b6868f8ee383b589ce01dcdc81e1 (diff)
downloadspring-blog-dev.tar.gz
spring-blog-dev.zip
code cleanupdev
Diffstat (limited to 'backend/src/main/resources/templates/layout.html')
-rw-r--r--backend/src/main/resources/templates/layout.html59
1 files changed, 39 insertions, 20 deletions
diff --git a/backend/src/main/resources/templates/layout.html b/backend/src/main/resources/templates/layout.html
index f3e0278..f2941f6 100644
--- a/backend/src/main/resources/templates/layout.html
+++ b/backend/src/main/resources/templates/layout.html
@@ -12,10 +12,12 @@
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/> <!--Replace with your tailwind.css once created-->
+ <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
+ <!--Replace with your tailwind.css once created-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>:root{
-::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}</style>
+::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
+ </style>
</head>
@@ -29,10 +31,12 @@
<nav class="bg-gray-900 p-4 mt-0 w-full">
<div class="container mx-auto flex items-center">
<div class="flex text-white font-extrabold">
- <a th:if="${(user == null || user.username == null)}" class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
+ <a th:if="${(user == null || user.username == null)}"
+ class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
☕<span class="hidden w-0 md:w-auto md:block pl-1">Spring!</span>
</a>
- <a th:if="${!(user == null || user.username == null)}" class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
+ <a th:if="${!(user == null || user.username == null)}"
+ class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
☕<span th:text="'Logged in as: ' + ${user.username}" class="hidden w-0 md:w-auto md:block pl-1"></span>
</a>
</div>
@@ -42,14 +46,20 @@
<a class="inline-block py-2 px-2 text-white no-underline" href="/">HOME</a>
</li>
<li class="mr-2">
- <a class="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2" href="/articles/new">NEW</a>
+ <a class="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2"
+ href="/articles/new">NEW</a>
</li>
<li class="mr-2">
- <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="/register">REGISTER</a>
+ <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2"
+ href="/register">REGISTER</a>
</li>
<li class="mr-2">
- <a th:if="${(user == null || user.username == null)}" class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="/userlogin">LOGIN</a>
- <a th:if="${!(user == null || user.username == null)}" class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="/logout">LOGOUT</a>
+ <a th:if="${(user == null || user.username == null)}"
+ class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2"
+ href="/userlogin">LOGIN</a>
+ <a th:if="${!(user == null || user.username == null)}"
+ class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2"
+ href="/logout">LOGOUT</a>
</li>
</ul>
<form th:action="@{/articles/search}" class="w-full max-w-md">
@@ -78,22 +88,30 @@
</div>
<div class="flex w-1/2 justify-end content-center">
<p class="hidden sm:block mr-3 text-center h-14 p-4 text-xs"><span class="pr-2">Share this</span> 👉</p>
- <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://twitter.com/intent/tweet?url=#" style="background-color:#33b1ff;">
- <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
+ <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4"
+ href="https://twitter.com/intent/tweet?url=#" style="background-color:#33b1ff;">
+ <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+ <path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path>
+ </svg>
</a>
- <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://www.facebook.com/sharer/sharer.php?u=#" style="background-color:#005e99">
- <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
+ <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4"
+ href="https://www.facebook.com/sharer/sharer.php?u=#" style="background-color:#005e99">
+ <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+ <path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path>
+ </svg>
</a>
</div>
</div>
</div>
<!--Progress bar-->
- <div id="progress" class="h-1 bg-white shadow" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
+ <div id="progress" class="h-1 bg-white shadow"
+ style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
</div>
<!--Header-->
-<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg'); height: 60vh; max-height:460px;">
+<div class="w-full m-0 p-0 bg-cover bg-bottom"
+ style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg'); height: 60vh; max-height:460px;">
<div class="container max-w-4xl bg-black bg-opacity-50 pb-16 rounded-b-xl mx-auto pt-16 md:pt-32 text-center break-normal">
<!--Title-->
<p class="text-white font-extrabold text-3xl md:text-5xl">
@@ -104,8 +122,7 @@
</div>
-
-<div layout:fragment="content" ></div>
+<div layout:fragment="content"></div>
<footer class="bg-gray-900">
<div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
@@ -122,20 +139,22 @@
<a class="inline-block py-2 px-3 text-white no-underline" href="#"></a>
</li>
<li>
- <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#"></a>
+ <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
+ href="#"></a>
</li>
<li>
- <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#"></a>
+ <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
+ href="#"></a>
</li>
<li>
- <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#"></a>
+ <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
+ href="#"></a>
</li>
</ul>
</div>
</div>
-
</div>
</footer>