diff options
Diffstat (limited to 'index.shtml')
| -rw-r--r-- | index.shtml | 307 |
1 files changed, 208 insertions, 99 deletions
diff --git a/index.shtml b/index.shtml index 25550a0..1ea3a43 100644 --- a/index.shtml +++ b/index.shtml @@ -1,5 +1,5 @@ <!DOCTYPE HTML> -<html> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> @@ -35,27 +35,129 @@ flex: 1; flex-basis: 40%; align-self: flex-start; - margin: 0.5em; - padding: 1em; } div.projects-flex details{ border: 1px solid var(--secondary-fg); + transition: 0.3s ease background; + margin: 0.5em; + padding: 0; + pointer-events: none; } div.projects-flex details summary{ - transition: 0.3s ease background; - background-clip: content-box; cursor: zoom-in; + pointer-events: auto; + padding: 1em; } - div.projects-flex details summary:hover{ + div.projects-flex details:hover{ background-color: color-mix(in oklab, var(--interactive-hover-bg) 30%, rgba(0, 0, 0, 0)); } - div.projects-flex details[open] summary{ + div.projects-flex details[open]{ background-color: unset !important; + padding: 0 1em 1em 1em; + } + div.projects-flex details[open] summary{ border-bottom: 1px solid var(--principal-fg); - padding-bottom: 1em; + padding: 1em 0; margin-bottom: 1em; cursor: zoom-out; } + div.ubx-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-size: 0; + } + div.ubx{ + display: inline flex; + align-items: center; + justify-content: left; + box-sizing: border-box; + flex: 0 0 250px; + width: 238px; + height: 45px; + margin: 6px; + font-size: 9px; + border: 1px solid var(--secondary-fg); + } + div.ubx-ll{ + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: 1000; + flex: 0 0 46px; + width: 46px; + height: 100%; + text-align: center; + white-space: nowrap; + background-color: color-mix(in oklab, var(--interactive-hover-bg) 30%, rgba(0, 0, 0, 0)); + } + div.ubx-lr{ + padding: 0 6px; + font-weight: 600; + } + div.ubx-ll img.vf{ + height: 100%; + } + div.ubx-ll img.v90{ + height: 90%; + } + div.ubx-ll img.v80{ + height: 80%; + } + div.ubx-ll img.hf{ + width: 100%; + } + div.ubx-ll img.h90{ + width: 90%; + } + div.ubx-ll img.h80{ + width: 80%; + } + .ubx-emojislot{ + font-size: 24px !important; + } + .crossed-out{ + position: relative; + } + .crossed-out::before, .crossed-out::after{ + content: ''; + width: 95%; + position: absolute; + left: 1px; + top: 45%; + border-bottom: 2px solid red; + } + .crossed-out::before{ + transform: skewY(-30deg); + } + .crossed-out::after{ + transform: skewY(30deg); + } + #ubx-localtime span.datet { + color: #7e7; + opacity: 0.2; + } + #ubx-localtime:hover span.datet { + opacity: initial; + } + #ubx-localtime span.datetz { + color: #e7a; + opacity: 0.5; + } + #ubx-localtime:hover span.datetz { + opacity: initial; + } + #ubx-localtime-time { + font-size: 12px; + } + .qablock { + border: 1px solid; + border-color: var(--secondary-fg); + padding: 1em; + margin: 0.5em 0; + } + td{border:1px solid var(--secondary-fg);} </style> </head> <!-- @@ -64,9 +166,9 @@ files, are licensed under the terms of the Expat(MIT) License. Contents are licensed under the CC BY-SA 4.0 license. --> <body> -<script type="text/javascript" src="panel.js"></script> -<script type="text/javascript" src="themer.js"></script> -<script type="text/javascript"> +<script src="panel.js"></script> +<script src="themer.js"></script> +<script> function changeImage(a,b){ document.getElementById(a).style.display='inline'; document.getElementById(b).style.display='none'; @@ -100,6 +202,19 @@ function contsw(cont){ lst.item(i).classList.remove('active'); document.getElementById(cont+'lk').classList.add('active'); } +function hashchange(){ + if (!location.hash.length) contsw("main"); + else { + let el = document.querySelector(location.hash); + while (el && el.classList && !el.classList.contains("toplevel")) + el = el.parentNode; + if (!el) contsw("main"); + else { + contsw(el.id); + document.querySelector(location.hash).scrollIntoView(); + } + } +} function swonload(){ window.onresize=function() { @@ -107,16 +222,13 @@ function swonload(){ setupevents(); else unsetevents(); } + window.onhashchange = hashchange; 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';*/ + hashchange(); } document.addEventListener("DOMContentLoaded", swonload); -window.onhashchange = () => { contsw(location.hash.substr(1)) }; +window.addEventListener("load", hashchange); </script> <div id="panel" class="TText"> <ul id="panellist"> @@ -132,110 +244,107 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; </ul> </div> <div id="content" class="TText"> - <div class="block" id="main"> + <div class="block toplevel" id="main"> <h2>Yet another wandering programmer</h2><hr> <p> - Welcome to the home page of Chris Xiong, a Chinese programmer living overseas. + Welcome, traveller of the interwebz! + </p> + <p> + This is the cyber-homestead of Chris Xiong, who's obsessed with things that blink, spin, or make noises. </p> <p> - You will find my works, collections and pieces of thoughts here. + You will find my works, projects 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 style="text-align:center;"> <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> </div> </div> - <div class="block" id="projects"> + <div class="block toplevel" id="projects"> <h2>Projects</h2><hr> <p> - Here is 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 <a href="https://github.com/chirs241097/">GitHub profile</a> (currently only used for collaborative projects). + Here is 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 <a href="https://github.com/chirs241097/">GitHub profile</a> (currently only used for collaborative projects). </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;">Current Projects</h3> + <h3 style="font-weight:normal;" id="currentproj">Current Projects</h3> <div class="projects-flex" id="current-projects"> - <details class="projects-item"> + <div class="projects-item"><details> <summary><a href="https://cgit.chrisoft.org/deduper.git/">deduper</a></summary> 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. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://cgit.chrisoft.org/it2midi.git/">it2midi</a></summary> 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. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://cgit.chrisoft.org/QMidiPlayer.git/">QMidiPlayer</a></summary> 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. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://cgit.chrisoft.org/SMELT.git/">SMELT</a></summary> 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. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://cgit.chrisoft.org/lightsd.git/">lightsd</a></summary> Auto brightness for Linux, without requiring a desktop environment or systemd. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="/rbusif">RBUS-ADAT</a></summary> Convert digital audio data carried by Roland's proprietary R-BUS interface into ADAT. Linked page also provided additional technical information on R-BUS. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="/thbgmremix">Touhou BGM Remix</a></summary> 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. - </details> + </details></div> <div class="projects-item"></div> </div> - <h3 style="font-weight:normal;">Contributed Projects</h3> + <h3 style="font-weight:normal;" id="contribproj">Contributed Projects</h3> <p> I've made contributions to these projects, more or less. </p> <div class="projects-flex" id="contrib-projects"> - <details class="projects-item"> + <div class="projects-item"><details> <summary><a href="https://github.com/BLumia/BLumiaOJ">BLumia OJ</a></summary> A HUSTOJ compatible Online Judge system. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://github.com/BLumia/PineappleSynth">Pineapple Synth</a></summary> A software synthesizer developed by BLumia. I helped with some optimizations and bug fixes. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://github.com/FluidSynth/fluidsynth">FluidSynth</a></summary> A realtime soundfont synthesizer. The irony is that most code I have contributed is Windoze-specific. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://github.com/BearKidsTeam/thplayer">thplayer</a></summary> A replacement for my "thplayer.cpp" with GUI, written by BLumia. It has my reinvented wheel inside. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Deepin Desktop Environment</summary> <p> I worked for Deepin as an intern for almost a year starting from February 2019. My work there @@ -247,15 +356,15 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; </p> <p>I have mixed views on Deepin the company. You may find out more in my blog posts. I'm no longer affiliated with the company or its successor UnionTech.</p> - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="https://github.com/Swung0x48/CKRasterizer">CKRasterizer</a></summary> 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). - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>SDUOJ</summary> The Online Judge used by Shandong University, Once located <a href="http://acm.sdu.edu.cn/">here</a>. @@ -264,55 +373,55 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; outdated. Yes we used ssh and vim to develop on prod. And thanks to the stupid university I was in, it is <b>impossible to access out of the campus</b>. - </details> + </details></div> <div class="projects-item"></div> </div> - <h3 style="font-weight:normal;"><s>Archived</s> Antique Projects</h3> + <h3 style="font-weight:normal;" id="antiqueproj"><s>Archived</s> Antique Projects</h3> <p>Some of these projects are permanently lost in a disaster.</p> <div class="projects-flex" id="antique-projects"> - <details class="projects-item"> + <div class="projects-item"><details> <summary><a href="/BulletLabRemix">Bullet Lab Remix (2012-2015)</a></summary> 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. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="/BallanceRemix">Ballance Remix (2011-2012)</a></summary> Old project attempting to recreate the game Ballance from Cyparade. It uses the same Virtools engine but without using custom extensions to the engine.<br> Playable, but in no way resemble the "feel" of the original game in terms of controls. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>World's Hardest Game 3D (2010-2011)</summary> <a href="https://1drv.ms/u/s!AjEe7BxvJRi9gSCz7LxTzCjXWMsT">Download this abomination, if you wish.</a> 3D version of a flash game called "World's Hardest Game" made with Virtools. Extremely hard because it's basically unplayable. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Cross Noodles (Virtools) (2012)</summary> <a href="//cgit.chrisoft.org/oddities.git/tree/Virtools/Cross_Noodles.cmo">Download this abomination, if you wish.</a> A stupid game made with Virtools. A new version written for modern(-ish) browser is <a href="/CrossNoodlesJS/">available</a>. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="//filestorage.chrisoft.org/inactive/TimidityPlayer.tar.xz">Chris' Timidity Player (2012)</a></summary> 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>. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary><a href="//filestorage.chrisoft.org/inactive/Tester.tar.xz">Simple Tester for OI (2012)</a></summary> Local judger for OI problems. Doesn't really have any fancy features. Written in FreePascal. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>the <s>Ultimate</s> Data Visualiser (2015)</summary> A data visualizer for a certain very specific purpose. This project is never made public. Written in C++. Uses SMELT. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Compiz 0.9.7.99 (2012-2016)</summary> <a href="//filestorage.chrisoft.org/inactive/compiz0.9.7.9.tar.xz">Archived source code.</a> The ultimate pre-GLES port compiz distribution with extra features @@ -320,44 +429,44 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; It was forked off the 0.9.7 branch for Ubuntu 12.04. It comes with probably every single plugin ever available for compiz (that I could get working). - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Minesweeper in HGE (2012)</summary> Essentially a cmine.c with GUI. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Desktop (2012)</summary> <a href="//filestorage.chrisoft.org/inactive/Desktop.tar.xz">Archived source code.</a> Windows 7 style show desktop for Windows 2000, Windows XP and Windows Vista. Written in FreePascal. It was pretty broken though. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Go!Word (2012)</summary> Hangman written in FreePascal. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>cpu.c (2011)</summary> Plots a sine function in CPU usage using busy waits. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>cmine.c (2012)</summary> Minesweeper, CLI version (the 289536397th one been written). - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>fpsnake.pas (2016)</summary> Snake game written in FreePascal. I wrote this in order to prove that I can still do Pascal. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>fpGraphicClock (2011-2012)</summary> Primitive graphic clock written in FreePascal. - </details> - <details class="projects-item"> + </details></div> + <div class="projects-item"><details> <summary>Date&Time (2009-2010)</summary> Text mode clock, alarm and stopwatch written in FreePascal. - </details> + </details></div> </div> - <h3 style="font-weight:normal;">Pending Projects</h3> + <h3 style="font-weight:normal;" id="pendingproj">Pending Projects</h3> <p>These project may or may not ever be started.</p> <ul> <li>OPLang</li> @@ -370,7 +479,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; <li><s>Online Judge</s></li> </ul> </div> - <div class="block" id="blog"> + <div class="block toplevel" id="blog"> <h2>Blog</h2><hr> <h3><a href="/blog/list"><ruby>SPELVNCAM·VRSAE·VISERE<rp>(</rp><rt>Visit the bearess' den</rt><rp>)</rp></ruby></a></h3> <p> @@ -395,7 +504,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; nowadays. </p> </div> - <div class="block" id="library"> + <div class="block toplevel" id="library"> <h2>Library</h2><hr> <h3><a href="/libs/music/player">Music Library</a></h3> <p> @@ -410,7 +519,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; Get lost in my messy code! </p> </div> - <div class="block" id="guestbook"> + <div class="block toplevel" id="guestbook"> <h2>Guestbook</h2><hr> <p style="font-size:75%;"> All times are in CST (UTC+8). @@ -491,7 +600,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; </script> <form id="msgform" method="post" style="padding:5px;border:1px solid var(--secondary-fg);"> <span style="width:98%;display:table;"> - <label for="name" style="display:table-cell;width:1px;white-space:nowrap;">Your honorable name:</label> + <label for="mname" style="display:table-cell;width:1px;white-space:nowrap;">Your honorable 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> @@ -501,11 +610,11 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; </div> </form> </div> - <div class="block" id="about"> + <div class="block toplevel" id="about"> <h2>About</h2><hr> <!--#include virtual="about_l.html" --> </div> - <div class="block" id="links"> + <div class="block toplevel" id="links"> <h2>Links</h2><hr> <h3>Miscellaneous tools and games</h3> <ul> @@ -519,7 +628,7 @@ window.onhashchange = () => { contsw(location.hash.substr(1)) }; <p>No one can go without friends. (Unordered list. Stricken items are currently inaccessible.)</p> <ul id="friendslist"> <li><a rel="external" target="_blank" href="https://blog.61dpi.com/"><s>夜光糖果屋</s></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://www.blumia.net/">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> |