commits
tags
<!-- Sektion: Löptext -->
<section>
<h2>Löptext</h2>
<div class="prop-grid">
<label>Källa</label>
<select id="ticker-source" onchange="tickerSourceChanged()">
<option value="text">Text</option>
<option value="rss">RSS-flöde</option>
</select>
<label id="ticker-text-label">Text</label>
<div id="ticker-text-wrap">
<textarea id="ticker-text" rows="4" placeholder="Välkommen! Öppet 10–18... 🎉 Rad 2 scrollas efter rad 1 Rad 3..." style="width:100%;resize:vertical;font-family:inherit;line-height:1.5"></textarea>
<div class="bbcode-bar">
<button type="button" class="secondary bb-btn" onclick="insertBB('b')" title="Fet"><b>B</b></button>
<button type="button" class="secondary bb-btn" onclick="insertBB('i')" title="Kursiv"><i>I</i></button>
<button type="button" class="secondary bb-btn" onclick="insertBB('u')" title="Understruken"><u>U</u></button>
<button type="button" class="secondary bb-btn" onclick="insertBB('s')" title="Genomstruken"><s>S</s></button>
<span class="bb-sep"></span>
<input type="color" id="bb-color-val" value="#ffff00" title="Välj färg">
<button type="button" class="secondary bb-btn" onclick="insertBBColor()" title="Infoga färgtagg">[color]</button>
<input type="number" id="bb-size-val" value="48" min="8" max="300">
<button type="button" class="secondary bb-btn" onclick="insertBBSize()" title="Infoga storlekstagg">[size]</button>
<span class="bb-sep"></span>
<button type="button" class="secondary bb-btn" onclick="insertBB('shadow')" title="Textskugga">Skugga</button>
<button type="button" class="secondary bb-btn" onclick="insertBBGlow()" title="Glödeffekt (använder vald färg)">Glöd</button>
</div>
<div style="font-size:.75rem;color:#444;margin-top:.35rem">
Varje rad scrollas en i taget. Radbryt med Enter eller [br]. BBCode: [b]fet[/b] [color=#ff0000]röd[/color] [size=64]stor[/size] [shadow]skugga[/shadow]
</div>
</div>
<label id="ticker-rss-label" style="display:none">RSS-URL</label>
<div id="ticker-rss-wrap" style="display:none">
<input id="ticker-rss-url" type="url" placeholder="https://feeds.example.com/rss" style="width:100%">
<div style="font-size:.75rem;color:#444;margin-top:.35rem">
Stöder RSS 2.0 och Atom. Rubrikerna hämtas och scrollas en i taget.
</div>
</div>
<label id="ticker-rss-interval-label" style="display:none">Uppdatera</label>
<select id="ticker-rss-interval" style="display:none">
<option value="1">Varje minut</option>
<option value="5">Var 5:e minut</option>
<option value="10" selected>Var 10:e minut</option>
<option value="30">Var 30:e minut</option>
<option value="60">Varje timme</option>
</select>
<label>Position</label>
<select id="ticker-position">
<option value="bottom">Nederkant</option>
<option value="top">Överkant</option>
</select>
<label>Hastighet</label>
<div class="row">
<span style="color:#555;font-size:.8rem;white-space:nowrap">Långsam</span>
<input type="range" id="ticker-pps" min="30" max="800" step="10" value="150"
oninput="document.getElementById('ticker-pps-val').textContent=this.value+' px/s'">
<span style="color:#555;font-size:.8rem;white-space:nowrap">Snabb</span>
<span id="ticker-pps-val" style="color:#aaa;min-width:5rem;text-align:right">150 px/s</span>
</div>
<label>Scrolläge</label>
<select id="ticker-mode" onchange="tickerModeChanged()">
<option value="sequential">En rad i taget</option>
<option value="continuous">Löpande (kontinuerligt)</option>
</select>
<label id="ticker-sep-label" style="display:none">Separator</label>
<div id="ticker-sep-wrap" style="display:none" class="row">
<input id="ticker-separator" type="text" value="◆" style="max-width:8rem">
<span style="color:#555;font-size:.8rem">visas mellan rader, t.ex. ◆ • | 🔸</span>
</div>
</div>
<h3>Textstil</h3>
<div class="prop-grid">
<label>Färg</label>
<div class="row">
<input type="color" id="ticker-text-color" value="#ffffff">
<span style="color:#aaa;font-size:.85rem">Standard (överskrivs av [color]-taggar)</span>
</div>
<label>Storlek</label>
<div class="row">
<input type="range" id="ticker-font-size" min="0.8" max="5" step="0.1" value="2"
oninput="document.getElementById('ticker-font-size-val').textContent=parseFloat(this.value).toFixed(1)+'rem'">
<span id="ticker-font-size-val" style="color:#aaa;min-width:4rem">2.0rem</span>
</div>
<label>Typsnitt</label>
<select id="ticker-font-family">
<optgroup label="System">
<option value="sans-serif">System sans-serif</option>
<option value="serif">System serif</option>
<option value="monospace">Monospace</option>
</optgroup>
<optgroup label="Webb">
<option value="Arial, sans-serif">Arial</option>
<option value="Georgia, serif">Georgia</option>
<option value="Impact, sans-serif">Impact</option>
<option value="'Courier New', monospace">Courier New</option>
<option value="'Times New Roman', serif">Times New Roman</option>
</optgroup>
<optgroup label="Kod (apt: fonts-cascadia-code)">
<option value="'Cascadia Code', monospace">Cascadia Code</option>
</optgroup>
<optgroup label="Nerd Fonts (installeras separat)">
<option value="'JetBrainsMono Nerd Font', monospace">JetBrainsMono NF</option>
<option value="'FiraCode Nerd Font', monospace">FiraCode NF</option>
<option value="'Hack Nerd Font', monospace">Hack NF</option>
<option value="'Inconsolata Nerd Font', monospace">Inconsolata NF</option>
<option value="'CaskaydiaCove Nerd Font', monospace">CaskaydiaCove NF</option>
<option value="'RobotoMono Nerd Font', monospace">RobotoMono NF</option>
<option value="'MesloLGS NF', monospace">MesloLGS NF</option>
<option value="'DejaVuSansMono Nerd Font', monospace">DejaVuSansMono NF</option>
</optgroup>
</select>
</div>
<h3>Tickerrad</h3>
<div class="prop-grid">
<label>Bakgrundsfärg</label>
<input type="color" id="ticker-bar-color" value="#000000">
<label>Opacitet</label>
<div class="row">
<input type="range" id="ticker-bar-opacity" min="0" max="100" step="5" value="72"
oninput="document.getElementById('ticker-bar-opacity-val').textContent=this.value+'%'">
<span id="ticker-bar-opacity-val" style="color:#aaa;min-width:3rem">72%</span>
</div>
<label>Höjd</label>
<div class="row">
<input type="range" id="ticker-bar-padding" min="0.1" max="1.5" step="0.05" value="0.45"
oninput="document.getElementById('ticker-bar-padding-val').textContent=parseFloat(this.value).toFixed(2)+'rem'">
<span id="ticker-bar-padding-val" style="color:#aaa;min-width:4rem">0.45rem</span>
</div>
</div>
<div class="row">
<button onclick="aktiveraTicker()">Aktivera</button>
<button class="secondary" onclick="avaktriveraTicker()">Stäng av</button>
<span id="ticker-status" style="color:#aaa;font-size:0.85rem;align-self:center"></span>
</div>
</section>