background added

This commit is contained in:
tcsenpai 2025-03-11 12:19:32 +01:00
parent 96a1882323
commit 3477478cfd
2 changed files with 110 additions and 66 deletions

View File

@ -63,6 +63,10 @@ Contributions to SpaceLLama are welcome! Please feel free to submit issues, feat
Licensed under the [Do What The Fuck You Want To Public License](LICENSE.md). Licensed under the [Do What The Fuck You Want To Public License](LICENSE.md).
See [LICENSE.md](LICENSE.md) for more details. See [LICENSE.md](LICENSE.md) for more details.
## Credits
- [Background Image](https://www.pexels.com/) - I could not find the right image; if you know the author, please let me know so I can give them the credits they deserve.
--- ---
SpaceLLama: Bringing the power of OLLAMA to your browser for effortless web page summarization. SpaceLLama: Bringing the power of OLLAMA to your browser for effortless web page summarization.

View File

@ -1,125 +1,165 @@
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f5f5f5;
color: #333; background-image: url("https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg");
background-size: cover;
-webkit-animation: slidein 100s;
animation: slidein 100s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
background-color: #f5f5f5;
color: #333;
}
@-webkit-keyframes slidein {
from {
background-position: top;
background-size: 3000px;
}
to {
background-position: -100px 0px;
background-size: 2750px;
}
}
@keyframes slidein {
from {
background-position: top;
background-size: 3000px;
}
to {
background-position: -100px 0px;
background-size: 2750px;
}
} }
.container { .container {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;
margin-bottom: 20px; margin-bottom: 20px;
color: #2c3e50; color: #2c3e50;
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.btn-primary { .btn-primary {
background-color: #3498db; background-color: #3498db;
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #2980b9; background-color: #2980b9;
} }
.btn-secondary { .btn-secondary {
background-color: #95a5a6; background-color: #95a5a6;
color: white; color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
background-color: #7f8c8d; background-color: #7f8c8d;
} }
.summary-container { .summary-container {
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
#summary h1, #summary h2, #summary h3 { #summary h1,
margin-top: 0px; #summary h2,
margin-bottom: 0px; #summary h3 {
color: #2c3e50; margin-top: 0px;
margin-bottom: 0px;
color: #2c3e50;
} }
#summary p { #summary p {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.6; line-height: 1.6;
} }
#summary ul, #summary ol { #summary ul,
padding-left: 20px; #summary ol {
margin-bottom: 10px; padding-left: 20px;
margin-top: 10px; margin-bottom: 10px;
margin-top: 10px;
} }
#summary li { #summary li {
margin-bottom: 10px; margin-bottom: 10px;
} }
#summary code { #summary code {
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
font-family: 'Courier New', Courier, monospace; font-family: "Courier New", Courier, monospace;
} }
#summary pre { #summary pre {
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 3px;
overflow-x: auto; overflow-x: auto;
font-family: 'Courier New', Courier, monospace; font-family: "Courier New", Courier, monospace;
} }
#open-options { #open-options {
margin-top: 20px; margin-top: 20px;
} }
.form-group { .form-group {
margin-top: 10px; margin-top: 10px;
} }
label { label {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
} }
textarea { textarea {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
resize: vertical; resize: vertical;
} }
#save-prompt { #save-prompt {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#summary, #system-prompt { #summary,
#system-prompt {
user-select: text; user-select: text;
-webkit-user-select: text; -webkit-user-select: text;
-moz-user-select: text; -moz-user-select: text;