diff --git a/www/css/services.css b/www/css/services.css index 35996e2..576a223 100644 --- a/www/css/services.css +++ b/www/css/services.css @@ -4,116 +4,88 @@ main { width: 100vw; } -.serviceWrapper { - width: 80%; + +.serviceGrid { display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 1em; - - margin: auto auto; - margin-top: 4em; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; + padding: 2rem; + margin: 6% 2%; } -.categoryContainer { - border: 4px solid #002244; - border-radius: 5px; - - box-shadow : 0 0 20px #002244; - - margin-bottom: 20px; -} - -.categoryLabel { - padding-top: 5px; - background-color: #002244; - color: white; - - padding-left: 10px; - - font-family: monospace; - font-size: 24px; -} - -.service { - border: 2px solid #002244; - border-radius: 5px; - padding: 10px; - margin: 10px; - +/* Base styles for all cards */ +.baseServiceCard { display: flex; - flex-direction: row; + gap: 0.6rem; + padding: 1rem; + border-radius: 14px; + + box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3); } +/* Category Title Card Styling */ + +.categoryTitleCard { + align-items: center; + justify-content: center; + text-align: center; + + box-shadow: none; + min-height: 140px; +} + +.categoryTitle { + margin: 0; + font-weight: bold; + font-size: 1.5rem; +} + +/* Service Card Styling */ + +.serviceCard { + display: flex; + gap: 0.6rem; + padding: 1rem; + border-radius: 14px; + + height: fit-content; + width: fit-content; +} + +/*.serviceCard:hover { + transform: translateY(-4px); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); +}*/ + .serviceContent { - flex-grow: 1; - margin-right: 4%; + flex: 1; } .serviceTitle { - margin: 0.2em !important; + margin: 0 0 0.5rem; + font-size: 1.2rem; } .serviceDescription { - margin-top: 0px !important; + margin: 0 0 1rem; + font-size: 0.95rem; + line-height: 1.5; } -.serviceDescription::before { - content: " - "; - font-size: 18px; - display: inline; +.serviceLink a { + color: #0066cc; + text-decoration: none; + font-weight: 600; + } -.serviceLink { - width: 70%; - padding-bottom: 5px; - border-radius: 5px; - border: 2px solid #002244; - padding: 7px; - margin-top: 4px; -} -.serviceLink > a { - margin-bottom: 10px; - word-break: break-word; +.serviceLink a:hover { + text-decoration: underline; } .serviceImage { - flex-shrink: 1; - width: 100px; - height: 100px; - - margin: auto auto; -} - -@media (max-width: 800px) { - .serviceWrapper { - grid-template-columns: 1fr; - } - .categoryContainer { - width: 100%; - } -} - -@media (max-width: 480px) { - .categoryContainer { - border-radius: unset; - border: unset; - box-shadow: unset; - margin-bottom: unset; - } - .serviceWrapper { - width: 100%; - } - .serviceImage { - width: 25%; - height: auto; - } - .serviceContent { - width: 50%; - } -} - -@media (max-width: 360px) { - .serviceContent { - font-size: 14px; - } + width: 56px; + height: 56px; + object-fit: contain; + align-self: flex-start; } diff --git a/www/tjenester/index.php b/www/tjenester/index.php index 974dbad..6f81fb8 100644 --- a/www/tjenester/index.php +++ b/www/tjenester/index.php @@ -4,8 +4,134 @@ namespace pvv\side; require_once \dirname(__DIR__, 2) . implode(\DIRECTORY_SEPARATOR, ['', 'inc', 'include.php']); +# TODO: no me gusta galore, please choose some better colors, omg + +# Light blue monochromatic color palette +$colorPalette = [ + "#D1F8EF60", + "#3674B560", + "#A1E3F960", + "#578FCA60", +]; + +function rgbToHsl(int $r, int $g, int $b): array +{ + // Assert valid RGB range + if ($r < 0 || $r > 255 || $g < 0 || $g > 255 || $b < 0 || $b > 255) { + throw new \InvalidArgumentException('RGB values must be between 0 and 255'); + } + + $r /= 255; + $g /= 255; + $b /= 255; + + $max = max($r, $g, $b); + $min = min($r, $g, $b); + $delta = $max - $min; + + $l = ($max + $min) / 2; + + if ($delta == 0) { + $h = 0; + $s = 0; + } else { + $s = $delta / (1 - abs(2 * $l - 1)); + + if ($max === $r) { + $h = 60 * (($g - $b) / $delta); + if ($h < 0) { + $h += 360; + } + } elseif ($max === $g) { + $h = 60 * ((($b - $r) / $delta) + 2); + } else { + $h = 60 * ((($r - $g) / $delta) + 4); + } + } + + return [ + 'h' => round($h, 2), + 's' => round($s * 100, 2), + 'l' => round($l * 100, 2), + ]; +} + +function hslToRgb(float $h, float $s, float $l): array +{ + // Assert valid HSL ranges + if ($h < 0 || $h > 360) { + throw new \InvalidArgumentException('Hue must be between 0 and 360'); + } + if ($s < 0 || $s > 100 || $l < 0 || $l > 100) { + throw new \InvalidArgumentException('Saturation and Lightness must be between 0 and 100'); + } + + $s /= 100; + $l /= 100; + + $c = (1 - abs(2 * $l - 1)) * $s; + $m = $l - $c / 2; + + // Determine hue sector explicitly + if ($h < 60) { + $r1 = $c; + $g1 = ($h / 60) * $c; + $b1 = 0; + } elseif ($h < 120) { + $r1 = (2 - $h / 60) * $c; + $g1 = $c; + $b1 = 0; + } elseif ($h < 180) { + $r1 = 0; + $g1 = $c; + $b1 = (($h - 120) / 60) * $c; + } elseif ($h < 240) { + $r1 = 0; + $g1 = (4 - $h / 60) * $c; + $b1 = $c; + } elseif ($h < 300) { + $r1 = (($h - 240) / 60) * $c; + $g1 = 0; + $b1 = $c; + } else { // h < 360 + $r1 = $c; + $g1 = 0; + $b1 = (6 - $h / 60) * $c; + } + + return [ + 'r' => (int) round(($r1 + $m) * 255), + 'g' => (int) round(($g1 + $m) * 255), + 'b' => (int) round(($b1 + $m) * 255), + ]; +} + +function generateHighlightColor(string $hexColor): string { + $r = hexdec(substr($hexColor, 1, 2)); + $g = hexdec(substr($hexColor, 3, 2)); + $b = hexdec(substr($hexColor, 5, 2)); + $a = hexdec(substr($hexColor, 7, 2)); + + $hsl = rgbToHsl($r, $g, $b); + + // Increase lightness by 20%, cap at 100% + $hsl['l'] = min(100, $hsl['l'] + 20); + + $rgb = hslToRgb($hsl['h'], $hsl['s'], $hsl['l']); + + return sprintf( + "#%02x%02x%02x%02x", + $rgb['r'], + $rgb['g'], + $rgb['b'], + $a, + ); +} + $services = [ - "Versjonskontroll og utvikling" => [ + "vcs" => [ + "title" => "Versjonskontroll og utvikling", + "services" => [ [ "name" => "Gitea", "description" => "Vår interne git-tjener, åpen for alle medlemmer", @@ -27,133 +153,163 @@ $services = [ "link_text" => "Gå til Codeberg", "image" => "img/codeberg.svg", ] - ], - "Webmail" => [ - [ - "name" => "Roundcube", - "description" => "En av våre webmail-klienter for epost.", - "link" => "https://webmail.pvv.ntnu.no/", - "link_text" => "Gå til Roundcube", - "image" => "img/roundcube.svg", - ], - [ - "name" => "Snappymail", - "description" => "En annen av våre webmail-klienter for epost.", - "link" => "https://snappymail.pvv.ntnu.no/", - "link_text" => "Gå til Snappymail", - "image" => "img/snappymail.svg", - ], - [ - "name" => "Alps", - "description" => "Jaggu enda en webmail-klient for epost.", - "link" => "https://alps.pvv.ntnu.no/", - "link_text" => "Gå til Alps", - "image" => "img/alps.svg", ] ], - "Kommunikasjon" => [ - [ - "name" => "Matrix via Element", - "description" => implode( - " ", - [ - "Åpen kommunikasjonsprotokoll som støtter ende-til-ende-kryptering og utallige kule funksjoner.", - "Vårt space er bridget sammen med Discord, så du får alle de samme meldingene.", - "#pvv:pvv.ntnu.no", - ], - ), - "link" => "https://chat.pvv.ntnu.no", - "link_text" => "Gå til chat.pvv.ntnu.no", - "image" => "img/element.svg", - ], - [ - "name" => "Discord", - "description" => "Vår hovedkanal, her finner du alt fra ofisielle announcements til memes og driftsdiskusjoner.", - "link" => "https://discord.gg/WpaHGV8K", - "link_text" => "Gå til Discord", - "image" => "img/discord.svg", - ], - [ - "name" => "Epost", - "description" => "Som PVV-medlem får du din egen @pvv.ntnu.no-adresse, som kan brukes med alle vanlige epostprotokoller.", - "link" => "https://webmail.pvv.ntnu.no/", - "link_text" => "Gå til Rouncubcube webmail", - "image" => "img/email.png", - ], - [ - "name" => "IRC", - "description" => "Hvis Discord er for proprietært og Matrix er for hypermoderne er kanskje IRC for deg. Vi har en kanal på IRCNet, #pvv.", - "link" => "irc://irc.pvv.ntnu.no/pvv", - "link_text" => "Koble til med IRC", - "image" => "img/irc.png", + "webmail" => [ + "title" => "Epostklienter", + "services" => [ + [ + "name" => "Roundcube", + "description" => "En av våre webmail-klienter for epost.", + "link" => "https://webmail.pvv.ntnu.no/", + "link_text" => "Gå til Roundcube", + "image" => "img/roundcube.svg", + ], + [ + "name" => "Snappymail", + "description" => "En annen av våre webmail-klienter for epost.", + "link" => "https://snappymail.pvv.ntnu.no/", + "link_text" => "Gå til Snappymail", + "image" => "img/snappymail.svg", + ], + [ + "name" => "Alps", + "description" => "Jaggu enda en webmail-klient for epost.", + "link" => "https://alps.pvv.ntnu.no/", + "link_text" => "Gå til Alps", + "image" => "img/alps.svg", + ], ], ], - "Hosting" => [ - [ - "name" => "Brukernettsider", - "description" => "Alle brukere får automatisk en egen side for html og php. Denne er offentlig på pvv.ntnu.no/~brukernavn.", - "link" => "https://wiki.pvv.ntnu.no/wiki/Tjenester/Hjemmesider", - "link_text" => "Gå til dokumentasjon på wiki", - "image" => "img/php.png", - ], - [ - "name" => "Gopherhull", - "description" => "PVV driver en egen gopher-tjener for nostalgikere og retroentusiaster.", - "link" => "https://wiki.pvv.ntnu.no/wiki/Tjenester/Gopherhull", - "link_text" => "Se dokumentasjon for gophertjening", - "image" => "img/gopher.png", - ], - [ - "name" => "Wiki", - "description" => "PVVs wiki er åpen for alle medlemmer, og kan brukes til dokumentasjon, notater, prosjektsider og mye mer.", - "link" => "https://wiki.pvv.ntnu.no", - "link_text" => "Gå til wiki.pvv.ntnu.no", - "image" => "img/mediawiki.svg", - ], - [ - "name" => "PVV-siden", - "description" => "Du befinner deg nå på PVV sin offisielle hjemmeside. Den er skrevet i PHP og kjører på en egen server.", - "link" => "https://git.pvv.ntnu.no/Projects/nettsiden", - "link_text" => "Se koden på gitea", - "image" => "../pvv-logo.png", + "communication" => [ + "title" => "Kommunikasjon", + "services" => [ + [ + "name" => "Matrix via Element", + "description" => implode( + " ", + [ + "Åpen kommunikasjonsprotokoll som støtter ende-til-ende-kryptering og utallige kule funksjoner.", + "Vårt space er bridget sammen med Discord, så du får alle de samme meldingene.", + "#pvv:pvv.ntnu.no", + ], + ), + "link" => "https://chat.pvv.ntnu.no", + "link_text" => "Gå til chat.pvv.ntnu.no", + "image" => "img/element.svg", + ], + [ + "name" => "Discord", + "description" => "Vår hovedkanal, her finner du alt fra ofisielle announcements til memes og driftsdiskusjoner.", + "link" => "https://discord.gg/WpaHGV8K", + "link_text" => "Gå til Discord", + "image" => "img/discord.svg", + ], + [ + "name" => "Epost", + "description" => "Som PVV-medlem får du din egen @pvv.ntnu.no-adresse, som kan brukes med alle vanlige epostprotokoller.", + "link" => "https://webmail.pvv.ntnu.no/", + "link_text" => "Gå til Rouncubcube webmail", + "image" => "img/email.png", + ], + [ + "name" => "IRC", + "description" => "Hvis Discord er for proprietært og Matrix er for hypermoderne er kanskje IRC for deg. Vi har en kanal på IRCNet, #pvv.", + "link" => "irc://irc.pvv.ntnu.no/pvv", + "link_text" => "Koble til med IRC", + "image" => "img/irc.png", + ], ], ], - "Underholdning" => [ - [ - "name" => "Minecraft", - "description" => "Vi har en egen Minecraft-server for medlemmer, som du kan koble til med IP-adressen minecraft.pvv.ntnu.no. Spør om whitelist på matrix/discord.", - "link" => "https://minecraft.pvv.ntnu.no", - "link_text" => "Gå til verdenskartet vårt", - "image" => "img/minecraft.png", - ], - [ - "name" => "MiniFlux RSS reader", - "description" => "Trenger du en cross-platform RSS/Atom-leser for å følge med på omverdenen som det er 1990? ", - "link" => "https://feeds.pvv.ntnu.no", - "link_text" => "Gå til MiniFlux", - "image" => "img/rss.svg", - ], - [ - "name" => "Bildegalleri", - "description" => "PVV har et felles bildegalleri, der alle kan legge relevante bilder, som automatisk blir inkludert på nettsiden.", - "link" => "https://www.pvv.ntnu.no/galleri/", - "link_text" => "Se galleriet", - "image" => "img/gallery.png", + "hosting" => [ + "title" => "Verting og nettsider", + "services" => [ + [ + "name" => "Brukernettsider", + "description" => "Alle brukere får automatisk en egen side for html og php. Denne er offentlig på pvv.ntnu.no/~brukernavn.", + "link" => "https://wiki.pvv.ntnu.no/wiki/Tjenester/Hjemmesider", + "link_text" => "Gå til dokumentasjon på wiki", + "image" => "img/php.png", + ], + [ + "name" => "Gopherhull", + "description" => "PVV driver en egen gopher-tjener for nostalgikere og retroentusiaster.", + "link" => "https://wiki.pvv.ntnu.no/wiki/Tjenester/Gopherhull", + "link_text" => "Se dokumentasjon for gophertjening", + "image" => "img/gopher.png", + ], + [ + "name" => "Wiki", + "description" => "PVVs wiki er åpen for alle medlemmer, og kan brukes til dokumentasjon, notater, prosjektsider og mye mer.", + "link" => "https://wiki.pvv.ntnu.no", + "link_text" => "Gå til wiki.pvv.ntnu.no", + "image" => "img/mediawiki.svg", + ], + [ + "name" => "PVV-siden", + "description" => "Du befinner deg nå på PVV sin offisielle hjemmeside. Den er skrevet i PHP og kjører på en egen server.", + "link" => "https://git.pvv.ntnu.no/Projects/nettsiden", + "link_text" => "Se koden på gitea", + "image" => "../pvv-logo.png", + ], ], ], -] + "recreational" => [ + "title" => "Underholdning og fritid", + "services" => [ + [ + "name" => "Minecraft", + "description" => "Vi har en egen Minecraft-server for medlemmer, som du kan koble til med IP-adressen minecraft.pvv.ntnu.no. Spør om whitelist på matrix/discord.", + "link" => "https://minecraft.pvv.ntnu.no", + "link_text" => "Gå til verdenskartet vårt", + "image" => "img/minecraft.png", + ], + [ + "name" => "MiniFlux RSS reader", + "description" => "Trenger du en cross-platform RSS/Atom-leser for å følge med på omverdenen som det er 1990? ", + "link" => "https://feeds.pvv.ntnu.no", + "link_text" => "Gå til MiniFlux", + "image" => "img/rss.svg", + ], + [ + "name" => "Bildegalleri", + "description" => "PVV har et felles bildegalleri, der alle kan legge relevante bilder, som automatisk blir inkludert på nettsiden.", + "link" => "https://www.pvv.ntnu.no/galleri/", + "link_text" => "Se galleriet", + "image" => "img/gallery.png", + ], + ], + ], +]; + +$servicesArrayKeys = array_keys($services); +for ($i = 0; $i < count($services); $i++) { + $servicesKey = $servicesArrayKeys[$i]; + $services[$servicesKey]['bgcolor'] = $colorPalette[$i % count($colorPalette)]; +} ?> - - - - - - - -Tjenesteverkstedet + + + + + + + + + Tjenesteverkstedet + +
Tjenesteverkstedet
@@ -163,23 +319,34 @@ $services = [
-
- $serviceList): ?> -
-
-
- -
-
-

-

-
-
- <?php echo htmlspecialchars($service['name']); ?>-logo -
- +
+ $category): + $categoryClass = 'category-' . htmlspecialchars($categoryId); + ?> + +
+

+ +

-
+ + +
+
+

+

+
+ + + +
+
+ + <?php echo htmlspecialchars($service['name']); ?> logo +
+