mirror of
https://github.com/iptv-org/epg.git
synced 2025-05-10 00:50:09 -04:00
Update index.html
This commit is contained in:
Aleksandr Statciuk
parent
6a9d978815
commit
3c1b32746d
1 changed files with 98 additions and 72 deletions
|
|
@ -4,42 +4,76 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>iptv-org/epg</title>
|
<title>iptv-org/epg</title>
|
||||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
||||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="background-color: #f6f8fa; min-height: 100vh">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar" style="background-color: transparent">
|
||||||
|
<div class="navbar-end">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<a href="https://github.com/iptv-org/epg">
|
||||||
|
<span class="icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path
|
||||||
|
d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="container" x-data="data">
|
<div class="container" x-data="list">
|
||||||
<div class="columns is-centered">
|
<div class="columns is-centered">
|
||||||
<div class="column is-9">
|
<div class="column is-9">
|
||||||
<div class="field is-grouped">
|
<form class="mb-5" @submit.prevent="search()">
|
||||||
<div class="control is-expanded has-icons-right" :class="{ 'is-loading': isLoading }">
|
<div class="field has-addons">
|
||||||
<input class="input" type="search" x-model="query" />
|
<div class="control is-expanded">
|
||||||
<span class="icon is-small is-right">
|
<input
|
||||||
<svg
|
class="input"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
type="search"
|
||||||
style="width: 1.25rem; height: 1.25rem"
|
x-model="query"
|
||||||
viewBox="0 0 512 512"
|
placeholder="Search by channel name..."
|
||||||
>
|
/>
|
||||||
<path
|
</div>
|
||||||
d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"
|
<div class="control">
|
||||||
/>
|
<button class="button is-info" type="submit">
|
||||||
</svg>
|
<span class="icon is-small is-right">
|
||||||
</span>
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
style="width: 1.25rem; height: 1.25rem"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="#ffffff"
|
||||||
|
d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div x-show="isLoading" class="level">
|
||||||
|
<div class="level-item">Loading...</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template x-for="country in countries">
|
<template x-for="country in items">
|
||||||
<div
|
<div
|
||||||
class="card mb-3 is-shadowless"
|
class="card mb-3 is-shadowless"
|
||||||
style="border: 1px solid #dbdbdb"
|
style="border: 1px solid #dbdbdb"
|
||||||
x-data="{
|
x-data="{
|
||||||
get countryChannels() {
|
get countryChannels() {
|
||||||
|
if (!_query) return country.channels
|
||||||
|
|
||||||
return country.channels.filter(c => {
|
return country.channels.filter(c => {
|
||||||
return c.hash.includes(query.toLowerCase())
|
return c.hash.includes(_query)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
x-show="countryChannels.length > 0"
|
x-show="countryChannels.length > 0"
|
||||||
>
|
>
|
||||||
|
|
@ -52,6 +86,7 @@
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
|
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
|
||||||
<path
|
<path
|
||||||
|
x-show="!country.show"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
|
|
@ -59,38 +94,54 @@
|
||||||
stroke-width="48"
|
stroke-width="48"
|
||||||
d="M112 184l144 144 144-144"
|
d="M112 184l144 144 144-144"
|
||||||
/>
|
/>
|
||||||
|
<path
|
||||||
|
x-show="country.show"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="48"
|
||||||
|
d="M112 328l144-144 144 144"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="card-content"
|
class="card-content"
|
||||||
x-show="country.show || (query.length && countryChannels.length)"
|
x-show="country.show || (countryChannels.length && _query.length)"
|
||||||
>
|
>
|
||||||
<table class="table is-fullwidth">
|
<div class="table-container">
|
||||||
<thead>
|
<table class="table is-fullwidth">
|
||||||
<tr>
|
<thead>
|
||||||
<td></td>
|
|
||||||
<td>Name</td>
|
|
||||||
<td>TVG-ID</td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<template x-for="channel in countryChannels">
|
|
||||||
<tr>
|
<tr>
|
||||||
<td style="width: 150px; text-align: center">
|
<td></td>
|
||||||
<img
|
<td>Name</td>
|
||||||
x-show="channel.logo"
|
<td>TVG-ID</td>
|
||||||
:src="channel.logo"
|
|
||||||
style="max-width: 100px; max-height: 50px; vertical-align: middle"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td class="is-vcentered"><div x-text="channel.display_name"></div></td>
|
|
||||||
<td class="is-vcentered"><code x-text="channel.tvg_id"></code></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
<template x-for="channel in countryChannels">
|
||||||
|
<tr>
|
||||||
|
<td style="width: 150px; text-align: center">
|
||||||
|
<img
|
||||||
|
loading="lazy"
|
||||||
|
x-show="channel.logo"
|
||||||
|
:src="channel.logo"
|
||||||
|
style="max-width: 100px; max-height: 50px; vertical-align: middle"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td class="is-vcentered">
|
||||||
|
<div x-text="channel.display_name"></div>
|
||||||
|
</td>
|
||||||
|
<td class="is-vcentered">
|
||||||
|
<code x-text="channel.tvg_id"></code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -99,31 +150,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="countries.js"></script>
|
<script src="app.js"></script>
|
||||||
<script>
|
|
||||||
document.addEventListener('alpine:init', () => {
|
|
||||||
Alpine.data('data', () => ({
|
|
||||||
countries,
|
|
||||||
query: '',
|
|
||||||
isLoading: true,
|
|
||||||
|
|
||||||
async init() {
|
|
||||||
const channels = await axios
|
|
||||||
.get('http://iptv-org.local/epg/codes.json')
|
|
||||||
.then(r => r.data)
|
|
||||||
.catch(console.log)
|
|
||||||
|
|
||||||
channels.forEach(channel => {
|
|
||||||
if (this.countries[channel.country]) {
|
|
||||||
channel.hash = JSON.stringify(channel).toLowerCase()
|
|
||||||
this.countries[channel.country].channels.push(channel)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.isLoading = false
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue