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 React, { useState } from 'react';
|
||||||
import Login from './Login';
|
import Login from './Login';
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
|
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
|
||||||
showDivs: boolean;
|
showDivs: boolean;
|
||||||
toggleDivs: () => void;
|
toggleDivs: () => void;
|
||||||
showHistoryModelsToggle: boolean;
|
showHistoryModelsToggle: boolean;
|
||||||
showToggle: boolean; // Add this prop
|
showToggle: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
||||||
const [menuOpen, setMenuOpen] = useState(false)
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
|
||||||
const toggleMenu = () => {
|
const toggleMenu = () => {
|
||||||
setMenuOpen(!menuOpen)
|
setMenuOpen(!menuOpen);
|
||||||
}
|
};
|
||||||
|
|
||||||
const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
|
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
|
||||||
onViewChange(page)
|
onViewChange(page);
|
||||||
toggleMenu()
|
toggleMenu();
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -30,17 +29,19 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
<nav className={`nav-links ${menuOpen ? "active":""}`}>
|
<nav className={`nav-links ${menuOpen ? "active" : ""}`}>
|
||||||
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
|
||||||
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
||||||
{showToggle && showHistoryModelsToggle && (
|
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
||||||
<button onClick={toggleDivs} className="nav-btn">
|
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
|
||||||
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
{showToggle && showHistoryModelsToggle && (
|
||||||
</button>
|
<button onClick={toggleDivs} className="nav-btn">
|
||||||
)}
|
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||||
</nav>
|
</button>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
|
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
|
||||||
|
{/* AI logo or text */}
|
||||||
</button>
|
</button>
|
||||||
<div className="login-button">
|
<div className="login-button">
|
||||||
<Login />
|
<Login />
|
||||||
|
|
|
@ -1,85 +1,103 @@
|
||||||
// Models.tsx
|
import React, { useState } from 'react';
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const Models: React.FC = () => {
|
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 (
|
return (
|
||||||
<div className="model-background">
|
<div className="model-background">
|
||||||
<div className="models">
|
<div className="models">
|
||||||
<div className="titel">
|
<div className="titel">
|
||||||
<h1>Different AI models</h1>
|
<h1>Different AI models</h1>
|
||||||
</div>
|
</div>
|
||||||
<form action="">
|
<div className="model-dropdown">
|
||||||
<div className="grid">
|
<label htmlFor="model-select">Select AI Model:</label>
|
||||||
<button className="code-model model-box">
|
<select id="model-select" value={selectedModel} onChange={handleModelChange}>
|
||||||
<div className="overlay">
|
{modelOptions.map((model) => (
|
||||||
<h3>Code</h3>
|
<option key={model} value={model}>
|
||||||
<img src="/img/wifi.svg" alt="Wi-Fi" />
|
{model}
|
||||||
</div>
|
</option>
|
||||||
</button>
|
))}
|
||||||
<button className="math-model model-box">
|
</select>
|
||||||
<div className="overlay">
|
</div>
|
||||||
<h3>Math</h3>
|
<div className="grid">
|
||||||
<img src="/img/nowifi.svg" alt="No Wi-Fi" />
|
<button className="code-model model-box">
|
||||||
</div>
|
<div className="overlay">
|
||||||
</button>
|
<h3>Code</h3>
|
||||||
<button className="language-model model-box">
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
<div className="overlay">
|
</div>
|
||||||
<h3>Language</h3>
|
</button>
|
||||||
</div>
|
<button className="math-model model-box">
|
||||||
</button>
|
<div className="overlay">
|
||||||
<button className="default-model model-box">
|
<h3>Math</h3>
|
||||||
<div className="overlay">
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
<h3>Default</h3>
|
</div>
|
||||||
</div>
|
</button>
|
||||||
</button>
|
<button className="language-model model-box">
|
||||||
{/* Example Models */}
|
<div className="overlay">
|
||||||
<button className="default-model model-box">
|
<h3>Language</h3>
|
||||||
<div className="overlay">
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
<h3>Default</h3>
|
</div>
|
||||||
</div>
|
</button>
|
||||||
</button>
|
<button className="character-model model-box">
|
||||||
<button className="default-model model-box">
|
<div className="overlay">
|
||||||
<div className="overlay">
|
<h3>Character</h3>
|
||||||
<h3>Default</h3>
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<button className="default-model model-box">
|
<button className="financial-model model-box">
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
<h3>Default</h3>
|
<h3>Character</h3>
|
||||||
</div>
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
</button>
|
</div>
|
||||||
<button className="default-model model-box">
|
</button>
|
||||||
<div className="overlay">
|
<button className="weather-model model-box">
|
||||||
<h3>Default</h3>
|
<div className="overlay">
|
||||||
</div>
|
<h3>Character</h3>
|
||||||
</button>
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
<button className="default-model model-box">
|
</div>
|
||||||
<div className="overlay">
|
</button>
|
||||||
<h3>Default</h3>
|
<button className="time-planner-model model-box">
|
||||||
</div>
|
<div className="overlay">
|
||||||
</button>
|
<h3>Character</h3>
|
||||||
<button className="default-model model-box">
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
<div className="overlay">
|
</div>
|
||||||
<h3>Default</h3>
|
</button>
|
||||||
</div>
|
<button className="image-model model-box">
|
||||||
</button>
|
<div className="overlay">
|
||||||
<button className="default-model model-box">
|
<h3>Character</h3>
|
||||||
<div className="overlay">
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
<h3>Default</h3>
|
</div>
|
||||||
</div>
|
</button>
|
||||||
</button>
|
<button className="default-model model-box">
|
||||||
<button className="default-model model-box">
|
<div className="overlay">
|
||||||
<div className="overlay">
|
<h3>Character</h3>
|
||||||
<h3>Default</h3>
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<button className="default-model model-box">
|
</div>
|
||||||
<div className="overlay">
|
|
||||||
<h3>Default</h3>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</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 Documentation from './components/Documentation'; // Ensure the import path is correct
|
||||||
import History from './components/History';
|
import History from './components/History';
|
||||||
import Models from './components/Models';
|
import Models from './components/Models';
|
||||||
|
import Credits from './components/Credits';
|
||||||
import './styles/master.css';
|
import './styles/master.css';
|
||||||
|
|
||||||
const LandingPage: React.FC = () => {
|
const LandingPage: React.FC = () => {
|
||||||
const [showDivs, setShowDivs] = useState(true);
|
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);
|
const conversationRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -42,7 +43,7 @@ const LandingPage: React.FC = () => {
|
||||||
setShowDivs(prevState => !prevState);
|
setShowDivs(prevState => !prevState);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
|
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
|
||||||
setView(view);
|
setView(view);
|
||||||
if (view !== 'AI') {
|
if (view !== 'AI') {
|
||||||
setShowDivs(false);
|
setShowDivs(false);
|
||||||
|
@ -70,6 +71,7 @@ const LandingPage: React.FC = () => {
|
||||||
{view === 'AI' && <AI />}
|
{view === 'AI' && <AI />}
|
||||||
{view === 'FAQ' && <FAQ />}
|
{view === 'FAQ' && <FAQ />}
|
||||||
{view === 'Documentation' && <Documentation />}
|
{view === 'Documentation' && <Documentation />}
|
||||||
|
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
/* Popup content box */
|
/* Popup content box */
|
||||||
.popup-content {
|
.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 */
|
color: var(--popup-text-color); /* Use variable for text color */
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
/* container.css */
|
/* container.css */
|
||||||
.container,
|
.container,
|
||||||
.content {
|
.content {
|
||||||
padding-top: 10vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
@ -10,6 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-panel {
|
.left-panel {
|
||||||
|
margin-top: 10vh;
|
||||||
width: 25vw; /* Adjust as needed */
|
width: 25vw; /* Adjust as needed */
|
||||||
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
|
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 */
|
background-color: var(--left-panel-background-color); /* Use variable for background color */
|
||||||
|
@ -25,6 +25,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-container {
|
.conversation-container {
|
||||||
|
margin-top: 10vh;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
||||||
background-color: var(--conversation-background-color); /* Use variable for background color */
|
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{
|
.hamburger{
|
||||||
|
position: absolute;
|
||||||
display: none;
|
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{
|
.nav-links{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -45,7 +66,6 @@ header{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2.5vh;
|
top: 2.5vh;
|
||||||
right: 1vw;
|
right: 1vw;
|
||||||
justify-self: flex-end;
|
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
background-color: var(--input-button-color);
|
background-color: var(--input-button-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
|
@ -15,4 +15,5 @@
|
||||||
@import './Login.css';
|
@import './Login.css';
|
||||||
@import './Settings.css';
|
@import './Settings.css';
|
||||||
@import './fonts.css';
|
@import './fonts.css';
|
||||||
|
@import './credit.css';
|
||||||
@import './responsive.css';
|
@import './responsive.css';
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.model-background {
|
.model-background {
|
||||||
grid-column: 1 / 2;
|
grid-column: 1 / 2;
|
||||||
grid-row: 2 / 5;
|
grid-row: 2 / 5;
|
||||||
overflow-y: auto;
|
overflow-y: scroll;
|
||||||
background-color: var(--models-background-color); /* Ensure this variable is defined */
|
background-color: var(--models-background-color); /* Ensure this variable is defined */
|
||||||
border-radius: 2em;
|
border-radius: 2em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
@ -11,24 +11,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.models {
|
.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;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: center;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.models .titel {
|
.models .titel {
|
||||||
|
@ -39,15 +24,21 @@
|
||||||
font-size: 0.7em;
|
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 {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 1.5vh;
|
gap: 1.5vh;
|
||||||
width: fit-content;
|
width: 100%; /* Ensure grid takes full width */
|
||||||
}
|
|
||||||
|
|
||||||
.grid h3 {
|
|
||||||
font-size: large;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-box {
|
.model-box {
|
||||||
|
@ -60,6 +51,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 18vh;
|
height: 18vh;
|
||||||
width: 18vh;
|
width: 18vh;
|
||||||
|
margin: auto; /* Center each model box in the grid cell */
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
|
@ -73,11 +65,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 300%;
|
font-size: x-large;
|
||||||
transition: opacity 0.5s ease;
|
transition: opacity 0.5s ease;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: xx-large;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay img {
|
.overlay img {
|
||||||
|
@ -94,6 +85,7 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Model background styles */
|
||||||
.code-model {
|
.code-model {
|
||||||
background-image: url(/img/code.jpg);
|
background-image: url(/img/code.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -102,7 +94,7 @@
|
||||||
|
|
||||||
.math-model {
|
.math-model {
|
||||||
background-image: url(/img/math.jpg);
|
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-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
@ -110,7 +102,47 @@
|
||||||
|
|
||||||
.language-model {
|
.language-model {
|
||||||
background-image: url(/img/language.jpg);
|
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-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
@ -122,3 +154,33 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
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 */
|
color: var(--user-message-text-color); /* Use variable for button text color */
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-button button{
|
.header-login-button{
|
||||||
margin: 20px 0;
|
position: absolute;
|
||||||
|
top: 3.5vh;
|
||||||
|
right: 5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.open{
|
.hamburger.open{
|
||||||
margin-top: 0.5vh;
|
margin-top: 0.5vh;
|
||||||
|
padding-left: 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links{
|
.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 {
|
.hamburger {
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
--faq-item-text-color: #333; /* Text color for FAQ items */
|
--faq-item-text-color: #333; /* Text color for FAQ items */
|
||||||
--faq-item-hover-background-color: #e0e0e0; /* Hover background 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 */
|
--pop-up-text: #000; /* Text color for pop-ups */
|
||||||
--input-border-color: #8B9635; /* Input border color */
|
--input-border-color: #8B9635; /* Input border color */
|
||||||
--font-family: 'Poppins', 'sans-serif';/* Default font family */
|
--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