|
|
--- |
|
|
license: apache-2.0 |
|
|
base_model: |
|
|
- mistralai/Mistral-Small-3.2-24B-Instruct-2506 |
|
|
--- |
|
|
|
|
|
<!DOCTYPE html><html lang="en" style="margin:0; padding:0; width:100%; height:100%;"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Loki-v2</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
/* MYSTIC SORCERER THEME */ |
|
|
/* Base styles */ |
|
|
@media (max-width: 480px) { |
|
|
.debug-overflow { |
|
|
border: 2px solid red !important; |
|
|
} |
|
|
.composition-list li { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
.model-component a { |
|
|
display: inline; |
|
|
word-break: break-word; |
|
|
} |
|
|
.container { |
|
|
padding-left: 0; |
|
|
padding-right: 0; |
|
|
} |
|
|
} |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
html { |
|
|
font-size: 16px; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
body { |
|
|
font-family: 'Lora', serif; |
|
|
background-color: #1a2f28; |
|
|
color: #E8F0E8; |
|
|
line-height: 1.6; |
|
|
background: radial-gradient(ellipse at center, #2d3d36 0%, #1a2f28 60%, #0d1f18 100%); |
|
|
background-attachment: fixed; |
|
|
position: relative; |
|
|
overflow-x: hidden; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
font-size: 16px; |
|
|
overflow-y: auto; |
|
|
min-height: 100vh; |
|
|
height: auto; |
|
|
} |
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: |
|
|
radial-gradient(circle at 15% 25%, rgba(127, 219, 218, 0.12) 0%, transparent 35%), |
|
|
radial-gradient(circle at 85% 75%, rgba(218, 112, 214, 0.10) 0%, transparent 35%), |
|
|
radial-gradient(circle at 50% 50%, rgba(201, 162, 39, 0.08) 0%, transparent 50%); |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
/* Typography */ |
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Cinzel Decorative', serif; |
|
|
font-weight: 700; |
|
|
color: #E8F0E8; |
|
|
margin-bottom: 1rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
p { |
|
|
margin-bottom: 1.5rem; |
|
|
color: rgba(232, 240, 232, 0.9); |
|
|
} |
|
|
a { |
|
|
color: #7FDBDA; |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
a:hover { |
|
|
color: #C9A227; |
|
|
text-shadow: 0 0 10px rgba(201, 162, 39, 0.7); |
|
|
} |
|
|
/* Aesthetic neon details */ |
|
|
.neon-border { |
|
|
border: 1px solid #7FDBDA; |
|
|
box-shadow: 0 0 10px rgba(127, 219, 218, 0.5); |
|
|
} |
|
|
.glowing-text { |
|
|
color: #7FDBDA; |
|
|
text-shadow: |
|
|
0 0 5px rgba(127, 219, 218, 0.7), |
|
|
0 0 10px rgba(127, 219, 218, 0.5), |
|
|
0 0 15px rgba(127, 219, 218, 0.3); |
|
|
} |
|
|
/* Details & Summary */ |
|
|
details { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
summary { |
|
|
cursor: pointer; |
|
|
list-style: none; |
|
|
position: relative; |
|
|
padding-left: 25px; |
|
|
outline: none; |
|
|
} |
|
|
summary::-webkit-details-marker { |
|
|
display: none; |
|
|
} |
|
|
summary::before { |
|
|
content: '►'; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
color: #C9A227; |
|
|
font-size: 14px; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
details[open] summary::before { |
|
|
transform: translateY(-50%) rotate(90deg); |
|
|
} |
|
|
details[open] summary { |
|
|
margin-bottom: 20px; |
|
|
border-bottom: 1px solid rgba(201, 162, 39, 0.4); |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
/* Code blocks */ |
|
|
code { |
|
|
font-family: 'Cascadia Code', 'Source Code Pro', monospace; |
|
|
background: rgba(127, 219, 218, 0.1); |
|
|
padding: 0.2rem 0.4rem; |
|
|
border: 1px solid rgba(127, 219, 218, 0.3); |
|
|
border-radius: 3px; |
|
|
font-size: 0.9rem; |
|
|
color: #7FDBDA; |
|
|
} |
|
|
pre { |
|
|
background: rgba(13, 31, 24, 0.9); |
|
|
padding: 1.5rem; |
|
|
border: 1px solid rgba(201, 162, 39, 0.3); |
|
|
border-left: 3px solid #C9A227; |
|
|
overflow-x: auto; |
|
|
margin-bottom: 1.5rem; |
|
|
border-radius: 0 8px 8px 0; |
|
|
} |
|
|
pre code { |
|
|
background: transparent; |
|
|
padding: 0; |
|
|
border: none; |
|
|
color: #E8F0E8; |
|
|
} |
|
|
/* Scrollbar styling */ |
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background-color: #1a2f28; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, #2d5a47, #C9A227); |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background-color: rgba(26, 47, 40, 0.8); |
|
|
border-radius: 4px; |
|
|
} |
|
|
/* Selection styling */ |
|
|
::selection { |
|
|
background-color: rgba(201, 162, 39, 0.3); |
|
|
color: #E8F0E8; |
|
|
} |
|
|
/* Metrics section */ |
|
|
.metrics-section { |
|
|
margin-bottom: 30px; |
|
|
position: relative; |
|
|
} |
|
|
.core-metrics-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
|
|
gap: 15px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.metric-box { |
|
|
background: linear-gradient(145deg, rgba(26, 61, 46, 0.9), rgba(13, 40, 24, 0.95)); |
|
|
border: 2px solid #2d5a47; |
|
|
border-radius: 12px; |
|
|
padding: 15px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 8px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(201, 162, 39, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
text-align: center; |
|
|
} |
|
|
.metric-box::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, transparent, #C9A227, transparent); |
|
|
} |
|
|
.metric-box:hover { |
|
|
box-shadow: 0 6px 20px rgba(201, 162, 39, 0.2), inset 0 1px 0 rgba(201, 162, 39, 0.2); |
|
|
transform: translateY(-3px); |
|
|
border-color: #3d7a5e; |
|
|
} |
|
|
.metric-box .label { |
|
|
color: #E8F0E8; |
|
|
font-size: 14px; |
|
|
font-weight: 500; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
.metric-box .value { |
|
|
color: #C9A227; |
|
|
font-size: 24px; |
|
|
font-weight: 700; |
|
|
text-shadow: 0 0 15px rgba(201, 162, 39, 0.5); |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
.glow-card { |
|
|
position: relative; |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
|
|
border: 2px solid #2d5a47; |
|
|
transition: all 0.5s ease; |
|
|
border-radius: 12px; |
|
|
} |
|
|
.glow-card:hover { |
|
|
box-shadow: 0 8px 30px rgba(201, 162, 39, 0.15), inset 0 0 20px rgba(127, 219, 218, 0.05); |
|
|
border-color: #3d7a5e; |
|
|
} |
|
|
.divider-rune { |
|
|
text-align: center; |
|
|
margin: 40px 0; |
|
|
color: #C9A227; |
|
|
font-size: 28px; |
|
|
text-shadow: 0 0 15px rgba(201, 162, 39, 0.6); |
|
|
font-family: 'Cinzel Decorative', serif; |
|
|
} |
|
|
.divider-rune::before, .divider-rune::after { |
|
|
content: '— ᛟ —'; |
|
|
color: #7FDBDA; |
|
|
margin: 0 15px; |
|
|
font-size: 18px; |
|
|
vertical-align: middle; |
|
|
text-shadow: 0 0 10px rgba(127, 219, 218, 0.4); |
|
|
} |
|
|
/* Container & Layout */ |
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 100%; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
position: relative; |
|
|
background: linear-gradient(160deg, rgba(26, 61, 46, 0.95) 0%, rgba(13, 40, 24, 0.98) 50%, rgba(26, 47, 40, 0.95) 100%); |
|
|
border: 3px solid #2d5a47; |
|
|
box-shadow: |
|
|
0 0 40px rgba(0, 0, 0, 0.5), |
|
|
inset 0 0 60px rgba(13, 31, 24, 0.5), |
|
|
0 0 100px rgba(201, 162, 39, 0.08); |
|
|
border-radius: 16px; |
|
|
} |
|
|
.container::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: |
|
|
radial-gradient(circle at 20% 30%, rgba(127, 219, 218, 0.08) 0%, transparent 40%), |
|
|
radial-gradient(circle at 80% 70%, rgba(218, 112, 214, 0.06) 0%, transparent 35%); |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
border-radius: 16px; |
|
|
} |
|
|
/* Header */ |
|
|
.header { |
|
|
margin-bottom: 40px; |
|
|
position: relative; |
|
|
padding-bottom: 20px; |
|
|
border-bottom: 2px solid transparent; |
|
|
border-image: linear-gradient(90deg, transparent 0%, #C9A227 20%, #C9A227 80%, transparent 100%) 1; |
|
|
overflow: hidden; |
|
|
} |
|
|
.header h1 { |
|
|
font-family: 'Cinzel Decorative', serif; |
|
|
font-size: 48px; |
|
|
color: #E8F0E8; |
|
|
text-align: center; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 3px; |
|
|
margin: 0; |
|
|
text-shadow: |
|
|
0 0 20px rgba(201, 162, 39, 0.5), |
|
|
0 2px 4px rgba(0, 0, 0, 0.5); |
|
|
background: linear-gradient(180deg, #F0E68C 0%, #C9A227 50%, #8B7355 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
/* Info section */ |
|
|
.info { |
|
|
margin-bottom: 50px; |
|
|
} |
|
|
.info > img { |
|
|
width: 100%; |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
object-fit: contain; |
|
|
border: 3px solid #2d5a47; |
|
|
margin-bottom: 30px; |
|
|
box-shadow: |
|
|
0 8px 40px rgba(0, 0, 0, 0.4), |
|
|
0 0 60px rgba(127, 219, 218, 0.1); |
|
|
background-color: rgba(13, 31, 24, 0.8); |
|
|
display: block; |
|
|
border-radius: 12px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
} |
|
|
.section-container { |
|
|
margin-bottom: 40px; |
|
|
padding: 25px; |
|
|
background: linear-gradient(145deg, rgba(26, 61, 46, 0.85), rgba(13, 40, 24, 0.9)); |
|
|
border: 2px solid #2d5a47; |
|
|
border-left: 4px solid #C9A227; |
|
|
position: relative; |
|
|
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3); |
|
|
border-radius: 0 12px 12px 0; |
|
|
} |
|
|
.section-container h2 { |
|
|
margin-top: 0; |
|
|
border-bottom: 1px solid rgba(201, 162, 39, 0.3); |
|
|
padding-bottom: 10px; |
|
|
color: #C9A227; |
|
|
text-shadow: 0 0 10px rgba(201, 162, 39, 0.3); |
|
|
} |
|
|
.section-container h3 { |
|
|
color: #7FDBDA; |
|
|
font-size: 1.2rem; |
|
|
margin-top: 1.5rem; |
|
|
text-shadow: 0 0 8px rgba(127, 219, 218, 0.3); |
|
|
} |
|
|
.universe-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
.universe-col ul { |
|
|
list-style: none; |
|
|
padding-left: 0; |
|
|
} |
|
|
.universe-col li { |
|
|
padding: 6px 0; |
|
|
border-bottom: 1px solid rgba(45, 90, 71, 0.4); |
|
|
color: rgba(232, 240, 232, 0.85); |
|
|
} |
|
|
.universe-col li::before { |
|
|
content: '✦'; |
|
|
color: #C9A227; |
|
|
margin-right: 10px; |
|
|
text-shadow: 0 0 6px rgba(201, 162, 39, 0.5); |
|
|
} |
|
|
/* Mode Cards */ |
|
|
.mode-card { |
|
|
background: linear-gradient(145deg, rgba(26, 61, 46, 0.8), rgba(13, 40, 24, 0.9)); |
|
|
border: 2px solid #2d5a47; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 12px; |
|
|
} |
|
|
.mode-card:hover { |
|
|
background: linear-gradient(145deg, rgba(45, 90, 71, 0.85), rgba(26, 61, 46, 0.9)); |
|
|
border-color: #3d7a5e; |
|
|
transform: translateX(8px); |
|
|
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.mode-card h3 { |
|
|
color: #7FDBDA; |
|
|
margin-top: 0; |
|
|
text-shadow: 0 0 10px rgba(127, 219, 218, 0.4); |
|
|
} |
|
|
.mode-tag { |
|
|
display: inline-block; |
|
|
font-size: 0.8rem; |
|
|
padding: 4px 12px; |
|
|
border: 1px solid #C9A227; |
|
|
color: #C9A227; |
|
|
text-transform: uppercase; |
|
|
margin-top: 10px; |
|
|
letter-spacing: 1px; |
|
|
border-radius: 20px; |
|
|
background: rgba(201, 162, 39, 0.1); |
|
|
} |
|
|
/* Tag Cheat Sheet */ |
|
|
.tag-group { |
|
|
margin-bottom: 25px; |
|
|
} |
|
|
.tag-item { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
margin-bottom: 10px; |
|
|
padding: 12px; |
|
|
background: rgba(13, 31, 24, 0.6); |
|
|
border-left: 3px solid #7FDBDA; |
|
|
border-radius: 0 8px 8px 0; |
|
|
} |
|
|
.tag-item code { |
|
|
margin-right: 15px; |
|
|
min-width: 200px; |
|
|
display: inline-block; |
|
|
} |
|
|
/* Team Section */ |
|
|
.team-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 25px; |
|
|
} |
|
|
a.team-member { |
|
|
text-decoration: none; |
|
|
color: #E8F0E8; |
|
|
display: block; |
|
|
} |
|
|
.team-member { |
|
|
background: linear-gradient(145deg, rgba(26, 61, 46, 0.9), rgba(13, 40, 24, 0.95)); |
|
|
border: 2px solid #2d5a47; |
|
|
padding: 25px 20px; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border-radius: 16px; |
|
|
} |
|
|
.team-member::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, transparent, currentColor, transparent); |
|
|
opacity: 0.5; |
|
|
} |
|
|
.team-member:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
.team-member img { |
|
|
width: 90px; |
|
|
height: 90px; |
|
|
border-radius: 50%; |
|
|
border: 3px solid; |
|
|
margin: 10px 0; |
|
|
object-fit: cover; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.member-role { |
|
|
font-family: 'Cinzel Decorative', serif; |
|
|
font-size: 0.9rem; |
|
|
letter-spacing: 1px; |
|
|
opacity: 0.9; |
|
|
margin-bottom: 15px; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
.member-badge { |
|
|
font-size: 1.8rem; |
|
|
margin-bottom: 5px; |
|
|
filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)); |
|
|
} |
|
|
/* Individual Member Styles */ |
|
|
.member-steel { border-color: #C9A227; } |
|
|
.member-steel::before { background: linear-gradient(90deg, transparent, #C9A227, transparent); } |
|
|
.member-steel:hover { box-shadow: 0 12px 40px rgba(201, 162, 39, 0.25), inset 0 0 20px rgba(201, 162, 39, 0.1); border-color: #DAA520; } |
|
|
.member-steel h3 { color: #C9A227; text-shadow: 0 0 12px rgba(201, 162, 39, 0.4); } |
|
|
.member-steel img { border-color: #C9A227; box-shadow: 0 0 20px rgba(201, 162, 39, 0.35); } |
|
|
.member-steel .member-role { color: #F0E68C; } |
|
|
.member-tarek { border-color: #7FDBDA; } |
|
|
.member-tarek::before { background: linear-gradient(90deg, transparent, #7FDBDA, transparent); } |
|
|
.member-tarek:hover { box-shadow: 0 12px 40px rgba(127, 219, 218, 0.25), inset 0 0 20px rgba(127, 219, 218, 0.1); border-color: #5FCED6; } |
|
|
.member-tarek h3 { color: #7FDBDA; text-shadow: 0 0 12px rgba(127, 219, 218, 0.4); } |
|
|
.member-tarek img { border-color: #7FDBDA; box-shadow: 0 0 20px rgba(127, 219, 218, 0.35); } |
|
|
.member-tarek .member-role { color: #B0F0F0; } |
|
|
.member-darkhn { border-color: #DA70D6; } |
|
|
.member-darkhn::before { background: linear-gradient(90deg, transparent, #DA70D6, transparent); } |
|
|
.member-darkhn:hover { box-shadow: 0 12px 40px rgba(218, 112, 214, 0.25), inset 0 0 20px rgba(218, 112, 214, 0.1); border-color: #FF69B4; } |
|
|
.member-darkhn h3 { color: #DA70D6; text-shadow: 0 0 12px rgba(218, 112, 214, 0.4); } |
|
|
.member-darkhn img { border-color: #DA70D6; box-shadow: 0 0 20px rgba(218, 112, 214, 0.35); } |
|
|
.member-darkhn .member-role { color: #F0B0F0; } |
|
|
.team-links a { |
|
|
margin: 0 5px; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
/* Support Buttons */ |
|
|
.button { |
|
|
display: inline-block; |
|
|
padding: 12px 28px; |
|
|
background: linear-gradient(145deg, rgba(45, 90, 71, 0.8), rgba(26, 61, 46, 0.9)); |
|
|
color: #C9A227; |
|
|
border: 2px solid #C9A227; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
text-align: center; |
|
|
border-radius: 25px; |
|
|
font-weight: 600; |
|
|
text-shadow: 0 0 8px rgba(201, 162, 39, 0.3); |
|
|
} |
|
|
.button:hover { |
|
|
background: linear-gradient(145deg, rgba(201, 162, 39, 0.2), rgba(201, 162, 39, 0.1)); |
|
|
box-shadow: 0 0 25px rgba(201, 162, 39, 0.4), inset 0 0 15px rgba(201, 162, 39, 0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
/* Settings */ |
|
|
.settings-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
.setting-item { |
|
|
border-bottom: 1px solid rgba(45, 90, 71, 0.5); |
|
|
padding: 12px 0; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
} |
|
|
.setting-value { |
|
|
color: #C9A227; |
|
|
font-weight: 700; |
|
|
text-shadow: 0 0 8px rgba(201, 162, 39, 0.4); |
|
|
} |
|
|
/* Corners */ |
|
|
.corner { |
|
|
position: absolute; |
|
|
width: 2.5em; |
|
|
height: 2.5em; |
|
|
border: 2px solid #C9A227; |
|
|
transition: all 0.3s ease; |
|
|
opacity: 0.7; |
|
|
} |
|
|
.topleft { top: 8px; left: 8px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; } |
|
|
.topright { top: 8px; right: 8px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; } |
|
|
.bottomleft { bottom: 8px; left: 8px; border-right: none; border-top: none; border-radius: 0 0 0 8px; } |
|
|
.bottomright { bottom: 8px; right: 8px; border-left: none; border-top: none; border-radius: 0 0 8px 0; } |
|
|
/* Wisp animation */ |
|
|
.wisp { |
|
|
position: fixed; |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
background-color: #7FDBDA; |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
box-shadow: 0 0 12px #7FDBDA, 0 0 20px rgba(127, 219, 218, 0.5); |
|
|
animation: floatUp 8s linear infinite; |
|
|
opacity: 0; |
|
|
} |
|
|
@keyframes floatUp { |
|
|
0% { transform: translateY(100vh) translateX(0); opacity: 0; } |
|
|
10% { opacity: 0.7; } |
|
|
90% { opacity: 0.7; } |
|
|
100% { transform: translateY(-20vh) translateX(50px); opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="wisp-container"></div> |
|
|
<div class="container"> |
|
|
<div class="corner topleft"></div> |
|
|
<div class="corner topright"></div> |
|
|
<div class="corner bottomleft"></div> |
|
|
<div class="corner bottomright"></div> |
|
|
<div class="header"> |
|
|
<h1>Loki-v2</h1> |
|
|
</div> |
|
|
<div class="info"> |
|
|
<!-- Main Video with Fallback --> |
|
|
<!-- 'poster' is the image that shows while loading or if video fails --> |
|
|
<video autoplay loop muted playsinline |
|
|
poster="https://huggingface.co/CrucibleLab/M3.2-24B-Loki-V2/resolve/main/loki-v2.jpeg" |
|
|
style="width: 100%; max-width: 100%; height: auto; object-fit: contain; border: 3px solid #2d5a47; margin-bottom: 30px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(127, 219, 218, 0.1); background-color: rgba(13, 31, 24, 0.8); display: block; border-radius: 12px; margin-left: auto; margin-right: auto;"> |
|
|
<!-- PASTE YOUR VIDEO LINK BELOW IN THE SRC="" --> |
|
|
<source src="https://huggingface.co/CrucibleLab/M3.2-24B-Loki-V2/resolve/main/Loki-v2.webp" type="video/webp"> |
|
|
<source src="https://huggingface.co/CrucibleLab/M3.2-24B-Loki-V2/resolve/main/loki-v2.mp4" type="video/mp4"> |
|
|
<!-- Final Fallback: If video tag fails entirely, it shows the image --> |
|
|
<img src="https://huggingface.co/CrucibleLab/M3.2-24B-Loki-V2/resolve/main/loki-v2.jpeg" alt="Loki-v2 Model Art"> |
|
|
</video> |
|
|
<!-- Team (Moved) --> |
|
|
<div class="section-container" style="margin-top: 30px; border-left: 4px solid #7FDBDA;"> |
|
|
<div class="corner topleft"></div> |
|
|
<div class="corner topright"></div> |
|
|
<div class="corner bottomleft"></div> |
|
|
<div class="corner bottomright"></div> |
|
|
<h2 style="text-align: center; color: #7FDBDA;">The Team</h2> |
|
|
<div class="team-grid"> |
|
|
<a href="https://huggingface.co/Steelskull" target="_blank" rel="noopener" class="team-member glow-card member-steel"> |
|
|
<div class="member-badge">⚙️</div> |
|
|
<img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64545af5ec40bbbd01242ca6/xRbPO8262bQ030329Kn7R.png" alt="Steelskull"> |
|
|
<h3>Steelskull</h3> |
|
|
<p class="member-role">Paramancer</p> |
|
|
</a> |
|
|
<a href="https://huggingface.co/Tarek07" target="_blank" rel="noopener" class="team-member glow-card member-tarek"> |
|
|
<div class="member-badge">⚡</div> |
|
|
<img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64909c086073a0cd172d0411/Z4VkLtxQTg7Ex3vv84yz8.webp" alt="Tarek"> |
|
|
<h3>Tarek07</h3> |
|
|
<p class="member-role">Mad-Lad</p> |
|
|
</a> |
|
|
<a href="https://huggingface.co/Darkhn" target="_blank" rel="noopener" class="team-member glow-card member-darkhn"> |
|
|
<div class="member-badge">📜</div> |
|
|
<img src="https://cdn-avatars.huggingface.co/v1/production/uploads/673fa5ccbf2e9c35b2ec841a/rPHaMrqyYTfSJ89NN8KgY.jpeg" alt="Darkhn"> |
|
|
<h3>Darkhn</h3> |
|
|
<p class="member-role">Dataset Chronicler</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="divider-rune">❖</div> |
|
|
<!-- Dataset Statistics --> |
|
|
<div class="metrics-section"> |
|
|
<h2 style="text-align: center; margin-bottom: 20px; color: #C9A227;">Dataset Statistics</h2> |
|
|
<div class="core-metrics-grid"> |
|
|
<div class="metric-box glow-card"> |
|
|
<span class="label">Total Tokens</span> |
|
|
<span class="value">600M+</span> |
|
|
</div> |
|
|
<div class="metric-box glow-card"> |
|
|
<span class="label">Total Size</span> |
|
|
<span class="value">2.5 GB</span> |
|
|
</div> |
|
|
<div class="metric-box glow-card"> |
|
|
<span class="label">QA Lines</span> |
|
|
<span class="value">46,800+</span> |
|
|
</div> |
|
|
<div class="metric-box glow-card"> |
|
|
<span class="label">Prose Lines</span> |
|
|
<span class="value">19,800+</span> |
|
|
</div> |
|
|
<div class="metric-box glow-card"> |
|
|
<span class="label">ERP Lines</span> |
|
|
<span class="value">16,600+</span> |
|
|
</div> |
|
|
<div class="metric-box glow-card"> |
|
|
<span class="label">Dark Lines</span> |
|
|
<span class="value">12,500+</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- Training & Roadmap Section --> |
|
|
<div class="section-container" style="border-left: 4px solid #DA70D6;"> |
|
|
<div class="corner topleft" style="border-color: #DA70D6;"></div> |
|
|
<div class="corner topright" style="border-color: #DA70D6;"></div> |
|
|
<div class="corner bottomleft" style="border-color: #DA70D6;"></div> |
|
|
<div class="corner bottomright" style="border-color: #DA70D6;"></div> |
|
|
<h2 style="color: #DA70D6;">🔮 Training & Horizons</h2> |
|
|
<p> |
|
|
Loki-v2 is currently realized as a <strong style="color: #7FDBDA;">1 Epoch</strong> fine-tune. |
|
|
</p> |
|
|
<div style="background: linear-gradient(90deg, rgba(201, 162, 39, 0.1), transparent); border-left: 2px solid #C9A227; padding: 15px 20px; margin-top: 20px; border-radius: 0 8px 8px 0;"> |
|
|
<h3 style="color: #C9A227; margin-top: 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">🚀 The Path to Larger Models</h3> |
|
|
<p style="margin-bottom: 0;"> |
|
|
Our vision extends beyond the current parameter sizes. We aim to bring the Loki dataset to <strong>much larger architectures</strong> (70B+), unlocking deeper nuance, longer context retention, and superior coherence. |
|
|
</p> |
|
|
<p style="margin-top: 10px; margin-bottom: 0; font-style: italic; color: #E8F0E8;"> |
|
|
<span style="color: #C9A227;">⚠ Note:</span> Training on massive models requires significant compute resources. This expansion is strictly <strong>contingent on gathering the necessary funds</strong> to secure GPU time. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<!-- Overview --> |
|
|
<div class="section-container"> |
|
|
<h2>Overview</h2> |
|
|
<p>This dataset is built to deliver <strong>deeply immersive roleplay and narrative experiences</strong> with strong consistency, clear narrative roles, and expressive prose. It prioritizes <strong>immersion over compliance</strong>, creating models that feel like creative partners rather than restrictive assistants.</p> |
|
|
<p>Rather than behaving like a generic chatbot, models trained on this dataset behave like:</p> |
|
|
<ul> |
|
|
<li style="margin-left: 20px; color: #7FDBDA;">Dungeonmasters — controlling worlds with consequence and stakes</li> |
|
|
<li style="margin-left: 20px; color: #7FDBDA;">Story authors — crafting canon-faithful, book-style prose</li> |
|
|
<li style="margin-left: 20px; color: #7FDBDA;">Creative narrators — expanding scenes with flexibility and style</li> |
|
|
</ul> |
|
|
<br> |
|
|
<p>The focus is <strong>experience first</strong>: tone, voice, continuity, and world fidelity. This approach ensures <strong>consistent long-form storytelling</strong> with clear narrative authority — no role confusion, no breaking character.</p> |
|
|
<h3 style="margin-top: 25px;">✨ What Makes This Different</h3> |
|
|
<ul> |
|
|
<li style="margin-bottom: 8px;"><strong style="color: #C9A227;">Clear narrative authority</strong> — no role confusion between narrator and player</li> |
|
|
<li style="margin-bottom: 8px;"><strong style="color: #C9A227;">Strong immersion over compliance</strong> — stories, not assistant responses</li> |
|
|
<li style="margin-bottom: 8px;"><strong style="color: #C9A227;">Consistent long-form storytelling</strong> — maintains voice across extended sessions</li> |
|
|
<li style="margin-bottom: 8px;"><strong style="color: #C9A227;">Flexible but controlled creativity</strong> — expands naturally within boundaries</li> |
|
|
<li style="margin-bottom: 8px;"><strong style="color: #C9A227;">Tags that enhance, not constrain</strong> — signals that guide, never restrict</li> |
|
|
</ul> |
|
|
<h3 style="margin-top: 25px;">👥 Who This Is For</h3> |
|
|
<ul> |
|
|
<li style="margin-bottom: 8px;">Roleplay enthusiasts seeking immersive experiences</li> |
|
|
<li style="margin-bottom: 8px;">Story-driven prompt engineers</li> |
|
|
<li style="margin-bottom: 8px;">Writers using LLMs as narrative tools</li> |
|
|
<li style="margin-bottom: 8px;">Anyone who wants <strong>stories</strong>, not assistants</li> |
|
|
</ul> |
|
|
</div> |
|
|
<!-- Supported Universes --> |
|
|
<div class="section-container"> |
|
|
<h2>🌍 Universes & Beyond</h2> |
|
|
<p>The dataset includes <strong>universe-conditioned writing</strong>, allowing the model to naturally match tone, themes, terminology, and narrative expectations from well-known settings. You do <strong>not</strong> need to know lore perfectly — the dataset teaches the <strong>style and feel</strong> of these worlds, not just raw facts.</p> |
|
|
<p style="background: rgba(201, 162, 39, 0.1); border: 1px solid rgba(201, 162, 39, 0.3); padding: 15px; border-radius: 8px; margin: 20px 0;"> |
|
|
<strong style="color: #C9A227;">⚡ Not Limited to Listed Universes:</strong> While trained on these specific settings, the model excels at <strong>any roleplay scenario</strong> — original worlds, custom settings, crossovers, or entirely new creations. The universe training teaches narrative craft and immersion techniques that transfer to <strong>any story you want to tell</strong>. |
|
|
</p> |
|
|
<div class="universe-grid"> |
|
|
<div class="universe-col"> |
|
|
<h3>🎌 Anime & Animation</h3> |
|
|
<ul> |
|
|
<li>Attack on Titan</li> |
|
|
<li>One Piece</li> |
|
|
<li>Hunter × Hunter</li> |
|
|
<li>Genshin Impact</li> |
|
|
<li>Fullmetal Alchemist</li> |
|
|
<li>Avatar: The Last Airbender</li> |
|
|
<li>Overlord</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="universe-col"> |
|
|
<h3>🐉 Fantasy</h3> |
|
|
<ul> |
|
|
<li>Conan the Barbarian</li> |
|
|
<li>Dragon Age</li> |
|
|
<li>Dungeons & Dragons</li> |
|
|
<li>The Elder Scrolls</li> |
|
|
<li>Harry Potter</li> |
|
|
<li>The Lord of the Rings</li> |
|
|
<li>Warhammer Fantasy</li> |
|
|
<li>The Witcher</li> |
|
|
<li>Wings of Fire</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="universe-col"> |
|
|
<h3>🚀 Science Fiction</h3> |
|
|
<ul> |
|
|
<li>Warhammer 40,000</li> |
|
|
<li>Mass Effect</li> |
|
|
<li>Star Trek</li> |
|
|
<li>Star Wars</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<p style="margin-top: 20px; font-style: italic; color: rgba(232, 240, 232, 0.7);">...and countless original characters, custom worlds, and creative scenarios. The training empowers the model with versatile narrative techniques applicable to <strong>any story style</strong>.</p> |
|
|
</div> |
|
|
<!-- Narrative Modes --> |
|
|
<div class="section-container"> |
|
|
<h2>🧭 Narrative Modes</h2> |
|
|
<p>Each story uses <strong>one narrative mode</strong>, chosen via the system prompt.</p> |
|
|
<div class="mode-card glow-card"> |
|
|
<div class="corner topleft"></div> |
|
|
<div class="corner topright"></div> |
|
|
<div class="corner bottomleft"></div> |
|
|
<div class="corner bottomright"></div> |
|
|
<h3>🧙 Dungeonmaster (DM)</h3> |
|
|
<p>Controls the world and NPCs. Enforces consequences (failure, harm, death). Never decides the user's thoughts or actions.</p> |
|
|
<span class="mode-tag">Best for: RPG-style play, horror, survival, dark fantasy</span> |
|
|
</div> |
|
|
<div class="mode-card glow-card" style="border-color: #C9A227;"> |
|
|
<div class="corner topleft" style="border-color: #C9A227;"></div> |
|
|
<div class="corner topright" style="border-color: #C9A227;"></div> |
|
|
<div class="corner bottomleft" style="border-color: #C9A227;"></div> |
|
|
<div class="corner bottomright" style="border-color: #C9A227;"></div> |
|
|
<h3 style="color: #C9A227;">✍️ Storywriter</h3> |
|
|
<p>Treats you as a director. Follows OOC instructions immediately. Maintains lore, character voice, and continuity.</p> |
|
|
<span class="mode-tag">Best for: Canon-faithful stories, book-style prose, guided narratives</span> |
|
|
</div> |
|
|
<div class="mode-card glow-card"> |
|
|
<div class="corner topleft"></div> |
|
|
<div class="corner topright"></div> |
|
|
<div class="corner bottomleft"></div> |
|
|
<div class="corner bottomright"></div> |
|
|
<h3>📖 Creative Storyteller</h3> |
|
|
<p>Adapts archetypes into your scenario. Expands scenes creatively and flexibly.</p> |
|
|
<span class="mode-tag">Best for: OC stories, experimental prose, stylized writing</span> |
|
|
</div> |
|
|
</div> |
|
|
<!-- Tone & Tags --> |
|
|
<div class="section-container"> |
|
|
<h2>🌗 Tone Selection</h2> |
|
|
<p>Each story uses <strong>one tone</strong> that shapes voice, intensity, and emotional weight:</p> |
|
|
<ul> |
|
|
<li style="margin-bottom: 10px;"><strong style="color: #7FDBDA;">Neutral</strong> — Adventure-focused, balanced.</li> |
|
|
<li style="margin-bottom: 10px;"><strong style="color: #DA70D6;">Dark</strong> — Grim, cruel, high-stakes outcomes.</li> |
|
|
<li style="margin-bottom: 10px;"><strong style="color: #C9A227;">Mature</strong> — Adult themes, explicit or non-canon content.</li> |
|
|
</ul> |
|
|
</div> |
|
|
<details class="section-container"> |
|
|
<summary><h2 style="display:inline-block; margin:0;">🏷️ Tags & ALT_ANATOMY (NSFW)</h2></summary> |
|
|
<p>Tags are signals, not rules. At the heart of most tags is the concept of <strong>Alternate Anatomy</strong> (`ALT_ANATOMY`) — bodies, species, or physical states that deviate from baseline human norms.</p> |
|
|
<h3>Tag Categories</h3> |
|
|
<div class="tag-group"> |
|
|
<h4 style="color: #DA70D6;">🧬 Identity & Body Variations</h4> |
|
|
<p>Characters whose bodies or identities differ from standard human anatomy (e.g., trans, dual anatomy, feminized forms).</p> |
|
|
</div> |
|
|
<div class="tag-group"> |
|
|
<h4 style="color: #DA70D6;">👹 Non-Human & Creature Anatomy</h4> |
|
|
<p>Explicit monsters, anthropomorphic beings, aliens, or fantastical species. Prevents the model from snapping back to human assumptions.</p> |
|
|
</div> |
|
|
<div class="tag-group"> |
|
|
<h4 style="color: #DA70D6;">🔄 Physical Changes & Extremes</h4> |
|
|
<p>Transformations, extreme size differences, or unnatural physical expansion. Signals: <em>"This world allows bodies to change."</em></p> |
|
|
</div> |
|
|
<div class="tag-group"> |
|
|
<h4 style="color: #DA70D6;">🎤 Stylization</h4> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: COMEDIC_PHONETIC_VOICE]</code> |
|
|
<span>Signals intentionally exaggerated, phonetically spelled accents for humor.</span> |
|
|
</div> |
|
|
</div> |
|
|
</details> |
|
|
<details class="section-container"> |
|
|
<summary><h2 style="display:inline-block; margin:0;">🏷️ Tag Cheat-Sheet (NSFW)</h2></summary> |
|
|
<p>Use these tags to signal what kind of bodies and worlds exist in the scene.</p> |
|
|
<h3>Identity & Body</h3> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: IDENTITY_TRANS]</code> |
|
|
<span>Female-presenting with human penis.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: IDENTITY_FUTA]</code> |
|
|
<span>Female-presenting with dual or non-human anatomy.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: IDENTITY_GENDERSWAP]</code> |
|
|
<span>Character has changed biological sex.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: IDENTITY_FEMBOY]</code> |
|
|
<span>Male character with intentionally feminine presentation.</span> |
|
|
</div> |
|
|
<h3>Non-Human</h3> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: MONSTER]</code> |
|
|
<span>Demons, aliens, fantasy species.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: FURRY]</code> |
|
|
<span>Anthropomorphic animal bodies.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: TENTACLES]</code> |
|
|
<span>Living, prehensile appendages.</span> |
|
|
</div> |
|
|
<h3>Physical Change</h3> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: TRANSFORMATION]</code> |
|
|
<span>On-screen body changes.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: SIZE_CONTENT]</code> |
|
|
<span>Extreme size differences.</span> |
|
|
</div> |
|
|
<div class="tag-item"> |
|
|
<code>[TAG: INFLATION]</code> |
|
|
<span>Unnatural swelling or expansion.</span> |
|
|
</div> |
|
|
</details> |
|
|
<!-- Configuration & Samplers --> |
|
|
<div class="section-container"> |
|
|
<h2>⚙️ Configuration & Samplers</h2> |
|
|
<!-- Chat Template Warning --> |
|
|
<div style="margin-bottom: 25px; background: rgba(13, 31, 24, 0.6); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,0.2);"> |
|
|
<div style="background: linear-gradient(90deg, rgba(201, 162, 39, 0.15), transparent); padding: 12px 20px; border-bottom: 1px solid rgba(201, 162, 39, 0.2); font-family: 'Cinzel Decorative', serif; color: #C9A227; font-weight: 700; letter-spacing: 1px;"> |
|
|
⚠️ Critical: Chat Template |
|
|
</div> |
|
|
<div style="padding: 20px;"> |
|
|
<p style="margin-bottom: 15px;">Ensure your loader is using the standard Mistral template. The "Tekken" variant is <strong>not compatible</strong> and will degrade performance.</p> |
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px;"> |
|
|
<!-- Good Template --> |
|
|
<div style="padding: 15px; background: rgba(45, 90, 71, 0.3); border-left: 4px solid #7FDBDA; border-radius: 0 6px 6px 0;"> |
|
|
<div style="color: #7FDBDA; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; font-size: 0.85rem;">✅ Recommended</div> |
|
|
<code style="background: rgba(127, 219, 218, 0.15); border-color: #7FDBDA;">mistral-v7</code> |
|
|
</div> |
|
|
<!-- Bad Template --> |
|
|
<div style="padding: 15px; background: rgba(60, 20, 30, 0.4); border-left: 4px solid #DA70D6; border-radius: 0 6px 6px 0;"> |
|
|
<div style="color: #DA70D6; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; font-size: 0.85rem;">❌ Do Not Use</div> |
|
|
<code style="color: #DA70D6; background: rgba(218, 112, 214, 0.15); border-color: #DA70D6;">mistral-tekken-v7</code> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- Download Button --> |
|
|
<div style="text-align: center; margin-bottom: 30px;"> |
|
|
<a href="https://huggingface.co/CrucibleLab/M3.2-24B-Loki-V2/resolve/main/Loki-V2.json?download=true" class="button" style="width: 100%; max-width: 400px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;"> |
|
|
<span>📥</span> Download Preset (JSON) |
|
|
</a> |
|
|
<p style="font-size: 0.85rem; color: rgba(232, 240, 232, 0.6); margin-top: 8px;"> |
|
|
Compatible with SillyTavern (Import as Text Generation Preset) |
|
|
</p> |
|
|
</div> |
|
|
<h3>Sampler Settings</h3> |
|
|
<div class="settings-grid"> |
|
|
<div class="setting-item"> |
|
|
<span>Static Temperature</span> |
|
|
<span class="setting-value">0.7 - 1.0</span> |
|
|
</div> |
|
|
<div class="setting-item"> |
|
|
<span>Min P</span> |
|
|
<span class="setting-value">0.02 - 0.03</span> |
|
|
</div> |
|
|
<div class="setting-item"> |
|
|
<span>DRY (Mult/Base/Len)</span> |
|
|
<span class="setting-value">0.8 / 1.75 / 4-6</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- Footer Support --> |
|
|
<div class="support-section" style="text-align: center; margin-bottom: 50px;"> |
|
|
<h2 style="color: #C9A227;">Support & Community</h2> |
|
|
<a href="https://discord.gg/4tCngSm3qZ" target="_blank" rel="noopener" class="button">Join Discord</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const wispContainer = document.getElementById('wisp-container'); |
|
|
if (wispContainer) { |
|
|
function createWisp() { |
|
|
const wisp = document.createElement('div'); |
|
|
wisp.classList.add('wisp'); |
|
|
wisp.style.left = `${Math.random() * window.innerWidth}px`; |
|
|
// Alternate between teal and magenta wisps |
|
|
if (Math.random() > 0.5) { |
|
|
wisp.style.backgroundColor = '#DA70D6'; |
|
|
wisp.style.boxShadow = '0 0 12px #DA70D6, 0 0 20px rgba(218, 112, 214, 0.5)'; |
|
|
} |
|
|
wispContainer.appendChild(wisp); |
|
|
setTimeout(() => wisp.remove(), 8000); |
|
|
} |
|
|
setInterval(createWisp, 400); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
