sophuwu.site > myweb 
modified icons, changed to woff2
added http error handler
added blog structs and some funcs
added database and stuff
changed html templates for dynamic templating when debugging
sophuwu sophie@skisiel.com
Wed, 11 Dec 2024 01:34:52 +0100
commit

3c66640e3266ab28f78bccceaf423d80178a5551

parent

2fddbc191f1e245c887f54650e6b2c73540dd8af

16 files changed, 656 insertions(+), 44 deletions(-)

jump to
A blogs.go 
@@ -0,0 +1,76 @@ 
+package main
+
+import (
+	"fmt"
+	"github.com/asdine/storm/v3"
+	"net/http"
+	"strings"
+	"time"
+)
+
+type BlogMeta struct {
+	ID    string `storm:"id"`
+	Title string
+	Date  string `storm:"index"`
+	Desc  string
+}
+
+func NewBlog(title, desc, body string, date ...string) error {
+	if len(date) == 0 {
+		date = append(date, time.Now().Format("2006-01-02"))
+	}
+	id := Sha1Base64(title, date[0])
+
+	exists, err := DB.KeyExists("BlogContent", id)
+	if err != nil {
+		return err
+	}
+	if exists {
+		return fmt.Errorf("blog already exists")
+	}
+
+	err = DB.Set("BlogContent", id, body)
+	if err != nil {
+		return err
+	}
+
+	blg := BlogMeta{
+		ID:    id,
+		Title: title,
+		Date:  date[0],
+		Desc:  desc,
+	}
+	return DB.Save(&blg)
+}
+
+func GetBlog(id string) (meta BlogMeta, content string, err error) {
+	err = DB.Get("BlogContent", id, &content)
+	if err != nil {
+		return
+	}
+	err = DB.One("ID", id, &meta)
+	return
+}
+
+func GetBlogs() ([]BlogMeta, error) {
+	var blogs []BlogMeta
+	err := DB.AllByIndex("Date", &blogs, storm.Limit(10), storm.Reverse())
+	return blogs, err
+}
+
+func BlogHandler(w http.ResponseWriter, r *http.Request) {
+	path := strings.TrimPrefix(r.URL.Path, "/blog/")
+	if path == "" {
+		blogs, err := GetBlogs()
+		if CheckHttpErr(err, w, r, 500) {
+			return
+		}
+
+		// 		"Title": "Sophie's Blogs",
+		// "Desc":  "I sometimes write blogs about random things that I find interesting. Here you can read all my posts about various things I found interesting at some point.",
+		// "Blogs": blogs,
+		err = Templates.Use(w, "blogs")
+		CheckHttpErr(err, w, r, 500)
+		return
+	}
+}
M config/config.go → config/config.go 
@@ -13,6 +13,7 @@ WebRoot    string
 	StaticPath string
 	MediaPath  string
 	Templates  string
+	DBPath     string
 	Email      string
 	Name       string
 	URL        string

@@ -26,6 +27,7 @@ func init() {
 	if len(os.Args) < 2 {
 		log.Fatalf("Usage: %s <config file>", os.Args[0])
 	}
+
 	file, err := os.ReadFile(os.Args[1])
 	if err != nil {
 		log.Fatalf("Error opening config: %v", err)

@@ -56,6 +58,7 @@ }
 	StaticPath = path("static")
 	MediaPath = path("media")
 	Templates = path("templates/*")
+	DBPath = path("data.db")
 	Email = mm["email"]
 	Name = mm["name"]
 	URL = mm["url"]
A db.go 
@@ -0,0 +1,26 @@ 
+package main
+
+import (
+	"github.com/asdine/storm/v3"
+	"go.etcd.io/bbolt"
+	"log"
+	"sophuwu.site/myweb/config"
+	"time"
+)
+
+var DB *storm.DB
+
+func OpenDB() {
+	db, err := storm.Open(config.DBPath, storm.BoltOptions(0660, &bbolt.Options{Timeout: time.Second}))
+	if err != nil {
+		log.Fatalf("failed to open db: %v", err)
+	}
+	DB = db
+}
+
+func CloseDB() {
+	err := DB.Close()
+	if err != nil {
+		log.Println(err)
+	}
+}
M main.go → main.go 
@@ -2,8 +2,11 @@ package main
 
 import (
 	"context"
+	"crypto/sha1"
+	"encoding/base64"
 	"errors"
-	"html/template"
+	"fmt"
+	"golang.org/x/sys/unix"
 	"log"
 	"net/http"
 	"os"

@@ -11,48 +14,82 @@ "os/signal"
 	"sophuwu.site/myweb/config"
 )
 
-var Tplt *template.Template
+func Sha1Base64(data ...any) string {
+	h := sha1.New()
+	h.Write([]byte(fmt.Sprint(data...)))
+	return base64.StdEncoding.EncodeToString(h.Sum(nil))
+}
 
-func ParseTemplates() {
-	Tplt = template.Must(template.ParseGlob(config.Templates))
+func CheckHttpErr(err error, w http.ResponseWriter, r *http.Request, code int) bool {
+	if err != nil {
+		HttpErr(w, r, code)
+		return true
+	}
+	return false
 }
 
-func HttpIndex(w http.ResponseWriter, r *http.Request) {
-	data := make(map[string]string)
-	data["Title"] = config.Name
-	data["Description"] = "Blogs and projects by " + config.Name + "."
-	data["Url"] = config.URL + r.URL.Path
-	data["Email"] = config.Email
-	data["Name"] = config.Name
+func HttpErr(w http.ResponseWriter, r *http.Request, code int) {
+	http.Error(w, http.StatusText(code), code)
+	log.Printf("HTTP %d: %s %s\n", code, r.Method, r.URL.Path)
+}
 
-	if err := Tplt.ExecuteTemplate(w, "index", data); err != nil {
-		log.Println(err)
+func HttpIndex(w http.ResponseWriter, r *http.Request) {
+	var d HTMLDataMap
+	err := DB.Get("pages", "index", &d)
+	if CheckHttpErr(err, w, r, 500) {
 		return
 	}
+	err = Templates.Use(w, r, "index", d)
+	_ = CheckHttpErr(err, w, r, 500)
 }
 
-func HttpFS(path, fspath string) {
-	http.Handle(path, http.StripPrefix(path, http.FileServer(http.Dir(fspath))))
+type HttpHjk struct {
+	http.ResponseWriter
+	status int
+}
+
+func HttpFS(path, fspath string) (string, http.HandlerFunc) {
+	fileServer := http.StripPrefix(path, http.FileServer(http.Dir(fspath)))
+	return path, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		hijack := &HttpHjk{ResponseWriter: w}
+		fileServer.ServeHTTP(hijack, r)
+		if hijack.status >= 400 && hijack.status < 600 {
+			HttpErr(w, r, hijack.status)
+		}
+	})
 }
 
 func main() {
-	ParseTemplates()
+	err := Templates.Init()
+	OpenDB()
+
+	d := HTMLData(config.Name, fmt.Sprintf("About %s. look at animations I've made, read about things I've found interesting. Links to my social media.", config.Name))
+	d.SetHTML("Content", "<h1>Welcome to my website</h1><p>Here you can find animations I've made, blogs I've written, and other things I've found interesting.</p>")
+	DB.Set("pages", "index", &d)
+
+	if err != nil {
+		log.Fatalf("Error initializing templates: %v", err)
+	}
 
 	http.HandleFunc("/", HttpIndex)
-	HttpFS("/static/", config.StaticPath)
-	HttpFS("/media/", config.MediaPath)
+	http.HandleFunc(HttpFS("/static/", config.StaticPath))
+	http.HandleFunc(HttpFS("/media/", config.MediaPath))
 
 	server := http.Server{Addr: config.ListenAddr, Handler: nil}
 	go func() {
-		err := server.ListenAndServe()
+		err = server.ListenAndServe()
 		if err != nil && !errors.Is(err, http.ErrServerClosed) {
 			log.Fatalf("Error starting server: %v", err)
 		}
 	}()
 	sigchan := make(chan os.Signal)
-	signal.Notify(sigchan)
+	signal.Notify(sigchan, unix.SIGINT, unix.SIGTERM, unix.SIGQUIT, unix.SIGKILL, unix.SIGSTOP)
 	s := <-sigchan
 	println("stopping: got signal", s.String())
-	server.Shutdown(context.Background())
+	err = server.Shutdown(context.Background())
+	if err != nil {
+		log.Println("Error stopping server: %v", err)
+	}
+	CloseDB()
 	println("stopped")
 }
A template.go 
@@ -0,0 +1,80 @@ 
+package main
+
+import (
+	"html/template"
+	"net/http"
+	"os"
+	"path/filepath"
+	"sophuwu.site/myweb/config"
+)
+
+type HTMLTemplates_t struct {
+	templates *template.Template
+	fillFunc  func(w http.ResponseWriter, name string, data HTMLDataMap) error
+}
+
+type HTMLDataMap map[string]any
+
+func HTMLData(title, desc string) HTMLDataMap {
+	var data = make(HTMLDataMap)
+	data["Title"] = title
+	data["Description"] = desc
+	return data
+}
+
+func (d *HTMLDataMap) Set(key string, value any) {
+	(*d)[key] = value
+}
+
+func (d *HTMLDataMap) SetHTML(key string, value string) {
+	(*d)[key] = template.HTML(value)
+}
+
+func (d *HTMLDataMap) SetIfEmpty(key string, value any) {
+	if _, ok := (*d)[key]; !ok {
+		(*d)[key] = value
+	}
+}
+
+var Templates HTMLTemplates_t
+
+func (h *HTMLTemplates_t) ParseTemplates() error {
+	index := template.New("index")
+	index.Parse(filepath.Join(config.Templates, "index.html"))
+	index.Option()
+
+	tmp, err := template.ParseGlob(config.Templates)
+	if err != nil {
+		return err
+	}
+	h.templates = tmp
+	return nil
+}
+
+func (h *HTMLTemplates_t) Init() error {
+	if os.Getenv("DEBUG") == "1" {
+		h.fillFunc = func(w http.ResponseWriter, name string, data HTMLDataMap) error {
+			err := h.ParseTemplates()
+			if err != nil {
+				return err
+			}
+			return h.templates.ExecuteTemplate(w, name, data)
+		}
+	} else {
+		h.fillFunc = func(w http.ResponseWriter, name string, data HTMLDataMap) error {
+			return h.templates.ExecuteTemplate(w, name, data)
+		}
+	}
+
+	return h.ParseTemplates()
+}
+
+func (h *HTMLTemplates_t) Use(w http.ResponseWriter, r *http.Request, name string, data HTMLDataMap) error {
+	data.SetIfEmpty("Url", config.URL+r.URL.Path)
+	data.SetIfEmpty("Email", config.Email)
+	data.SetIfEmpty("Name", config.Name)
+	if data["Content"] != nil {
+		data["HTML"] = template.HTML(data["Content"].(string))
+	}
+	return h.fillFunc(w, name, data)
+}
A webhome/static/icon-keyboard.html 
@@ -0,0 +1,333 @@ 
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/normalize.css" type="text/css">
+    <link rel="stylesheet" href="/static/style_main.css" type="text/css">
+    <link rel="stylesheet" id="csstheme" href="/static/style_dark.css" type="text/css">
+    <link rel="icon" type="image/ico" href="/static/favicon.ico">
+</head>
+<body>
+<main>
+	<style>
+        #keyboard-bg div, .keyboard-bg div, #keyboard-bg label, .keyboard-bg label { position: absolute; border-color: #000; box-sizing: border-box; background-clip: padding-box }
+.kl0 div, .kl2 div { vertical-align: top ;}
+.kl6 div, .kl8 div { vertical-align: bottom ;}
+.kl2, .kl8 {
+    left: 100%;
+transform: translateX(-50%);
+}
+* {
+    font-size: 14px!important;
+}
+
+.kb { border-radius: 5px; border: 1px solid black; background-color: #161823; width: 54px; height: 54px; display: block }
+.kt { border-radius: 5px; border: 1px solid black !important; background-color: #1f2231; width: 42px; height: 42px; display: block }
+.kls { sans-serif; padding: 3px; width: 42px; height: 42px; }
+.kl { width: 36px; height: 36px; color: rgb(8, 8, 8); }
+.kl > div { display: table-cell; position: static !important; width: 36px; height: 36px; max-width: 36px; }
+
+.kr1 .kt, .kr1 .kls { top: 3px; }
+.kr2 .kt, .kr2 .kls { top: 84px; }	.kr2 .kb { top: 81px }
+.kr3 .kt, .kr3 .kls { top: 138px; }	.kr3 .kb { top: 135px }
+.kr4 .kt, .kr4 .kls { top: 192px; }	.kr4 .kb { top: 189px }
+.kr5 .kt, .kr5 .kls { top: 246px; }	.kr5 .kb { top: 243px }
+.kr6 .kt, .kr6 .kls { top: 300px; }	.kr6 .kb { top: 297px }
+
+	</style>
+<div id="keyboard-bg">
+
+<!-- F1-F12 -->
+
+<!-- 1234567890 -->
+<div class="kr2">
+<div class="key"><div class="kc"><div class="kb" style="left:   0px"></div><div class="kt" style="left:   6px"></div><div class="kls" style="left:   6px"><div class="kl kl6 ts5"><div>`</div></div><div class="kl icon kl8 ts5"><div>`</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left:  54px"></div><div class="kt" style="left:  60px"></div><div class="kls" style="left:  60px"><div class="kl kl0 ts5"><div>!</div></div><div class="kl kl6 ts5"><div title="1 U+0031 DIGIT ONE
+SHIFT: ! U+0021 EXCLAMATION MARK">1</div></div><div class="kl icon kl2 ts5"><div>!</div></div><div class="kl icon kl8 ts5"><div title="1 U+0031 DIGIT ONE
+SHIFT: ! U+0021 EXCLAMATION MARK">1</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 108px"></div><div class="kt" style="left: 114px"></div><div class="kls" style="left: 114px"><div class="kl kl0 ts5"><div>"</div></div><div class="kl kl6 ts5"><div title="2 U+0032 DIGIT TWO
+SHIFT: &quot; U+0022 QUOTATION MARK">2</div></div><div class="kl icon kl2 ts5"><div>"</div></div><div class="kl icon kl8 ts5"><div title="2 U+0032 DIGIT TWO
+SHIFT: &quot; U+0022 QUOTATION MARK">2</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 162px"></div><div class="kt" style="left: 168px"></div><div class="kls" style="left: 168px"><div class="kl kl6 ts5"><div title="3 U+0033 DIGIT THREE
+SHIFT: £ U+00A3 POUND SIGN">3</div></div><div class="kl icon kl8 ts5"><div title="3 U+0033 DIGIT THREE
+SHIFT: £ U+00A3 POUND SIGN">3</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 216px"></div><div class="kt" style="left: 222px"></div><div class="kls" style="left: 222px"><div class="kl kl0 ts5"><div>$</div></div><div class="kl kl6 ts5"><div>4</div></div><div class="kl icon kl2 ts5"><div>$</div></div><div class="kl icon kl8 ts5"><div>4</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 270px"></div><div class="kt" style="left: 276px"></div><div class="kls" style="left: 276px"><div class="kl kl0 ts5"><div>%</div></div><div class="kl kl6 ts5"><div title="5 U+0035 DIGIT FIVE
+SHIFT: % U+0025 PERCENT SIGN">5</div></div><div class="kl icon kl2 ts5"><div>%</div></div><div class="kl icon kl8 ts5"><div title="5 U+0035 DIGIT FIVE
+SHIFT: % U+0025 PERCENT SIGN">5</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 324px"></div><div class="kt" style="left: 330px"></div><div class="kls" style="left: 330px"><div class="kl kl0 ts5"><div>^</div></div><div class="kl kl6 ts5"><div title="6 U+0036 DIGIT SIX
+SHIFT: ^ U+005E CIRCUMFLEX ACCENT
+SHIFT+CONTROL:  U+001E <control>">6</div></div><div class="kl icon kl2 ts5"><div>^</div></div><div class="kl icon kl8 ts5"><div title="6 U+0036 DIGIT SIX
+SHIFT: ^ U+005E CIRCUMFLEX ACCENT
+SHIFT+CONTROL:  U+001E <control>">6</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 378px"></div><div class="kt" style="left: 384px"></div><div class="kls" style="left: 384px"><div class="kl kl0 ts5"><div>&amp;</div></div><div class="kl kl6 ts5"><div title="7 U+0037 DIGIT SEVEN
+SHIFT: &amp; U+0026 AMPERSAND">7</div></div><div class="kl icon kl2 ts5"><div>&amp;</div></div><div class="kl icon kl8 ts5"><div title="7 U+0037 DIGIT SEVEN
+SHIFT: &amp; U+0026 AMPERSAND">7</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 432px"></div><div class="kt" style="left: 438px"></div><div class="kls" style="left: 438px"><div class="kl kl0 ts5"><div>*</div></div><div class="kl kl6 ts5"><div title="8 U+0038 DIGIT EIGHT
+SHIFT: * U+002A ASTERISK">8</div></div><div class="kl icon kl2 ts5"><div>*</div></div><div class="kl icon kl8 ts5"><div title="8 U+0038 DIGIT EIGHT
+SHIFT: * U+002A ASTERISK">8</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 486px"></div><div class="kt" style="left: 492px"></div><div class="kls" style="left: 492px"><div class="kl kl0 ts5"><div>(</div></div><div class="kl kl6 ts5"><div title="9 U+0039 DIGIT NINE
+SHIFT: ( U+0028 LEFT PARENTHESIS">9</div></div><div class="kl icon kl2 ts5"><div>(</div></div><div class="kl icon kl8 ts5"><div title="9 U+0039 DIGIT NINE
+SHIFT: ( U+0028 LEFT PARENTHESIS">9</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 540px"></div><div class="kt" style="left: 546px"></div><div class="kls" style="left: 546px"><div class="kl kl0 ts5"><div>)</div></div><div class="kl kl6 ts5"><div title="0 U+0030 DIGIT ZERO
+SHIFT: ) U+0029 RIGHT PARENTHESIS">0</div></div><div class="kl icon kl2 ts5"><div>)</div></div><div class="kl icon kl8 ts5"><div title="0 U+0030 DIGIT ZERO
+SHIFT: ) U+0029 RIGHT PARENTHESIS">0</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 594px"></div><div class="kt" style="left: 600px"></div><div class="kls" style="left: 600px"><div class="kl kl0 ts5"><div>_</div></div><div class="kl kl6 ts5"><div title="- U+002D HYPHEN-MINUS
+SHIFT: _ U+005F LOW LINE
+SHIFT+CONTROL:  U+001F <control>">-</div></div><div class="kl icon kl2 ts5"><div>_</div></div><div class="kl icon kl8 ts5"><div title="- U+002D HYPHEN-MINUS
+SHIFT: _ U+005F LOW LINE
+SHIFT+CONTROL:  U+001F <control>">-</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 648px"></div><div class="kt" style="left: 654px"></div><div class="kls" style="left: 654px"><div class="kl kl0 ts5"><div>+</div></div><div class="kl kl6 ts5"><div title="= U+003D EQUALS SIGN
+SHIFT: + U+002B PLUS SIGN">=</div></div><div class="kl icon kl2 ts5"><div>+</div></div><div class="kl icon kl8 ts5"><div title="= U+003D EQUALS SIGN
+SHIFT: + U+002B PLUS SIGN">=</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 702px;width:109px"></div><div class="kt" style="left:708px;width:97px"></div><div class="kls" style="left:708px"></div></div></div>
+
+
+
+
+
+
+
+</div>
+<!-- QWERTYUIOP -->
+<div class="kr3">
+<div class="key"><div class="kc"><div class="kb" style="left:   0px;width:81px;"></div><div class="kt" style="left:6px;width:69px"></div><div class="kls" style="left:6px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left:  81px"></div><div class="kt" style="left:  87px"></div><div class="kls" style="left:  87px"><div class="kl kl0 ts5"><div>Q</div></div><div class="kl kl6 ts5"><div title="q U+0071 LATIN SMALL LETTER Q
+SHIFT: Q U+0051 LATIN CAPITAL LETTER Q
+CAPITAL: Q U+0051 LATIN CAPITAL LETTER Q
+SHIFT+CAPITAL: q U+0071 LATIN SMALL LETTER Q">q</div></div><div class="kl icon kl2 ts5"><div>Q</div></div><div class="kl icon kl8 ts5"><div title="q U+0071 LATIN SMALL LETTER Q
+SHIFT: Q U+0051 LATIN CAPITAL LETTER Q
+CAPITAL: Q U+0051 LATIN CAPITAL LETTER Q
+SHIFT+CAPITAL: q U+0071 LATIN SMALL LETTER Q">q</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 135px"></div><div class="kt" style="left: 141px"></div><div class="kls" style="left: 141px"><div class="kl kl0 ts5"><div>W</div></div><div class="kl kl6 ts5"><div title="w U+0077 LATIN SMALL LETTER W
+SHIFT: W U+0057 LATIN CAPITAL LETTER W
+CAPITAL: W U+0057 LATIN CAPITAL LETTER W
+SHIFT+CAPITAL: w U+0077 LATIN SMALL LETTER W">w</div></div><div class="kl icon kl2 ts5"><div>W</div></div><div class="kl icon kl8 ts5"><div title="w U+0077 LATIN SMALL LETTER W
+SHIFT: W U+0057 LATIN CAPITAL LETTER W
+CAPITAL: W U+0057 LATIN CAPITAL LETTER W
+SHIFT+CAPITAL: w U+0077 LATIN SMALL LETTER W">w</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 189px"></div><div class="kt" style="left: 195px"></div><div class="kls" style="left: 195px"><div class="kl kl0 ts5"><div>E</div></div><div class="kl kl6 ts5"><div>e</div></div><div class="kl icon kl2 ts5"><div>E</div></div><div class="kl icon kl8 ts5"><div>e</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 243px"></div><div class="kt" style="left: 249px"></div><div class="kls" style="left: 249px"><div class="kl kl0 ts5"><div>R</div></div><div class="kl kl6 ts5"><div title="r U+0072 LATIN SMALL LETTER R
+SHIFT: R U+0052 LATIN CAPITAL LETTER R
+CAPITAL: R U+0052 LATIN CAPITAL LETTER R
+SHIFT+CAPITAL: r U+0072 LATIN SMALL LETTER R">r</div></div><div class="kl icon kl2 ts5"><div>R</div></div><div class="kl icon kl8 ts5"><div title="r U+0072 LATIN SMALL LETTER R
+SHIFT: R U+0052 LATIN CAPITAL LETTER R
+CAPITAL: R U+0052 LATIN CAPITAL LETTER R
+SHIFT+CAPITAL: r U+0072 LATIN SMALL LETTER R">r</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 297px"></div><div class="kt" style="left: 303px"></div><div class="kls" style="left: 303px"><div class="kl kl0 ts5"><div>T</div></div><div class="kl kl6 ts5"><div title="t U+0074 LATIN SMALL LETTER T
+SHIFT: T U+0054 LATIN CAPITAL LETTER T
+CAPITAL: T U+0054 LATIN CAPITAL LETTER T
+SHIFT+CAPITAL: t U+0074 LATIN SMALL LETTER T">t</div></div><div class="kl icon kl2 ts5"><div>T</div></div><div class="kl icon kl8 ts5"><div title="t U+0074 LATIN SMALL LETTER T
+SHIFT: T U+0054 LATIN CAPITAL LETTER T
+CAPITAL: T U+0054 LATIN CAPITAL LETTER T
+SHIFT+CAPITAL: t U+0074 LATIN SMALL LETTER T">t</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 351px"></div><div class="kt" style="left: 357px"></div><div class="kls" style="left: 357px"><div class="kl kl0 ts5"><div>Y</div></div><div class="kl kl6 ts5"><div title="y U+0079 LATIN SMALL LETTER Y
+SHIFT: Y U+0059 LATIN CAPITAL LETTER Y
+CAPITAL: Y U+0059 LATIN CAPITAL LETTER Y
+SHIFT+CAPITAL: y U+0079 LATIN SMALL LETTER Y">y</div></div><div class="kl icon kl2 ts5"><div>Y</div></div><div class="kl icon kl8 ts5"><div title="y U+0079 LATIN SMALL LETTER Y
+SHIFT: Y U+0059 LATIN CAPITAL LETTER Y
+CAPITAL: Y U+0059 LATIN CAPITAL LETTER Y
+SHIFT+CAPITAL: y U+0079 LATIN SMALL LETTER Y">y</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 405px"></div><div class="kt" style="left: 411px"></div><div class="kls" style="left: 411px"><div class="kl kl0 ts5"><div>U</div></div><div class="kl kl6 ts5"><div>u</div></div><div class="kl icon kl2 ts5"><div>U</div></div><div class="kl icon kl8 ts5"><div>u</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 459px"></div><div class="kt" style="left: 465px"></div><div class="kls" style="left: 465px"><div class="kl kl0 ts5"><div>I</div></div><div class="kl kl6 ts5"><div>i</div></div><div class="kl icon kl2 ts5"><div>I</div></div><div class="kl icon kl8 ts5"><div>i</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 513px"></div><div class="kt" style="left: 519px"></div><div class="kls" style="left: 519px"><div class="kl kl0 ts5"><div>O</div></div><div class="kl kl6 ts5"><div>o</div></div><div class="kl icon kl2 ts5"><div>O</div></div><div class="kl icon kl8 ts5"><div>o</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 567px"></div><div class="kt" style="left: 573px"></div><div class="kls" style="left: 573px"><div class="kl kl0 ts5"><div>P</div></div><div class="kl kl6 ts5"><div title="p U+0070 LATIN SMALL LETTER P
+SHIFT: P U+0050 LATIN CAPITAL LETTER P
+CAPITAL: P U+0050 LATIN CAPITAL LETTER P
+SHIFT+CAPITAL: p U+0070 LATIN SMALL LETTER P">p</div></div><div class="kl icon kl2 ts5"><div>P</div></div><div class="kl icon kl8 ts5"><div title="p U+0070 LATIN SMALL LETTER P
+SHIFT: P U+0050 LATIN CAPITAL LETTER P
+CAPITAL: P U+0050 LATIN CAPITAL LETTER P
+SHIFT+CAPITAL: p U+0070 LATIN SMALL LETTER P">p</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 621px"></div><div class="kt" style="left: 627px"></div><div class="kls" style="left: 627px"><div class="kl kl0 ts5"><div>{</div></div><div class="kl kl6 ts5"><div title="[ U+005B LEFT SQUARE BRACKET
+SHIFT: { U+007B LEFT CURLY BRACKET
+CONTROL:  U+001B <control>">[</div></div><div class="kl icon kl2 ts5"><div>{</div></div><div class="kl icon kl8 ts5"><div title="[ U+005B LEFT SQUARE BRACKET
+SHIFT: { U+007B LEFT CURLY BRACKET
+CONTROL:  U+001B <control>">[</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 675px"></div><div class="kt" style="left: 681px"></div><div class="kls" style="left: 681px"><div class="kl kl0 ts5"><div>}</div></div><div class="kl kl6 ts5"><div title="] U+005D RIGHT SQUARE BRACKET
+SHIFT: } U+007D RIGHT CURLY BRACKET
+CONTROL:  U+001D <control>">]</div></div><div class="kl icon kl2 ts5"><div>}</div></div><div class="kl icon kl8 ts5"><div title="] U+005D RIGHT SQUARE BRACKET
+SHIFT: } U+007D RIGHT CURLY BRACKET
+CONTROL:  U+001D <control>">]</div></div></div></div></div>
+
+<div class="key"><div class="kc"><div class="kb" style="left: 743px;width:68px;height:108px"></div>
+								 <div class="kb" style="left: 729px;top:135px;width:81px;height: 54px"></div>
+									<div class="kb" style="border-radius: 5px; left: 744px; top: 136px; width: 66px; height: 106px; background-color: #161823; border-style: none"></div>
+										<div class="kt" style="left: 749px; top:138px; width: 56px; height: 96px"></div>
+										<div class="kt" style="background-position:   0px 0px; border-style: none !important; left: 735px; top: 138px; width: 69px; height: 42px; background-size: 69px 96px;"></div>
+										<div class="kt" style="background-position: -13px 0px; border-style: none !important; left: 750px; top: 139px; width: 54px; height: 94px; background-size: 69px 96px;"></div>
+											<div class="kls" style="left: 749px; top: 138px; width: 56px; height: 96px;"></div></div>
+
+
+
+
+
+
+
+</div><!-- ASDFGHJKL -->
+<div class="kr4">
+<div class="key"><div class="kc"><div class="kb" style="left:   0px;width:95px;"></div><div class="kt" style="left:6px;width:83px;"></div><div class="kls" style="left:6px;width:83px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left:  95px"></div><div class="kt" style="left: 101px"></div><div class="kls" style="left: 101px"><div class="kl kl0 ts5"><div>A</div></div><div class="kl kl6 ts5"><div>a</div></div><div class="kl icon kl2 ts5"><div>A</div></div><div class="kl icon kl8 ts5"><div>a</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 149px"></div><div class="kt" style="left: 155px"></div><div class="kls" style="left: 155px"><div class="kl kl0 ts5"><div>S</div></div><div class="kl kl6 ts5"><div title="s U+0073 LATIN SMALL LETTER S
+SHIFT: S U+0053 LATIN CAPITAL LETTER S
+CAPITAL: S U+0053 LATIN CAPITAL LETTER S
+SHIFT+CAPITAL: s U+0073 LATIN SMALL LETTER S">s</div></div><div class="kl icon kl2 ts5"><div>S</div></div><div class="kl icon kl8 ts5"><div title="s U+0073 LATIN SMALL LETTER S
+SHIFT: S U+0053 LATIN CAPITAL LETTER S
+CAPITAL: S U+0053 LATIN CAPITAL LETTER S
+SHIFT+CAPITAL: s U+0073 LATIN SMALL LETTER S">s</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 203px"></div><div class="kt" style="left: 209px"></div><div class="kls" style="left: 209px"><div class="kl kl0 ts5"><div>D</div></div><div class="kl kl6 ts5"><div title="d U+0064 LATIN SMALL LETTER D
+SHIFT: D U+0044 LATIN CAPITAL LETTER D
+CAPITAL: D U+0044 LATIN CAPITAL LETTER D
+SHIFT+CAPITAL: d U+0064 LATIN SMALL LETTER D">d</div></div><div class="kl icon kl2 ts5"><div>D</div></div><div class="kl icon kl8 ts5"><div title="d U+0064 LATIN SMALL LETTER D
+SHIFT: D U+0044 LATIN CAPITAL LETTER D
+CAPITAL: D U+0044 LATIN CAPITAL LETTER D
+SHIFT+CAPITAL: d U+0064 LATIN SMALL LETTER D">d</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 257px"></div><div class="kt" style="left: 263px"></div><div class="kls" style="left: 263px"><div class="kl kl0 ts5"><div>F</div></div><div class="kl kl6 ts5"><div title="f U+0066 LATIN SMALL LETTER F
+SHIFT: F U+0046 LATIN CAPITAL LETTER F
+CAPITAL: F U+0046 LATIN CAPITAL LETTER F
+SHIFT+CAPITAL: f U+0066 LATIN SMALL LETTER F">f</div></div><div class="kl icon kl2 ts5"><div>F</div></div><div class="kl icon kl8 ts5"><div title="f U+0066 LATIN SMALL LETTER F
+SHIFT: F U+0046 LATIN CAPITAL LETTER F
+CAPITAL: F U+0046 LATIN CAPITAL LETTER F
+SHIFT+CAPITAL: f U+0066 LATIN SMALL LETTER F">f</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 311px"></div><div class="kt" style="left: 317px"></div><div class="kls" style="left: 317px"><div class="kl kl0 ts5"><div>G</div></div><div class="kl kl6 ts5"><div title="g U+0067 LATIN SMALL LETTER G
+SHIFT: G U+0047 LATIN CAPITAL LETTER G
+CAPITAL: G U+0047 LATIN CAPITAL LETTER G
+SHIFT+CAPITAL: g U+0067 LATIN SMALL LETTER G">g</div></div><div class="kl icon kl2 ts5"><div>G</div></div><div class="kl icon kl8 ts5"><div title="g U+0067 LATIN SMALL LETTER G
+SHIFT: G U+0047 LATIN CAPITAL LETTER G
+CAPITAL: G U+0047 LATIN CAPITAL LETTER G
+SHIFT+CAPITAL: g U+0067 LATIN SMALL LETTER G">g</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 365px"></div><div class="kt" style="left: 371px"></div><div class="kls" style="left: 371px"><div class="kl kl0 ts5"><div>H</div></div><div class="kl kl6 ts5"><div title="h U+0068 LATIN SMALL LETTER H
+SHIFT: H U+0048 LATIN CAPITAL LETTER H
+CAPITAL: H U+0048 LATIN CAPITAL LETTER H
+SHIFT+CAPITAL: h U+0068 LATIN SMALL LETTER H">h</div></div><div class="kl icon kl2 ts5"><div>H</div></div><div class="kl icon kl8 ts5"><div title="h U+0068 LATIN SMALL LETTER H
+SHIFT: H U+0048 LATIN CAPITAL LETTER H
+CAPITAL: H U+0048 LATIN CAPITAL LETTER H
+SHIFT+CAPITAL: h U+0068 LATIN SMALL LETTER H">h</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 419px"></div><div class="kt" style="left: 425px"></div><div class="kls" style="left: 425px"><div class="kl kl0 ts5"><div>J</div></div><div class="kl kl6 ts5"><div title="j U+006A LATIN SMALL LETTER J
+SHIFT: J U+004A LATIN CAPITAL LETTER J
+CAPITAL: J U+004A LATIN CAPITAL LETTER J
+SHIFT+CAPITAL: j U+006A LATIN SMALL LETTER J">j</div></div><div class="kl icon kl2 ts5"><div>J</div></div><div class="kl icon kl8 ts5"><div title="j U+006A LATIN SMALL LETTER J
+SHIFT: J U+004A LATIN CAPITAL LETTER J
+CAPITAL: J U+004A LATIN CAPITAL LETTER J
+SHIFT+CAPITAL: j U+006A LATIN SMALL LETTER J">j</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 473px"></div><div class="kt" style="left: 479px"></div><div class="kls" style="left: 479px"><div class="kl kl0 ts5"><div>K</div></div><div class="kl kl6 ts5"><div title="k U+006B LATIN SMALL LETTER K
+SHIFT: K U+004B LATIN CAPITAL LETTER K
+CAPITAL: K U+004B LATIN CAPITAL LETTER K
+SHIFT+CAPITAL: k U+006B LATIN SMALL LETTER K">k</div></div><div class="kl icon kl2 ts5"><div>K</div></div><div class="kl icon kl8 ts5"><div title="k U+006B LATIN SMALL LETTER K
+SHIFT: K U+004B LATIN CAPITAL LETTER K
+CAPITAL: K U+004B LATIN CAPITAL LETTER K
+SHIFT+CAPITAL: k U+006B LATIN SMALL LETTER K">k</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 527px"></div><div class="kt" style="left: 533px"></div><div class="kls" style="left: 533px"><div class="kl kl0 ts5"><div>L</div></div><div class="kl kl6 ts5"><div title="l U+006C LATIN SMALL LETTER L
+SHIFT: L U+004C LATIN CAPITAL LETTER L
+CAPITAL: L U+004C LATIN CAPITAL LETTER L
+SHIFT+CAPITAL: l U+006C LATIN SMALL LETTER L">l</div></div><div class="kl icon kl2 ts5"><div>L</div></div><div class="kl icon kl8 ts5"><div title="l U+006C LATIN SMALL LETTER L
+SHIFT: L U+004C LATIN CAPITAL LETTER L
+CAPITAL: L U+004C LATIN CAPITAL LETTER L
+SHIFT+CAPITAL: l U+006C LATIN SMALL LETTER L">l</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 581px"></div><div class="kt" style="left: 587px"></div><div class="kls" style="left: 587px"><div class="kl kl0 ts5"><div>:</div></div><div class="kl kl6 ts5"><div title="; U+003B SEMICOLON
+SHIFT: : U+003A COLON">;</div></div><div class="kl icon kl2 ts5"><div>:</div></div><div class="kl icon kl8 ts5"><div title="; U+003B SEMICOLON
+SHIFT: : U+003A COLON">;</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 635px"></div><div class="kt" style="left: 641px"></div><div class="kls" style="left: 641px"><div class="kl kl0 ts5"><div>@</div></div><div class="kl kl6 ts5"><div title="' U+0027 APOSTROPHE
+SHIFT: @ U+0040 COMMERCIAL AT
+SHIFT+CONTROL:  U+0000 <control>">'</div></div><div class="kl icon kl2 ts5"><div>@</div></div><div class="kl icon kl8 ts5"><div title="' U+0027 APOSTROPHE
+SHIFT: @ U+0040 COMMERCIAL AT
+SHIFT+CONTROL:  U+0000 <control>">'</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 689px"></div><div class="kt" style="left: 695px"></div><div class="kls" style="left: 695px"><div class="kl kl0 ts5"><div>~</div></div><div class="kl kl6 ts5"><div>#</div></div><div class="kl icon kl2 ts5"><div>~</div></div><div class="kl icon kl8 ts5"><div>#</div></div></div></div></div>
+
+
+
+</div>
+<!-- ZXCVBNM -->
+<div class="kr5">
+<div class="key"><div class="kc"><div class="kb" style="left:   0px;width:68px;"></div><div class="kt" style="left:6px;width:56px;"></div><div class="kls" style="left:6px;width:56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left:  68px"></div><div class="kt" style="left:  74px"></div><div class="kls" style="left:  74px"><div class="kl kl0 ts5"><div>|</div></div><div class="kl kl6 ts5"><div title="\ U+005C REVERSE SOLIDUS
+SHIFT: | U+007C VERTICAL LINE
+CONTROL:  U+001C <control>">\</div></div><div class="kl icon kl2 ts5"><div>|</div></div><div class="kl icon kl8 ts5"><div title="\ U+005C REVERSE SOLIDUS
+SHIFT: | U+007C VERTICAL LINE
+CONTROL:  U+001C <control>">\</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 122px"></div><div class="kt" style="left: 128px"></div><div class="kls" style="left: 128px"><div class="kl kl0 ts5"><div>Z</div></div><div class="kl kl6 ts5"><div title="z U+007A LATIN SMALL LETTER Z
+SHIFT: Z U+005A LATIN CAPITAL LETTER Z
+CAPITAL: Z U+005A LATIN CAPITAL LETTER Z
+SHIFT+CAPITAL: z U+007A LATIN SMALL LETTER Z">z</div></div><div class="kl icon kl2 ts5"><div>Z</div></div><div class="kl icon kl8 ts5"><div title="z U+007A LATIN SMALL LETTER Z
+SHIFT: Z U+005A LATIN CAPITAL LETTER Z
+CAPITAL: Z U+005A LATIN CAPITAL LETTER Z
+SHIFT+CAPITAL: z U+007A LATIN SMALL LETTER Z">z</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 176px"></div><div class="kt" style="left: 182px"></div><div class="kls" style="left: 182px"><div class="kl kl0 ts5"><div>X</div></div><div class="kl kl6 ts5"><div title="x U+0078 LATIN SMALL LETTER X
+SHIFT: X U+0058 LATIN CAPITAL LETTER X
+CAPITAL: X U+0058 LATIN CAPITAL LETTER X
+SHIFT+CAPITAL: x U+0078 LATIN SMALL LETTER X">x</div></div><div class="kl icon kl2 ts5"><div>X</div></div><div class="kl icon kl8 ts5"><div title="x U+0078 LATIN SMALL LETTER X
+SHIFT: X U+0058 LATIN CAPITAL LETTER X
+CAPITAL: X U+0058 LATIN CAPITAL LETTER X
+SHIFT+CAPITAL: x U+0078 LATIN SMALL LETTER X">x</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 230px"></div><div class="kt" style="left: 236px"></div><div class="kls" style="left: 236px"><div class="kl kl0 ts5"><div>C</div></div><div class="kl kl6 ts5"><div title="c U+0063 LATIN SMALL LETTER C
+SHIFT: C U+0043 LATIN CAPITAL LETTER C
+CAPITAL: C U+0043 LATIN CAPITAL LETTER C
+SHIFT+CAPITAL: c U+0063 LATIN SMALL LETTER C">c</div></div><div class="kl icon kl2 ts5"><div>C</div></div><div class="kl icon kl8 ts5"><div title="c U+0063 LATIN SMALL LETTER C
+SHIFT: C U+0043 LATIN CAPITAL LETTER C
+CAPITAL: C U+0043 LATIN CAPITAL LETTER C
+SHIFT+CAPITAL: c U+0063 LATIN SMALL LETTER C">c</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 284px"></div><div class="kt" style="left: 290px"></div><div class="kls" style="left: 290px"><div class="kl kl0 ts5"><div>V</div></div><div class="kl kl6 ts5"><div title="v U+0076 LATIN SMALL LETTER V
+SHIFT: V U+0056 LATIN CAPITAL LETTER V
+CAPITAL: V U+0056 LATIN CAPITAL LETTER V
+SHIFT+CAPITAL: v U+0076 LATIN SMALL LETTER V">v</div></div><div class="kl icon kl2 ts5"><div>V</div></div><div class="kl icon kl8 ts5"><div title="v U+0076 LATIN SMALL LETTER V
+SHIFT: V U+0056 LATIN CAPITAL LETTER V
+CAPITAL: V U+0056 LATIN CAPITAL LETTER V
+SHIFT+CAPITAL: v U+0076 LATIN SMALL LETTER V">v</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 338px"></div><div class="kt" style="left: 344px"></div><div class="kls" style="left: 344px"><div class="kl kl0 ts5"><div>B</div></div><div class="kl kl6 ts5"><div title="b U+0062 LATIN SMALL LETTER B
+SHIFT: B U+0042 LATIN CAPITAL LETTER B
+CAPITAL: B U+0042 LATIN CAPITAL LETTER B
+SHIFT+CAPITAL: b U+0062 LATIN SMALL LETTER B">b</div></div><div class="kl icon kl2 ts5"><div>B</div></div><div class="kl icon kl8 ts5"><div title="b U+0062 LATIN SMALL LETTER B
+SHIFT: B U+0042 LATIN CAPITAL LETTER B
+CAPITAL: B U+0042 LATIN CAPITAL LETTER B
+SHIFT+CAPITAL: b U+0062 LATIN SMALL LETTER B">b</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 392px"></div><div class="kt" style="left: 398px"></div><div class="kls" style="left: 398px"><div class="kl kl0 ts5"><div>N</div></div><div class="kl kl6 ts5"><div title="n U+006E LATIN SMALL LETTER N
+SHIFT: N U+004E LATIN CAPITAL LETTER N
+CAPITAL: N U+004E LATIN CAPITAL LETTER N
+SHIFT+CAPITAL: n U+006E LATIN SMALL LETTER N">n</div></div><div class="kl icon kl2 ts5"><div>N</div></div><div class="kl icon kl8 ts5"><div title="n U+006E LATIN SMALL LETTER N
+SHIFT: N U+004E LATIN CAPITAL LETTER N
+CAPITAL: N U+004E LATIN CAPITAL LETTER N
+SHIFT+CAPITAL: n U+006E LATIN SMALL LETTER N">n</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 446px"></div><div class="kt" style="left: 452px"></div><div class="kls" style="left: 452px"><div class="kl kl0 ts5"><div>M</div></div><div class="kl kl6 ts5"><div title="m U+006D LATIN SMALL LETTER M
+SHIFT: M U+004D LATIN CAPITAL LETTER M
+CAPITAL: M U+004D LATIN CAPITAL LETTER M
+SHIFT+CAPITAL: m U+006D LATIN SMALL LETTER M">m</div></div><div class="kl icon kl2 ts5"><div>M</div></div><div class="kl icon kl8 ts5"><div title="m U+006D LATIN SMALL LETTER M
+SHIFT: M U+004D LATIN CAPITAL LETTER M
+CAPITAL: M U+004D LATIN CAPITAL LETTER M
+SHIFT+CAPITAL: m U+006D LATIN SMALL LETTER M">m</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 500px"></div><div class="kt" style="left: 506px"></div><div class="kls" style="left: 506px"><div class="kl kl0 ts5"><div>&lt;</div></div><div class="kl kl6 ts5"><div title=", U+002C COMMA
+SHIFT: < U+003C LESS-THAN SIGN">,</div></div><div class="kl icon kl2 ts5"><div>&lt;</div></div><div class="kl icon kl8 ts5"><div title=", U+002C COMMA
+SHIFT: < U+003C LESS-THAN SIGN">,</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 554px"></div><div class="kt" style="left: 560px"></div><div class="kls" style="left: 560px"><div class="kl kl0 ts5"><div>&gt;</div></div><div class="kl kl6 ts5"><div title=". U+002E FULL STOP
+SHIFT: > U+003E GREATER-THAN SIGN">.</div></div><div class="kl icon kl2 ts5"><div>&gt;</div></div><div class="kl icon kl8 ts5"><div title=". U+002E FULL STOP
+SHIFT: > U+003E GREATER-THAN SIGN">.</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 608px"></div><div class="kt" style="left: 614px"></div><div class="kls" style="left: 614px"><div class="kl kl0 ts5"><div>?</div></div><div class="kl kl6 ts5"><div title="/ U+002F SOLIDUS
+SHIFT: ? U+003F QUESTION MARK">/</div></div><div class="kl icon kl2 ts5"><div>?</div></div><div class="kl icon kl8 ts5"><div title="/ U+002F SOLIDUS
+SHIFT: ? U+003F QUESTION MARK">/</div></div></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 662px;width:149px;"></div><div class="kt" style="left: 668px;width:137px"></div><div class="kls" style="left: 668px;width:137px"></div></div></div>
+
+
+
+
+
+</div>
+<!-- Ctrl Alt Space -->
+<div class="kr6">
+<div class="key"><div class="kc"><div class="kb" style="left:   0px;width: 68px;"></div><div class="kt" style="left:   6px;width: 56px"></div><div class="kls" style="left:   6px;width: 56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left:  68px;width: 68px;"></div><div class="kt" style="left:  74px;width: 56px"></div><div class="kls" style="left:  74px;width: 56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 135px;width: 68px;"></div><div class="kt" style="left: 141px;width: 56px"></div><div class="kls" style="left: 141px;width: 56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 203px;width:338px;"></div><div class="kt" style="left: 209px;width:326px"></div><div class="kls" style="left: 209px;width:326px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 540px;width: 68px;"></div><div class="kt" style="left: 546px;width: 56px"></div><div class="kls" style="left: 546px;width: 56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 608px;width: 68px;"></div><div class="kt" style="left: 614px;width: 56px"></div><div class="kls" style="left: 614px;width: 56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 675px;width: 68px;"></div><div class="kt" style="left: 681px;width: 56px"></div><div class="kls" style="left: 681px;width: 56px"></div></div></div>
+<div class="key"><div class="kc"><div class="kb" style="left: 743px;width: 68px;"></div><div class="kt" style="left: 749px;width: 56px"></div><div class="kls" style="left: 749px;width: 56px"></div></div></div>
+
+
+
+
+
+</div>
+</div>
+
+</div>
+</main>
+</body>
+</html>
A webhome/static/icon-table.html 
@@ -0,0 +1,36 @@ 
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/normalize.css" type="text/css">
+    <link rel="stylesheet" href="/static/style_main.css" type="text/css">
+    <link rel="stylesheet" id="csstheme" href="/static/style_dark.css" type="text/css">
+    <link rel="icon" type="image/ico" href="/static/favicon.ico">
+</head>
+<body>
+<main>
+
+<table>
+    <tr><td>&#32;</td><td>&#33;</td><td>&#34;</td><td>&#35;</td><td>&#36;</td><td>&#37;</td><td>&#38;</td><td>&#39;</td><td>&#40;</td><td>&#41;</td><td>&#42;</td><td>&#43;</td><td>&#44;</td><td>&#45;</td><td>&#46;</td><td>&#47;</td><td>&#48;</td><td>&#49;</td><td>&#50;</td></tr>
+<tr class="icon"><td>&#32;</td><td>&#33;</td><td>&#34;</td><td>&#35;</td><td>&#36;</td><td>&#37;</td><td>&#38;</td><td>&#39;</td><td>&#40;</td><td>&#41;</td><td>&#42;</td><td>&#43;</td><td>&#44;</td><td>&#45;</td><td>&#46;</td><td>&#47;</td><td>&#48;</td><td>&#49;</td><td>&#50;</td></tr>
+<tr class="padtr"><td><td><br></td></tr>
+<tr><td>&#51;</td><td>&#52;</td><td>&#53;</td><td>&#54;</td><td>&#55;</td><td>&#56;</td><td>&#57;</td><td>&#58;</td><td>&#59;</td><td>&#60;</td><td>&#61;</td><td>&#62;</td><td>&#63;</td><td>&#64;</td><td>&#65;</td><td>&#66;</td><td>&#67;</td><td>&#68;</td><td>&#69;</td></tr>
+<tr class="icon"><td>&#51;</td><td>&#52;</td><td>&#53;</td><td>&#54;</td><td>&#55;</td><td>&#56;</td><td>&#57;</td><td>&#58;</td><td>&#59;</td><td>&#60;</td><td>&#61;</td><td>&#62;</td><td>&#63;</td><td>&#64;</td><td>&#65;</td><td>&#66;</td><td>&#67;</td><td>&#68;</td><td>&#69;</td></tr>
+<tr class="padtr"><td><td><br></td></tr>
+<tr><td>&#70;</td><td>&#71;</td><td>&#72;</td><td>&#73;</td><td>&#74;</td><td>&#75;</td><td>&#76;</td><td>&#77;</td><td>&#78;</td><td>&#79;</td><td>&#80;</td><td>&#81;</td><td>&#82;</td><td>&#83;</td><td>&#84;</td><td>&#85;</td><td>&#86;</td><td>&#87;</td><td>&#88;</td></tr>
+<tr class="icon"><td>&#70;</td><td>&#71;</td><td>&#72;</td><td>&#73;</td><td>&#74;</td><td>&#75;</td><td>&#76;</td><td>&#77;</td><td>&#78;</td><td>&#79;</td><td>&#80;</td><td>&#81;</td><td>&#82;</td><td>&#83;</td><td>&#84;</td><td>&#85;</td><td>&#86;</td><td>&#87;</td><td>&#88;</td></tr>
+<tr class="padtr"><td><td><br></td></tr>
+<tr><td>&#89;</td><td>&#90;</td><td>&#91;</td><td>&#92;</td><td>&#93;</td><td>&#94;</td><td>&#95;</td><td>&#96;</td><td>&#97;</td><td>&#98;</td><td>&#99;</td><td>&#100;</td><td>&#101;</td><td>&#102;</td><td>&#103;</td><td>&#104;</td><td>&#105;</td><td>&#106;</td><td>&#107;</td></tr>
+<tr class="icon"><td>&#89;</td><td>&#90;</td><td>&#91;</td><td>&#92;</td><td>&#93;</td><td>&#94;</td><td>&#95;</td><td>&#96;</td><td>&#97;</td><td>&#98;</td><td>&#99;</td><td>&#100;</td><td>&#101;</td><td>&#102;</td><td>&#103;</td><td>&#104;</td><td>&#105;</td><td>&#106;</td><td>&#107;</td></tr>
+<tr class="padtr"><td><td><br></td></tr>
+<tr><td>&#108;</td><td>&#109;</td><td>&#110;</td><td>&#111;</td><td>&#112;</td><td>&#113;</td><td>&#114;</td><td>&#115;</td><td>&#116;</td><td>&#117;</td><td>&#118;</td><td>&#119;</td><td>&#120;</td><td>&#121;</td><td>&#122;</td><td>&#123;</td><td>&#124;</td><td>&#125;</td><td>&#126;</td></tr>
+<tr class="icon"><td>&#108;</td><td>&#109;</td><td>&#110;</td><td>&#111;</td><td>&#112;</td><td>&#113;</td><td>&#114;</td><td>&#115;</td><td>&#116;</td><td>&#117;</td><td>&#118;</td><td>&#119;</td><td>&#120;</td><td>&#121;</td><td>&#122;</td><td>&#123;</td><td>&#124;</td><td>&#125;</td><td>&#126;</td></tr>
+<tr class="padtr"><td><td><br></td></tr>
+<tr><td></td></tr>
+<tr class="icon"><td></td></tr>
+<tr class="padtr"><td><td><br></td></tr>
+</table>
+</main>
+
+
+</body></html>
M webhome/static/style_main.css → webhome/static/style_main.css 
@@ -87,7 +87,7 @@ transform: translateY(0.1em);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
-    background-image: url("/static/favicon.png");
+    background-image: url("/static/favicon.webp");
     padding: 0;
     margin: 0 0.25ch 0 0;
 }

@@ -122,14 +122,16 @@ transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
 }
 
 @font-face {
-    font-family: "iconfont";
-    src: url("/static/icons.ttf") format("truetype");
+    font-family: "sophuwuicons";
+    src: url("/static/icons.woff2") format("woff2"),
+    url("/static/icons.ttf") format("truetype")
+
 }
 
 .icon {
-    font-family: "iconfont";
+    font-family: "sophuwuicons";
     font-size: inherit;
-    font-weight: normal;
+    font-weight: normal!important;
     font-style: normal;
     height: 1em;
 }
M webhome/templates/blogs.html → webhome/templates/blogs.html 
@@ -2,16 +2,18 @@ {{ define "blogs" }}
 <html lang="en">
 {{ template "head" . }}
 <body>
-{{ template "header" . }}
+{{ template "nav" . }}
 <main>
     <h1>Blogs</h1>
+    {{ if .Desc }}
     <p>
-        {{ len .Blogs }} blogs found.
+        {{ .Desc }}
     </p>
+    {{ end }}
     <hr>
     {{ range .Blogs }}
     <section>
-        <a href="/blog/{{ .Name }}" class="index-name">{{ .Name }}</a>
+        <a href="/blog/{{ .ID }}" class="index-name">{{ .Name }}</a>
         <span style="margin: 0 10px;">{{ .Date }}</span>
         <br>
         <span style="text-align: justify; width: 100% !important;" class="desc">{{ .Desc }}</span>
A webhome/templates/err.html 
@@ -0,0 +1,18 @@ 
+{{ define "err" }}
+<html lang="en">
+{{ template "head" . }}
+<body>
+{{ template "nav" . }}
+<main>
+    <h1>An Error Occurred</h1>
+    <h4>Code: {{ .Code }}</h4>
+    <p>
+        {{ .Text }}
+    </p>
+    <p>
+        If you believe this is an error, please contact <a href="mailto:{{ .Email }}">{{ .Email }}</a>.
+    </p>
+</main>
+</body>
+</html>
+{{ end }}
M webhome/templates/head.html → webhome/templates/head.html 
@@ -9,11 +9,20 @@ <link rel="icon" type="image/ico" href="/static/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/static/scripts.js"></script>
     <style id="tmpcss"></style>
+    {{ if .Title }}
     <title>{{ .Title }}</title>
     <meta content="{{ .Title }}" property="og:title" name="twitter:title">
+    {{ end }}
+    {{ if .Description }}
     <meta content="{{ .Description }}" property="og:description" name="twitter:description">
+    {{ end }}
     <meta content="{{ .Url }}" property="og:url" name="url">
+    {{ if .Image }}
+    <meta content="{{ .Image }}" property="og:image" name="twitter:image">
+    {{ end }}
+    {{ if .Name }}
     <meta name="author" content="{{ .Name }}">
+    {{ end }}
     <meta name="robots" content="index, follow">
 </head>
 {{ end }}
M webhome/templates/header.html → webhome/templates/nav.html 
@@ -1,13 +1,13 @@ 
-{{ define "header" }}
+{{ define "nav" }}
 <header>
     <div>
         <h1>Sophie Kisiel</h1>
         <nav>
-            <a href="/" ><button ><b class="icon">u</b> About</button></a>
+            <a href="/" ><button ><b class="icon">h</b> Home</button></a>
             <a href="/blog/"><button ><b class="icon">b</b> Blog</button></a>
             <a href="/animations/"><button ><b class="icon">a</b> Art</button></a>
             <a href="//sophuwu.site/"><button ><b class="icon">g</b> Git</button></a>
-            <button onclick="toggle_theme()"><b class="icon">s m</b></button>
+            <button onclick="toggle_theme()"><b class="icon">s/m</b></button>
         </nav>
     </div>
     <hr >
M webhome/templates/index.html → webhome/templates/index.html 
@@ -2,19 +2,9 @@ {{ define "index" }}
 <html lang="en">
 {{ template "head" . }}
 <body>
-{{ template "header" . }}
+{{ template "nav" . }}
 <main>
-
-    <h1>
-        Sophie Kisiel
-    </h1>
-
-    <p>
-        Welcome to my website! I'm a software engineer and I love to code.
-    </p>
-
-
-
+    {{- .HTML -}}
 </main>
 </body>
 </html>