augsbunicola/AISE_FS26-FrontendEntwicklungProjekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Added mobile, tablet, desktop versions' (#2) from feature/mobile-desktop-version into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
Karolina Thöny-Tyganova 2026-04-04 18:07:25 +02:00
commit 606558a5eb
3 changed files with 179 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/components.css
View File

@ -0,0 +1,55 @@
/* =========================
EVENT CARD COMPONENT
========================= */
.event-card {
background: white;
border: 1px solid #ddd;
border-radius: 10px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
transition: transform 0.2s, box-shadow 0.2s;
}
/* Hover only on devices that support it */
@media (hover: hover) {
.event-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
/* Title */
.event-card__title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
/* Date */
.event-card__date {
color: gray;
font-size: 0.9rem;
}
/* Venue */
.event-card__venue {
font-size: 0.9rem;
}
/* =========================
FORM ELEMENT IMPROVEMENTS
========================= */
button,
input {
min-height: 44px;
}
button:focus,
input:focus {
outline: 2px solid #007bff;
}

119
css/main.css
View File

@ -1,14 +1,119 @@
.event-card { /* =========================
border: 1px solid #ddd; RESET & BASE
========================= */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
img {
max-width: 100%;
height: auto;
}
/* =========================
GLOBAL LAYOUT
========================= */
main {
padding: 1rem; padding: 1rem;
}
section {
margin-bottom: 2rem;
}
/* =========================
HEADER
========================= */
.site-header {
background-color: #3dd0a9;
color: #222; /* fixed contrast */
padding: 1rem;
text-align: center;
}
/* =========================
SEARCH SECTION
========================= */
.event-search h2 {
margin-bottom: 0.5rem;
}
.search__controls {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* =========================
EVENTS LIST
========================= */
.events h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
border-radius: 8px; }
#event-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* =========================
FOOTER
========================= */
footer {
text-align: center;
padding: 1rem;
margin-top: 2rem;
font-size: 0.9rem;
color: #777;
}
/* =========================
TABLET (>=768px)
========================= */
@media (min-width: 768px) {
.search__controls {
flex-direction: row;
} }
.event-card__title { .search__controls input {
font-size: 1.2rem; flex: 1;
} }
.event-card__date { .search__controls button {
color: gray; width: 150px;
} }
#event-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================
DESKTOP (>=1024px)
========================= */
@media (min-width: 1024px) {
#event-list {
grid-template-columns: repeat(3, 1fr);
}
}

20
index.html
View File

@ -7,13 +7,14 @@
<title>Encore – Discover Events</title> <title>Encore – Discover Events</title>
<!-- CSS --> <!-- Bootstrap -->
<link rel="stylesheet" href="css/main.css">
<!-- Bootstrap (optional CSS framework) -->
<link <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"> rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
@ -32,13 +33,11 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Events</a> <a class="nav-link" href="#">Events</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<!-- MAIN CONTENT --> <!-- MAIN CONTENT -->
<main class="container mt-4"> <main class="container mt-4">
@ -47,7 +46,7 @@
<h2>Find Events</h2> <h2>Find Events</h2>
<div class="d-flex gap-2"> <div class="search__controls">
<input <input
id="city-input" id="city-input"
@ -67,13 +66,12 @@
</section> </section>
<!-- EVENTS LIST --> <!-- EVENTS LIST -->
<section class="events"> <section class="events">
<h2>Upcoming Events</h2> <h2>Upcoming Events</h2>
<div id="event-list" class="events__list"> <div id="event-list">
<p class="text-muted">Search for events to begin.</p> <p class="text-muted">Search for events to begin.</p>
</div> </div>
@ -81,15 +79,11 @@
</main> </main>
<!-- FOOTER --> <!-- FOOTER -->
<footer class="site-footer text-center mt-5 p-3"> <footer class="site-footer text-center mt-5 p-3">
<p>© 2026 Encore – Event Discovery</p> <p>© 2026 Encore – Event Discovery</p>
</footer> </footer>
<!-- JS --> <!-- JS -->
<script type="module" src="js/app.js"></script> <script type="module" src="js/app.js"></script>