done

app/_component/_icon/willYouBeMyValentineTingIcon/willYouBeMyValentineTingIcon.ts

@@ -0,0 +1,15 @@
+import Icon from "../icon";
+import declareComponent from "../../../lib/declareComponent";
+import { BodyTypes } from "./pugBody.gen"; import "./pugBody.gen"
+
+export default class WillYouBeMyValentineTingIcon extends Icon {
+  public body: BodyTypes
+  pug() {
+    return require("./willYouBeMyValentineTingIcon.pug").default
+  }
+  stl() {
+    return super.stl() + require("./willYouBeMyValentineTingIcon.css").toString()
+  }
+}
+
+declareComponent("c-will-you-be-my-valentine-ting-icon", WillYouBeMyValentineTingIcon)

app/_component/site/site.css

@@ -4,6 +4,10 @@ component-body {
   right: 0;
   top: 0;
   bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 :host {
@@ -14,38 +18,50 @@ component-body {
   bottom: 0;
 }
 
-c-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 55px;
-  z-index: 101;
+
+
+c-will-you-be-my-valentine-ting-icon {
+  stroke-width: 4px;
+  width: min(820px, 100%);
+  padding: 0 30px;
+  box-sizing: border-box;
+  height: 100px;
 }
 
+c-block-button {
+  margin: 10px;
+}
 
-c-page-manager {
-  opacity: 1;
+c-block-button[name="yes"] {
+  --background-color: rgb(47, 208, 47);
 }
 
-c-lower-nav {
-  height: 75px;
-  display: block;
-  position: absolute;
-  bottom: 0;
-  z-index: 101;
-  left: 10px;
-  bottom: 10px;
-  right: 10px;
-  position: absolute;
+
+c-block-button[name="no"] {
+  --background-color: rgb(228, 65, 65);
 }
 
-cookie-notice-container {
-  bottom: 16px;
-  right: 0;
-  left: 0;
-  margin: 0 auto;
-  z-index: 420;
-  display: block;
+button-wrapper {
+  display: flex;
+
+}
+
+img-wrapper {
+  display: flex;
+  justify-content: center;
   position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  background-color: white;
+  z-index: 10;
+  display: none;
 }
+
+img {
+  height: 90%;
+  max-width: 100%;
+  border-radius: 20px;
+}

app/_component/site/site.pug

@@ -0,0 +1,8 @@
+c-will-you-be-my-valentine-ting-icon(name="heading")
+
+button-wrapper
+  c-block-button(name="yes") Yes <3
+  c-block-button(name="no") No </3
+
+img-wrapper(name="imgWrap")
+  img(src="/res/img/yay-kitty.gif")

app/_component/site/site.ts

@@ -9,154 +9,29 @@ import { ElementList } from "extended-dom"
 import HighlightAbleIcon from "../_themeAble/_icon/_highlightAbleIcon/highlightAbleIcon"
 import { Data, DataSubscription } from "josm"
 import { linkRecord } from "../_themeAble/link/link"
-
-
-const topLimit = 0
-const scrollTrendActivationCount = 20
-
-// intentionally never resolve those
-linkRecord.record()
+import { BodyTypes } from "./pugBody.gen"; import "./pugBody.gen"
 
 export default class Site extends Component {
+  protected body: BodyTypes
 
   constructor() {
     super()
-
-
 
-
-
-
-
-
-    let lowerNav = new LowerNav()
-    let currentlyShowingLowerNav: boolean
-
-
-    let header = new Header(async (hide, init, func) => {
-      if (hide) {
-
-        currentlyShowingLowerNav = false
-
-        await lowerNav.disable(init, func)
-
-      }
-      else {
-        currentlyShowingLowerNav = true
-
-        lowerNav.updatePage(currentSectons, currentDomainLevel)
-        await lowerNav.enable(init, func)
-        if (currentSection !== undefined) lowerNav.updateSelectedLink(currentSection)
-
-      }
-
+    this.body.yes.click(() => {
+      this.body.imgWrap.css("display", "flex")
+      window.history.pushState({}, "", "/")
+      this.body.yes.style.fontSize = ""
+      window.addEventListener("popstate", () => {
+        this.body.imgWrap.css("display", "none")
+      }, {once: true})
     })
 
-    let navs = new ElementList<Element>(header, lowerNav)
-
-
-    let lastScrollProg = 0
-
-    let currentDomainLevel = 0
-    let currentSectons: {[link: string]: HighlightAbleIcon}[]
-    let currentSection: string
-
-
-    let pageManager = new PageManager((page, sections, domainLevel) => {
-      currentDomainLevel = domainLevel
-      currentSectons = sections
-
-      const sectionNames = Object.keys(sections)
-
-
-      let lastData: any
-      let removeIndices = []
-      sectionNames.ea((s, i) => {
-        let data = lang.links[s]
-
-        while (data === undefined) {
-          if (s === "") {
-            data = lastData
-            break
-          }
-          s = s.slice(0, s.lastIndexOf(dirString))
-          data = lang.links[s]
-        }
-
-        if (data === lastData) removeIndices.add(i)
-        else lastData = data
+    this.body.no.click(() => {
+      this.body.yes.css({
+        fontSize: this.body.yes.css("fontSize") * 1.10 + 5
       })
-      for (const i of removeIndices) {
-        delete sections[sectionNames[i]]
-      }
-      sectionNames.rmI(...removeIndices)
-
-
-      if (currentlyShowingLowerNav) lowerNav.updatePage(sections, domainLevel)
-      header.updatePage(sectionNames, domainLevel)
-    }, (section) => {
-      currentSection = section
-      if (currentlyShowingLowerNav) lowerNav.updateSelectedLink(section)
-      header.updateSelectedLink(section)
-    }, (prog) => {
-      if (lastScrollProg > topLimit) {
-        if (prog <= topLimit) {
-          header.onTop()
-        }
-      }
-      else if (prog > topLimit) {
-        header.notTop()
-      }
-
-      lastScrollProg = prog
-    },);
-
-
-
-    this.apd(pageManager)
-    pageManager.activate()
-    pageManager.minimalContentPaint().then(() => {
-      // @ts-ignore
-      const themeSubHeader = new DataSubscription(new Data(undefined), (theme) => {
-        header.theme.set(theme as any)
-      }, true, false)
-
-      // @ts-ignore
-      const themeSubLowerNav = new DataSubscription(new Data(undefined), (theme) => {
-        lowerNav.theme.set(theme as any)
-      }, true, false)
-
-
-      const accentThemeSub = new DataSubscription(new Data(undefined), (theme) => {
-
-        lowerNav.accentTheme.set(theme as any)
-      }, true, false)
-      pageManager.addAccentThemeIntersectionListener(lowerNav, accentThemeSub.data.bind(accentThemeSub))    
-      pageManager.addThemeIntersectionListener(header, themeSubHeader.data.bind(themeSubHeader))    
-      // pageManager.addThemeIntersectionListener(lowerNav, themeSubLowerNav.data.bind(themeSubLowerNav))
-
-      pageManager.fullContentPaint().then(() => {
-        pageManager.completePaint().then(() => {
-
-        })
-      })
-
     })
 
-
-
-
-
-
-
-
-    this.apd(header, lowerNav)
-
-
-
-
-
-
 
   }