Initial pass at a frontend application

6 files changed, 205 insertions, 0 deletions

diff --git a/thallium-frontend/src/App.tsx b/thallium-frontend/src/App.tsx
new file mode 100644
index 0000000..14731f4
--- /dev/null
+++ b/thallium-frontend/src/App.tsx
@@ -0,0 +1,83 @@
+import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
+
+import LandingPage from "./pages/LandingPage"
+import { useEffect, useState } from 'react';
+
+import themes from './themes.tsx';
+
+
+const GlobalStyle = createGlobalStyle`
+  html,
+  body, #root {
+    margin: 0;
+    padding: 0;
+    font-family: 'Fira Code Variable', monospace;
+    background-color: ${({ theme }) => theme.backgroundColor};
+    color: ${({ theme }) => theme.textColor};
+    height: 100%;
+  }
+
+  a {
+    color: ${({ theme }) => theme.linkColor};
+    text-decoration: none;
+    transition: border-bottom 0.2s;
+    border-bottom: 1px dotted transparent;
+  }
+
+  a:hover {
+    border-bottom: 1px dotted ${({ theme }) => theme.linkColor};
+  }
+`;
+
+const AppContainer = styled.div`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: 800px;
+  height: 100%;
+`;
+
+const BodySeparator = styled.div`
+flex-grow: 1;
+`
+
+const ContentContainer = styled.div`
+  padding: 1rem;
+`;
+
+
+function App() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const theme = isDarkMode ? themes.dark : themes.light;
+
+  useEffect(() => {
+    const prefersDark = window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    setIsDarkMode(prefersDark);
+  }, []);
+
+
+  return (
+    <ThemeProvider theme={theme}>
+      <AppContainer>
+        <GlobalStyle />
+        <ContentContainer>
+          <LandingPage />
+        </ContentContainer>
+
+        <BodySeparator />
+
+        <div>
+          <p>
+            Made with <span role="img" aria-label="aliens">👾</span> by Owl Corp
+          </p>
+        </div>
+      </AppContainer>
+    </ThemeProvider>
+  )
+}
+
+export default App
diff --git a/thallium-frontend/src/components/Card.tsx b/thallium-frontend/src/components/Card.tsx
new file mode 100644
index 0000000..7645512
--- /dev/null
+++ b/thallium-frontend/src/components/Card.tsx
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+
+const CardContainer = styled.div`
+  border: 3px solid ${({ theme }) => theme.borderColor};
+  padding: 16px;
+  position: relative;
+  background-color: ${({ theme }) => theme.cardBackgroundColor};
+  text-align: left;
+
+  /* hard box shadow to bottom right */
+  box-shadow: 10px 10px 0 ${({ theme }) => theme.cardShadow};
+  
+`;
+
+const CardTitle = styled.div`
+  position: absolute;
+  top: -12px;
+  left: 16px;
+  background-color: ${({ theme }) => theme.cardBackgroundColor};
+  background: linear-gradient(0deg, ${({ theme }) => theme.cardBackgroundColor} 0%, ${({ theme }) => theme.cardBackgroundColor} 45%, ${({ theme }) => theme.backgroundColor} 45%);
+  padding: 0 8px;
+  font-weight: bold;
+  z-index: 1;
+`;
+
+interface CardProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+const Card: React.FC<CardProps> = ({ title, children }) => {
+    return (
+        <CardContainer>
+            <CardTitle>{title}</CardTitle>
+            {children}
+        </CardContainer>
+    );
+};
+
+export default Card;
diff --git a/thallium-frontend/src/main.tsx b/thallium-frontend/src/main.tsx
new file mode 100644
index 0000000..2c50286
--- /dev/null
+++ b/thallium-frontend/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import '@fontsource-variable/fira-code';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/thallium-frontend/src/pages/LandingPage.tsx b/thallium-frontend/src/pages/LandingPage.tsx
new file mode 100644
index 0000000..3219165
--- /dev/null
+++ b/thallium-frontend/src/pages/LandingPage.tsx
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import Card from '../components/Card';
+
+const Header = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+
+  img {
+    width: 64px;
+    height: 64px;
+  }
+
+  h1 {
+    margin: 0;
+    margin-left: 1rem;
+  }
+`;
+
+
+const LandingPage = () => {
+    return (
+        <>
+            <Header>
+                <img src="icon.svg" alt="Thallium logo" />
+                <h1>
+                    Thallium
+                </h1>
+            </Header>
+            <div>
+                <Card title="Welcome to Thallium">
+                    <p>
+                        Thallium is a project being developed by Owl Corp.
+                    </p>
+                    <p>
+                        Owl Corp team members can track development progress on the <a href="https://github.com/owl-corp/thallium">GitHub repository</a>.
+                    </p>
+                    <p>
+                        LLAP. 🖖
+                    </p>
+                </Card>
+            </div>
+        </>
+    );
+};
+
+export default LandingPage;
diff --git a/thallium-frontend/src/themes.tsx b/thallium-frontend/src/themes.tsx
new file mode 100644
index 0000000..9bc4f77
--- /dev/null
+++ b/thallium-frontend/src/themes.tsx
@@ -0,0 +1,20 @@
+const themes = {
+    light: {
+        backgroundColor: '#f0f0f0',
+        textColor: '#000',
+        borderColor: '#ccc',
+        linkColor: '#7272ff',
+        cardBackgroundColor: '#ebebeb',
+        cardShadow: '#d0d0d0',
+    },
+    dark: {
+        backgroundColor: '#333',
+        textColor: '#fff',
+        borderColor: '#949494',
+        linkColor: '#8f8fff',
+        cardBackgroundColor: '#2c2c2c',
+        cardShadow: '#242323',
+    },
+};
+
+export default themes;
diff --git a/thallium-frontend/src/vite-env.d.ts b/thallium-frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/thallium-frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />