<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#000000">
<meta name="description" content="Chris Xiong's personal homepage">
<meta name="author" content="Chris Xiong">
<title>Chrisoft::Home</title>
<link rel="icon" href="./favicon.png">
<link rel="preload" href="/themes.svg" as="image">
<link rel="me" href="https://c.im/@chirs241097">
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="panel.css">
<link rel="stylesheet" type="text/css" href="theme0a.css" id="theme0a">
<link rel="stylesheet" type="text/css" href="theme0b.css" id="theme0b">
<link rel="stylesheet" type="text/css" href="theme1a.css" id="theme1a">
<link rel="stylesheet" type="text/css" href="theme1b.css" id="theme1b">
<link rel="stylesheet" type="text/css" href="theme2a.css" id="theme2a">
<link rel="stylesheet" type="text/css" href="theme2b.css" id="theme2b">
<link rel="stylesheet" type="text/css" href="theme3a.css" id="theme3a">
<link rel="stylesheet" type="text/css" href="theme3b.css" id="theme3b">
<style>
reduced{font-size:75%;}
details{padding:.5em .5em 0 .2em;}
#msgform{width:50%;margin:auto;}
@media (max-width:768px)
{#msgform{width:auto;margin:1em;}}
</style>
</head>
<!--
The source code of this site, including all HTML, JavaScript and CSS
files, are licensed under the terms of the Expat(MIT) License.
Contents are licensed under the CC BY-SA 4.0 license.
-->
<body onload="swonload();">
<script type="text/javascript" src="panel.js"></script>
<script type="text/javascript" src="themer.js"></script>
<script type="text/javascript">
function changeImage(a,b){
document.getElementById(a).style.display='inline';
document.getElementById(b).style.display='none';
}
function showthemesw(){
document.getElementById('themesw').style.display='block';
setTimeout(()=>{document.getElementById('themesw').style.opacity='1';},20);
}
function hidethemesw(){
document.getElementById('themesw').style.opacity='0';
setTimeout(()=>{document.getElementById('themesw').style.display='none';},515);
}
function getcookie(key)
{return document.cookie.replace(new RegExp('(?:(?:^|.*;\\s*)'+key+'\\s*\\=\\s*([^;]*).*$)|^.*$'),'$1');}
function changeTheme(a,b){
var thm=getcookie('thm');
if(!thm.length)thm='zz';
if(a.length&&'0123z'.indexOf(a[0])!=-1)thm=a[0]+thm[1];
if(b.length&&'abz'.indexOf(b[0])!=-1)thm=thm[0]+b[0];
document.cookie=`thm=${thm};max-age=126144000`;
loadTheme();
}
function toggleblkdisplay(e){
var E=document.getElementById(e);
E.style.display=E.style.display=='none'?'block':'none';
}
function contsw(cont){
var lst=document.getElementById('content').getElementsByClassName('block');
for(var i=0;i<lst.length;++i)
lst.item(i).style.display='none';
if(document.getElementById(cont)===null)cont='main';
document.getElementById(cont).style.display='block';
lst=document.getElementById('panellist').getElementsByTagName('a');
for(var i=0;i<lst.length;++i)
lst.item(i).classList.remove('active');
document.getElementById(cont+'lk').classList.add('active');
}
function swonload(){
window.onresize=function()
{
if(window.innerWidth<768)
setupevents();
else unsetevents();
}
window.onresize();
loadTheme();
if(!location.hash.length)contsw('main');
else contsw(location.hash.substr(1));
/*var unsupportedpf=['Macintosh','MacIntel','MacPPC','Mac68K','iPhone','iPad','iPod'];
if(unsupportedpf.indexOf(window.navigator.platform)!==-1)
document.getElementById('appleouter').style.display='block';*/
}
</script>
<div id="panel" class="TText">
<ul id="panellist">
<li><a id="mainlk" href="#" onclick="contsw('main');"><h1>Chrisoft</h1></a></li>
<li><a id="projectslk" href="#projects" onclick="contsw('projects');">Projects</a></li>
<li><a id="bloglk" href="#blog" onclick="contsw('blog');">Blog</a></li>
<li><a id="librarylk" href="#library" onclick="contsw('library');">Library</a></li>
<li><a id="guestbooklk" href="#guestbook" onclick="contsw('guestbook');">Guestbook</a></li>
<li><a id="aboutlk" href="#about" onclick="contsw('about');">About</a></li>
<li><a id="linkslk" href="#links" onclick="contsw('links');">Links</a></li>
<li><a href="javascript:showthemesw()">Themes</a></li>
</ul>
</div>
<div id="content" class="TText">
<div class="block" id="main">
<h2>Yet another wandering programmer</h2><hr>
<p>
Welcome to the home page of Chris Xiong, a Chinese programmer living overseas.
</p>
<p>
You will find my works, collections and pieces of thoughts here.
</p>
<p>
Have fun exploring!
</p>
<!--<p id="appleouter" style="display:none;">
<b>Please read [<a href="https://stallman.org/apple.html" rel="external" target="_blank" onclick="document.getElementById('apple').style.display='block';">this</a>] in case of any trouble, Your Excellency.</b>
<div id="apple" class="block" style="display:none;"><p>
<s>The owner of this site doesn't have any Apple devices that can go online so</s> you may experience major problems browsing this site. If you consider this unacceptable, you may donate me an Apple device. Please mail your generous donation to <code>/dev/null</code>.
</p></div>
</p>-->
</div>
<div class="block" id="projects">
<h2>Projects</h2><hr>
<p>
Here's an incomplete list of projects maintained by me. You may find more projects listed in my <a href="https://cgit.chrisoft.org/">code library</a>, or under my GitHub profile.
</p>
<p>
For projects with license files, please refer to them for licensing details.
Other projects, especially the old inactive ones, are provided "as-is", licensed under the terms of the Expat (MIT) license and
come with <strong>ABSOLUTELY NO WARRANTY</strong>. Use them at your own risk.
</p>
<h3 style="font-weight:normal;">Active Projects</h3>
<ul>
<li>deduper
<reduced>
<a href="https://cgit.chrisoft.org/deduper.git/">
[details]</a>
<a href="javascript:toggleblkdisplay('dedp-desc')">
[short desc.]</a></reduced>
<div class="block" id="dedp-desc">
Scans local images for duplicates.
Also provides reverse image search for your local images.
Implements a variant of the algorithm described in "An
image signature for any kind of image", doi:
10.1109/ICIP.2002.1038047.
</div>
</reduced>
</li>
<li>it2midi
<reduced>
<a href="https://cgit.chrisoft.org/it2midi.git/">
[details]</a>
<a href="javascript:toggleblkdisplay('it2m-desc')">
[short desc.]</a></reduced>
<div class="block" id="it2m-desc">
An effort to rewrite my old it2midi.cpp in Rust.
A versatile IT (impulse tracker) to MIDI converter.
Currently it's moulting into a fully-fledged mod
player.
</div>
</reduced>
</li>
<li>QMidiPlayer
<reduced><a href="./QMidiPlayer">[details]</a>
<a href="javascript:toggleblkdisplay('qmp-desc')">
[short desc.]</a></reduced>
<div class="block" id="qmp-desc">
A feature-rich cross-platform MIDI player with UI
inspired by vanBasco's Karaoke Player and QSynth.
It has a comprehensive plugin interface to
provide extra functionalities.
</div>
</li>
<li>SMELT
<reduced>
<a href="https://github.com/BearKidsTeam/SMELT">
[details]</a>
<a href="javascript:toggleblkdisplay('smlt-desc')">
[short desc.]</a></reduced>
<div class="block" id="smlt-desc">
SMELT is a set of classes that provide hardware-accelerated
graphics, input handling and optionally, audio output.
SMELT is used extensively in my other projects.
</div>
</li>
<li>lightsd
<reduced>
<a href="https://github.com/chirs241097/lightsd">
[details]</a>
<a href="javascript:toggleblkdisplay('litd-desc')">
[short desc.]</a></reduced>
<div class="block" id="litd-desc">
Auto brightness for Linux, without requiring
a desktop environment or systemd.
</div>
</reduced>
</li>
<li>Touhou BGM Remix
<reduced><a href="./thbgmremix">[details]</a>
<a href="javascript:toggleblkdisplay('thbgm-desc')">
[short desc.]</a></reduced>
<div class="block" id="thbgm-desc">
The only project that has nothing to do with
programming here. These packages provide remixed
BGM in a more modern style for legacy Touhou Project
releases. It may sound worse or better. You decide.
</div>
</li>
</ul>
<h3 style="font-weight:normal;">Contributed Projects</h3>
<p>
I've made contributions to these projects, more or less.
</p>
<ul>
<li>BLumia OJ
<reduced>
<a href="https://github.com/BLumia/BLumiaOJ">
[details]</a>
<a href="javascript:toggleblkdisplay('bloj-desc')">
[short desc.]</a>
</reduced>
<div class="block" id="bloj-desc">
A HUSTOJ compatible Online Judge system.
</div>
</li>
<li>Pineapple Synth
<reduced>
<a href="https://github.com/BLumia/PineappleSynth">[details]</a>
<a href="javascript:toggleblkdisplay('psyn-desc')">
[short desc.]</a></reduced>
<div class="block" id="psyn-desc">
A software synthesizer developed by BLumia. I helped with some optimizations and bug fixes.
</div>
</reduced>
</li>
<li>FluidSynth
<reduced>
<a href="https://github.com/FluidSynth/fluidsynth">[details]</a>
<a href="javascript:toggleblkdisplay('fluidsynth-desc')">
[short desc.]</a></reduced>
<div class="block" id="fluidsynth-desc">
A realtime soundfont synthesizer. The irony is that most code I have contributed is Windoze-specific.
</div>
</reduced>
</li>
<li>thplayer
<reduced>
<a href="https://github.com/BearKidsTeam/thplayer">[details]</a>
<a href="javascript:toggleblkdisplay('thplyr-desc')">
[short desc.]</a></reduced>
<div class="block" id="thplyr-desc">
A replacement for my "thplayer.cpp" with GUI, written by BLumia. It has my reinvented wheel inside.
</div>
</reduced>
</li>
<li>Deepin Desktop Environment
<reduced>
<a href="javascript:toggleblkdisplay('dde-desc')">
[short desc.]</a></reduced>
<div class="block" id="dde-desc">
<p>
I worked for Deepin as an intern for almost a year starting from February 2019. My work there
includes implementing optical disc authoring for the file manager and reworking the computer
pseudo-folder. I also worked on the networking section of the settings application for some
time, as well as a few other system components (DTK being one of them). Chances are if you
have ever used DDE v20 (the redesign released in 2020), my code has passed through the
pipelines of your processor.
</p>
<p>I have mixed views on Deepin the company. You may find out more in my blog posts.</p>
</div>
</reduced>
</li>
<li>CKRasterizer
<reduced>
<a href="https://github.com/Swung0x48/CKRasterizer">[details]</a>
<a href="javascript:toggleblkdisplay('ckrst-desc')">
[short desc.]</a></reduced>
<div class="block" id="ckrst-desc">
Rasterizers for Virtools (an old interactive 3D toolkit). I shifted the project from a
reverse-engineering approach to a "just wing it" approach. Helped with completing the
DirectX 9 rasterizer. Additionally created two new rasterizer modules
for modern graphics from scratch (CKGLRasterizer and CKVkRasterizer).
</div>
</reduced>
</li>
<li>SDUOJ
<reduced>
<a href="javascript:toggleblkdisplay('soj-desc')">
[short desc.]</a>
</reduced>
<div class="block" id="soj-desc">
The Online Judge used by Shandong University,
Located <a href="http://acm.sdu.edu.cn/">here</a>.
It does have a github repo, but we have been modifying
the production directly for so long that it is very
outdated. Yes we use ssh and vim to modify the prod.
And thanks to the stupid university I am in, it is
<b>impossible to access out of the campus</b>.
</div>
</li>
</ul>
<h3 style="font-weight:normal;">Pending Projects</h3>
<ul>
<li>OPLang</li>
<li>msed</li>
<li>FluidR3 GM2+Extension</li>
<li>QSPS Sound Set</li>
<li><s>vjtester v2</s></li>
<li><s>SMELT4js(?)</s></li>
<li><s>Online Judge</s></li>
</ul>
<h3 style="font-weight:normal;"><s>Archived</s> Antique Projects</h3>
<p>
Some of these projects are permanently lost in a disaster.
</p>
<ul>
<li>Bullet Lab Remix
<reduced><a href="./BulletLabRemix">[details]</a>
<a href="javascript:toggleblkdisplay('blr-desc')">
[short desc.]</a></reduced>
<div class="block" id="blr-desc">
A danmaku-like game. Inspired by a flash game
called "Bullet Lab", this project has departured
so far from it that it has became a STG without
the 'shooting' part.
</div>
</li>
<li>Ballance Remix (2011-2012)
<reduced>
<a href="./BallanceRemix">[details]</a>
<a href="javascript:toggleblkdisplay('br-desc')">[short desc.]</a>
</reduced>
<div class="block" id="br-desc">
Old project attempting to recreate the game Ballance from Cyparade.
It uses the same Virtools engine but without using custom extensions
to the engine.
Playable, but in no way resemble the "feel" of the original game in
terms of controls.
</div>
</li>
<li>Chris' Timidity Player (2012)
<reduced>
<a id="timidityplyr" href="//filestorage.chrisoft.org/inactive/TimidityPlayer.tar.xz">[archive]</a>
<a href="javascript:toggleblkdisplay('tmidp-desc')">[short desc.]</a>
</reduced>
<div class="block" id="tmidp-desc">
Simple timidity frontend written in FreePascal. BLumia created a more
feature-rich fork called <a href="https://github.com/BLumia/BLumiaTimidityShell">BLumia's Timidity Shell</a>.
</div>
</li>
<li>Simple Tester for OI (2012)
<reduced>
<a href="//filestorage.chrisoft.org/inactive/Tester.tar.xz">[archive]</a>
<a href="javascript:toggleblkdisplay('testr-desc')">[short desc.]</a>
</reduced>
<div class="block" id="testr-desc">
Local judger for OI problems. Doesn't really have any advanced features.
Written in FreePascal.
</div>
</li>
<li>the <s>Ultimate</s> Data Visualiser (2015)
<reduced>
<a href="javascript:toggleblkdisplay('dvis-desc')">[short desc.]</a>
</reduced>
<div class="block" id="dvis-desc">
A data visualizer for some very specific purpose.
This project is never made public. Written in C++. Uses SMELT.
</div>
</li>
<li>World's Hardest Game 3D (2010-2011)
<reduced>
<a href="https://1drv.ms/u/s!AjEe7BxvJRi9gSCz7LxTzCjXWMsT">[archive]</a>
<a href="javascript:toggleblkdisplay('whg3d-desc')">[short desc.]</a>
</reduced>
<div class="block" id="whg3d-desc">
3D version of a flash game called "World's Hardest Game" made with Virtools.
Extremely hard because it's basically unplayable.
</div>
</li>
<li>Cross Noodles (Virtools) (2012)
<reduced>
<a href="//cgit.chrisoft.org/oddities.git/tree/Virtools/Cross_Noodles.cmo">[details]</a>
<a href="javascript:toggleblkdisplay('crxnd-desc')">[short desc.]</a>
</reduced>
<div class="block" id="crxnd-desc">
A stupid game made with Virtools. A new version written for modern(-ish)
browser is <a href="https://chrisoft.org/CrossNoodlesJS/">available</a>.
</div>
</li>
<li>Compiz 0.9.7.99 (2012-2016)
<reduced>
<a href="//filestorage.chrisoft.org/inactive/compiz0.9.7.9.tar.xz">[archive]</a>
<a href="javascript:toggleblkdisplay('cmpz-desc')">[short desc.]</a>
</reduced>
<div class="block" id="cmpz-desc">
The ultimate pre-GLES port compiz distribution with extra features
added by me, as well as backports of a few new features added later.
It was forked off the 0.9.7 branch for Ubuntu 12.04. It comes with
probably every single plugin ever available for compiz.
</div>
</li>
<li>Minesweeper in HGE (2012)
<reduced>
<a href="javascript:toggleblkdisplay('mswp-desc')">[short desc.]</a>
</reduced>
<div class="block" id="mswp-desc">
Essentially a cmine.c with GUI.
</div>
</li>
<li>Desktop (2012)
<reduced>
<a href="//filestorage.chrisoft.org/inactive/Desktop.tar.xz">[archive]</a>
<a href="javascript:toggleblkdisplay('dskt-desc')">[short desc.]</a>
</reduced>
<div class="block" id="dskt-desc">
Windows 7 style show desktop for Windows 2000, Windows XP and Windows Vista.
Written in FreePascal. It's pretty broken though.
</div>
</li>
<li>Go!Word (2012)
<reduced>
<a href="javascript:toggleblkdisplay('gword-desc')">[short desc.]</a>
</reduced>
<div class="block" id="gword-desc">
Hangman written in FreePascal.
</div>
</li>
<li>cpu.c (2011)
<reduced>
<a href="javascript:toggleblkdisplay('cpuc-desc')">[short desc.]</a>
</reduced>
<div class="block" id="cpuc-desc">
Plots a sine function in CPU usage using busy waits.
</div>
</li>
<li>cmine.c (2012)
<reduced>
<a href="javascript:toggleblkdisplay('cmine-desc')">[short desc.]</a>
</reduced>
<div class="block" id="cmine-desc">
Minesweeper, CLI version.
</div>
</li>
<li>fpsnake.pas (2016)
<reduced>
<a href="javascript:toggleblkdisplay('psnk-desc')">[short desc.]</a>
</reduced>
<div class="block" id="psnk-desc">
Snake game written in FreePascal. I wrote this in order to prove that
I can still do Pascal.
</div>
</li>
<li>fpGraphicClock (2011-2012)
<reduced>
<a href="javascript:toggleblkdisplay('pgclk-desc')">[short desc.]</a>
</reduced>
<div class="block" id="pgclk-desc">
Primitive graphic clock written in FreePascal.
</div>
</li>
<li>Date&Time (2009-2010)
<reduced>
<a href="javascript:toggleblkdisplay('dntm-desc')">[short desc.]</a>
</reduced>
<div class="block" id="dntm-desc">
Text mode clock, alarm and stopwatch written in FreePascal.
</div>
</li>
</ul>
</div>
<div class="block" id="blog">
<h2>Blog</h2><hr>
<h3><a href="/blog/list">SPELVNCAM·VRSAE·VISERE</a></h3>
<p>
As its name suggests, this place is dangerous. However if you
do know what you're looking for, you might be able to find
the hidden gems.
</p>
<p>
Note: some of the posts there are quite old and might no longer
reflect my current views on various topics. Certain posts may
contain stuff that not everyone would like to see. May contain
nuts.
</p>
<p>
Does not appear to contain a significant amount of cerebral
activity.
</p>
</div>
<div class="block" id="library">
<h2>Library</h2><hr>
<h3><a href="/libs/music/player">Music Library</a></h3>
<p>
Music arranged and some, composed, by me.
</p>
<h3><a href="//filestorage.chrisoft.org/blog/data/osunix-logo_sq_thicken.png">Picture Library</a></h3>
<p>
Nothin'.
</p>
<h3><a href="//cgit.chrisoft.org">Code Library</a></h3>
<p>
Get lost in my messy code!
</p>
</div>
<div class="block" id="guestbook">
<h2>Leave a Message</h2><hr>
<p style="font-size:75%;">
All times are in CST (UTC+8).
Messages are <b>not</b> censored
(except messages for testing, which would be deleted
shortly after posting; advertising is also prohibited).
General etiquette still applies.
</p>
<div id="commentdiv">
</div>
<script>
function gb_send()
{
if(document.getElementById("mcontent").value.length+document.getElementById("mname").value.length>16300)
alert('super duper secure client side security');
document.getElementById('button_send').innerHTML='...';
document.getElementById('button_send').disabled=true;
try
{
var h=new XMLHttpRequest();
var f={};
f.mname=encodeURIComponent(document.getElementById('mname').value);
f.mcontent=encodeURIComponent(document.getElementById('mcontent').value);
h.open('POST','/cgi/gb_newentry.cgi');
h.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
h.send(JSON.stringify(f));
h.onerror=function(){
alert('You broke something, or something broke itself...');
document.getElementById('button_send').innerHTML='Leave the message!';
document.getElementById('button_send').disabled=false;
};
h.onload=function(){
gb_load();
document.getElementById('button_send').innerHTML='Leave the message!';
document.getElementById('button_send').disabled=false;
document.getElementById('mname').value=
document.getElementById('mcontent').value='';
};
}
catch(e){return;}
}
function gb_load()
{
while(document.getElementById('commentdiv').firstChild)
document.getElementById('commentdiv').removeChild(document.getElementById('commentdiv').firstChild);
var h=new XMLHttpRequest();
h.open("GET","/leave-a-message/messages?"+(new Date()).getTime());
h.send();
h.onload=function()
{
var ro=JSON.parse(h.responseText)
for(var i=ro.length-1;i>=0;--i)
{
var o=ro[i];
if(!o.cont)continue;
var e=document.createElement('div');
e.classList.add('comment');
var p=document.createElement('div');
p.style.padding='0.5em 0 0.5em 0.5em';
p.innerHTML=o.cont;
var t=document.createElement('div');
t.classList.add('author');
if(!o.author.length)o.author='Anonymous';
t.innerHTML=o.author+" at "+o.time;
e.appendChild(p);
e.appendChild(t);
document.getElementById('commentdiv').appendChild(e);
}
}
}
gb_load();
</script>
<form id="msgform" method="post" style="padding:5px;border:1px solid #CCC;">
<span style="width:98%;display:table;">
<label for="name" style="display:table-cell;width:1px;white-space:nowrap;">Your honourable name:</label>
<input type="text" id="mname" name="name" required style="margin-left:5px;display:table-cell;width:100%;">
</span>
<div style="padding:0.5em;">Message:</div>
<textarea required id="mcontent" name="content" rows="5" style="width:97%;margin:0.5em;"></textarea>
<div style="text-align:center;">
<button id="button_send" onclick="gb_send();" type="button">Leave the message!</button>
</div>
</form>
</div>
<div class="block" id="about">
<h2>About</h2><hr>
<!--#include virtual="about_l.html" -->
</div>
<div class="block" id="links">
<h2>Links</h2><hr>
<h3>Miscellaneous tools and games</h3>
<ul>
<li><a href="/codeforces-rating-cmp">CodeForces Rating Comparator</a></li>
<li><a href="/CrossNoodlesJS">Cross Noodles (revamped version)</a></li>
<li><a href="/minesweeper">Minesweeper</a></li>
<li><a href="/SameGameJS">Same game</a></li>
<li><a href="/sound-of-sorting">Sound of sorting in your browser</a></li>
</ul>
<h3>Friends</h3>
<p>No one can go without friends. (unordered list)</p>
<ul id="friendslist">
<li><a rel="external" target="_blank" href="https://blog.61dpi.com/">夜光糖果屋</a></li>
<li><a rel="external" target="_blank" href="https://www.blumia.net/" rel="nofollow">BLumia :: Wrapzone</a></li>
<li><a rel="external" target="_blank" href="https://jxpxxzj.oschina.io"><s>雄心万丈, 躺在床上</s></a></li>
<li><a rel="external" target="_blank" href="https://yyc12345.github.io/MyBlog/">yyc12345 の Blog</a></li>
<li><a rel="external" target="_blank" href="https://oing9179.github.io/blog">oing9179 的笔记本儿</a></li>
<li><a rel="external" target="_blank" href="https://baka719.top">719daze</a></li>
<li><a rel="external" target="_blank" href="https://world.203.jp/">OWNER203'S WORLD</a></li>
<li><a rel="external" target="_blank" href="https://un1c0de.xyz">UN1C0DE</a></li>
<li><a rel="external" target="_blank" href="https://www.swung0x48.com/">Excerpt – A Blog of Swung</a></li>
</ul>
</div>
<div style="text-align:center;padding:0.5em;">
<a href="https://www.debian.org"><img src="debianpowered.svg" alt="Powered by Debian"></a>
<a href="https://www.conoha.jp/conoha"><img src="conohahosted.svg" alt="Hosted by Conoha"></a><br>
<a href="/blog/post/Privacy.html">Privacy</a> | Copyright Chris Xiong 2024
</div>
</div>
<div id="themesw" style="position:fixed;top:0;left:0;width:100%;height:100%;display:none;opacity:0;background-color:rgba(0,0,0,0.6);z-index:999;transition:opacity 0.5s;" onclick="hidethemesw()">
<div class="TText" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.4);color:white;padding:1em;" onclick="event.stopPropagation()">
<span>Season Theme</span><br>
<a id="ts0" href="javascript:changeTheme('0','')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="spring" alt="spring" style="background-image:url('themes.svg');background-position:0 -32px;"></a>
<a id="ts1" href="javascript:changeTheme('1','')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="summer" alt="summer" style="background-image:url('themes.svg');background-position:-16px -32px;"></a>
<a id="ts2" href="javascript:changeTheme('2','')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="autumn" alt="autumn" style="background-image:url('themes.svg');background-position:-32px -32px;"></a>
<a id="ts3" href="javascript:changeTheme('3','')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="winter" alt="winter" style="background-image:url('themes.svg');background-position:0 -16px;"></a>
<a id="tsz" href="javascript:changeTheme('z','')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="auto based on the season in the northern hemisphere" alt="auto" style="background-image:url('themes.svg');background-position:0 0;"></a>
<br>
<span>Color Tune</span><br>
<a id="tta" href="javascript:changeTheme('','a')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="day" alt="day" style="background-image:url('themes.svg');background-position:-16px -16px;"></a>
<a id="ttb" href="javascript:changeTheme('','b')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="night" alt="night" style="background-image:url('themes.svg');background-position:-32px -16px;"></a>
<a id="ttz" href="javascript:changeTheme('','z')" style="border-bottom: 1px solid rgba(255,255,255,0);"><img width="16" src="null.svg" title="auto based on local time" alt="auto" style="background-image:url('themes.svg');background-position:0 0;"></a>
</div>
</div>
<div id="v6" style="display:block;" class="floatingl" onmouseover="changeImage('aqt6a','aqt6')" onmouseout="changeImage('aqt6','aqt6a')" onclick="this.style.display='none';">
<img src="koishi_norm.png" alt="" width="320" id="aqt6" decoding="async">
<img src="koishi_hovr.png" alt="" width="320" id="aqt6a" decoding="async" style="display:none;">
</div>
</body>
</html>
