Projects/nettsiden
8
3
Fork 0
Code Issues 28 Pull Requests Activity

tjenester: grid and shid

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2026-01-13 16:48:13 +09:00
parent 2e7acb7a9a
commit 7f706ccd2a
2 changed files with 363 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
www/css/services.css
View File

@@ -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;
}

431
www/tjenester/index.php
View File

@@ -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)];
}
?>
<!DOCTYPE html>
<html lang="no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/services.css">
<meta name="theme-color" content="#024" />
<title>Tjenesteverkstedet</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/services.css">
<meta name="theme-color" content="#024" />
<title>Tjenesteverkstedet</title>
<style>
<?php foreach ($services as $categoryId => $category):
$categoryClass = '.category-' . htmlspecialchars($categoryId);
?>
<?php echo $categoryClass; ?> {
background: linear-gradient(135deg, <?php echo generateHighlightColor($category['bgcolor']) ?>, <?php echo $category['bgcolor']; ?>);
}
<?php endforeach; ?>
</style>
</head>
<header>Tjenesteverkstedet</header>
@@ -163,23 +319,34 @@ $services = [
<?php echo loginbar($sp, $pdo); ?>
</nav>
<main>
<div class="serviceWrapper">
<?php foreach ($services as $category => $serviceList): ?>
<div class="categoryContainer">
<div class="categoryLabel"><?php echo htmlspecialchars($category); ?></div>
<div class="categoryContent">
<?php foreach ($serviceList as $service): ?>
<div class="service">
<div class="serviceContent">
<h2 class="serviceTitle"><?php echo htmlspecialchars($service['name']); ?></h2>
<p class="serviceDescription"><?php echo htmlspecialchars($service['description']); ?></p>
<div class="serviceLink"><a href="<?php echo htmlspecialchars($service['link']); ?>" target="_blank"><?php echo htmlspecialchars($service['link_text']); ?></a></div>
</div>
<img class="serviceImage" src="<?php echo htmlspecialchars($service['image']); ?>" alt="<?php echo htmlspecialchars($service['name']); ?>-logo">
</div>
<?php endforeach; ?>
<div class="serviceGrid">
<?php foreach ($services as $categoryId => $category):
$categoryClass = 'category-' . htmlspecialchars($categoryId);
?>
<div class="baseServiceCard categoryTitleCard <?php echo $categoryClass; ?>">
<h3 class="categoryTitle">
<?php echo htmlspecialchars($category['title']); ?>
</h3>
</div>
</div>
<?php foreach ($category['services'] as $service): ?>
<div class="baseServiceCard serviceCard <?php echo $categoryClass; ?>">
<div class="serviceContent">
<h3 class="serviceTitle"><?php echo htmlspecialchars($service['name']); ?></h3>
<p class="serviceDescription"><?php echo htmlspecialchars($service['description']); ?></p>
<div class="serviceLink">
<a href="<?php echo htmlspecialchars($service['link']); ?>" target="_blank">
<?php echo htmlspecialchars($service['link_text']); ?>
</a>
</div>
</div>
<img class="serviceImage"
src="<?php echo htmlspecialchars($service['image']); ?>"
alt="<?php echo htmlspecialchars($service['name']); ?> logo">
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
</main>