diff --git a/src/main/java/com/imjustdoom/pluginsite/config/SecurityConfig.java b/src/main/java/com/imjustdoom/pluginsite/config/SecurityConfig.java
index 1626fde..f068365 100644
--- a/src/main/java/com/imjustdoom/pluginsite/config/SecurityConfig.java
+++ b/src/main/java/com/imjustdoom/pluginsite/config/SecurityConfig.java
@@ -1,6 +1,7 @@
package com.imjustdoom.pluginsite.config;
import lombok.AllArgsConstructor;
+import org.springframework.boot.autoconfigure.security.servlet.PathRequest;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
@@ -47,6 +48,8 @@ public void configure(HttpSecurity http) throws Exception {
.antMatchers("/resources/create", "/account/details").authenticated()
.antMatchers("/signup", "/login").not().authenticated()
+ .requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()
+
.anyRequest().permitAll()
.and()
diff --git a/src/main/resources/resources.zip b/src/main/resources/resources.zip
new file mode 100644
index 0000000..98efd4a
Binary files /dev/null and b/src/main/resources/resources.zip differ
diff --git a/src/main/resources/static/css/base.css b/src/main/resources/static/css/base.css
new file mode 100644
index 0000000..e1b5b6a
--- /dev/null
+++ b/src/main/resources/static/css/base.css
@@ -0,0 +1,248 @@
+*{
+ margin: 0;
+ padding: 0;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+*, ::before, ::after{
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+body{
+ background-color: var(--grayd-d);
+}
+
+
+h1, h2, h3, h4, h5, h6, p{
+ color: var(--grayd-l);
+}
+
+button, input[type="submit"], input[type="reset"] {
+ background: none;
+ color: inherit;
+ border: none;
+ padding: 0;
+ font: inherit;
+ cursor: pointer;
+ outline: inherit;
+}
+
+/* basic function styling */
+.flex{
+ display: flex;
+}
+
+.flex-c-v{
+ align-items: center;
+}
+
+.equal-grow{
+ flex-basis: 0px;
+ flex-grow: 1;
+}
+
+
+.c-a{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.c-x{
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.w-max{
+ width: max-content;
+}
+
+.w-min{
+ width: min-content;
+}
+
+.w-80{
+ width: 80%;
+}
+
+.w-full{
+ width: 100%;
+}
+
+.block{
+ display: block;
+}
+
+
+
+.title{
+ font-size: 48px;
+ font-weight: 700;
+ line-height: 1.25;
+}
+
+.text{
+ font-size: 24px;
+}
+
+.mtitle{
+ font-size: 36px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+.stext{
+ font-size: 18px;
+}
+
+.text-center{
+ text-align: center;
+}
+
+.stitle{
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--grayd-l);
+}
+
+
+
+.buttons{
+ margin-top: 5px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.button{
+ padding-left: 17px;
+ padding-right: 17px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ border-radius: 5px;
+ font-size: 18px;
+ text-align: center;
+ display: block;
+ font-weight: 600;
+}
+
+.button.filled{
+ background-color: var(--accent);
+ color: white;
+}
+
+.button.outline{
+ /* border: 2px solid var(--accent); */
+ box-shadow:inset 0px 0px 0px 2px var(--accent);
+ background-color: transparent;
+ color: var(--accent);
+ box-sizing: border-box;
+}
+
+.a-override, a{
+ color: var(--grayd-l);
+ text-decoration: none;
+}
+
+.mb{
+ flex-grow: 1;
+ min-width: 0;
+ height: min-content;
+ padding: 20px;
+ border-radius: 8px;
+ background-color: var(--grayd-d);
+}
+
+.plugin{
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ border-radius: 8px;
+ padding: 15px;
+}
+
+.plugin > img, .logo{
+ width: 100px;
+ height: 100px;
+ border-radius: 15px;
+ overflow: hidden;
+}
+
+.plugin-info{
+ display: flex;
+ flex-direction: column;
+}
+
+.plugin-buttons{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.plugin-buttons .button{
+ font-size: 18px !important;
+}
+
+.tags{
+ display: flex;
+ gap: 5px;
+}
+
+.tag{
+ color: white;
+ background-color: var(--grayd-d);
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ border-radius: 4px;
+ font-size: 13px;
+}
+
+.t-r{
+ background-color: red;
+}
+
+.side{
+ width: 20%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.side-body{
+ width: 100%;
+ padding: 15px;
+ background-color: var(--gray);
+ height: min-content;
+ border-radius: 15px;
+}
+
+.main{
+ position: relative;
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.main-body{
+ position: relative;
+ width: 100%;
+ padding: 15px;
+ background-color: var(--gray);
+ height: min-content;
+ border-radius: 15px;
+}
+
+.content{
+ width: 80%;
+ margin: 3rem auto;
+ display: flex;
+ gap: 35px;
+ flex-grow: 1;
+ border-radius: 8px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css
index c57fa5f..5e7da98 100644
--- a/src/main/resources/static/css/custom.css
+++ b/src/main/resources/static/css/custom.css
@@ -408,12 +408,12 @@ border-top: #374151 solid 2px;
font-size: 13px;
}
-.title {
+/* .title {
font-size: 16px;
color: #DC2626;
font-weight: bold;
word-wrap: break-word;
-}
+} */
.body-title {
font-size: 20px;
diff --git a/src/main/resources/static/css/header.css b/src/main/resources/static/css/header.css
new file mode 100644
index 0000000..6c5baa5
--- /dev/null
+++ b/src/main/resources/static/css/header.css
@@ -0,0 +1,70 @@
+.header{
+ padding: 50px;
+ background-color: var(--gray);
+ position: relative;
+}
+
+.header a{
+ color: white;
+ margin: 0;
+ padding-left: 35px;
+ padding-right: 35px;
+ font-weight: 600;
+}
+
+.header .p-a{
+ padding-left: 35px;
+ padding-right: 35px;
+}
+
+.header-search{
+ flex-grow: 1;
+ border-radius: 5px;
+ overflow: hidden;
+ display: flex;
+ height: 40px;
+}
+
+.header-search > input{
+ margin: 0;
+ height: 100%;
+ border: 0;
+ border-radius: 0;
+ outline: 0;
+ flex-grow: 1;
+ padding-left: 20px;
+ padding-right: 20px;
+ font-size: 15px;
+}
+
+.header-search > button{
+ background-color: var(--accent);
+ color: white;
+ margin: 0;
+ height: 100%;
+ padding-left: 35px;
+ padding-right: 35px;
+ font-weight: 600;
+}
+
+.links{
+ position: absolute;
+ bottom: 0;
+ left: 20vw;
+ display: flex;
+ gap: 5px;
+}
+
+.links > a{
+ color: var(--grayd-l);
+ padding: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-weight: normal;
+}
+
+.links > a.active{
+ background-color: var(--grayd-d);
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
new file mode 100644
index 0000000..db555bb
--- /dev/null
+++ b/src/main/resources/static/css/home.css
@@ -0,0 +1,21 @@
+.info-box{
+ width: 35%;
+ padding: 20px;
+}
+
+.info-box.filled{
+ background-color: var(--gray);
+ border-radius: 8px;
+}
+
+.info-box.top{
+ position: absolute;
+ top: 30px;
+ left: 20px;
+}
+
+.info-box.bottom{
+ position: absolute;
+ bottom: 40px;
+ right: 35px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/resources.css b/src/main/resources/static/css/resources.css
new file mode 100644
index 0000000..5630f82
--- /dev/null
+++ b/src/main/resources/static/css/resources.css
@@ -0,0 +1,65 @@
+.plugins{
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ flex-grow: 1;
+}
+
+.plugins .plugin-row-dark{
+ background-color: var(--gray);
+}
+
+.user-picture{
+ height: 80px;
+ width: 80px;
+ border-radius: 100px;
+ background-color: var(--accent);
+ margin-top: 13px;
+ margin-bottom: 13px;
+}
+
+.row{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.row .s-highlighted{
+ color: var(--accent);
+ font-weight: 600;
+ flex-grow: 1;
+ text-align: end;
+}
+
+.row p{
+ font-size: 18px;
+}
+
+.link{
+ font-size: 13px;
+ background-color: var(--accent);
+ padding-top: 8px;
+ padding-bottom: 8px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-weight: 700;
+ border-radius: 5px;
+}
+
+.option-picker{
+ display: flex;
+ gap: 15px;
+ margin-top: 20px;
+}
+
+.active-filled{
+ background-color: var(--accent) !important;
+}
+
+.option-picker input{
+ background-color: var(--grayd-d);
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ font-weight: 600;
+ padding: 9px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/dark.css b/src/main/resources/static/css/theme/dark.css
new file mode 100644
index 0000000..50cf926
--- /dev/null
+++ b/src/main/resources/static/css/theme/dark.css
@@ -0,0 +1,7 @@
+:root{
+ --grayd-l: #D1D5DB;
+ --grayd-d: #4B5563;
+ --gray: #374151;
+ --dark-accent: #14532D;
+ --accent: #2D7C44;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/theme/light.css b/src/main/resources/static/css/theme/light.css
new file mode 100644
index 0000000..3238733
--- /dev/null
+++ b/src/main/resources/static/css/theme/light.css
@@ -0,0 +1,7 @@
+:root{
+ --grayd-l: #1F2937;
+ --grayd-d: #E5E7EB;
+ --gray: #D1D5DB;
+ --dark-accent: #14532D;
+ --accent: #2D7C44;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/cssHead.js b/src/main/resources/static/js/cssHead.js
new file mode 100644
index 0000000..3500108
--- /dev/null
+++ b/src/main/resources/static/js/cssHead.js
@@ -0,0 +1,9 @@
+function addToHead(urls){
+ for(var i = 0; i < urls.length; i++){
+ var head = document.head;
+ var style = document.createElement('link');
+ style.href = urls[i];
+ style.rel = "stylesheet";
+ head.appendChild(style);
+ }
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/header.html b/src/main/resources/templates/header.html
index e9fe52d..517a679 100644
--- a/src/main/resources/templates/header.html
+++ b/src/main/resources/templates/header.html
@@ -1,145 +1,28 @@
-