Skip to content

Commit ea07df0

Browse files
eckeljeckelj
committed
reworked the news page
1 parent 47ac7e8 commit ea07df0

9 files changed

+1533
-348
lines changed

‎company/news.html‎

Lines changed: 253 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@
2727
<script async="" fs-cc-mode="opt-in" src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js"></script>
2828
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-T2VR79F');</script>
2929
<style>
30+
.content-grid {
31+
display: grid;
32+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
33+
gap: 2rem;
34+
margin-top: 2rem;
35+
}
36+
3037
.news-card {
3138
background: rgba(255, 255, 255, 0.03);
3239
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -37,48 +44,142 @@
3744
display: block;
3845
height: 100%;
3946
}
47+
4048
.news-card:hover {
4149
background: rgba(255, 255, 255, 0.05);
4250
border-color: var(--primary-green);
4351
transform: translateY(-4px);
4452
}
53+
4554
.news-card h3 {
4655
color: var(--text-primary);
4756
margin-bottom: 0.5rem;
4857
font-size: 1.25rem;
4958
}
59+
5060
.news-card .news-tag {
5161
color: var(--primary-green);
5262
font-size: 0.875rem;
5363
font-weight: 600;
5464
margin-bottom: 0.5rem;
5565
display: block;
5666
}
67+
5768
.news-card p {
5869
color: var(--text-secondary);
5970
font-size: 0.95rem;
6071
line-height: 1.6;
6172
}
73+
74+
.news-card img {
75+
width: 100%;
76+
max-height: 180px;
77+
object-fit: cover;
78+
border-radius: 8px;
79+
margin-bottom: 1rem;
80+
}
81+
82+
.medium-card {
83+
display: flex;
84+
flex-direction: column;
85+
}
86+
87+
.medium-card img {
88+
width: 100%;
89+
height: 150px;
90+
object-fit: cover;
91+
border-radius: 8px;
92+
margin-bottom: 1rem;
93+
flex-shrink: 0;
94+
}
95+
96+
.medium-card h3 {
97+
font-size: 1rem;
98+
line-height: 1.3;
99+
margin-bottom: 0.5rem;
100+
color: var(--text-primary);
101+
}
102+
103+
.medium-card p {
104+
font-size: 0.875rem;
105+
line-height: 1.5;
106+
margin-bottom: 0.5rem;
107+
flex-grow: 1;
108+
}
109+
110+
.medium-card .read-more {
111+
color: var(--primary-green);
112+
font-size: 0.875rem;
113+
margin-top: auto;
114+
padding-top: 0.5rem;
115+
}
116+
117+
.embed-card {
118+
background: rgba(255, 255, 255, 0.03);
119+
border: 1px solid rgba(255, 255, 255, 0.1);
120+
border-radius: 12px;
121+
padding: 1rem;
122+
overflow: hidden;
123+
}
124+
125+
.embed-card iframe {
126+
width: 100%;
127+
border-radius: 8px;
128+
}
129+
130+
.platform-badge {
131+
display: inline-block;
132+
padding: 0.25rem 0.75rem;
133+
border-radius: 6px;
134+
font-size: 0.75rem;
135+
font-weight: 600;
136+
margin-bottom: 1rem;
137+
text-transform: uppercase;
138+
letter-spacing: 0.5px;
139+
}
140+
141+
.badge-linkedin {
142+
background: rgba(0, 119, 181, 0.2);
143+
color: #0077b5;
144+
border: 1px solid rgba(0, 119, 181, 0.4);
145+
}
146+
147+
.badge-medium {
148+
background: rgba(0, 0, 0, 0.3);
149+
color: #ffffff;
150+
border: 1px solid rgba(255, 255, 255, 0.2);
151+
}
152+
153+
.badge-news {
154+
background: rgba(0, 255, 136, 0.1);
155+
color: var(--primary-green);
156+
border: 1px solid rgba(0, 255, 136, 0.3);
157+
}
158+
62159
.newsletter-card {
63160
background: rgba(0, 255, 136, 0.05);
64161
border: 2px solid var(--primary-green);
65162
border-radius: 12px;
66163
padding: 2rem;
67164
margin-bottom: 3rem;
68165
}
166+
69167
.newsletter-card h3 {
70168
color: var(--text-primary);
71169
margin-bottom: 0.5rem;
72170
}
171+
73172
.newsletter-card p {
74173
color: var(--text-secondary);
75174
margin-bottom: 1.5rem;
76175
}
176+
77177
.newsletter-form {
78178
display: flex;
79179
gap: 1rem;
80180
flex-wrap: wrap;
81181
}
182+
82183
.newsletter-form input[type="email"] {
83184
flex: 1;
84185
min-width: 250px;
@@ -89,10 +190,43 @@
89190
color: var(--text-primary);
90191
font-size: 1rem;
91192
}
193+
92194
.newsletter-form input[type="email"]:focus {
93195
outline: none;
94196
border-color: var(--primary-green);
95197
}
198+
199+
.filter-tabs {
200+
display: flex;
201+
gap: 1rem;
202+
margin-bottom: 2rem;
203+
flex-wrap: wrap;
204+
justify-content: center;
205+
}
206+
207+
.filter-tab {
208+
padding: 0.75rem 1.5rem;
209+
background: rgba(255, 255, 255, 0.05);
210+
border: 1px solid rgba(255, 255, 255, 0.1);
211+
border-radius: 8px;
212+
color: var(--text-secondary);
213+
cursor: pointer;
214+
transition: all 0.3s ease;
215+
font-weight: 500;
216+
}
217+
218+
.filter-tab:hover,
219+
.filter-tab.active {
220+
background: var(--primary-green);
221+
color: var(--dark-bg);
222+
border-color: var(--primary-green);
223+
}
224+
225+
@media (max-width: 768px) {
226+
.content-grid {
227+
grid-template-columns: 1fr;
228+
}
229+
}
96230
</style>
97231
</head>
98232
<body>
@@ -103,78 +237,155 @@
103237
<section class="hero">
104238
<h1 class="fade-in">
105239
<span class="highlight">News & Insights</span><br>
106-
Industry Research & Updates
240+
Articles, Updates & Community
107241
</h1>
108242
<p class="hero-subtitle fade-in">
109-
Riddle&Code frequently conducts and participates in industry-related research studies, where our experts reveal insights on topics that range from tokenization in the financial and energy sector to decentralized solutions in the industry sector. Stay up-to-date with the latest studies, news and trends.
243+
Follow our journey through industry research, LinkedIn updates, Medium articles, and press releases. Stay connected with the latest developments in Web3, energy tokenization, and decentralized infrastructure.
110244
</p>
111245
</section>
112246

113247
<section class="section">
248+
<!--
114249
<div class="newsletter-card">
115250
<h3>Become an Insider</h3>
116-
<p>Subscribe to our newsletter for the latest updates, insights, and industry trends.</p>
251+
<p>Subscribe to our newsletter for the latest updates, insights, and industry trends delivered directly to your inbox.</p>
117252
<form action="https://riddleandcode.us17.list-manage.com/subscribe/post?u=6bbe708abce949d6a8bc7a0db&id=336a75474f" method="post" class="newsletter-form">
118253
<input type="email" name="Email" placeholder="your@email.com" required/>
119254
<button type="submit" class="btn btn-primary">Subscribe</button>
120255
</form>
121256
</div>
122-
257+
-->
123258
<div class="section-header">
124-
<span class="section-tag">LATEST</span>
125-
<h2 class="section-title">Recent Articles</h2>
259+
<span class="section-tag">CONTENT HUB</span>
260+
<h2 class="section-title">Latest Content</h2>
126261
</div>
127262

128-
<div class="target-grid">
129-
<a href="../news/low-power-networks-the-backbone-of-profitable-energy-communities.html" class="news-card">
130-
<span class="news-tag">The foundation of profitable Power Plants</span>
131-
<h3>Low Power Networks: The Backbone of Profitable Energy Communities</h3>
132-
<p>Exploring how low power networks enable sustainable and profitable energy communities.</p>
133-
</a>
134-
135-
<a href="../news/press-release-energy-community-stanzertal-eu-showcase-project.html" class="news-card">
136-
<span class="news-tag">Press Release: Energy Community Stanzertal</span>
137-
<h3>EU Showcase Project Stanz im Mürztal</h3>
138-
<p>When citizens get together and produce their own green energy, trading it among themselves - there's beer for kilowatts.</p>
139-
</a>
140-
141-
<a href="../news/revolutionizing-business-models-with-a-blockchain-for-machines.html" class="news-card">
142-
<span class="news-tag">R&C transforms traditional machines into trustworthy assets</span>
143-
<h3>Revolutionizing Business Models with a Blockchain for Machines</h3>
144-
<p>Solving the Oracle Problem with Smart Hardware Wallets and Tokenization.</p>
145-
</a>
146-
147-
<a href="../news/riddle-code-introduces-the-hw-03-community-program-for-developers.html" class="news-card">
148-
<span class="news-tag">Every Piece of Code Tells a Story</span>
149-
<h3>Riddle&Code introduces the HW-03 Community Program for Developers</h3>
150-
<p>Empowering developers with our hardware wallet community program.</p>
151-
</a>
152-
153-
<a href="../news/riddle-code-ignites-the-fourth-industrial-revolution-by-onboarding-machines-onto-web3.html" class="news-card">
154-
<span class="news-tag">R&C meets 4th Industrial Revolution</span>
155-
<h3>Riddle&Code ignites the fourth industrial revolution by onboarding machines onto blockchain</h3>
156-
<p>How we're bringing industrial machines into the ecosystem.</p>
157-
</a>
263+
<div class="filter-tabs">
264+
<button class="filter-tab active" data-filter="all">All</button>
265+
<button class="filter-tab" data-filter="linkedin">LinkedIn</button>
266+
<button class="filter-tab" data-filter="medium">Medium</button>
267+
<button class="filter-tab" data-filter="news">Press Releases</button>
268+
</div>
158269

159-
<a href="../news/riddle-code-is-attending-web-summit-in-lisbon.html" class="news-card">
160-
<span class="news-tag">R&C meets Web Summit</span>
161-
<h3>Riddle&Code is attending Web Summit in Lisbon</h3>
162-
<p>Join us at one of the world's largest tech conferences.</p>
163-
</a>
270+
<div class="content-grid" id="content-container">
271+
<!-- All content loaded dynamically from JSON -->
164272
</div>
165273
</section>
166274

167275
<section class="section">
168276
<div class="cta-section">
169277
<h2>Want to Learn More?</h2>
170-
<p>Explore our products, partnerships, and the technology driving us.</p>
278+
<p>Explore our products, partnerships, and the technology driving the future of decentralized energy.</p>
171279
<div class="cta-buttons">
172280
<a href="about-us.html" class="btn btn-primary">About Us</a>
173281
<a href="get-in-touch.html" class="btn btn-secondary">Get in Touch</a>
174282
</div>
175283
</div>
176284
</section>
177285

286+
<script>
287+
// Load content from JSON
288+
async function loadContent() {
289+
try {
290+
const response = await fetch('../data/content-feed.json');
291+
const data = await response.json();
292+
const container = document.getElementById('content-container');
293+
294+
// Sort posts by date (newest first)
295+
const sortedPosts = data.posts.sort((a, b) => new Date(b.date) - new Date(a.date));
296+
297+
let dynamicHTML = '';
298+
299+
sortedPosts.forEach(post => {
300+
if (post.type === 'linkedin' && post.embedUrl) {
301+
// LinkedIn embedded post
302+
dynamicHTML += `
303+
<div class="embed-card" data-category="linkedin">
304+
<span class="platform-badge badge-linkedin">LinkedIn</span>
305+
<iframe src="${post.embedUrl}" height="600" width="100%" frameborder="0" allowfullscreen="" title="${post.title}"></iframe>
306+
</div>
307+
`;
308+
} else if (post.type === 'linkedin') {
309+
// LinkedIn link card (no embed)
310+
dynamicHTML += `
311+
<a href="${post.url}" target="_blank" class="news-card" data-category="linkedin">
312+
<span class="platform-badge badge-linkedin">LinkedIn</span>
313+
<h3>${post.title}</h3>
314+
<p>${post.description}</p>
315+
<p style="color: var(--primary-green); font-size: 0.875rem; margin-top: 1rem;">View on LinkedIn →</p>
316+
</a>
317+
`;
318+
} else if (post.type === 'medium') {
319+
// Medium article card
320+
const truncatedDesc = post.description.length > 120 ? post.description.substring(0, 120) + '...' : post.description;
321+
dynamicHTML += `
322+
<a href="${post.url}" target="_blank" class="news-card medium-card" data-category="medium">
323+
<span class="platform-badge badge-medium">Medium</span>
324+
${post.image ? `<img src="${post.image}" alt="${post.title}">` : ''}
325+
<h3>${post.title}</h3>
326+
<p>${truncatedDesc}</p>
327+
<p class="read-more">Read on Medium →</p>
328+
</a>
329+
`;
330+
} else if (post.type === 'press') {
331+
// Press release card
332+
dynamicHTML += `
333+
<a href="${post.url}" class="news-card" data-category="news">
334+
<span class="platform-badge badge-news">Press Release</span>
335+
${post.image ? `<img src="${post.image}" alt="${post.title}">` : ''}
336+
<h3>${post.title}</h3>
337+
<p>${post.description}</p>
338+
</a>
339+
`;
340+
}
341+
});
342+
343+
// Insert dynamic content at the beginning of the grid
344+
container.insertAdjacentHTML('afterbegin', dynamicHTML);
345+
346+
// Initialize filter after content is loaded
347+
initializeFilters();
348+
349+
} catch (error) {
350+
console.error('Error loading content:', error);
351+
const container = document.getElementById('content-container');
352+
container.insertAdjacentHTML('afterbegin', `
353+
<div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: var(--text-muted);">
354+
<p>Unable to load dynamic content. Please check back later.</p>
355+
</div>
356+
`);
357+
}
358+
}
359+
360+
// Filter functionality
361+
function initializeFilters() {
362+
const filterTabs = document.querySelectorAll('.filter-tab');
363+
const contentItems = document.querySelectorAll('[data-category]');
364+
365+
filterTabs.forEach(tab => {
366+
tab.addEventListener('click', () => {
367+
const filter = tab.dataset.filter;
368+
369+
// Update active tab
370+
filterTabs.forEach(t => t.classList.remove('active'));
371+
tab.classList.add('active');
372+
373+
// Filter content
374+
contentItems.forEach(item => {
375+
if (filter === 'all' || item.dataset.category === filter) {
376+
item.style.display = 'block';
377+
} else {
378+
item.style.display = 'none';
379+
}
380+
});
381+
});
382+
});
383+
}
384+
385+
// Load content when page loads
386+
document.addEventListener('DOMContentLoaded', loadContent);
387+
</script>
388+
178389
<div id="footer-modern-placeholder"></div>
179390
<script src="../scripts/load-footer-modern.js"></script>
180391
</div>

0 commit comments

Comments
 (0)