Skip to content

Commit

Permalink
app: Remove CSS and use tailwind everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
@busybox11
busybox11 committed Nov 11, 2023
1 parent 9a609a2 commit 97ec689
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 165 deletions.
53 changes: 41 additions & 12 deletions 403.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
?>

<!DOCTYPE html>
<html lang="<?=$lang;?>">
<html lang="<?=$lang;?>" class="bg-[#000020] text-white">
<head>
<title><?=Error;?> 403 - Now Playing</title>
<title><?=Error;?> 403 - NowPlaying</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="NowPlaying is a smooth Spotify Connect visualizer, updating in real-time and with playback support." />
Expand All @@ -35,17 +35,46 @@

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
<link href="assets/styles/index.css" rel="stylesheet" />

<script src="https://cdn.tailwindcss.com/"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'sans': ['Outfit', 'sans-serif']
},
}
}
}
</script>
</head>

<body>
<div class="content" style="margin:0 auto;text-align:center;">
<div>
<img src="assets/images/favicon.png" alt="Logo" width="100px" height="100px">
<h1 id="app_title"><?=Error;?> 403</h1>
<h2 id="app_desc"><?=IndexError403;?></h2>
</div>
<a href="javascript:window.history.back()" id="login_btn" class="spotify_btn"><?=IndexGoBack;?></a>
</div>
<body class="flex flex-col h-screen px-4 py-auto gap-8 items-center justify-center text-center">
<div class="flex flex-col items-center justify-center">
<img src="assets/images/favicon.png" alt="Logo" width="100px" height="100px" class="mb-4">

<h1 class="text-3xl lg:text-4xl font-bold"><?=Error;?> 403</h1>
<h2 class="text-xl lg:text-2xl font-light mb-2"><?=IndexError403;?></h2>
</div>

<a href="javascript:window.history.back()" class="bg-[#15883D] px-12 py-3 rounded-full text-lg tracking-wide active:scale-95 transition"><?=IndexGoBack;?></a>
</body>
</html>


<?php

if(isset($_GET)){
if(isset($_GET['lang']) && !empty($_GET['lang'])){
setcookie('lang', $_GET['lang'], time() + 60*60*24*30);
}
}

include_once('lang.php');

if(isset($_GET['lang'])){
header('Location: '.$_SERVER['PHP_SELF']);
}

?>
38 changes: 25 additions & 13 deletions 404.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
?>

<!DOCTYPE html>
<html lang="<?=$lang;?>">
<html lang="<?=$lang;?>" class="bg-[#000020] text-white">
<head>
<title><?=Error;?> 404 - Now Playing</title>
<title><?=Error;?> 404 - NowPlaying</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="NowPlaying is a smooth Spotify Connect visualizer, updating in real-time and with playback support." />
Expand All @@ -35,17 +35,29 @@

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
<link href="assets/styles/index.css" rel="stylesheet" />

<script src="https://cdn.tailwindcss.com/"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'sans': ['Outfit', 'sans-serif']
},
}
}
}
</script>
</head>

<body>
<div class="content" style="margin:0 auto;text-align:center;">
<div>
<img src="assets/images/favicon.png" alt="Logo" width="100px" height="100px">
<h1 id="app_title"><?=Error;?> 404</h1>
<h2 id="app_desc"><?=IndexError404;?></h2>
</div>
<a href="javascript:window.history.back()" id="login_btn" class="spotify_btn"><?=IndexGoBack;?></a>
</div>
<body class="flex flex-col h-screen px-4 py-auto gap-8 items-center justify-center text-center">
<div class="flex flex-col items-center justify-center">
<img src="assets/images/favicon.png" alt="Logo" width="100px" height="100px" class="mb-4">

<h1 class="text-3xl lg:text-4xl font-bold"><?=Error;?> 404</h1>
<h2 class="text-xl lg:text-2xl font-light mb-2"><?=IndexError404;?></h2>
</div>

<a href="javascript:window.history.back()" class="bg-[#15883D] px-12 py-3 rounded-full text-lg tracking-wide active:scale-95 transition transform"><?=IndexGoBack;?></a>
</body>
</html>
</html>
105 changes: 0 additions & 105 deletions assets/styles/index.css
View file

This file was deleted.

146 changes: 111 additions & 35 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
?>

<!DOCTYPE html>
<html lang="<?=$lang;?>">
<html lang="<?=$lang;?>" class="bg-[#000020] text-white">
<head>
<title>NowPlaying</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png">
Expand All @@ -35,42 +35,118 @@

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
<link href="assets/styles/index.css" rel="stylesheet" />

<script src="https://cdn.tailwindcss.com/"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'sans': ['Outfit', 'sans-serif']
},
}
}
}
</script>
</head>

<body>
<div class="content" style="margin:0 auto;text-align:center;">
<div>
<img src="assets/images/favicon.png" alt="Logo" width="100px" height="100px">
<h1 id="app_title"><?=IndexTitle;?></h1>
<h2 id="app_desc"><?=IndexDescription;?></h2>
<div id="links_icons_div">
<a href="https://github.com/busybox11/NowPlaying-for-Spotify"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" class="links_icons"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></a>
<a href="https://discord.gg/DMmk8Sc"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" class="links_icons"><path d="M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z" /></svg></a>
<a href="https://paypal.me/busybox11"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" class="links_icons"><path d="M8.32 21.97a.546.546 0 0 1-.26-.32c-.03-.15-.06.11.6-4.09c.6-3.8.59-3.74.67-3.85c.13-.17.11-.17 1.61-.18c1.32-.03 1.6-.03 2.19-.12c3.25-.45 5.26-2.36 5.96-5.66c.04-.22.08-.41.09-.41c0-.01.07.04.15.1c1.03.78 1.38 2.22.99 4.14c-.46 2.29-1.68 3.81-3.58 4.46c-.81.28-1.49.39-2.69.42c-.8.04-.82.04-1.05.19c-.17.17-.16.14-.55 2.55c-.27 1.7-.37 2.25-.41 2.35c-.07.16-.21.3-.37.38l-.11.07H10c-1.29 0-1.62 0-1.68-.03m-4.5-2.23c-.19-.1-.32-.27-.32-.47C3.5 19 6.11 2.68 6.18 2.5c.09-.18.32-.37.5-.44L6.83 2h3.53c3.91 0 3.76 0 4.64.2c2.62.55 3.82 2.3 3.37 4.93c-.5 2.93-1.98 4.67-4.5 5.3c-.87.21-1.48.27-3.14.27c-1.31 0-1.41.01-1.67.15c-.26.15-.47.42-.56.75c-.04.07-.27 1.47-.53 3.1a241.3 241.3 0 0 0-.47 3.02l-.03.06H5.69c-1.58 0-1.8 0-1.87-.04z"></path></svg></a>
</div>
</div>
<a href="login.php" class="spotify_btn" id="login_btn"><?=IndexConnection;?></a>
<div>
<a href="?lang=en"><img src="assets/images/flags/uk.svg" title="English" class="flag_icons"></a>
<a href="?lang=fr"><img src="assets/images/flags/fr.svg" title="Français" class="flag_icons"></a>
<a href="?lang=it"><img src="assets/images/flags/it.svg" title="Italiano" class="flag_icons"></a>
<a href="?lang=es"><img src="assets/images/flags/es.svg" title="Español" class="flag_icons"></a>
<a href="?lang=ru"><img src="assets/images/flags/ru.svg" title="Pусский" class="flag_icons"></a>
<a href="?lang=de"><img src="assets/images/flags/de.svg" title="Deutsch" class="flag_icons"></a>
<a href="?lang=id"><img src="assets/images/flags/id.svg" title="Indonesia" class="flag_icons"></a>
<a href="?lang=cz"><img src="assets/images/flags/cz.svg" title="Czech" class="flag_icons"></a>
<a href="?lang=tr"><img src="assets/images/flags/tr.svg" title="Turkish" class="flag_icons"></a>
<a href="?lang=gr"><img src="assets/images/flags/gr.svg" title="Greece" class="flag_icons"></a>
<a href="?lang=zh_tw"><img src="assets/images/flags/zh_tw.svg" title="Traditionnal Chinese" class="flag_icons"></a>
<a href="?lang=ar"><img src="assets/images/flags/ar.svg" title="Arabic" class="flag_icons"></a>
<a href="?lang=eo"><img src="assets/images/flags/eo.svg" title="Esperanto" class="flag_icons"></a>
<a href="?lang=nl"><img src="assets/images/flags/nl.svg" title="Dutch" class="flag_icons"></a>
<a href="?lang=az"><img src="assets/images/flags/az.png" title="Azərbaycan" class="flag_icons"></a>

</div>
<p class="space20"></p>
<h6 id="disclaimer"><?=IndexCookie;?></h6>
<body class="flex flex-col h-screen px-4 py-auto gap-8 items-center justify-center text-center">
<div class="flex flex-col items-center justify-center">
<img src="assets/images/favicon.png" alt="Logo" width="100px" height="100px" class="mb-4">

<h1 class="text-3xl lg:text-4xl font-bold"><?=IndexTitle;?></h1>
<h2 class="text-xl lg:text-2xl font-light mb-2"><?=IndexDescription;?></h2>

<div class="flex flex-row gap-2 mt-2">
<a href="https://github.com/busybox11/NowPlaying-for-Spotify">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewBox="0 0 24 24"
class="text-white/50 hover:text-white transition h-6 w-6"
fill="currentColor"
>
<path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg>
</a>
<a href="https://discord.gg/DMmk8Sc">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewBox="0 0 24 24"
class="text-white/50 hover:text-white transition h-6 w-6"
fill="currentColor"
>
<path d="M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z" />
</svg>
</a>
<a href="https://paypal.me/busybox11">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewBox="0 0 24 24"
class="text-white/50 hover:text-white transition h-6 w-6"
fill="currentColor"
>
<path d="M8.32 21.97a.546.546 0 0 1-.26-.32c-.03-.15-.06.11.6-4.09c.6-3.8.59-3.74.67-3.85c.13-.17.11-.17 1.61-.18c1.32-.03 1.6-.03 2.19-.12c3.25-.45 5.26-2.36 5.96-5.66c.04-.22.08-.41.09-.41c0-.01.07.04.15.1c1.03.78 1.38 2.22.99 4.14c-.46 2.29-1.68 3.81-3.58 4.46c-.81.28-1.49.39-2.69.42c-.8.04-.82.04-1.05.19c-.17.17-.16.14-.55 2.55c-.27 1.7-.37 2.25-.41 2.35c-.07.16-.21.3-.37.38l-.11.07H10c-1.29 0-1.62 0-1.68-.03m-4.5-2.23c-.19-.1-.32-.27-.32-.47C3.5 19 6.11 2.68 6.18 2.5c.09-.18.32-.37.5-.44L6.83 2h3.53c3.91 0 3.76 0 4.64.2c2.62.55 3.82 2.3 3.37 4.93c-.5 2.93-1.98 4.67-4.5 5.3c-.87.21-1.48.27-3.14.27c-1.31 0-1.41.01-1.67.15c-.26.15-.47.42-.56.75c-.04.07-.27 1.47-.53 3.1a241.3 241.3 0 0 0-.47 3.02l-.03.06H5.69c-1.58 0-1.8 0-1.87-.04z"></path>
</svg>
</a>
</div>
</div>

<a href="login.php" class="bg-[#15883D] px-12 py-3 rounded-full text-lg tracking-wide active:scale-95 transition"><?=IndexConnection;?></a>

<div class="flex flex-row justify-center gap-3 lg:gap-4 flex-wrap">
<a href="?lang=en">
<img src="assets/images/flags/uk.svg" title="English" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=fr">
<img src="assets/images/flags/fr.svg" title="Français" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=it">
<img src="assets/images/flags/it.svg" title="Italiano" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=es">
<img src="assets/images/flags/es.svg" title="Español" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=ru">
<img src="assets/images/flags/ru.svg" title="Pусский" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=de">
<img src="assets/images/flags/de.svg" title="Deutsch" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=id">
<img src="assets/images/flags/id.svg" title="Indonesia" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=cz">
<img src="assets/images/flags/cz.svg" title="Czech" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=tr">
<img src="assets/images/flags/tr.svg" title="Turkish" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=gr">
<img src="assets/images/flags/gr.svg" title="Greece" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=zh_tw">
<img src="assets/images/flags/zh_tw.svg" title="Traditionnal Chinese" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=ar">
<img src="assets/images/flags/ar.svg" title="Arabic" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=eo">
<img src="assets/images/flags/eo.svg" title="Esperanto" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=nl">
<img src="assets/images/flags/nl.svg" title="Dutch" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
<a href="?lang=az">
<img src="assets/images/flags/az.png" title="Azərbaycan" class="h-8 w-8 opacity-50 hover:opacity-100 hover:scale-105 transition">
</a>
</div>

<h6 class="text-xs text-white/50 hover:text-white/80 transition"><?=IndexCookie;?></h6>
</body>
</html>

0 comments on commit 97ec689

Please sign in to comment.