forked from React-Group/interstellar_ai
Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai
This commit is contained in:
commit
2d877b6845
22 changed files with 383 additions and 318 deletions
71
app/components/Credits.tsx
Normal file
71
app/components/Credits.tsx
Normal file
|
@ -0,0 +1,71 @@
|
|||
import React from 'react';
|
||||
|
||||
const Credits: React.FC = () => {
|
||||
return (
|
||||
<div className="credits-container">
|
||||
<section id="credits" className="credits-section">
|
||||
<h1 className="title">Credits</h1>
|
||||
|
||||
<h2 className="subtitle">Icons</h2>
|
||||
<p className="paragraph">
|
||||
This project utilizes the following icon resources:
|
||||
</p>
|
||||
<a
|
||||
href="https://www.svgrepo.com/author/Solar%20Icons/"
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Solar Icons
|
||||
</a>
|
||||
<a
|
||||
href="https://www.svgrepo.com/author/Dazzle%20UI/"
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Dazzle UI
|
||||
</a>
|
||||
|
||||
<h2 className="subtitle">Fonts</h2>
|
||||
<p className="paragraph">
|
||||
The fonts used in this project are provided by:
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/itfoundry/Poppins"
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Poppins
|
||||
</a>
|
||||
<a
|
||||
href="https://openfontlicense.org"
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
|
||||
</a>
|
||||
<a
|
||||
href="http://www.apache.org/licenses/LICENSE-2.0"
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Roboto, Rock Salt
|
||||
</a>
|
||||
<a
|
||||
href="https://ubuntu.com/legal/font-licence"
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Ubuntu
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Credits;
|
|
@ -1,26 +1,25 @@
|
|||
// Header.tsx
|
||||
import React, { useState } from 'react';
|
||||
import Login from './Login';
|
||||
|
||||
interface HeaderProps {
|
||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
|
||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
|
||||
showDivs: boolean;
|
||||
toggleDivs: () => void;
|
||||
showHistoryModelsToggle: boolean;
|
||||
showToggle: boolean; // Add this prop
|
||||
showToggle: boolean;
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen)
|
||||
}
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
|
||||
onViewChange(page)
|
||||
toggleMenu()
|
||||
}
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
|
||||
onViewChange(page);
|
||||
toggleMenu();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -30,17 +29,19 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
|
|||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<nav className={`nav-links ${menuOpen ? "active":""}`}>
|
||||
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
||||
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
||||
{showToggle && showHistoryModelsToggle && (
|
||||
<button onClick={toggleDivs} className="nav-btn">
|
||||
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
<nav className={`nav-links ${menuOpen ? "active" : ""}`}>
|
||||
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
|
||||
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
||||
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
||||
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
|
||||
{showToggle && showHistoryModelsToggle && (
|
||||
<button onClick={toggleDivs} className="nav-btn">
|
||||
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
|
||||
|
||||
{/* AI logo or text */}
|
||||
</button>
|
||||
<div className="login-button">
|
||||
<Login />
|
||||
|
|
|
@ -1,85 +1,103 @@
|
|||
// Models.tsx
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const Models: React.FC = () => {
|
||||
const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
|
||||
|
||||
const modelOptions = [
|
||||
'Offline Fast',
|
||||
'Offline Fast (FOSS)',
|
||||
'Offline Slow',
|
||||
'Offline Slow (FOSS)',
|
||||
'Online (La Plateforme)',
|
||||
'Online (FOSS) (La Plateforme)',
|
||||
'Online Cheap (OpenAI)',
|
||||
'Online Expensive (OpenAI)',
|
||||
'Online Cheap (Anthropic)',
|
||||
'Online Expensive (Anthropic)',
|
||||
'Online Cheap (Google)',
|
||||
'Online Expensive (Google)',
|
||||
];
|
||||
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedModel(event.target.value);
|
||||
};
|
||||
|
||||
const isOfflineModel = (model: string) => {
|
||||
return model.includes('Offline');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="model-background">
|
||||
<div className="models">
|
||||
<div className="titel">
|
||||
<h1>Different AI models</h1>
|
||||
</div>
|
||||
<form action="">
|
||||
<div className="grid">
|
||||
<button className="code-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Code</h3>
|
||||
<img src="/img/wifi.svg" alt="Wi-Fi" />
|
||||
</div>
|
||||
</button>
|
||||
<button className="math-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Math</h3>
|
||||
<img src="/img/nowifi.svg" alt="No Wi-Fi" />
|
||||
</div>
|
||||
</button>
|
||||
<button className="language-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Language</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
{/* Example Models */}
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Default</h3>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="model-dropdown">
|
||||
<label htmlFor="model-select">Select AI Model:</label>
|
||||
<select id="model-select" value={selectedModel} onChange={handleModelChange}>
|
||||
{modelOptions.map((model) => (
|
||||
<option key={model} value={model}>
|
||||
{model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<button className="code-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Code</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="math-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Math</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="language-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Language</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="character-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="financial-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="weather-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="time-planner-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="image-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
<button className="default-model model-box">
|
||||
<div className="overlay">
|
||||
<h3>Character</h3>
|
||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -6,11 +6,12 @@ import FAQ from './components/Faq'; // Ensure the import path is correct
|
|||
import Documentation from './components/Documentation'; // Ensure the import path is correct
|
||||
import History from './components/History';
|
||||
import Models from './components/Models';
|
||||
import Credits from './components/Credits';
|
||||
import './styles/master.css';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
const [showDivs, setShowDivs] = useState(true);
|
||||
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
|
||||
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
|
||||
const conversationRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -42,7 +43,7 @@ const LandingPage: React.FC = () => {
|
|||
setShowDivs(prevState => !prevState);
|
||||
};
|
||||
|
||||
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
|
||||
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
|
||||
setView(view);
|
||||
if (view !== 'AI') {
|
||||
setShowDivs(false);
|
||||
|
@ -70,6 +71,7 @@ const LandingPage: React.FC = () => {
|
|||
{view === 'AI' && <AI />}
|
||||
{view === 'FAQ' && <FAQ />}
|
||||
{view === 'Documentation' && <Documentation />}
|
||||
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
/* Popup content box */
|
||||
.popup-content {
|
||||
background: var(--popup-background-color); /* Use variable for background color */
|
||||
background-color: var(--popup-background-color); /* Use variable for background color */
|
||||
color: var(--popup-text-color); /* Use variable for text color */
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
/* container.css */
|
||||
.container,
|
||||
.content {
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
@ -10,6 +9,7 @@
|
|||
}
|
||||
|
||||
.left-panel {
|
||||
margin-top: 10vh;
|
||||
width: 25vw; /* Adjust as needed */
|
||||
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
|
||||
background-color: var(--left-panel-background-color); /* Use variable for background color */
|
||||
|
@ -25,6 +25,7 @@
|
|||
}
|
||||
|
||||
.conversation-container {
|
||||
margin-top: 10vh;
|
||||
flex: 1;
|
||||
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
||||
background-color: var(--conversation-background-color); /* Use variable for background color */
|
||||
|
|
52
app/styles/credit.css
Normal file
52
app/styles/credit.css
Normal file
|
@ -0,0 +1,52 @@
|
|||
/* Styling for the credits container */
|
||||
.credits-container {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.credits-section {
|
||||
max-width: 900px;
|
||||
height: 80vh;
|
||||
margin: 0 auto;
|
||||
background: var(--doc-background-color); /* Use variable for background */
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
color: var(--doc-title-color); /* Use variable for title color */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 1rem;
|
||||
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Styling for the credit buttons */
|
||||
.credit-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
margin: 10px 5px;
|
||||
background-color: var(--button-background-color); /* Button background */
|
||||
color: var(--button-text-color); /* Button text */
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.credit-btn:hover {
|
||||
background-color: var(--button-hover-background-color); /* Button hover */
|
||||
}
|
||||
|
|
@ -11,10 +11,31 @@ header{
|
|||
}
|
||||
|
||||
.hamburger{
|
||||
position: absolute;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger.open:nth-child(1)
|
||||
.hamburger span{
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
margin: 4px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hamburger.open span:nth-child(1){
|
||||
transform: rotate(45deg) translate(5px, 10px);
|
||||
}
|
||||
.hamburger.open span:nth-child(2){
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger.open span:nth-child(3){
|
||||
transform: rotate(-45deg) translate(5px, -10px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-links{
|
||||
position: absolute;
|
||||
|
@ -45,7 +66,6 @@ header{
|
|||
position: absolute;
|
||||
top: 2.5vh;
|
||||
right: 1vw;
|
||||
justify-self: flex-end;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--input-button-color);
|
||||
color: var(--text-color);
|
||||
|
|
|
@ -15,4 +15,5 @@
|
|||
@import './Login.css';
|
||||
@import './Settings.css';
|
||||
@import './fonts.css';
|
||||
@import './credit.css';
|
||||
@import './responsive.css';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.model-background {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 5;
|
||||
overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--models-background-color); /* Ensure this variable is defined */
|
||||
border-radius: 2em;
|
||||
padding: 1em;
|
||||
|
@ -11,24 +11,9 @@
|
|||
}
|
||||
|
||||
.models {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 5;
|
||||
overflow-y: auto;
|
||||
background-color: var(--models-background-color); /* Ensure this variable is defined */
|
||||
border-radius: 2em;
|
||||
padding: 1em;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.models form {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.models .titel {
|
||||
|
@ -39,15 +24,21 @@
|
|||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.model-dropdown {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1em; /* Space between dropdown and models */
|
||||
}
|
||||
|
||||
.model-dropdown label {
|
||||
margin-right: 0.5em; /* Space between label and dropdown */
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5vh;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.grid h3 {
|
||||
font-size: large;
|
||||
width: 100%; /* Ensure grid takes full width */
|
||||
}
|
||||
|
||||
.model-box {
|
||||
|
@ -60,6 +51,7 @@
|
|||
position: relative;
|
||||
height: 18vh;
|
||||
width: 18vh;
|
||||
margin: auto; /* Center each model box in the grid cell */
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
@ -73,11 +65,10 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 300%;
|
||||
font-size: x-large;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.overlay img {
|
||||
|
@ -94,6 +85,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Model background styles */
|
||||
.code-model {
|
||||
background-image: url(/img/code.jpg);
|
||||
background-repeat: no-repeat;
|
||||
|
@ -102,7 +94,7 @@
|
|||
|
||||
.math-model {
|
||||
background-image: url(/img/math.jpg);
|
||||
background-color: var(--background-color); /* Use variable for background color */
|
||||
background-color: var(--background-color);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
@ -110,7 +102,47 @@
|
|||
|
||||
.language-model {
|
||||
background-image: url(/img/language.jpg);
|
||||
background-color: #72cce4; /* Use variable for background color */
|
||||
background-color: #72cce4;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.character-model {
|
||||
background-image: url(/img/character.jpg);
|
||||
background-color: #72cce4;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.financial-model {
|
||||
background-image: url(/img/financial.jpg);
|
||||
background-color: #72cce4;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.weather-model {
|
||||
background-image: url(/img/weather.jpg);
|
||||
background-color: #72cce4;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.time-planner-model {
|
||||
background-image: url(/img/time.jpg);
|
||||
background-color: #72cce4;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.image-model {
|
||||
background-image: url(/img/image.jpg);
|
||||
background-color: #72cce4;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
|
@ -122,3 +154,33 @@
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.model-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack label and dropdown */
|
||||
align-items: center; /* Center the content */
|
||||
margin-bottom: 1em; /* Space between dropdown and models */
|
||||
}
|
||||
|
||||
.model-dropdown label {
|
||||
margin-bottom: 0.5em; /* Space between label and dropdown */
|
||||
font-size: large; /* Increase font size for visibility */
|
||||
color: var(--text-color); /* Use variable for text color */
|
||||
}
|
||||
|
||||
#model-select {
|
||||
padding: 0.5em; /* Padding for better touch targets */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
border: 1px solid var(--input-border-color); /* Border color */
|
||||
background-color: var(--input-background-color); /* Background color */
|
||||
color: var(--text-color); /* Text color */
|
||||
font-size: medium; /* Font size for dropdown */
|
||||
cursor: pointer; /* Cursor change on hover */
|
||||
transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
|
||||
}
|
||||
|
||||
#model-select:hover {
|
||||
background-color: var(--button-hover-background-color); /* Change background on hover */
|
||||
border-color: var(--button-background-color); /* Change border color on hover */
|
||||
}
|
||||
|
||||
|
|
|
@ -104,16 +104,38 @@
|
|||
color: var(--user-message-text-color); /* Use variable for button text color */
|
||||
}
|
||||
|
||||
.login-button button{
|
||||
margin: 20px 0;
|
||||
.header-login-button{
|
||||
position: absolute;
|
||||
top: 3.5vh;
|
||||
right: 5vw;
|
||||
}
|
||||
|
||||
.hamburger.open{
|
||||
margin-top: 0.5vh;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
|
||||
.nav-links{
|
||||
position: fixed;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 0;
|
||||
background-color: var(--burger-menu-background-color);
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 10px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.nav-links.active{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-btn{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
|
|
|
@ -29,6 +29,7 @@
|
|||
--faq-item-text-color: #333; /* Text color for FAQ items */
|
||||
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
|
||||
|
||||
--popup-background-color: #8B9635
|
||||
--pop-up-text: #000; /* Text color for pop-ups */
|
||||
--input-border-color: #8B9635; /* Input border color */
|
||||
--font-family: 'Poppins', 'sans-serif';/* Default font family */
|
||||
|
|
Binary file not shown.
Binary file not shown.
|
@ -1,93 +0,0 @@
|
|||
Copyright 2022 The Noto Project Authors (https://github.com/notofonts/duployan)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
Binary file not shown.
|
@ -1,93 +0,0 @@
|
|||
Copyright 2012 Google Inc. All Rights Reserved.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
BIN
public/img/character.jpg
Normal file
BIN
public/img/character.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 127 KiB |
BIN
public/img/financial.jpg
Normal file
BIN
public/img/financial.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 140 KiB |
BIN
public/img/image.jpg
Normal file
BIN
public/img/image.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 243 KiB |
BIN
public/img/time.jpg
Normal file
BIN
public/img/time.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 156 KiB |
BIN
public/img/weather.jpg
Normal file
BIN
public/img/weather.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
Loading…
Reference in a new issue