koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profil-erstellen #3

Merged
koehleestell merged 7 commits from profil-erstellen into main 2026-03-26 11:52:05 +01:00
Conversation 0 Commits 7 Files Changed 3 +192 -8
2 changed files with 192 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 234f4dd97d - Show all commits

100
kontakt.html
View File

@ -15,10 +15,75 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
margin: 0;
}
/* Header Styles */
.header {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 24px;
font-weight: bold;
color: #0084ff;
text-decoration: none;
letter-spacing: 1px;
}
.header-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.header-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.header-btn-secondary {
background-color: transparent;
color: #0084ff;
border: 2px solid #0084ff;
}
.header-btn-secondary:hover {
background-color: #0084ff;
color: white;
}
.header-btn-primary {
background-color: #0084ff;
color: white;
}
.header-btn-primary:hover {
background-color: #0073e6;
}
/* Main content wrapper */
.main-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; flex: 1;
padding: 20px; padding: 20px;
} }
@ -64,6 +129,21 @@
.image-section { .image-section {
min-height: 300px; min-height: 300px;
} }
.header {
flex-direction: column;
gap: 15px;
}
.header-buttons {
width: 100%;
flex-direction: column;
}
.header-btn {
width: 100%;
text-align: center;
}
} }
h1 { h1 {
@ -288,10 +368,21 @@
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <!-- Header -->
<div class="image-section"> <header class="header">
<img src="cooking.jpg" alt="Social Cooking"> <div class="header-logo">Invité</div>
<div class="header-buttons">
<button class="header-btn header-btn-secondary">Event finden</button>
<a href="login.html" class="header-btn header-btn-primary">Login</a>
</div> </div>
</header>
<!-- Main Content -->
<div class="main-content">
<div class="container">
<div class="image-section">
<img src="cooking.jpg" alt="Social Cooking">
</div>
<div class="form-section"> <div class="form-section">
<h1>Erstelle deinen Account</h1> <h1>Erstelle deinen Account</h1>
@ -333,6 +424,7 @@
</form> </form>
</div> </div>
</div> </div>
</div> <!-- Schließt main-content -->
<!-- Welcome Modal --> <!-- Welcome Modal -->
<div id="welcomeModal" class="modal"> <div id="welcomeModal" class="modal">

100
login.html
View File

@ -15,10 +15,75 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
margin: 0;
}
/* Header Styles */
.header {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 24px;
font-weight: bold;
color: #0084ff;
text-decoration: none;
letter-spacing: 1px;
}
.header-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.header-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.header-btn-secondary {
background-color: transparent;
color: #0084ff;
border: 2px solid #0084ff;
}
.header-btn-secondary:hover {
background-color: #0084ff;
color: white;
}
.header-btn-primary {
background-color: #0084ff;
color: white;
}
.header-btn-primary:hover {
background-color: #0073e6;
}
/* Main content wrapper */
.main-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; flex: 1;
padding: 20px; padding: 20px;
} }
@ -64,6 +129,21 @@
.image-section { .image-section {
min-height: 300px; min-height: 300px;
} }
.header {
flex-direction: column;
gap: 15px;
}
.header-buttons {
width: 100%;
flex-direction: column;
}
.header-btn {
width: 100%;
text-align: center;
}
} }
h1 { h1 {
@ -161,10 +241,21 @@
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <!-- Header -->
<div class="image-section"> <header class="header">
<img src="cooking.jpg" alt="Social Cooking"> <div class="header-logo">Invité</div>
<div class="header-buttons">
<button class="header-btn header-btn-secondary">Event finden</button>
<a href="kontakt.html" class="header-btn header-btn-primary">Anmeldung</a>
</div> </div>
</header>
<!-- Main Content -->
<div class="main-content">
<div class="container">
<div class="image-section">
<img src="cooking.jpg" alt="Social Cooking">
</div>
<div class="form-section"> <div class="form-section">
<h1>Willkommen zurück</h1> <h1>Willkommen zurück</h1>
@ -190,6 +281,7 @@
</form> </form>
</div> </div>
</div> </div>
</div> <!-- Schließt main-content -->
<script> <script>
const loginForm = document.getElementById('loginForm'); const loginForm = document.getElementById('loginForm');