feat: favicon and astroneer

This commit is contained in:
2026-07-08 18:39:10 +02:00
parent 82abc317f1
commit b351354436
16 changed files with 440 additions and 27 deletions
+155
View File
@@ -0,0 +1,155 @@
import type { Metadata } from "next";
import Link from "next/link";
import CopyAddressButton from "../components/CopyAddressButton";
import { astroneerServer } from "../lib/server-config";
const joinSteps = [
{
number: "1",
title: "Lance Astroneer",
text: "Ouvre le jeu avec ton compte habituel et une version à jour.",
},
{
number: "2",
title: "Ouvre le multijoueur",
text: "Va dans les serveurs dédiés depuis le menu de coopération.",
},
{
number: "3",
title: "Ajoute l'adresse",
text: `Renseigne ${astroneerServer.address} dans la connexion serveur.`,
},
{
number: "4",
title: "Rejoins la partie",
text: "Connecte-toi au serveur et retrouve la base partagée.",
},
];
export const metadata: Metadata = {
title: "Astroneer | Le serveur de Leon",
};
export default function AstroneerPage() {
return (
<main className="astroneer-page notranslate" translate="no">
<nav className="minecraft-nav" aria-label="Navigation Astroneer">
<Link href="/" className="minecraft-brand">
<HomeIcon />
<span>Accueil</span>
</Link>
<div className="minecraft-nav-links">
<Link href="/">Accueil</Link>
<a href="#infos">Infos</a>
<a href="#rejoindre">Rejoindre</a>
<Link href="/minecraft">Minecraft</Link>
</div>
</nav>
<section className="astroneer-hero" aria-labelledby="astroneer-title">
<div className="astroneer-orbit" aria-hidden="true">
<span className="astroneer-planet" />
<span className="astroneer-moon" />
<span className="astroneer-rover" />
</div>
<div className="minecraft-hero-content astroneer-hero-content">
<h1 id="astroneer-title">Astroneer</h1>
<p>Serveur dédié privé pour explorer, automatiser et construire entre amis.</p>
<div className="server-address block-panel">
<PlanetIcon />
<span>{astroneerServer.address}</span>
</div>
<div className="minecraft-actions">
<CopyAddressButton value={astroneerServer.address} />
</div>
</div>
</section>
<div className="minecraft-content">
<section id="infos" className="minecraft-section">
<div className="section-heading pixel-heading">
<h2>Infos serveur</h2>
<p>Les informations utiles pour te connecter.</p>
</div>
<div className="status-panel block-panel astroneer-info-panel">
<InfoItem label="Adresse" value={astroneerServer.address} />
<InfoItem label="Type" value={astroneerServer.access} />
<InfoItem label="Jeu" value="Astroneer" />
<InfoItem label="Accès" value="Privé" />
</div>
</section>
<section id="rejoindre" className="minecraft-section">
<div className="section-heading pixel-heading">
<h2>Comment rejoindre</h2>
<p>Quatre étapes pour entrer sur le serveur.</p>
</div>
<div className="steps-grid">
{joinSteps.map((step) => (
<article className="step-card block-panel" key={step.number}>
<span className="step-number">{step.number}</span>
<h3>{step.title}</h3>
<p>{step.text}</p>
</article>
))}
</div>
</section>
<div className="minecraft-back">
<Link href="/" className="back-home-link">
<ArrowLeftIcon />
<span>Retour accueil</span>
</Link>
</div>
</div>
</main>
);
}
type InfoItemProps = {
label: string;
value: string;
};
function InfoItem({ label, value }: InfoItemProps) {
return (
<div className="status-item notranslate" translate="no">
<span className="status-label">{label}</span>
<strong className="status-value">{value}</strong>
</div>
);
}
function HomeIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="m3 11 9-7 9 7" />
<path d="M5 10v10h14V10" />
<path d="M10 20v-6h4v6" />
</svg>
);
}
function PlanetIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="5" />
<path d="M3 12c4-5 14-7 18-3" />
<path d="M4 15c5 4 13 5 17 0" />
</svg>
);
}
function ArrowLeftIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19 12H7" />
<path d="m11 6-6 6 6 6" />
</svg>
);
}
+43 -4
View File
@@ -4,9 +4,9 @@ import type { ReactNode } from "react";
type HomeElementProps = {
title: string;
description: string;
href: string;
href?: string;
actionLabel: string;
variant: "jellyfin" | "minecraft";
variant: "jellyfin" | "minecraft" | "astroneer";
external?: boolean;
children: ReactNode;
};
@@ -29,14 +29,18 @@ export default function HomeElement({
<span>{description}</span>
</span>
<span className="service-action">
{actionLabel}
<ArrowIcon />
<span className="service-action-label">{actionLabel}</span>
{href ? <ArrowIcon /> : <SignalIcon />}
</span>
</>
);
const className = `service-card service-card--${variant}`;
if (!href) {
return <article className={className}>{content}</article>;
}
if (external) {
return (
<a href={href} className={className} target="_blank" rel="noopener noreferrer">
@@ -94,6 +98,31 @@ export function MinecraftIcon() {
);
}
export function AstroneerIcon() {
return (
<svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
<defs>
<linearGradient id="astroneer-gradient" x1="16" y1="82" x2="80" y2="14">
<stop stopColor="#ffd54a" />
<stop offset="0.48" stopColor="#ff7a3d" />
<stop offset="1" stopColor="#6df4ff" />
</linearGradient>
</defs>
<path
d="M14 54c13-25 44-39 68-28"
fill="none"
stroke="url(#astroneer-gradient)"
strokeLinecap="round"
strokeWidth="7"
/>
<circle cx="45" cy="48" r="22" fill="#172341" stroke="#6df4ff" strokeWidth="6" />
<path d="M29 41h13l7 8h18" fill="none" stroke="#ffd54a" strokeLinecap="round" strokeWidth="6" />
<path d="M38 65h14l9-9" fill="none" stroke="#ff7a3d" strokeLinecap="round" strokeWidth="6" />
<circle cx="70" cy="25" r="8" fill="#ffd54a" />
</svg>
);
}
function ArrowIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
@@ -102,3 +131,13 @@ function ArrowIcon() {
</svg>
);
}
function SignalIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 12.5a10 10 0 0 1 14 0" />
<path d="M8.5 16a5 5 0 0 1 7 0" />
<path d="M12 19h.01" />
</svg>
);
}
+1 -1
View File
@@ -99,7 +99,7 @@ type StatusItemProps = {
function StatusItem({ label, value, tone }: StatusItemProps) {
return (
<div className="status-item">
<div className="status-item notranslate" translate="no">
<span className="status-label">{label}</span>
<strong className={tone ? `status-value status-value--${tone}` : "status-value"}>
{tone ? <span className="status-light" aria-hidden="true" /> : null}
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 31 KiB

+178 -7
View File
@@ -178,9 +178,9 @@ svg {
.service-grid {
display: grid;
width: min(860px, 100%);
width: min(1120px, 100%);
margin-top: 48px;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
@@ -248,6 +248,14 @@ svg {
color: #46ee89;
}
.service-card--astroneer {
--service-accent: #ffb347;
border-color: #ffb347;
box-shadow: var(--shadow-hard), 0 0 28px rgb(255 179 71 / 30%), inset 0 0 0 1px rgb(255 255 255 / 9%);
color: #ffd66b;
}
.service-status {
position: absolute;
top: 24px;
@@ -315,6 +323,7 @@ svg {
min-height: 56px;
width: 100%;
margin-top: 24px;
padding: 0 14px;
align-items: center;
justify-content: center;
gap: 12px;
@@ -323,6 +332,13 @@ svg {
background: var(--service-accent);
color: #06111a;
font-weight: 800;
line-height: 1.2;
text-align: center;
}
.service-action-label {
min-width: 0;
overflow-wrap: anywhere;
}
.service-card--jellyfin .service-action {
@@ -336,6 +352,11 @@ svg {
color: #041411;
}
.service-card--astroneer .service-action {
background: linear-gradient(180deg, #ffd66b, #ff9f43);
color: #1a1025;
}
.service-action svg {
width: 20px;
height: 20px;
@@ -383,6 +404,18 @@ svg {
line-height: 1.35;
}
.astroneer-page {
min-height: 100vh;
overflow-x: hidden;
background:
radial-gradient(circle at 72% 18%, rgb(109 244 255 / 22%), transparent 24%),
linear-gradient(180deg, #11102a 0%, #151a30 46%, #24170f 100%);
color: var(--paper);
font-family: var(--font-retro), var(--font-geist-mono), monospace;
font-size: 1.35rem;
line-height: 1.35;
}
.minecraft-nav {
position: sticky;
top: 0;
@@ -413,9 +446,11 @@ svg {
.minecraft-nav-links svg {
width: 26px;
height: 26px;
fill: var(--diamond, #5ad4e6);
stroke: #0a0c12;
stroke-width: 1.1;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.minecraft-nav-links {
@@ -464,6 +499,110 @@ svg {
filter: saturate(1.05) contrast(1.04);
}
.astroneer-hero {
position: relative;
display: grid;
min-height: 680px;
margin-top: -72px;
padding: 148px 24px 86px;
place-items: center;
overflow: hidden;
}
.astroneer-hero::before {
position: absolute;
inset: 0;
background:
radial-gradient(circle, rgb(255 255 255 / 80%) 1px, transparent 1.5px) 0 0 / 96px 96px,
radial-gradient(circle, rgb(109 244 255 / 65%) 1px, transparent 1.5px) 44px 18px / 148px 148px;
content: "";
opacity: 0.55;
}
.astroneer-hero::after {
position: absolute;
inset: auto 0 0;
height: 230px;
background: linear-gradient(180deg, transparent, rgb(17 16 42 / 80%) 58%, #151a30 100%);
content: "";
}
.astroneer-orbit {
position: absolute;
top: 64%;
left: 50%;
z-index: 1;
width: min(760px, 84vw);
aspect-ratio: 1;
border: 3px solid rgb(255 213 74 / 36%);
border-radius: 50%;
opacity: 0.72;
transform: translate(-50%, -50%) rotate(-16deg);
}
.astroneer-planet {
position: absolute;
top: 50%;
left: 50%;
width: min(320px, 48vw);
aspect-ratio: 1;
border: 6px solid #030303;
border-radius: 50%;
background:
radial-gradient(circle at 30% 28%, #6df4ff 0 7%, transparent 8%),
radial-gradient(circle at 67% 62%, #ffb347 0 10%, transparent 11%),
linear-gradient(135deg, #27315f 0 42%, #ff7a3d 42% 58%, #172341 58% 100%);
box-shadow: 14px 14px 0 rgb(0 0 0 / 42%), 0 0 60px rgb(109 244 255 / 24%);
transform: translate(-50%, -50%);
}
.astroneer-moon {
position: absolute;
top: 9%;
right: 18%;
width: 62px;
aspect-ratio: 1;
border: 5px solid #030303;
border-radius: 50%;
background: #ffd66b;
box-shadow: 8px 8px 0 rgb(0 0 0 / 36%);
}
.astroneer-rover {
position: absolute;
bottom: 14%;
left: 18%;
width: 86px;
height: 28px;
border: 5px solid #030303;
background: #6df4ff;
box-shadow: 8px 8px 0 rgb(0 0 0 / 36%);
}
.astroneer-rover::before,
.astroneer-rover::after {
position: absolute;
bottom: -18px;
width: 24px;
height: 24px;
border: 4px solid #030303;
border-radius: 50%;
background: #ff9f43;
content: "";
}
.astroneer-rover::before {
left: 8px;
}
.astroneer-rover::after {
right: 8px;
}
.astroneer-hero-content {
text-shadow: 4px 4px 0 #030303;
}
.minecraft-hero-content {
position: relative;
z-index: 2;
@@ -552,6 +691,7 @@ svg {
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
font-size: 0.82rem;
line-height: 1.25;
text-decoration: none;
transition: transform 160ms ease, box-shadow 160ms ease;
}
@@ -566,7 +706,8 @@ svg {
8px 8px 0 rgb(0 0 0 / 56%);
}
.copy-address-button {
.copy-address-button,
.map-button {
padding: 0 24px;
background: var(--gold);
color: #16120a;
@@ -577,7 +718,6 @@ svg {
background: var(--green);
}
.map-button,
.large-map-link {
padding: 0 24px;
background: #12c8c7;
@@ -671,6 +811,10 @@ h2.pixel-heading {
overflow-wrap: anywhere;
}
.astroneer-info-panel .status-value {
font-size: 0.78rem;
}
.status-value--online {
color: #7aff5f;
}
@@ -852,6 +996,15 @@ h2.pixel-heading {
padding-top: 214px;
}
.astroneer-hero {
margin-top: -118px;
padding-top: 214px;
}
.service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.status-panel,
.steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -916,6 +1069,10 @@ h2.pixel-heading {
font-size: 1.2rem;
}
.astroneer-page {
font-size: 1.2rem;
}
.minecraft-nav-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -930,6 +1087,12 @@ h2.pixel-heading {
padding-left: 16px;
}
.astroneer-hero {
min-height: 720px;
padding-right: 16px;
padding-left: 16px;
}
.minecraft-hero-content h1 {
font-size: 2.45rem;
}
@@ -943,6 +1106,14 @@ h2.pixel-heading {
font-size: 0.88rem;
}
.astroneer-orbit {
width: 540px;
}
.astroneer-planet {
width: 230px;
}
.minecraft-actions,
.copy-address-button,
.map-button {
+13
View File
@@ -32,6 +32,19 @@ const vt323 = VT323({
export const metadata: Metadata = {
title: "Le serveur de Leon",
description: "Streaming, Minecraft et services privés de Leon.",
robots: {
index: false,
follow: false,
nocache: true,
googleBot: {
index: false,
follow: false,
noimageindex: true,
"max-image-preview": "none",
"max-snippet": 0,
"max-video-preview": 0,
},
},
};
export default function RootLayout({
+7
View File
@@ -4,6 +4,7 @@ export const siteConfig = {
description: "Streaming, jeux et services privés au même endroit.",
jellyfinUrl: "https://momostreaming.com",
minecraftPath: "/minecraft",
astroneerPath: "/astroneer",
};
export const minecraftServer = {
@@ -13,3 +14,9 @@ export const minecraftServer = {
versionHint: "Java",
access: "Whitelist sur demande",
};
export const astroneerServer = {
name: "Astroneer",
address: "astroneer.leonmorival.xyz",
access: "Serveur dédié",
};
+8 -8
View File
@@ -2,7 +2,7 @@ import Image from "next/image";
import Link from "next/link";
import CopyAddressButton from "../components/CopyAddressButton";
import MinecraftStatus from "../components/MinecraftStatus";
import { minecraftServer, siteConfig } from "../lib/server-config";
import { minecraftServer } from "../lib/server-config";
const joinSteps = [
{
@@ -29,11 +29,11 @@ const joinSteps = [
export default function MinecraftPage() {
return (
<main className="minecraft-page">
<main className="minecraft-page notranslate" translate="no">
<nav className="minecraft-nav" aria-label="Navigation Minecraft">
<Link href="/" className="minecraft-brand">
<SwordIcon />
<span>{siteConfig.name}</span>
<HomeIcon />
<span>Accueil</span>
</Link>
<div className="minecraft-nav-links">
<Link href="/">Accueil</Link>
@@ -133,12 +133,12 @@ export default function MinecraftPage() {
);
}
function SwordIcon() {
function HomeIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M14.6 4h5.4v5.4L9 20.4 3.6 15z" />
<path d="M5.8 12.8 11.2 18" />
<path d="M4 20 8 16" />
<path d="m3 11 9-7 9 7" />
<path d="M5 10v10h14V10" />
<path d="M10 20v-6h4v6" />
</svg>
);
}
+12 -1
View File
@@ -1,9 +1,10 @@
import Link from "next/link";
import HomeElement, {
AstroneerIcon,
JellyfinIcon,
MinecraftIcon,
} from "./components/HomeElement";
import { siteConfig } from "./lib/server-config";
import { astroneerServer, siteConfig } from "./lib/server-config";
export default function Home() {
return (
@@ -42,6 +43,16 @@ export default function Home() {
>
<MinecraftIcon />
</HomeElement>
<HomeElement
title={astroneerServer.name}
description="Infos et adresse du serveur dédié."
href={siteConfig.astroneerPath}
actionLabel="Voir le serveur"
variant="astroneer"
>
<AstroneerIcon />
</HomeElement>
</div>
<div className="home-footer-hint" aria-hidden="true">
+10
View File
@@ -0,0 +1,10 @@
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
disallow: "/",
},
};
}
+13 -1
View File
@@ -1,7 +1,19 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
async headers() {
return [
{
source: "/:path*",
headers: [
{
key: "X-Robots-Tag",
value: "noindex, nofollow, noarchive, nosnippet, noimageindex",
},
],
},
];
},
};
export default nextConfig;
-1
View File
@@ -1 +0,0 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

Before

Width:  |  Height:  |  Size: 391 B

-1
View File
@@ -1 +0,0 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

-1
View File
@@ -1 +0,0 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 128 B

-1
View File
@@ -1 +0,0 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

Before

Width:  |  Height:  |  Size: 385 B