Hackathons/Hoya26
1
0
Fork 0
mirror of https://github.com/SirBlobby/Hoya26.git synced 2026-02-04 11:44:34 -05:00
Code Issues Packages Projects Releases Wiki Activity

Frontend Update

Browse Source
This commit is contained in:
Yousif Ali
2026-01-24 06:16:34 -05:00
parent 20070301ca
commit d6471afab2
20 changed files with 5036 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/routes/news/+page.svelte Normal file
View File

@@ -0,0 +1,113 @@
<script lang="ts">
const news = [
{
id: 1,
title: "Ocean Cleanup hits milestone",
desc: "500 tons removed from Pacific patch.",
date: "2h ago",
},
{
id: 2,
title: "New Plastic Ban in effect",
desc: "Major cities adopt strict policies.",
date: "5h ago",
},
{
id: 3,
title: "Ethix App launches globally",
desc: "Empowering users to make better choices.",
date: "1d ago",
},
];
</script>
<div class="page-container">
<div class="safe-area">
<div class="header">
<h1 class="page-title">Eco News</h1>
<p class="subtitle">Latest sustainability updates</p>
</div>
<div class="scroll-content">
{#each news as item (item.id)}
<div class="news-card">
<div class="news-image"></div>
<p class="news-meta">{item.date} • Trending</p>
<h2 class="news-title">{item.title}</h2>
<p class="news-desc">{item.desc}</p>
</div>
{/each}
</div>
</div>
</div>
<style>
.page-container {
width: 100%;
height: 100vh;
background-color: #0f172a;
overflow-y: auto;
}
.safe-area {
padding-top: 50px;
padding-bottom: 120px;
}
.header {
padding: 24px;
padding-top: 30px;
}
.page-title {
color: white;
font-size: 34px;
font-weight: 800;
letter-spacing: -0.5px;
margin: 0;
}
.subtitle {
color: #94a3b8;
font-size: 14px;
margin: 4px 0 0 0;
}
.scroll-content {
padding: 24px;
padding-bottom: 140px;
}
.news-card {
background-color: rgba(30, 41, 59, 0.9);
padding: 20px;
border-radius: 24px;
border: 1px solid #334155;
margin-bottom: 16px;
}
.news-image {
height: 120px;
background-color: #334155;
border-radius: 12px;
margin-bottom: 12px;
}
.news-meta {
color: #94a3b8;
font-size: 12px;
margin: 0 0 4px 0;
}
.news-title {
color: white;
font-weight: bold;
font-size: 18px;
margin: 4px 0 8px 0;
}
.news-desc {
color: #cbd5e1;
margin: 0;
}
</style>