diff --git a/README.md b/README.md index 213636a..127bc94 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,17 @@ # 0life-web - [ ] nav-flag aby se menil podle toho na cem jsem +- [ ] odemykat secret navigation (vlevo dole) pomoci hledani +- [ ] upravit terminal texty + funkci +- [ ] Docs hover efekt +- [ ] Interview + Login + + +## 0stars +- [ ] zabarvit secret nav +- [ ] efekt meneni cisel stejny jako prejeti kurzorem +- [ ] system upgradu +- [ ] system pasivniho generovani +- [ ] ukladani do cookies +- [ ] odemykani upgradu +- [ ] star aby se ukazoval jinde + diff --git a/css/card.css b/css/card.css deleted file mode 100644 index 4cfc255..0000000 --- a/css/card.css +++ /dev/null @@ -1,33 +0,0 @@ -/* -.card { - width: 100%; - height: 100%; - display: flex; - overflow: hidden; - /* position: relative; *//* - z-index: 1; - background-image: url(../img/planeta.jpg); - left: 0px; - top: 0px; - background-size: 100%; - background-position: 0% 0%; - opacity: 0.6; - position: absolute; - /* animation: pan-image 15s linear infinite; *//* -} -*/ -/* -.card > .card-content { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; - gap: 4rem; - position: relative; - z-index: 10; - margin: 0rem; - padding-bottom: 6rem; - border-radius: 0.6rem; - flex-grow: 1; -} - diff --git a/css/doc.css b/css/doc.css deleted file mode 100644 index 53d90bc..0000000 --- a/css/doc.css +++ /dev/null @@ -1,15 +0,0 @@ -.nav > #doc { - background-color: rgb(var(--primary-rgb)); - border-color: rgb(var(--secondary-rgb)); - flex-grow: 4; - width: 90%; - border-right-width: 0px; - font-size: 140%; - } - - -.nav > #doc:hover { - flex-grow: 5; - width: 100%; - } - \ No newline at end of file diff --git a/css/interview.css b/css/interview.css deleted file mode 100644 index 8698bfc..0000000 --- a/css/interview.css +++ /dev/null @@ -1,14 +0,0 @@ -.nav > #interview { - background-color: rgb(var(--primary-rgb)); - border-color: rgb(var(--secondary-rgb)); - flex-grow: 4; - width: 90%; - border-right-width: 0px; - font-size: 140%; -} - -.nav > #interview:hover { - flex-grow: 5; - width: 100%; - } - \ No newline at end of file diff --git a/css/login.css b/css/login.css deleted file mode 100644 index 5c88c32..0000000 --- a/css/login.css +++ /dev/null @@ -1,14 +0,0 @@ -.nav > #login { - background-color: rgb(var(--primary-rgb)); - border-color: rgb(var(--secondary-rgb)); - flex-grow: 4; - width: 90%; - border-right-width: 0px; - font-size: 140%; -} - -.nav > #login:hover { - flex-grow: 5; - width: 100%; - } - \ No newline at end of file diff --git a/css/reborn.css b/css/reborn.css deleted file mode 100644 index 8a073bd..0000000 --- a/css/reborn.css +++ /dev/null @@ -1,14 +0,0 @@ -.nav > #reborn { - background-color: rgb(var(--primary-rgb)); - border-color: rgb(var(--secondary-rgb)); - flex-grow: 4; - width: 90%; - border-right-width: 0px; - font-size: 140%; -} - -.nav > #reborn:hover { - flex-grow: 5; - width: 100%; - } - \ No newline at end of file diff --git a/css/screen.css b/css/screen.css deleted file mode 100644 index 7062daf..0000000 --- a/css/screen.css +++ /dev/null @@ -1,310 +0,0 @@ -/* -.screen { - width: 100vw; - height: 100vh; - display: flex; - border: 3px solid rgb(var(--primary-rgb) / 80%); - /*aspect-ratio: 10 / 16;*//* - border-radius: 1rem; - background-color: rgb(var(--primary-rgb) / 15%); - overflow: hidden; - position: relative; - z-index: 10; -} -*/9/* -.screen:after, -.screen:before { - content: ""; - height: 5px; - position: absolute; - z-index: 4; - left: 50%; - translate: -50% 0%; - background-color: white; -} - -.screen:before { - width: 15%; - top: 0rem; - border-bottom-left-radius: 1rem; - border-bottom-right-radius: 1rem; -} - -.screen:after { - width: 25%; - bottom: 0rem; - border-top-left-radius: 1rem; - border-top-right-radius: 1rem; -}*/ - -@keyframes pan-overlay { - from { - background-position: 0% 0%; - } - - to { - background-position: 0% -100%; - } -} -/* -.screen-overlay { - background: linear-gradient( - rgb(var(--primary-rgb) / 0.15), - rgb(var(--primary-rgb) / 0.15) 3px, - transparent 3px, - transparent 9px - ); - background-size: 100% 9px; - height: 100%; - width: 100%; - animation: pan-overlay 22s infinite linear; - position: absolute; - z-index: 2; - left: 0px; - top: 0px; -}*/ - -@keyframes pan-image { - 0% { - background-position: 36% 42%; - background-size: 200%; - } - - 20% { - background-position: 30% 35%; - background-size: 200%; - } - - 20.0001% { /* -- View 2 -- */ - background-position: 60% 85%; - background-size: 500%; - } - - 40% { - background-position: 49% 81%; - background-size: 500%; - } - - 40.0001% { /* -- View 3 -- */ - background-position: 80% 42%; - background-size: 300%; - } - - 60% { - background-position: 84% 33%; - background-size: 300%; - } - - 60.0001% { /* -- View 4 -- */ - background-position: 0% 0%; - background-size: 300%; - } - - 80% { - background-position: 15% 4%; - background-size: 300%; - } - - 80.0001% { /* -- View 5 -- */ - background-position: 80% 10%; - background-size: 300%; - } - - 100% { - background-position: 72% 14%; - background-size: 300%; - } -} -/* -.screen > .screen-image { - background-image: url("https://images.unsplash.com/photo-1515266591878-f93e32bc5937?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80"); - height: 100%; - width: 100%; - position: absolute; - z-index: 1; - left: 0px; - top: 0px; - background-size: 300%; - background-position: 0% 0%; - filter: sepia(100%) hue-rotate(160deg); - opacity: 0.6; - animation: pan-image 15s linear infinite; -} -*//* -.screen > .screen-content { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; - flex-grow: 1; - gap: 4rem; - position: relative; - z-index: 3; - margin: 1rem; - padding-bottom: 6rem; - border: 1px solid rgb(var(--primary-rgb) / 50%); - border-radius: 0.6rem; -}*/ - -.screen > .screen-content > .screen-icon { - color: white; - font-size: 4rem; - text-shadow: 0px 0px 0.5rem white; -} - -.screen > .screen-content > .screen-user{ - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - position: relative; -} - -.screen > .screen-content > .screen-user:before, -.screen > .screen-content > .screen-user:after { - content: ""; - position: absolute; - top: 0px; - background-color: rgb(var(--primary-rgb)); - border-radius: 1rem; - box-shadow: 0px 0px 8px 3px rgb(var(--primary-rgb) / 60%); -} - -.screen > .screen-content > .screen-user:before { - height: 2px; - width: 50px; - translate: -20px -1rem; - opacity: 0.75; -} - -.screen > .screen-content > .screen-user:after { - height: 3px; - width: 30px; - translate: 26px calc(-1rem - 0.5px); -} - -.screen > .screen-content > .screen-user > :is(.name, .link) { - font-family: "Source Code Pro", monospace; - color: white; - text-align: center; - text-transform: uppercase; -} - -.screen > .screen-content > .screen-user > .name { - position: relative; - font-size: 4.25rem; - font-weight: 400; -} - -.screen > .screen-content > .screen-user > .name:before, -.screen > .screen-content > .screen-user > .name:after { - content: ""; - height: 4px; - width: 4px; - position: absolute; - border: 2px solid white; - border-radius: 2px; -} - -.screen > .screen-content > .screen-user > .name:before { - top: 45%; - right: -1.5rem; -} - -.screen > .screen-content > .screen-user > .name:after { - top: 45%; - left: -1.5rem; -} - -.screen > .screen-content > .screen-user > .link { - opacity: 0.8; - font-size: 1.5rem; - text-shadow: 0px 0px 0.5rem white; - font-weight: 400; - letter-spacing: 0.3rem; - text-decoration: none; -} - -.screen > .screen-content > .screen-user > .link:is(:hover, :focus) { - text-decoration: underline; -} - -@media(max-width: 700px) { - .screen { - scale: 0.6; - margin-bottom: 0rem; - } -} - -/* -- Blob effect -- - -@keyframes rotate { - from { - rotate: 0deg; - } - - 50% { - scale: 1 1.5; - } - - to { - rotate: 360deg; - } -} - -*//* -- Links -- - -#links { - display: flex; - flex-direction: column; - gap: 0.5rem; - position: absolute; - top: 0px; - left: 0px; - z-index: 10; - padding: 1rem; -} - -.meta-link { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.meta-link > :is(span, a) { - font-family: "Rubik", sans-serif; - font-size: 0.9rem; - color: white; -} - -.meta-link > .label { - width: 160px; - text-align: right; -} - -.meta-link > a { - text-decoration: none; - outline: none; -} - -.meta-link > a.source { - color: rgb(94, 106, 210); -} - -.meta-link > a:is(:hover, :focus) > i { - color: white; -} - -.meta-link > a.youtube { - color: rgb(239, 83, 80); -} - -.meta-link > a.youtube > i { - padding-top: 0.2rem; -} - -.meta-link > a > i { - height: 1rem; - line-height: 1rem; -} - diff --git a/css/star.css b/css/star.css new file mode 100644 index 0000000..e6d7bad --- /dev/null +++ b/css/star.css @@ -0,0 +1,72 @@ +/* NAV STAR */ + +.nav-star { + position: fixed; + left: auto; + right: 0px; + height: 100%; + width: 10%; + z-index: 7; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-end; +} + +.nav-star > .nav-gap { + flex-grow: 1; + background-color: none; +} + +.nav-star > .nav-price { + background-color: rgb(var(--detail-rgb)); + border-color: rgb(var(--detail-rgb)); + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + border-width: 5px; + border-style:solid; + + flex-grow: 2; + display: flex; + justify-content: center; + align-items: center; + + color: black; + text-decoration: none; + width: 70%; + font-family: "Source Code Pro", monospace; + font-size: fill; + + transition: + border-color 0.3s, + border-width 0.3s, + border-right-width 0.3s, + flex-grow 0.3s, + font-size 0.3s, + width 0.3s; +} + +.nav-star > .nav-price:hover { + border-color: rgb(var(--secondary-rgb)); + border-width: 10px; + border-right-width: 0px; + flex-grow: 5; + font-size: 140%; + width: 100%; +} + +/* Div to draw star */ + +.star-field { + position: absolute; + width: 100%; + height: 100%; +} + +.star-field > #stars { + position: relative; + z-index: 9; + + width: 200px; + height: 200px; +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 78a5258..0000000 --- a/css/style.css +++ /dev/null @@ -1,131 +0,0 @@ -body { - margin: 0; - padding: 15px 20px; - min-height: 99%; - width: 100%; - min-width: 550px; - color: #519975; - background: #211D1B; - font-family: cursor, monospace; - overflow-x: hidden; - } - ::selection { - color: #211830; - background-color: #519975; - } - ::-moz-selection { - color: #211830; - background-color: #519975; - } - textarea { - left: -1000px; - position: absolute; - } - b { - font-weight: bold; - text-decoration: underline; - } - /* Cursor Start */ - .cursor { - font-size: 12px; - color: #73ABAD; - background-color: #73ABAD; - position: relative; - opacity: 1; - height: 1.5em; - width: 10px; - max-width: 10px; - transform: translateY(4px); - overflow: hidden; - text-indent: -5px; - display: inline-block; - text-decoration: blink; - animation: blinker 1s linear infinite; - } - @keyframes blinker { - 50% { - opacity: 0; - } - } - #command { - cursor: text; - height: 50px; - color: #73ABAD; - } - #liner { - line-height: 1.3em; - margin-top: -2px; - animation: show 0.5s ease forwards; - animation-delay: 1.2s; - opacity: 0; - } - #liner::before { - color: #519975; - content: "visitor@fkcodes.com:~$"; - } - #liner.password::before { - content: "Password:"; - } - @keyframes show { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - /* Cursor End */ - p { - display: block; - line-height: 1.3em; - margin: 0; - overflow: hidden; - white-space: nowrap; - margin: 0; - letter-spacing: 0.05em; - animation: typing 0.5s steps(30, end); - } - .no-animation { - animation: typing 0 steps(30, end); - } - .margin { - margin-left: 20px; - } - @keyframes typing { - from { - width: 0; - } - to { - width: 100%; - } - } - .index { - color: #DCDCCC; - } - .color2 { - color: #B89076; - } - .command { - color: #73ABAD; - text-shadow: 0 0 5px #73ABAD; - } - .error { - color: #B89076; - } - .white { - color: #fff; - } - .inherit, - a { - color: #9C8394; - } - a { - text-decoration: inherit; - } - a:hover { - background: #73ABAD; - color: #211830; - } - a:focus { - outline: 0; - } \ No newline at end of file diff --git a/css/terminal.css b/css/terminal.css deleted file mode 100644 index eb8755e..0000000 --- a/css/terminal.css +++ /dev/null @@ -1,14 +0,0 @@ -.nav > #terminal { - background-color: rgb(var(--primary-rgb)); - border-color: rgb(var(--secondary-rgb)); - flex-grow: 4; - width: 90%; - border-right-width: 0px; - font-size: 140%; -} - -.nav > #terminal:hover { - flex-grow: 5; - width: 100%; - } - \ No newline at end of file diff --git a/img/moon.png b/img/moon.png new file mode 100644 index 0000000..e206899 Binary files /dev/null and b/img/moon.png differ diff --git a/index.html b/index.html index 69a2e5e..b2b3685 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@
- 1 + 1 2 3 diff --git a/js/magic.js b/js/magic.js index d4933f8..93c7dfd 100644 --- a/js/magic.js +++ b/js/magic.js @@ -29,4 +29,4 @@ screen.onmouseenter = event => { iteration += 1 / 3; }, 30); -} \ No newline at end of file +} diff --git a/js/star.js b/js/star.js new file mode 100644 index 0000000..411b777 --- /dev/null +++ b/js/star.js @@ -0,0 +1,18 @@ +let star = 0; +let starGained = 0; + +function starClicked() { + star ++; + starGained ++; + + changeName(); +}; + +function changeName() { + let vidis = document.getElementById('name').innerText; + let num = vidis.split('-'); + let show = star + '-Stars'; + + document.getElementById('name').innerText = show; + document.getElementById('name').dataset.value = show; +}; diff --git a/star.html b/star.html new file mode 100644 index 0000000..0511a80 --- /dev/null +++ b/star.html @@ -0,0 +1,85 @@ + + + + + + Stars Reborn + + + + + + + + + + + + + +
+ + nav-0 + + nav-1 + + nav-2 + + nav-3 + + nav-4 + + nav-5 + + nav-6 + + nav-7 + + nav-8 + + nav-9 + + nav-10 + + nav-11 + + nav-12 +
+ + + + +
+ 1 + 2 + 3 +
+ + + + +
+ +
+ + + + +
+
+
+
0-Life
+ REBORN +
+ + + + + + + + + + +
+