<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XenShop Användardokumentation</title>
    
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #7c8cff;
  --primary-dark: #5a6ae6;
  --hover: #ffffff;
  --bg-dark: #1c2125;
  --bg-darker: #1a1f24;
  --bg-card: #252b32;
  --text: #ffffff;
  --text-muted: #a9b3c1;
  --border: #3a4149;
  --shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  --transition: all 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(124, 140, 255, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(124, 140, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 140, 255, 0); }
}

@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg-dark);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.container {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
header {
  background-color: var(--bg-darker);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

header.scrolled {
  padding: 10px 0;
  background-color: rgba(26, 31, 36, 0.95);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: var(--transition);
}

.logo:hover {
  transform: scale(1.05);
}

.logo-image {
  width: 40px;
  height: auto;
  margin-right: 0.5em;
  transition: var(--transition);
}

.logo:hover .logo-image {
  transform: rotate(360deg);
  transition: transform 0.8s ease;
}

.logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.logo-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.logo:hover .logo-text::after {
  width: 100%;
}

/* Navigation */
nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-left: 25px;
  position: relative;
}

nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
  padding: 8px 0;
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

nav a:hover {
  color: var(--primary);
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

nav a.active {
  color: var(--primary);
  font-weight: 500;
}

/* Mobile Menu Button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Main Content */
main {
  min-height: 70vh;
  padding: 40px 0;
  animation: fadeIn 0.6s ease;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 20px;
  transition: var(--transition);
}

.dark-mode-toggle:hover {
  color: var(--primary);
  transform: rotate(30deg);
}

/* Scroll Animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
        
        a {
            color: lightblue;
            text-decoration: none;
        }
        
        a:hover {
            color: deepskyblue;
        }
        
        a:visited {
            color: #ADD8E6;
        }
        
        .code-bg {
            background-color: #4b4a4d;
            color: #ffffff;
            padding: 0.1em 0.3em;
            border-radius: 4px;
            font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
            font-size: 0.95em;
        }
        
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .docs-content {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeIn 0.6s ease;
        }
        
        .docs-content h3 {
            margin-top: 40px;
            margin-bottom: 15px;
            color: var(--primary);
            font-size: 1.6rem;
            position: relative;
            display: inline-block;
        }
        
        .docs-content h3::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--primary);
        }
        
        .docs-content p {
            margin-bottom: 20px;
            line-height: 1.8;
            color: var(--text-muted);
        }
        
        .docs-list {
            list-style-type: disc;
            margin: 0 0 1.5em 1.5em;
            color: var(--text-muted);
        }
        
        .docs-list li {
            line-height: 1.8;
        }
        
        .step {
            color: var(--text-muted);
            margin-left: 20px;
            margin-bottom: 10px;
        }
        
        h2 {
            margin-bottom: 10px;
        }
        
        .header-description {
            margin-bottom: 30px;
        }
    
</head>
<body>
    <div class="container">
        <h2>XenShop Användardokumentation</h2>
        <p class="header-description">XenShops Officiella dokumentation för användningen av XenShops Produkter. Senast uppdaterad 2025-05-17 19:23</p>

        <div class="docs-content">
            <h3>Hur man installerar addons</h3>
            <p>För att installera addons till xenshops produkter kan du antigen göra det manuellt eller automatiskt via din <a href="/install-addons">dashboard</a>. Om du ska installera manuellt gör då såhär!</p>
            <div class="step">1. Börja med att extrahera filerna ur zip filen.</div>
            <div class="step">2. Dra in mappen src i samma dir/mapp som din botts src ligger i.</div>
            <div class="step">3. Sedan så är det bara att starta om botten via din konsol!</div>
            
            <p>Sedan om du ska installera automatiskt, gör såhär!</p>
            <div class="step">1. Dra in zip filen i din installer flik i dashboarden.</div>
            <div class="step">2. Låt den intallera.</div>
            <div class="step">3. Nu är det bara att starta botten.</div>
            
            <p>Glöm inte att konfigurera dina addons så det fungerar på din server eller bott!</p>

            <h3>Discord Developer Portal</h3>
            <p>För att använda våra bottar behöver du en bott som du skapar här! <a href="https://discord.com/developers/applications">Discord Developer Portal</a>. 
                När det kommer till behörigheter bör du ge din bott Administrator tillgång då alla addons kan kräva olika typer av behörigheter. 
                För att botten ska fungera korrekt bör du ge den tillgång till 3 Privileged Gateway Intents.</p>
            <div class="step">1. Presence Intent</div>
            <div class="step">2. Server Members Intent</div>
            <div class="step">3. Message Content Intent</div>
            
            <p>Med dessa intents och behörigheter bör din bott fungera med detta script.
                När det kommer till att få botten att fungera behöver du också ange dessa värden i din env fil. Token, client ID. Utan dessa kommer scriptet inte fungera eller kommandon registreras.</p>
            
            <h3>Konfiguration</h3>
            <p>Våra bottars addons använder sig utav json filer. Om du ska konfigurera en addon så går du in i <code class="code-bg">./addons/addonnamn/config/config.json</code>. 
                För att konfigurera bottens inställningar som Token, client Id och databas information går du till <code class="code-bg">./src/config/.env</code>. Eller om du vill konfigurera det i din dashboard kan du gå till dina
                <a href="/settings">Inställningar</a>.</p>
        
            <h3>Databas</h3>
            <p>Alla våra bottar använder sig utav databaser. Detta är för att vi vill att all data ska kunna vara kvar efter bott restarts och m.m. För att använda våra bottar behövs en databas, detta är då tickets och annat ska kunnas sparas
                på ett bättre sätt en lokalt. Om du hostar denna på en vps eller din maskin så bör du installera en databas och ladda ner ett program. Jag personligen tycker om <a href="https://dev.mysql.com/downloads/workbench/">
                Mysql Workbench</a> då det är ett bra och lätt program att använda och lära sig med.</p>
            
            <p>Men när det kommer till själva databasen så rekomenderar jag <a href="https://dev.mysql.com/downloads/installer/">mysql servers</a> som är skapat av <a href="https://www.oracle.com/">oracle</a>. 
                Annars kan du använda dig utav <a href="https://mariadb.org/download/?t=mariadb&p=mariadb&r=11.7.2&os=windows&cpu=x86_64&pkg=msi&mirror=one">Maria DB</a> vilket också är ett klockrent alternativ.</p>

            <h3>Node</h3>
            <p>Våran bott är skriven i <a href="https://docs.oracle.com/en-us/iaas/Content/API/SDKDocs/typescriptsdk.htm">Javascript</a> som ägs av <a href="https://www.oracle.com/">oracle</a>, 
                det samma programeringsspråk som denna dashboard hemsidan. För att använda våran bott behöver du använda dig utav <a href="https://nodejs.org/en/download">Node</a>, vilket är ett byggblock som gör att botten kan 
                köra utanför webbläsaren. Detta är nödvändigt för att botten ska fungera.</p>

            <h3>Nödvändigheter</h3>
            <p>Våran bott behöver vissa nödvändigheter för att fungera korrekt. När du installerar botten så kommer det att behöva installera ett par paket via node. Du kan automatiskt installera dessa <a href="/install">här</a>!</p>
        
            <h3>Versioner</h3>
            <ul class="docs-list">
                <li>Denna version är 1.4 – Ticket Bott.</li>
                <li>Stöder alla databaser och verktyg som använder `mysql2`‑paketet.</li>
            </ul>

            <h3>Information</h3>
            <p>Om ni vill använda denna produkt och programvara bör du acceptera våra <a href="terms">användarvillkor</a> och <a href="privacy">integritetspolicy</a>. Om du använder programmet accepterar du automatiskt till dessa villkor.
            Innan du kontaktar support läs vänligen våran <a href="/support">support</a> sida eller <a href="/faq">faq</a> sida.</p>
        </div>
    </div>
</body>
</html>