mirror of
https://github.com/perstarkse/minne.git
synced 2026-03-23 01:50:01 +01:00
separation of routes, semver, base template
This commit is contained in:
Per Stark
@@ -588,14 +588,121 @@ video {
|
||||
}
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-\[80vh\] {
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-s {
|
||||
border-start-start-radius: 0.25rem;
|
||||
border-end-start-radius: 0.25rem;
|
||||
@@ -606,6 +713,26 @@ video {
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-white\/10 {
|
||||
border-color: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.border-blue-500\/30 {
|
||||
border-color: rgb(59 130 246 / 0.3);
|
||||
}
|
||||
|
||||
.border-purple-500\/30 {
|
||||
border-color: rgb(168 85 247 / 0.3);
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
|
||||
@@ -641,6 +768,117 @@ video {
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-black\/30 {
|
||||
background-color: rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
.bg-blue-600\/20 {
|
||||
background-color: rgb(37 99 235 / 0.2);
|
||||
}
|
||||
|
||||
.bg-purple-600\/20 {
|
||||
background-color: rgb(147 51 234 / 0.2);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gradient-to-br {
|
||||
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.from-blue-400 {
|
||||
--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-slate-900 {
|
||||
--tw-gradient-from: #0f172a var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-slate-100 {
|
||||
--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-slate-50 {
|
||||
--tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.via-purple-900 {
|
||||
--tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.via-purple-500 {
|
||||
--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.via-purple-300 {
|
||||
--tw-gradient-to: rgb(216 180 254 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #d8b4fe var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.via-purple-200 {
|
||||
--tw-gradient-to: rgb(233 213 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.via-purple-100 {
|
||||
--tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #f3e8ff var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.to-purple-500 {
|
||||
--tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-slate-900 {
|
||||
--tw-gradient-to: #0f172a var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-pink-500 {
|
||||
--tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-slate-200 {
|
||||
--tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200 {
|
||||
--tw-gradient-to: #e9d5ff var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-300 {
|
||||
--tw-gradient-to: #d8b4fe var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-400 {
|
||||
--tw-gradient-to: #c084fc var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-pink-600 {
|
||||
--tw-gradient-to: #db2777 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.bg-clip-text {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
@@ -654,6 +892,40 @@ video {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
@@ -668,6 +940,131 @@ video {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-gray-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-transparent {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.text-blue-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-purple-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(192 132 252 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.placeholder-gray-400::-moz-placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
|
||||
}
|
||||
|
||||
.placeholder-gray-400::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.backdrop-blur-sm {
|
||||
--tw-backdrop-blur: blur(4px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.backdrop-blur-md {
|
||||
--tw-backdrop-blur: blur(12px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.hover\:scale-105:hover {
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:bg-blue-600\/30:hover {
|
||||
background-color: rgb(37 99 235 / 0.3);
|
||||
}
|
||||
|
||||
.hover\:bg-purple-600\/30:hover {
|
||||
background-color: rgb(147 51 234 / 0.3);
|
||||
}
|
||||
|
||||
.hover\:text-white:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
45
src/server/templates/base.html
Normal file
45
src/server/templates/base.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}radien{% endblock %}</title>
|
||||
<link rel="stylesheet" type="text/css" href="assets/style.css">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen bg-gradient-to-br from-slate-50 to-purple-200">
|
||||
<!-- Navbar -->
|
||||
<nav class="bg-black/30 backdrop-blur-sm border-b border-white/10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="flex items-center">
|
||||
<!-- You can add your logo here -->
|
||||
<span class="text-2xl hover:text-white font-bold text-gray-300 bg-clip-text">
|
||||
radien
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="/upload"
|
||||
class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">
|
||||
Upload
|
||||
</a>
|
||||
<a href="/files"
|
||||
class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">
|
||||
Files
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container mx-auto px-4 py-8">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,24 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="assets/style.css">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
|
||||
<title>
|
||||
radien
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body class="h-full bg-slate-100">
|
||||
<h1 class="text-4xl bg-blue-300 p-2 font-mono font-bold">radien</h1>
|
||||
<div class="p-10">
|
||||
I am {{adjective}}
|
||||
<div class="py-4">
|
||||
<h2 class="text-lg font-bold">Queue:</h2>
|
||||
<p class="">There are {{queue_length}} items queued </p>
|
||||
</div>
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="flex flex-col items-center justify-center min-h-[80vh] space-y-8">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center space-y-4 mb-8">
|
||||
<h1
|
||||
class="text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 text-transparent bg-clip-text">
|
||||
Welcome to radien
|
||||
</h1>
|
||||
<p class="text-gray-400 text-xl">
|
||||
An experiment in creating a second brain
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- Search Bar -->
|
||||
<div class="w-full max-w-2xl">
|
||||
<input type="text" placeholder="Search..."
|
||||
class="w-full px-6 py-4 bg-black/30 backdrop-blur-md text-white placeholder-gray-400 outline-none rounded-xl"
|
||||
hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#search-results">
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
<div id="search-results" class="w-full max-w-2xl mt-4">
|
||||
<!-- Results will be populated here by HTMX -->
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="flex gap-4 mt-8">
|
||||
<a href="/upload"
|
||||
class="px-6 py-3 bg-blue-600/20 hover:bg-blue-600/30 border border-blue-500/30 rounded-lg text-blue-400 transition-all hover:scale-105">
|
||||
Upload File
|
||||
</a>
|
||||
<a href="/files"
|
||||
class="px-6 py-3 bg-purple-600/20 hover:bg-purple-600/30 border border-purple-500/30 rounded-lg text-purple-400 transition-all hover:scale-105">
|
||||
Browse Files
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user