Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="css4.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
<div class="container-fluid">
<a class="navbar-brand text-center w-100" href="#">
<img src="img/JamON_Logo.png" alt=" ">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Programmes</a>
</li>
<!--li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
Pages
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Blog</a></li>
<li><a class="dropdown-item" href="#">Contact</a></li>
</ul>
</li-->
</ul>
</div>
</div>
</nav>
<section class="hero--section">
<div class="container-fluid">
<div class="row g-2 gx-md-5" >
<div class="col-md-2 col-6 order-2 order-md-1 my-auto">
<img src="https://beta.jam-on.ch/images/JamOn-Shop_Banner_1.png" class="imf-fluid w-100" alt=" ">
</div>
<div class="col-md-8 order-1 order-md-2 my-auto">
<div class="hero-card" >
<div class="row g-2 g-md-3 align-items-center">
<div class="col-md-6">
<div class="hero-text text-white">
<?php
// Set the content type to HTML
header('Content-Type: text/html; charset=utf-8');
// JSON source
$jsonUrl = 'https://www.jam-on.ch/tracklist/currentlyplaying.json';
// Default values
$title = 'Unknown Title';
$artist = 'Unknown Artist';
// Fetch and decode JSON
$response = @file_get_contents($jsonUrl);
if ($response !== false) {
$data = json_decode($response, true);
if (!empty($data['track'])) {
$title = htmlspecialchars($data['track']);
}
if (!empty($data['artist'])) {
$artist = htmlspecialchars($data['artist']);
}
} else {
$title = 'Error loading title';
$artist = 'Error loading artist';
}
?>
<!-- Display track info -->
<h1 id="track-title" data-aos="fade-right" data-aos-delay="400"><?= $title ?></h1>
<p id="track-artist" data-aos="fade-right" data-aos-delay="500"><?= $artist ?></p>
<div class="live-player-container transparent-player" id="livePlayer" >
<audio id="liveAudio" autoplay muted>
<source src="https://jam-on.ice.infomaniak.ch/jam-on-128.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Time Bar -->
<input type="range" id="timeBar" min="0" max="100" value="0" step="1" disabled />
<!-- Bottom Controls Row -->
<div class="bottom-controls">
<div class="left-controls">
<button id="playPauseBtn"><i class="fas fa-play"></i></button>
<button id="muteBtn"><i class="fas fa-volume-mute"></i></button>
<span id="currentTime">00:00</span>
</div>
<!-- Vertical Volume -->
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.5" orient="vertical" style="height:50px;" />
</div>
</div>
<br><br>
<a href="https://jamon2-santhoshs-projects-7fb196a9.vercel.app/" target="_blank" class="explore-btn mt-3" data-aos="fade-right" data-aos-delay="800">
Listen Live
</a>
</div>
</div>
<div class="col-md-6 my-auto ">
<div class="hero-image p-3 p-md-5" data-aos="fade-left" data-aos-delay="500" >
<img id="trackImage" src="https://www.jam-on.ch/tracklist/art-00.jpg" alt=" " class="img-fluid w-100 rounded shadow" />
<div class="sound-waves">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-6 order-3 order-md-3 my-auto">
<img src="https://beta.jam-on.ch/images/2025_Monatsplakat_Februar_Final_Png.png" class="imf-fluid w-100" alt="">
</div>
</div>
</div>
</section>
<section class="motion-features py-5">
<div class="container">
<h2 class="display-5 fw-bold text-center mb-4">News</h2>
<div class="owl-carousel owl-theme " data-aos="fade-up" data-aos-delay="200">
<!-- News 1 -->
<div class="item d-flex flex-column" >
<div class="motion-img mx-auto mt-auto">
<img src="img/news1.svg" class="img-fluid" alt="Wo findest du uns">
</div>
<div class="text-center motion-text-container flex-grow-1 d-flex flex-column align-items-center p-3">
<h4 class="motion-title">Wo findest du uns?</h4>
<p class="motion-text">
Zu hören sind wir in der Schweiz über DAB+ in der Zentralschweiz. <br>
Du kannst uns auch über unseren Webstream hören. <br>
Studioblick? Schau auf Twitch: <strong>jamonculture</strong>. <br>
Verfügbar auf Radio-Apps wie TuneIn. <br>
Folge uns auch auf unseren Social-Media-Kanälen!
</p>
</div>
</div>
<!-- News 2 -->
<div class="item d-flex flex-column" style="min-height: 100%;">
<div class="motion-img mx-auto mt-auto">
<img src="img/news2.svg" class="img-fluid" alt="Workshops bei Jam On">
</div>
<div class="text-center motion-text-container flex-grow-1 d-flex flex-column align-items-center p-3">
<h4 class="motion-title">Workshops bei Jam On</h4>
<p class="motion-text">
Nimm mit deiner Schulklasse eine Sendung auf oder produziere einen Podcast mit Freunden oder deinem Team. <br>
Wir begleiten dich dabei! <br>
Kontakt: <a href="mailto:vali.koller@jam-on.ch">vali.koller@jam-on.ch</a>
</p>
</div>
</div>
<!-- News 3 -->
<div class="item d-flex flex-column" style="min-height: 100%;">
<div class="motion-img mx-auto mt-auto">
<img src="img/news3.svg" class="img-fluid" alt="Werde Host bei Jam On Culture">
</div>
<div class="text-center motion-text-container flex-grow-1 d-flex flex-column align-items-center p-3">
<h4 class="motion-title">Werde Host bei Jam On Culture</h4>
<p class="motion-text">
Du hast Bock auf Content Creation? <br>
Egal ob Radio, Podcast oder Streaming – bei uns findest du deinen Platz! <br>
Kontakt: <a href="mailto:j.roos@jam-on.ch">j.roos@jam-on.ch</a>
</p>
</div>
</div>
<!-- News 4 -->
<div class="item d-flex flex-column" style="min-height: 100%;">
<div class="motion-img mx-auto mt-auto">
<img src="img/news4.svg" class="img-fluid" alt="Neues Studio">
</div>
<div class="text-center motion-text-container flex-grow-1 d-flex flex-column align-items-center p-3">
<h4 class="motion-title">Wir haben ein neues Studio!</h4>
<p class="motion-text">
Unsere neue Studioeinrichtung ist da! <br>
Komm vorbei und mach eine Führung mit uns. <br>
Kontakt: <a href="mailto:vali.koller@jam-on.ch">vali.koller@jam-on.ch</a>
</p>
</div>
</div>
<!-- News 5 -->
<div class="item d-flex flex-column" style="min-height: 100%;">
<div class="motion-img mx-auto mt-auto">
<img src="img/news5.svg" class="img-fluid" alt="Merch Jam On">
</div>
<div class="text-center motion-text-container flex-grow-1 d-flex flex-column align-items-center p-3">
<h4 class="motion-title">Unterstütze Jam On mit freshem Merch!</h4>
<p class="motion-text">
Hol dir unsere freshe Streetwear & Merch im Jam On Shop <br>
und unterstütze direkt unsere Hosts und Projekte! <br>
<a href="https://jamonradio.myshopify.com/" target="_blank">Zum Shop</a>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="marquee-section">
<div class="container-fluid">
<div class="marquee-whole-wrap">
<div class="marquee-wrap"><h2 class="marquee-text">Crafting Extraordinary Visuals</h2></div>
<div class="marquee-wrap"><h2 class="marquee-text">Crafting Extraordinary Visuals</h2></div>
<div class="marquee-wrap"><h2 class="marquee-text">Crafting Extraordinary Visuals</h2></div>
</div>
</div>
</section>
<section class="py-5 d-none">
<div class="container mb-5">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row justify-content-center">
<div class="col-lg-8" data-aos="fade-right">
<h4 class="font-02 mb-1">Our Showcase</h4>
<h2 class="display-5 fw-bold text-center mb-4">Shows</h2>
</div>
<div class="col-lg-4" data-aos="fade-left">
<a href="#" class="btn btn-outline-light btn-sm rounded-pill px-4 mt-3 browse-btn">View All Projects</a>
</div>
</div>
<div class="row justify-content-center g-4">
<div class="col-md-6 col-lg-6" data-aos="fade-up" data-aos-delay="100">
<div class="card bg-transparent text-white border-0 rounded-4 p-3 h-100 shadow-sm">
<img src="https://i.ibb.co/L5Q2p9F/work-video-1.webp" class="card-img-top rounded-4 mb-3" alt="Behind the scenes of a film shoot">
<div class="d-flex justify-content-between text-muted small mb-2 px-1">
<span class="text-orange">⏱ 7 Min</span>
<span class="text-white">📅 22 May 2024</span>
</div>
<h5 class="card-title px-1">
<span class=" fw-light ">The Art of</span> <strong>Cinematography:</strong><br>
<span class=" fw-light ">A Deep</span> <strong>Dive</strong>
</h5>
<div class="px-1 mt-3">
<a href="#" class="btn btn-light btn-sm rounded-pill watch-btn">Watch Video <span class="dot"></span></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6" data-aos="fade-up" data-aos-delay="200">
<div class="card bg-transparent text-white border-0 rounded-4 p-3 h-100 shadow-sm">
<img src="https://i.ibb.co/1q20t5R/work-video-2.webp" class="card-img-top rounded-4 mb-3" alt="Creative video editing on screen">
<div class="d-flex justify-content-between text-muted small mb-2 px-1">
<span class="text-orange">⏱ 9 Min</span>
<span class="text-white">📅 15 April 2024</span>
</div>
<h5 class="card-title px-1">
<span class=" fw-light ">Post-Production</span> <strong>Magic:</strong><br>
<strong>The Editor's Vision</strong>
</h4>
<div class="px-1 mt-3">
<a href="#" class="btn btn-light btn-sm rounded-pill watch-btn">Watch Video <span class="dot"></span></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6" data-aos="fade-up" data-aos-delay="300">
<div class="card bg-transparent text-white border-0 rounded-4 p-3 h-100 shadow-sm">
<img src="https://i.ibb.co/g3130zY/work-video-3.webp" class="card-img-top rounded-4 mb-3" alt="Director guiding actors on set">
<div class="d-flex justify-content-between text-muted small mb-2 px-1">
<span class="text-orange">⏱ 6 Min</span>
<span class="text-white">📅 01 March 2024</span>
</div>
<h5 class="card-title px-1">
<span class=" fw-light ">Directing for</span> <strong>Impact:</strong><br>
<strong>Bringing Scripts to Life</strong>
</h5>
<div class="px-1 mt-3">
<a href="#" class="btn btn-light btn-sm rounded-pill watch-btn">Watch Video <span class="dot"></span></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6" data-aos="fade-up" data-aos-delay="400">
<div class="card bg-transparent text-white border-0 rounded-4 p-3 h-100 shadow-sm">
<img src="https://i.ibb.co/zX7V9Q0/work-video-4.webp" class="card-img-top rounded-4 mb-3" alt="Visual effects artist at work">
<div class="d-flex justify-content-between text-muted small mb-2 px-1">
<span class="text-orange">⏱ 11 Min</span>
<span class="text-white">📅 18 Feb 2024</span>
</div>
<h5 class="card-title px-1">
<span class=" fw-light ">VFX & Animation:</span> <strong>Crafting</strong><br>
<strong>Unreal Worlds</strong>
</h5>
<div class="px-1 mt-3">
<a href="#" class="btn btn-light btn-sm rounded-pill watch-btn">Watch Video <span class="dot"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="trending-section py-5">
<div class="bg-st">
<div class="container text-center">
<div class="heading-area py-5" data-aos="fade-up">
<h4 class="font-02 mb-1">Sendungan</h4>
<h2 class="display-5 fw-bold text-center mb-4">Programmes</h2>
</div>
<div class="owl-carousel owl-theme" data-aos="fade-up" data-aos-delay="200">
<div class="item">
<div class="doc-card">
<img src="img/track1.jpg" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5 title="Title"> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/track2.jpg" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/track5.png" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/track6.jpg" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/track8.jpg" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/track10.jpg" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/album1.png" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/album2.png" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/album3.png" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/album4.png" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
<div class="item">
<div class="doc-card">
<img src="img/album5.png" class="img-fluid rounded" alt=" ">
<div class="overlay">
<h5> </h5>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section py-5">
<div class="container">
<div class="row align-items-center mb-4">
<div class="col-lg-8" data-aos="fade-right">
<h4 class="font-02 mb-1">Read. Discover. Learn.</h4>
<h2 class="display-5 fw-bold mb-4">Blog</h2>
</div>
<div class="col-lg-4 text-lg-end text-start" data-aos="fade-left">
<a href="#" class="btn btn-outline-light btn-sm rounded-pill px-4 mt-3 browse-btn">View All Projects</a>
</div>
</div>
<div class="row g-4">
<div class="col-lg-8">
<div class="row g-4">
<!-- Blog Post 1 -->
<div class="col-md-6" data-aos="fade-up">
<div class="blog-post">
<div class="blog-image ">
<img src="img/track1.jpg" alt="Blog Image" class="img-fluid ">
<span class="blog-date">December 9, 2023</span>
</div>
<div class="blog-content p-3">
<h5 class="text-white">Frames in Motion: <strong>A Guide to Dynamic Video</strong></h5>
<p class="text-light">Discover the secrets of infusing motion with meaning and turning frames into an evocative language of their own.</p>
</div>
</div>
</div>
<!-- Blog Post 2 -->
<div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="blog-post">
<div class="blog-image ">
<img src="img/track2.jpg" alt="Blog Image" class="img-fluid ">
<span class="blog-date">December 9, 2023</span>
</div>
<div class="blog-content p-3">
<h5 class="text-white">Crafting Compelling Stories <strong>Through Video Graph</strong></h5>
<p class="text-light">Elevate your narratives, evoke emotions, and captivate audiences with the power of visual storytelling.</p>
</div>
</div>
</div>
</div>
<!-- Related Posts -->
</div>
<div class="col-lg-4 " data-aos="fade-left" data-aos-delay="200">
<div class="related-posts bg-dark p-4 rounded">
<h5 class="text-white mb-3">Related Posts</h5>
<div class="d-flex mb-3 align-items-start">
<img src="img/track5.png" width="50" class="me-3 rounded" alt="Post 1">
<div>
<small class="text-orange d-block">December 9, 2023</small>
<span class="text-white">Lens Tales: Painting Stories in Motion in the Production</span>
</div>
</div>
<div class="d-flex mb-3 align-items-start">
<img src="img/track6.jpg" width="50" class="me-3 rounded" alt="Post 2">
<div>
<small class="text-orange d-block">December 9, 2023</small>
<span class="text-white">Moving Pictures: Stories Beyond the Seamless Stillness</span>
</div>
</div>
<div class="d-flex align-items-start">
<img src="img/track8.jpg" width="50" class="me-3 rounded" alt="Post 3">
<div>
<small class="text-orange d-block">December 9, 2023</small>
<span class="text-white">How to calibrate your mic to optimize audio quality</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section py-5">
<div class="container">
<style>
.album-card {
background-color: #1f1f1f;
border-radius: 10px;
display: flex;
gap: 1rem;
padding: 1rem;
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.album-cover {
width: 100px;
height: 100px;
border-radius: 6px;
object-fit: cover;
}
.album-info h5 {
font-size: 1rem;
color: #fff;
margin-bottom: 0.25rem;
}
.album-info p {
font-size: 0.875rem;
color: #bbb;
margin-bottom: 0.5rem;
}
audio {
width: 100%;
height: 28px;
}
.pagination .page-link {
background-color: #444;
color: #fff;
border: none;
margin: 0 4px;
border-radius: 4px;
}
.pagination .active .page-link {
background-color: #f04c84;
border: none;
}</style>
<div class="row align-items-center mb-4">
<div class="col-lg-8" data-aos="fade-right">
<h4 class="font-02 mb-1">Album</h4>
<h2 class="display-5 fw-bold mb-4">Tracks</h2>
</div>
<div class="col-lg-4 text-lg-end text-start" data-aos="fade-left">
<a href="#" class="btn btn-outline-light btn-sm rounded-pill px-4 mt-3 browse-btn">View All Projects</a>
</div>
</div>
</div>
<div class="container">
<div class="row gy-4">
<!-- Track 1 -->
<div class="col-md-6">
<div class="album-card">
<img src="img/track1.jpg" class="album-cover" alt="Zuger Kultur">
<div class="album-info flex-grow-1">
<h5>Zuger Kultur On Air • 20.04.2025</h5>
<p>Bounce Cypher Special Folge</p>
<audio controls>
<source src="track1.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<!-- Track 2 -->
<div class="col-md-6">
<div class="album-card">
<img src="img/track2.jpg" class="album-cover" alt="Not a Struggle">
<div class="album-info flex-grow-1">
<h5>Not a Struggle • 31.01.2025</h5>
<p>Tanzhalle</p>
<audio controls>
<source src="track2.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<!-- Track 3 -->
<div class="col-md-6">
<div class="album-card">
<img src="img/track2.jpg" class="album-cover" alt="JunglisArea">
<div class="album-info flex-grow-1">
<h5>JunglisArea #254 • 29.03.2025</h5>
<p>TACTIQAL NW – Swiss Jungle Legends</p>
<audio controls>
<source src="track3.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<!-- Track 4 -->
<div class="col-md-6">
<div class="album-card">
<img src="img/track1.jpg" class="album-cover" alt="Not a Struggle">
<div class="album-info flex-grow-1">
<h5>Not a Struggle • 15.06.24</h5>
<p>Queens Marathon Edition</p>
<audio controls>
<source src="track4.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<!-- Track 5 -->
<div class="col-md-6">
<div class="album-card">
<img src="img/track2.jpg" class="album-cover" alt="Beatreis">
<div class="album-info flex-grow-1">
<h5>Beatreis #22 • 14.03.2025</h5>
<p>2007 mit MQ & MIK</p>
<audio controls>
<source src="track5.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<!-- Track 6 -->
<div class="col-md-6">
<div class="album-card">
<img src="img/track1.jpg" class="album-cover" alt="Traffic Control">
<div class="album-info flex-grow-1">
<h5>Traffic Control • 25.06.2024</h5>
<p>Full Show Ep. 7 inkl. Interview mit</p>
<audio controls>
<source src="track6.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="d-flex justify-content-center mt-5">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">«</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
</nav>
</div>
</div>
</section>
<footer class="motionflow-footer py-5">
<div class="container">
<div class="collab-section">
<div class="collab-box" data-aos="fade-up" data-aos-duration="1000">
<!--div class="row justify-content-between align-items-center flex-wrap-reverse">
<div class="col-lg-6 mb-4">
<div class=" p-5">
<h2 class="collab-title">Ready to Create?</h2>
<p class="collab-subtitle">
Let's turn your ideas into stunning visual realities. Reach out today and begin your motion journey!
</p>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="contact-box d-flex align-items-center justify-content-center p-4">
<a href="#" class="btn btn-gradient">Get a Quote</a>
</div>
</div>
</div-->
<div class="mixcloud-embed-wrapper">
<?php
$domain = $_SERVER['HTTP_HOST'];
?>
<iframe
src="https://player.twitch.tv/?channel=jamonculture&parent=<?= $domain ?>"
height="100lx"
width="100%"
frameborder="0"
allowfullscreen="true"
scrolling="no">
</iframe> </div>
</div>
</div>
<div class="row align-items-start my-4">
<!-- Left Column -->
<div class="col-md-4 text-center text-md-start mb-3" data-aos="fade-right" data-aos-delay="100">
<h5 class="footer-title">Programme</h5>
<ul class="list-unstyled">
<li><strong>Sendungen</strong></li>
<li><strong>Musik | Radio</strong></li>
<li><strong>Video | Multimedia</strong></li>
<li><strong>Events</strong></li>
<li><strong>Mitmachen</strong></li>
</ul>
</div>
<!-- Center Column -->
<div class="col-md-4 text-center mb-3" data-aos="fade-up" data-aos-delay="200">
<div class="rounded rounder-2 w-100">
<a class="text-center p-3 w-50 d-inline-block" href="#">
<img src="img/logo1.png" class="w-100" alt="Jam On Logo">
</a>
</div>
<p class="footer-desc">Jam On bridges culture, music, and community through creative expression and collaboration.</p>
<div class="social-icons d-flex justify-content-center gap-3 mt-5">
<a href="https://www.mixcloud.com/JamOnRadio/" target="_blank" class="social-icon-btn"><i class="fab fa-mixcloud"></i></a>
<a href="https://www.instagram.com/jamonradio/" target="_blank" class="social-icon-btn"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@jamonradio/" target="_blank" class="social-icon-btn"><i class="fab fa-youtube"></i></a>
<a href="https://www.tiktok.com/@jamon.culture" target="_blank" class="social-icon-btn"><i class="fab fa-tiktok"></i></a>
<a href="https://www.facebook.com/JamOnRadioOfficial/" target="_blank" class="social-icon-btn"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.twitch.tv/jamonradio" target="_blank" class="social-icon-btn"><i class="fab fa-twitch"></i></a>
</div>
</div>
<!-- Right Column -->
<div class="col-md-4 mb-3 text-center text-md-end" data-aos="fade-left" data-aos-delay="300">
<h5 class="footer-title">Verein Jam On</h5>
<ul class="list-unstyled">
<li><a href="#">Über Uns</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Mitgliedschaft</a></li>
<li><a href="#">Partnerschaften & Unterstützung</a></li>
<li><a href="#">Unser Zuhause @i45</a></li>
</ul>
</div>
</div>
</div>
<!-- Footer under Footer (Legal Links) -->
<div class="footer-bottom py-3 border-top">
<div class="container d-flex flex-column flex-md-row justify-content-between text-center text-md-start">
<p class="mb-2 mb-md-0">© 2025 Jam On. All rights reserved.</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="#">Impressum</a></li>
<li class="list-inline-item"><a href="#">Ombudsstelle</a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
$(document).ready(function(){
// Initialize Owl Carousel for Features section
$(".motion-features .owl-carousel").owlCarousel({
loop: true,
margin: 20,
nav: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
responsive: {
0: { items: 1 },
768: { items: 2 },
992: { items: 3 }
}
});
// Initialize Owl Carousel for Trending section
$(".trending-section .owl-carousel").owlCarousel({
loop: true,
margin: 20,
nav: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
responsive: {
0: { items: 1 },
576: { items: 2 },
768: { items: 3 },
992: { items: 4 }
}
});
// Initialize AOS
AOS.init({
once: true, // Whether animation should happen only once - default
mirror: false, // Whether elements should animate out of view - default
duration: 1000, // Values from 0 to 3000, with step 50ms
easing: 'ease-out-back', // default easing for AOS animations
});
// Sticky live player on scroll
var livePlayer = $('#livePlayer');
// Ensure the initial offset is correct after page load
var originalOffset = livePlayer.offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > originalOffset) {
livePlayer.addClass('sticky-top');
} else {
livePlayer.removeClass('sticky-top');
}
});
});
</script>
<script>
const audio = document.getElementById("liveAudio");
const soundWaves = document.querySelector(".sound-waves");
window.addEventListener("DOMContentLoaded", () => {
// Attempt to play and unmute. Autoplay policies might restrict this until user interaction.
// User interaction is generally required to unmute or autoplay audio without muting.
audio.play().catch(error => {
console.log("Autoplay blocked:", error);
// You might want to show a play button here if autoplay is blocked
});
audio.muted = false; // Try to unmute after user interaction if browser allows
});
// Start/stop wave animation based on audio playback state
audio.addEventListener("play", () => {
soundWaves.classList.add("playing");
});
audio.addEventListener("pause", () => {
soundWaves.classList.remove("playing");
});
audio.addEventListener("ended", () => {
soundWaves.classList.remove("playing");
});
// Fetch track info every 20 seconds
async function fetchLiveTrack() {
try {
const res = await fetch('https://www.jam-on.ch/tracklist/currentlyplaying.json');
const data = await res.json();
// Ensure elements exist before trying to update them
const trackTitleElement = document.getElementById("trackTitle");
const trackArtistElement = document.getElementById("trackArtist");
const trackImageElement = document.getElementById("trackImage");
if (trackTitleElement) trackTitleElement.textContent = data.track || "Unknown Track";
if (trackArtistElement) trackArtistElement.textContent = data.artist || "Unknown Artist";
if (trackImageElement) trackImageElement.src = data.cover || "https://www.jam-on.ch/tracklist/art-00.jpg";
} catch (error) {
console.error("Error fetching live track info:", error);
const trackTitleElement = document.getElementById("trackTitle");
const trackArtistElement = document.getElementById("trackArtist");
if (trackTitleElement) trackTitleElement.textContent = "Unable to load";
if (trackArtistElement) trackArtistElement.textContent = "";
}
}
// Initial fetch and set interval
fetchLiveTrack();
setInterval(fetchLiveTrack, 20000);
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const audio = document.getElementById('liveAudio');
const playPauseBtn = document.getElementById('playPauseBtn');
const muteBtn = document.getElementById('muteBtn');
const volumeSlider = document.getElementById('volumeSlider');
const currentTimeDisplay = document.getElementById('currentTime');
const timeBar = document.getElementById('timeBar');
let playStartTime = null;
// PLAY / PAUSE
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
if (!playStartTime) playStartTime = Date.now();
} else {
audio.pause();
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
}
});
// MUTE / UNMUTE
muteBtn.addEventListener('click', () => {
audio.muted = !audio.muted;
muteBtn.innerHTML = audio.muted
? '<i class="fas fa-volume-mute"></i>'
: '<i class="fas fa-volume-up"></i>';
});
// Volume Control
volumeSlider.addEventListener('input', () => {
audio.volume = volumeSlider.value;
});
// Timer & Progress
setInterval(() => {
if (!audio.paused) {
const elapsed = Math.floor((Date.now() - (playStartTime || Date.now())) / 1000);
const mins = String(Math.floor(elapsed / 60)).padStart(2, '0');
const secs = String(elapsed % 60).padStart(2, '0');
currentTimeDisplay.textContent = `${mins}:${secs}`;
timeBar.value = (elapsed % 100);
}
}, 1000);
});
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists