From 12ca6c1259c783cd0b64e02dc47fcc5fc6ff9b27 Mon Sep 17 00:00:00 2001 From: asandikci Date: Wed, 3 Jan 2024 17:39:53 +0300 Subject: [PATCH] Initial Page Layout --- assets/css/main.css | 561 ++++++++++++++++++++++++++++++++++++++++ assets/css/main.css.map | 1 + assets/scss | 1 + index.php | 39 +++ 4 files changed, 602 insertions(+) create mode 100644 assets/css/main.css create mode 100644 assets/css/main.css.map create mode 120000 assets/scss create mode 100644 index.php diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..cd89555 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,561 @@ +.ssavpn-logo:before { + display: inline-block; + position: absolute; + width: 48px; + height: 48px; + background-size: 48px; + background-repeat: no-repeat; + left: 10%; + z-index: 10; + content: " "; + background-image: url("https://vpn.iflpanel.com/assets/iflpanel/ssavpn48x48.png"); +} + +.android-logo:before { + display: inline-block; + position: absolute; + width: 48px; + height: 48px; + background-size: 48px; + background-repeat: no-repeat; + left: 10%; + z-index: 10; + content: " "; + background-image: url("/assets/images/misc/android-logo.png"); +} + +@keyframes shake-x { + 0% { + transform: translate(0, 0); + } + 5% { + transform: translate(5px, 0); + } + 10% { + transform: translate(0, 0); + } + 15% { + transform: translate(5px, 0); + } + 20% { + transform: translate(0, 0); + } + 25% { + transform: translate(5px, 0); + } + 30% { + transform: translate(0, 0); + } + 100% { + transform: translate(0, 0); + } +} +.HIDDEN { + display: none; +} + +html, +body { + display: flex; + flex-direction: column; + box-sizing: border-box; + height: 100%; + padding: 0; + margin: 0; + font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, "Helvetica Neue", sans-serif; + background-color: #131a21; + color: #EEEEEE; +} +html header, +body header { + display: flex; + align-items: center; + justify-content: left; + padding: 0px 10px; + min-height: 60px; + background-color: #131a21; + border-bottom: #00ADB5 0.2vh solid; + user-select: none; +} +html header.centered, +body header.centered { + justify-content: center; +} +html header #hlogo > img, +body header #hlogo > img { + max-height: 45px; + max-width: 200px; + margin-top: 5px; + padding: auto; +} +html header h1.centered, +body header h1.centered { + align-self: center; + margin: 0px; +} +html nav, +body nav { + display: flex; + flex-direction: row; + margin-left: auto; +} +html nav ul, +body nav ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + column-gap: 20px; + box-sizing: border-box; + margin: 0px; + padding: 0px; + list-style-type: none; +} +html article, +body article { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: start; + gap: 10px; + width: auto; + min-height: 100%; + box-sizing: border-box; +} +html article h1, +body article h1 { + align-self: center; + text-align: center; + font-size: xx-large; +} +html article h2, +body article h2 { + align-self: center; + text-align: center; + font-size: x-large; + text-decoration: underline; + text-wrap: balance; +} +html article h3, +body article h3 { + align-self: center; +} +html article form, +body article form { + display: flex; + flex-direction: column; + padding: 3%; +} +html article form.centered label, +body article form.centered label { + text-align: center; + align-self: center; +} +html article form *, +html article form *::before, +html article form *::after, +body article form *, +body article form *::before, +body article form *::after { + box-sizing: border-box; +} +html article form .input, +body article form .input { + font-size: 16px; + font-size: max(16px, 1em); + font-family: inherit; + padding: 0.25em 0.5em; + background-color: #EEEEEE; + border: 2px solid #10161d; + border-radius: 4px; +} +html article form .input:focus, +body article form .input:focus { + border-color: #222831; + box-shadow: 0 0 0 3px #10161d; + transition: 180ms box-shadow ease-in-out; + outline: 3px solid transparent; +} +html article form .input:not(textarea), +body article form .input:not(textarea) { + line-height: 1; + height: 2.25rem; +} +html article form .input[type=file], +body article form .input[type=file] { + font-size: 0.9em; + padding-top: 0.35rem; +} +html article form .input[readonly], +body article form .input[readonly] { + border-style: dotted; + cursor: not-allowed; + color: #777; +} +html article form .input[disabled], +body article form .input[disabled] { + --input-border: #ccc; + background-color: #eee; + cursor: not-allowed; +} +html article.plain, +body article.plain { + background-color: #393E46; + border: #10161d double 3px; + padding: 10px; +} +html article.sections, +body article.sections { + margin-block-start: 10px; +} +html article.sections .section, +body article.sections .section { + display: flex; + flex-direction: column; + align-self: center; + box-sizing: border-box; + width: 95vw; + background-color: #393E46; +} +html article.sections .section:first-child, +body article.sections .section:first-child { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} +html article.sections .section:last-child, +body article.sections .section:last-child { + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +html article.sections .section:only-child, +body article.sections .section:only-child { + border-top-right-radius: 10px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +html article.sections .section .grid, +body article.sections .section .grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + column-gap: 20px; + box-sizing: border-box; + margin: 0px; + padding: 0px; + list-style-type: none; +} +html article.sections .section .grid .element, +body article.sections .section .grid .element { + width: 90%; + box-sizing: border-box; + padding: 0rem 0; + margin: 0.5rem 0; + position: relative; + text-align: center; + border: #EEEEEE groove 2px; + background-color: #222831; +} +html article.sections .section .grid .element:first-child, +body article.sections .section .grid .element:first-child { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} +html article.sections .section .grid .element:last-child, +body article.sections .section .grid .element:last-child { + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +html article.sections .section .grid .element:only-child, +body article.sections .section .grid .element:only-child { + border-top-right-radius: 10px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +html article.sections .section .grid .element p, +body article.sections .section .grid .element p { + padding: 0 0.5rem; + flex-grow: 1; +} +html article.sections .section .grid .element p.explanation, +body article.sections .section .grid .element p.explanation { + margin-top: 3px; +} +html article.sections .section .grid .element h3.with-explanation, +body article.sections .section .grid .element h3.with-explanation { + font-size: x-large; + margin-bottom: 0; +} +html article.sections .section .grid > .hover, +body article.sections .section .grid > .hover { + transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1); +} +html article.sections .section .grid > .hover:hover, +body article.sections .section .grid > .hover:hover { + transform: translateX(15px); +} +@media screen and (min-width: 768px) { + html article.sections .section .grid2x2 > .element, + body article.sections .section .grid2x2 > .element { + width: 45%; + } + html article.sections .section .grid2x2 > .element:first-child, + body article.sections .section .grid2x2 > .element:first-child { + border-top-right-radius: 0px; + border-top-left-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + html article.sections .section .grid2x2 > .element:nth-child(2), + body article.sections .section .grid2x2 > .element:nth-child(2) { + border-top-right-radius: 10px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + html article.sections .section .grid2x2 > .element:nth-last-child(2), + body article.sections .section .grid2x2 > .element:nth-last-child(2) { + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 0px; + } + html article.sections .section .grid2x2 > .element:last-child, + body article.sections .section .grid2x2 > .element:last-child { + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 10px; + } + html article.sections .section .grid2x2 > .hover:hover, + body article.sections .section .grid2x2 > .hover:hover { + transform: translateY(-15px); + } +} +html article.sections .section .grid-img > .element, +body article.sections .section .grid-img > .element { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} +html article.sections .section .grid-img > .element div.block, +body article.sections .section .grid-img > .element div.block { + flex-grow: 2; + display: block; +} +html article.sections .section .grid-img > .element div.block > h3, +body article.sections .section .grid-img > .element div.block > h3 { + text-align: center; + text-wrap: balance; + font-size: x-large; +} +html article.sections .section .grid-img > .element img, +body article.sections .section .grid-img > .element img { + margin-left: 1vw; + width: 50px; +} +html article.sections .section .grid-plain > .element, +body article.sections .section .grid-plain > .element { + width: 80%; + border: none; + background-color: inherit; + list-style-type: disc; + text-align: justify; + text-align-last: left; + line-break: loose; +} +html article.sections .section .grid-linear, +body article.sections .section .grid-linear { + column-gap: 5px; +} +html article.sections .section .grid-linear .hover:hover, +body article.sections .section .grid-linear .hover:hover { + transform: translateY(-15px); +} +@media screen and (min-width: 1367px) { + html article.sections .section .grid-linear, + body article.sections .section .grid-linear { + justify-content: space-between; + } + html article.sections .section .grid-linear > .element, + body article.sections .section .grid-linear > .element { + width: 24%; + } + html article.sections .section .grid-linear > .element:first-child, + body article.sections .section .grid-linear > .element:first-child { + border-top-left-radius: 10px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 10px; + } + html article.sections .section .grid-linear > .element:last-child, + body article.sections .section .grid-linear > .element:last-child { + border-top-right-radius: 10px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 10px; + } + html article.sections .section .grid-linear > .element:only-child, + body article.sections .section .grid-linear > .element:only-child { + border-top-right-radius: 10px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + html article.sections .section .grid-linear > .element .hover:hover, + body article.sections .section .grid-linear > .element .hover:hover { + transform: translateX(15px); + } +} +html article.sections .section .grid-big .element, +body article.sections .section .grid-big .element { + width: 48%; + min-height: 40vh; +} +@media screen and (max-width: 1366px) { + html article.sections .section .grid-big > .element, + body article.sections .section .grid-big > .element { + width: 90%; + min-height: auto; + } + html article.sections .section .grid-big > .element:first-child, + body article.sections .section .grid-big > .element:first-child { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; + } + html article.sections .section .grid-big > .element:last-child, + body article.sections .section .grid-big > .element:last-child { + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + html article.sections .section .grid-big > .element:only-child, + body article.sections .section .grid-big > .element:only-child { + border-top-right-radius: 10px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + html article.sections .section .grid-big > .element .hover:hover, + body article.sections .section .grid-big > .element .hover:hover { + transform: translateX(15px); + } +} +html article.sections .section > .note, +body article.sections .section > .note { + font-style: italic; + text-align: center; + margin: 1vh 1vw; +} +html article.sections .section > .note > .symbol, +body article.sections .section > .note > .symbol { + display: inline-block; + animation: shake-x 4.72s ease infinite; + transform-origin: 50% 50%; +} +html footer, +body footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + min-height: 50px; + background-color: #10161d; + border-top: #00ADB5 0.2vh solid; + margin-top: auto; + margin-block-start: 10px; + padding-top: 10px; +} +html footer div, +body footer div { + text-align: center; +} +html a, +body a { + background-color: transparent; + text-decoration: none; +} +html a:link, +body a:link { + color: #00ADB5; +} +html a:visited, +body a:visited { + color: #129da3; +} +html a:hover, +body a:hover { + color: #00adb5; + text-decoration: underline; +} +html a:active, +body a:active { + color: #2d8488; +} +html .main-scrollable, +body .main-scrollable { + height: 100%; + overflow-y: auto; + -ms-overflow-style: none; + scrollbar-width: none; +} +html .main-scrollable::-webkit-scrollbar, +body .main-scrollable::-webkit-scrollbar { + display: none; +} +html .tooltip, +body .tooltip { + position: relative; + display: inline-block; +} +html .tooltip .tooltiptext, +body .tooltip .tooltiptext { + visibility: hidden; + width: 140px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px; + position: absolute; + z-index: 1; + bottom: 150%; + left: 50%; + margin-left: -75px; + opacity: 0; + transition: opacity 0.3s; +} +html .tooltip .tooltiptext::after, +body .tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} +html .tooltip:hover .tooltiptext, +body .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/assets/css/main.css.map b/assets/css/main.css.map new file mode 100644 index 0000000..008e4f8 --- /dev/null +++ b/assets/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/_images.scss","../scss/_animation.scss","../scss/main.scss","../scss/_fonts.scss","../scss/_colors.scss","../scss/_header.scss","../scss/_nav.scss","../scss/_article.scss","../scss/_form.scss","../scss/_inputs.scss","../scss/_utils.scss","../scss/_footer.scss","../scss/_copy.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/assets/scss b/assets/scss new file mode 120000 index 0000000..c78cd07 --- /dev/null +++ b/assets/scss @@ -0,0 +1 @@ +/home/asandikci/CodeBase/ifl/www/assets/scss/ \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..fba51dc --- /dev/null +++ b/index.php @@ -0,0 +1,39 @@ + + + + + + + + + + + + + Yurtdle | İFL + + + +
+
+

Yurtdle

+
+ +
+
+
+ + +
+
+
+ + +
+ + + + + \ No newline at end of file