Remove Gallus_Pub and Gallus_Pub_v1 directories along with associated configuration and files
This commit deletes the entire setup for both Gallus_Pub and Gallus_Pub_v1 projects, including `.gitignore`, configuration files, source code, styles, package files, and other related assets.
37
Gallus_Pub/.gitignore
vendored
@ -1,37 +0,0 @@
|
||||
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# Expo
|
||||
.expo/
|
||||
dist/
|
||||
web-build/
|
||||
expo-env.d.ts
|
||||
|
||||
# Native
|
||||
.kotlin/
|
||||
*.orig.*
|
||||
*.jks
|
||||
*.p8
|
||||
*.p12
|
||||
*.key
|
||||
*.mobileprovision
|
||||
|
||||
# Metro
|
||||
.metro-health-check*
|
||||
|
||||
# debug
|
||||
npm-debug.*
|
||||
yarn-debug.*
|
||||
yarn-error.*
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { View } from 'react-native';
|
||||
import LoginScreen from './src/pages/LoginPage';
|
||||
import AdminScreen from './src/pages/AdminPage';
|
||||
import HomeScreen from './src/pages/HomePage';
|
||||
import ProtectedRoute from './src/components/ProtectedRoute';
|
||||
import { AuthProvider } from './src/AuthContext';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<BrowserRouter>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomeScreen />} />
|
||||
<Route path="/admin/login" element={<LoginScreen />} />
|
||||
<Route path="/admin" element={
|
||||
<ProtectedRoute>
|
||||
<AdminScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
</Routes>
|
||||
</View>
|
||||
</BrowserRouter>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "Gallus_Pub",
|
||||
"slug": "Gallus_Pub",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"newArchEnabled": true,
|
||||
"splash": {
|
||||
"image": "./assets/splash-icon.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"edgeToEdgeEnabled": true
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 17 KiB |
@ -1,8 +0,0 @@
|
||||
import { registerRootComponent } from 'expo';
|
||||
|
||||
import App from './App';
|
||||
|
||||
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
|
||||
// It also ensures that whether you load the app in Expo Go or in a native build,
|
||||
// the environment is set up appropriately
|
||||
registerRootComponent(App);
|
||||
8417
Gallus_Pub/package-lock.json
generated
@ -1,27 +0,0 @@
|
||||
{
|
||||
"name": "gallus_pub",
|
||||
"version": "1.0.0",
|
||||
"main": "index.ts",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/metro-runtime": "~5.0.4",
|
||||
"expo": "~53.0.9",
|
||||
"expo-status-bar": "~2.2.3",
|
||||
"react": "19.0.0",
|
||||
"react-native": "0.79.2",
|
||||
"react-native-web": "^0.20.0",
|
||||
"react-router-dom": "^7.6.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@types/react": "~19.0.10",
|
||||
"typescript": "~5.8.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
import React, { createContext, useState, useContext, ReactNode } from 'react';
|
||||
|
||||
type AuthContextType = {
|
||||
isAdmin: boolean;
|
||||
login: (username: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
};
|
||||
|
||||
const AuthContext = createContext<AuthContextType | null>(null);
|
||||
|
||||
export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
|
||||
const login = async (username: string, password: string) => {
|
||||
// Hier würden Sie normalerweise API-Anfragen machen, um die Anmeldedaten zu überprüfen
|
||||
// Einfache Validierung für das Beispiel:
|
||||
if (username === 'admin' && password === 'password') {
|
||||
setIsAdmin(true);
|
||||
// In einer echten Anwendung würden Sie hier einen Token im localStorage speichern
|
||||
localStorage.setItem('isAdmin', 'true');
|
||||
return;
|
||||
}
|
||||
throw new Error('Falsche Anmeldedaten');
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
setIsAdmin(false);
|
||||
localStorage.removeItem('isAdmin');
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAdmin, login, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth muss innerhalb eines AuthProviders verwendet werden');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { useAuth } from '../AuthContext';
|
||||
|
||||
type ProtectedRouteProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
||||
const { isAdmin } = useAuth();
|
||||
|
||||
if (!isAdmin) {
|
||||
// Wenn nicht angemeldet, zur Login-Seite umleiten
|
||||
return <Navigate to="/admin/login" replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default ProtectedRoute;
|
||||
@ -1,35 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useAuth } from '../AuthContext';
|
||||
|
||||
const AdminPage: React.FC = () => {
|
||||
const { logout } = useAuth();
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1>Admin</h1>
|
||||
<p>Willkommen im Admin-Bereich! Hier können Sie Ihr Gallus Pub verwalten.</p>
|
||||
<button onClick={logout} style={styles.button}>Abmelden</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
maxWidth: '800px',
|
||||
margin: '50px auto',
|
||||
padding: '20px',
|
||||
boxShadow: '0 0 10px rgba(0,0,0,0.1)',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
button: {
|
||||
padding: '10px',
|
||||
backgroundColor: '#f44336',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '3px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '20px',
|
||||
}
|
||||
};
|
||||
|
||||
export default AdminPage;
|
||||
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
|
||||
export default function HomeScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Willkommen bei Gallus Pub</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
@ -1,93 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../AuthContext';
|
||||
|
||||
const LoginPage: React.FC = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await login(username, password);
|
||||
navigate('/admin');
|
||||
} catch (err) {
|
||||
setError('Anmeldung fehlgeschlagen. Bitte überprüfen Sie Ihre Anmeldedaten.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2>Admin-Login</h2>
|
||||
{error && <p style={styles.error}>{error}</p>}
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
<div style={styles.inputGroup}>
|
||||
<label htmlFor="username">Benutzername:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
style={styles.input}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div style={styles.inputGroup}>
|
||||
<label htmlFor="password">Passwort:</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={styles.input}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" style={styles.button}>Anmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
maxWidth: '400px',
|
||||
margin: '100px auto',
|
||||
padding: '20px',
|
||||
boxShadow: '0 0 10px rgba(0,0,0,0.1)',
|
||||
borderRadius: '5px',
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as 'column',
|
||||
},
|
||||
inputGroup: {
|
||||
marginBottom: '15px',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
borderRadius: '3px',
|
||||
border: '1px solid #ddd',
|
||||
marginTop: '5px',
|
||||
},
|
||||
button: {
|
||||
padding: '10px',
|
||||
backgroundColor: '#4CAF50',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '3px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
error: {
|
||||
color: 'red',
|
||||
marginBottom: '15px',
|
||||
}
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
24
Gallus_Pub_v1/.gitignore
vendored
@ -1,24 +0,0 @@
|
||||
# build output
|
||||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
4
Gallus_Pub_v1/.vscode/extensions.json
vendored
@ -1,4 +0,0 @@
|
||||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
Gallus_Pub_v1/.vscode/launch.json
vendored
@ -1,11 +0,0 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
# Astro Starter Kit: Minimal
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
@ -1,5 +0,0 @@
|
||||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({});
|
||||
4875
Gallus_Pub_v1/package-lock.json
generated
@ -1,14 +0,0 @@
|
||||
{
|
||||
"name": "gallus-pub-v1",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.11.0"
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 749 B |
|
Before Width: | Height: | Size: 506 KiB |
|
Before Width: | Height: | Size: 110 KiB |
@ -1,17 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
<!-- components/Footer.astro -->
|
||||
<footer>
|
||||
<p>© 2024 Meine Webseite. Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +0,0 @@
|
||||
<!-- components/Header.astro -->
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo-container">
|
||||
<a href="/">
|
||||
<img src="/images/Logo.png" alt="Logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Startseite</a></li>
|
||||
<li><a href="/contact">Kontakt</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
background-color: #3C2A26;
|
||||
color: #ffffff;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
@ -1,32 +0,0 @@
|
||||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../../styles/index.css'
|
||||
---
|
||||
|
||||
<html lang="de">
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<h1>Willkommen auf meiner Webseite</h1>
|
||||
<p>Dies ist der Hauptinhalt der Seite.</p>
|
||||
|
||||
<div class="content-container">
|
||||
<h2>Abschnitt mit besserem Kontrast</h2>
|
||||
<p>Dieser Text ist durch den halbtransparenten Hintergrund besser lesbar.</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 100vh; margin: 2rem 0;">
|
||||
<h2>Abschnitt 1</h2>
|
||||
<p>Inhalt zum Scrollen...</p>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<h2>Abschnitt 2</h2>
|
||||
<p>Mehr Inhalt zum Scrollen...</p>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,92 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 6rem 1rem 2rem;
|
||||
background-image: url('../public/images/background.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
# Gallus_Pub
|
||||
|
||||
Reposetory für die Website vom Gallus Pub
|
||||
|
||||
Auftragsgeber: Sabrina Signer
|
||||
Geschäfft: Gallus Pub
|
||||
48
src/index.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Coming Soon - Gallus Pub</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo-container">
|
||||
<!-- Logo placeholder - Replace with actual logo image -->
|
||||
<div class="logo">
|
||||
<!-- Uncomment and modify the line below to use an actual logo image -->
|
||||
<!-- <img src="images/logo.png" alt="Gallus Pub Logo"> -->
|
||||
GALLUS PUB
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="coming-soon">Coming Soon</h1>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="https://instagram.com/" target="_blank" class="social-link">
|
||||
<i class="fab fa-instagram"></i> Instagram
|
||||
</a>
|
||||
<a href="mailto:info@galluspub.com" class="social-link">
|
||||
<i class="far fa-envelope"></i> Email
|
||||
</a>
|
||||
<a href="https://wa.me/123456789" target="_blank" class="social-link">
|
||||
<i class="fab fa-whatsapp"></i> WhatsApp Business
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="opening-hours">
|
||||
<h2>Öffnungszeiten</h2>
|
||||
<p>Montag - Freitag: 16:00 - 00:00 Uhr</p>
|
||||
<p>Samstag - Sonntag: 14:00 - 02:00 Uhr</p>
|
||||
</div>
|
||||
|
||||
<div class="events-note">
|
||||
<p>Aktuelle Events findest du auf unserem Social Media.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
37
src/script.js
Normal file
@ -0,0 +1,37 @@
|
||||
// Wait for the DOM to be fully loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add a fade-in effect to the main elements
|
||||
const elements = [
|
||||
document.querySelector('.logo'),
|
||||
document.querySelector('.coming-soon'),
|
||||
document.querySelector('.social-links'),
|
||||
document.querySelector('.opening-hours'),
|
||||
document.querySelector('.events-note')
|
||||
];
|
||||
|
||||
// Apply fade-in animation with delay for each element
|
||||
elements.forEach((element, index) => {
|
||||
if (element) {
|
||||
element.style.opacity = '0';
|
||||
element.style.transition = 'opacity 1s ease-in-out';
|
||||
|
||||
// Stagger the animations
|
||||
setTimeout(() => {
|
||||
element.style.opacity = '1';
|
||||
}, 300 * index);
|
||||
}
|
||||
});
|
||||
|
||||
// Add a subtle hover effect to the logo
|
||||
const logo = document.querySelector('.logo');
|
||||
if (logo) {
|
||||
logo.addEventListener('mouseover', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
this.style.transition = 'transform 0.3s ease';
|
||||
});
|
||||
|
||||
logo.addEventListener('mouseout', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
}
|
||||
});
|
||||
131
src/styles.css
Normal file
@ -0,0 +1,131 @@
|
||||
/* Global styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Logo styles */
|
||||
.logo-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
border: 3px solid #333;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Coming soon text */
|
||||
.coming-soon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* Social links */
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link i {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background-color: #555;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Opening hours */
|
||||
.opening-hours {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.opening-hours h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.opening-hours p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Events note */
|
||||
.events-note {
|
||||
font-style: italic;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.social-links {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||