initial commit

This commit is contained in:
Aliberk Sandıkçı 2023-11-09 17:10:13 +03:00
commit e48f9f8918
Signed by: asandikci
GPG Key ID: 25C67A03B5666BC1
20 changed files with 1264 additions and 0 deletions

86
about.html Normal file
View File

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<!--!Copyright © 2023 Aliberk Sandıı -->
<!--!Copyright © 2023 iflpanel Developers -->
<meta charset="UTF-8">
<!-- Meta Content -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="iflpanel Hakkımızda">
<meta name="keywords" content="iflpanel,mainpage,hakkımızda,aboutme,about,bilgi">
<meta name="author" content="Aliberk Sandıı">
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
<!-- Icons/Fonts/Images -->
<link rel="icon" type="image/x-icon" href="/assets/images/icons/favicon.ico">
<title>Hakkımızda | iflpanel</title>
</head>
<body>
<header>
<a href="/" id="hlogo"><img src="/assets/images/icons/favicon.png"></a>
<nav>
<ul>
<a href="/yunohost/sso">
<li>Panel Giriş</li>
</a>
<a href="about.html">
<li>Hakkında</li>
</a>
</ul>
</nav>
</header>
<div class="main-scrollable">
<article class="plain">
<h2>Hakkımızda</h2>
<div style="text-align: center;">
<p style="text-align: center;"><b>iflpanel</b>, topluluk ekosistemi kurmak için ortaya çıkmış bir
girişimdir. Topluluğun ihtiyaçlarını göz önünde bulundurarak ortak çalışmaya dayalı uygulamalar ile verimi en
üst seviyeye çıkarmayı amaçlar. Sağladığı servisler ile kullanıcıların, editörlerin ve yöneticilerin
işlemlerini hızlı bir şekilde gerçekleştirmesine olanak sağlar. Aynı zamanda topluluğun verilerini kendi
içinde tutmasını sağlayarak büyük şirketler tarafından kullanılmasını engeller ve dışa bağımlılığı azaltır.
</p>
<hr>
<h3>SSA VPN</h3>
<p>kesintisiz, hızlı, gizli ve güvenli VPN servisimiz. Fatih (MEB) internetinde çalışır. Detaylı bilgi için <a
href="https://vpn.iflpanel.com/">VPN bilgi sayfamızı</a> ziyaret edebilirsiniz</p>
<h3>Galeri</h3>
<p><b>Topluluk için</b> Galeri servisi. Fotoğraflarınızı orijinal boyutunda saklar. Topluluk Editörleri;
etiketler, albümler ve açıklamalar ile kolay sınıflandırma yapabilir. Kullanıcılar ise yorum yapma ve puanlama
özellikleri sayesinde etikileşimde bulunabilir. </p>
<h3>Kütüphane</h3>
<p><b>Topluluk için</b> Kütüphane servisi. Pdf ve diğer dosya formatlarını yükleyebilirsiniz.</p>
<h3>Anket</h3>
<p>Topluluk Editörleri için gelişmiş anket servisi. Kullanıcı verilerinizi ustalıkla yönetmenizi ve özelleşmiş
anketler oluşturmanızı sağlar. Detaylı bilgi için <a
href="https://wiki.iflpanel.com/books/anket-kullanimi-editor/page/hizli-bakis">Editörler için Anket
Kullanımı - Hızlı Bakış</a> sayfasına göz atabilirsiniz. </p>
<h3>Wiki</h3>
<p>Servislerin kullanım ayrıntıları için wiki</p>
<br>
<p>
<div>Giderlerimizi karşılamamızda yardımcı olmak için <a href="bagis.html">bağış</a> yapmayı düşünebilirsiniz
</div>
</p>
<p style="text-align: center;"><a href=https://asandikci.com>Aliberk Sandıı</a> - 2023</p>
</div>
</article>
<footer>
<div class="copyright">2023 © Aliberk Sandıı</div>
</footer>
</div>
</body>
</html>

410
assets/css/main.css Normal file
View File

@ -0,0 +1,410 @@
.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 #hlogo > img,
body header #hlogo > img {
max-height: 45px;
max-width: 200px;
margin-top: 5px;
padding: auto;
}
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.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 > .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 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 */

1
assets/css/main.css.map Normal file
View File

@ -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/_utils.scss","../scss/_footer.scss","../scss/_copy.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AAbF;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AChBJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AClBJ;EACE;;;AAGF;AAAA;EAEE;EACA;EAEA;EACA;EAEA;EACA;EAEA,aC3BM;ED4BN,kBEjBS;EFkBT,OEXa;;AFeb;AAAA;EG9BA;EACA;EACA;EAEA;EACA;EAEA,kBDCS;ECAT;EAEA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AHmBF;AAAA;EIrCA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AJ0BF;AAAA;EKtCA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;;ALiBA;AAAA;EKZF,kBHfa;EGgBb;EACA;;ALcE;AAAA;EKVF;;AAEA;AAAA;EACE;EACA;EACA;EAEA;EACA;EAEA,kBH/BW;;AIVb;AAAA;EACE,wBDyCgC;ECxChC,yBDwCgC;ECvChC;EACA;;AAGF;AAAA;EACE;EACA;EACA,2BDgCgC;EC/BhC,4BD+BgC;;AC5BlC;AAAA;EACE,yBD2BgC;EC1BhC,wBD0BgC;ECzBhC,2BDyBgC;ECxBhC,4BDwBgC;;AAGhC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA,kBH5DO;;AITb;AAAA;EACE,wBDqEoC;ECpEpC,yBDoEoC;ECnEpC;EACA;;AAGF;AAAA;EACE;EACA;EACA,2BD4DoC;EC3DpC,4BD2DoC;;ACxDtC;AAAA;EACE,yBDuDoC;ECtDpC,wBDsDoC;ECrDpC,2BDqDoC;ECpDpC,4BDoDoC;;AAEhC;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EACE;;AAMJ;EACE;AAAA;IACE;;EC3ER;AAAA;IACE;IACA,wBD0E+B;ICzE/B;IACA;;EAGF;AAAA;IACE,yBDoE+B;ICnE/B;IACA;IACA;;EAGF;AAAA;IACE;IACA;IACA,2BD2D+B;IC1D/B;;EAGF;AAAA;IACE;IACA;IACA;IACA,4BDmD+B;;EAIzB;AAAA;IACE;;;AAQN;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAOJ;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;AAAA;EAOE;EACA;EACA;;AARA;AAAA;EACE;EACA;EACA;;AL5GN;AAAA;EOtDA;EACA;EACA;EACA;EAEA;EACA,kBLCS;EKAT;EAEA;EACA;EAEA;;AP+CA;AAAA;EACE;EACA;;AAEA;AAAA;EACE,OE9CS;;AFiDX;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EMjFF;EACA;;AALA;AAAA;EACE;;AEDF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA","file":"main.css"}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

11
assets/js/copy.js Normal file
View File

@ -0,0 +1,11 @@
function copy2Clipboard(id) {
var copyText = document.getElementById(id);
// copyText.select();
// copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.innerHTML);
var tooltip = document.getElementById(id+'-tip');
tooltip.innerHTML = "Kopyalandı: " + copyText.innerHTML;
}

0
assets/js/main.js Normal file
View File

View File

@ -0,0 +1,33 @@
@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)
}
}

174
assets/scss/_article.scss Normal file
View File

@ -0,0 +1,174 @@
@use "colors" as c;
@use "utils" as util;
@use "animation";
@mixin main {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
gap: 10px;
width: auto;
min-height: 100%;
box-sizing: border-box;
h1 {
align-self: center;
text-align: center;
font-size: xx-large;
}
h2 {
align-self: center;
text-align: center;
font-size: x-large;
text-decoration: underline;
text-wrap: balance;
}
h3 {
align-self: center;
}
}
@mixin plain {
background-color: c.$lighter;
border: c.$dark double 3px;
padding: 10px;
}
@mixin sections {
margin-block-start: 10px;
>.section {
display: flex;
flex-direction: column;
align-self: center;
box-sizing: border-box;
width: 95vw;
background-color: c.$lighter;
@include util.border-first-last(10px);
// Grid Sizes
.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;
.element {
width: 90%;
box-sizing: border-box;
padding: 0rem 0;
margin: 0.5rem 0;
position: relative;
text-align: center;
border: c.$text groove 2px;
background-color: c.$light;
@include util.border-first-last(10px);
p {
padding: 0 0.5rem;
flex-grow: 1;
&.explanation {
margin-top: 3px;
}
}
h3.with-explanation {
font-size: x-large;
margin-bottom: 0;
}
}
>.hover {
transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
&:hover {
transform: translateX(15px);
}
}
}
.grid2x2 {
@media screen and (min-width:768px) {
>.element {
width: 45%;
@include util.border-2x2(10px);
}
>.hover {
&:hover {
transform: translateY(-15px);
}
}
}
}
// Extra Grid Types
.grid-img {
>.element {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
div.block {
flex-grow: 2;
display: block;
>h3 {
text-align: center;
text-wrap: balance;
font-size: x-large;
}
}
img {
margin-left: 1vw;
width: 50px;
// aspect-ratio: 1/1;
}
}
}
.grid-plain {
>.element {
width: 80%;
border: none;
background-color: inherit;
list-style-type: disc;
text-align:justify;
text-align-last:left;
line-break:loose;
}
}
// Extra Section Elements
>.note {
>.symbol {
display: inline-block;
animation: shake-x 4.72s ease infinite;
transform-origin: 50% 50%;
}
font-style: italic;
text-align: center;
margin: 1vh 1vw;
}
}
}

34
assets/scss/_colors.scss Normal file
View File

@ -0,0 +1,34 @@
//! Copyright 2023, Aliberk Sandıı
// See active color palettes at the end of the file
// LINK ./_colors.scss#active
//
// COLOR PALETTES
//
// Forgejo color palette
$forgejo0: #10161d;
$forgejo1: #131a21;
$forgejo2: #171e26;
$forgejo3: #2b3642;
$forgejo4: #d2e0f0;
$forgejo5: #fb923c;
// Colorhunt-1 color palette, https://colorhunt.co/palette/222831393e4600adb5eeeeee
$colorhunt1-0: #EEEEEE;
$colorhunt1-1: #222831;
$colorhunt1-2: #393E46;
$colorhunt1-3: #00ADB5;
// ANCHOR[id=active]
// Active color palette
$bg: $forgejo1;
$accent: $colorhunt1-3;
$dark: $forgejo0;
$light: $colorhunt1-1;
$lighter: $colorhunt1-2;
$text: $colorhunt1-0;

39
assets/scss/_copy.scss Normal file
View File

@ -0,0 +1,39 @@
@mixin copy{
.tooltip {
position: relative;
display: inline-block;
}
.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;
}
.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;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
}

1
assets/scss/_fonts.scss Normal file
View File

@ -0,0 +1 @@
$font1: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, 'Helvetica Neue', sans-serif;

21
assets/scss/_footer.scss Normal file
View File

@ -0,0 +1,21 @@
@use "colors" as c;
@mixin main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
min-height: 50px;
background-color: c.$dark;
border-top: c.$accent 0.2vh solid;
margin-top: auto;
margin-block-start: 10px;
padding-top: 10px;
div {
text-align: center;
}
}

22
assets/scss/_header.scss Normal file
View File

@ -0,0 +1,22 @@
@use "colors" as c;
@mixin main {
display: flex;
align-items: center;
justify-content: left;
padding: 0px 10px;
min-height: 60px;
background-color: c.$bg;
border-bottom: c.$accent 0.2vh solid;
user-select: none;
#hlogo>img {
max-height: 45px;
max-width: 200px;
margin-top:5px;
padding:auto;
}
}

27
assets/scss/_images.scss Normal file
View File

@ -0,0 +1,27 @@
// POSSIBLE DEPRECATED
@mixin logo-default ($image-path) {
&: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($image-path)
}
}
.ssavpn-logo {
@include logo-default("https://vpn.iflpanel.com/assets/iflpanel/ssavpn48x48.png");
}
.android-logo {
@include logo-default("/assets/images/misc/android-logo.png");
}

20
assets/scss/_nav.scss Normal file
View File

@ -0,0 +1,20 @@
@mixin main {
display: flex;
flex-direction: row;
margin-left: auto;
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;
}
}

64
assets/scss/_utils.scss Normal file
View File

@ -0,0 +1,64 @@
@mixin hide-scroll {
&::-webkit-scrollbar {
display: none
}
-ms-overflow-style: none; // Edge
scrollbar-width: none; // Firefox
}
@mixin border-first-last($radius) {
&:first-child {
border-top-left-radius: $radius;
border-top-right-radius: $radius;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
&:last-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
&:only-child {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
}
@mixin border-2x2($radius) {
&:first-child {
border-top-right-radius: 0px;
border-top-left-radius: $radius;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
&:nth-child(2) {
border-top-right-radius: $radius;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
&:nth-last-child(2) {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: $radius;
border-bottom-right-radius: 0px;
}
&:last-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: $radius;
}
}

92
assets/scss/main.scss Normal file
View File

@ -0,0 +1,92 @@
//! Copyright 2023, Aliberk Sandıı
@use "colors" as c;
@use "fonts" as font;
@use "utils" as util;
@use "images" as im;
@use "copy" as copy;
@use "header" as h;
@use "nav" as n;
@use "article" as a;
@use "footer" as f;
.HIDDEN {
display: none;
}
html,
body {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
padding: 0;
margin: 0;
font-family: font.$font1;
background-color: c.$bg;
color: c.$text;
// Header Types
header {
@include h.main;
}
// Navigation Menu Types
nav {
@include n.main
}
// Article Types
article {
@include a.main;
&.plain {
@include a.plain;
}
&.sections {
@include a.sections;
}
}
// Footer Types
footer {
@include f.main;
}
// General
a {
background-color: transparent;
text-decoration: none;
&:link {
color: c.$accent;
}
&:visited {
color: desaturate($color: c.$accent, $amount: 20);
}
&:hover {
color: saturate($color: c.$accent, $amount: 100);
text-decoration: underline;
}
&:active {
color: desaturate($color: c.$accent, $amount: 50);
}
}
.main-scrollable{
height: 100%;
overflow-y: auto;
@include util.hide-scroll;
}
@include copy.copy;
}

83
bagis.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<!--!Copyright © 2023 Aliberk Sandıı -->
<!--!Copyright © 2023 iflpanel Developers -->
<meta charset="UTF-8">
<!-- Meta Content -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="iflpanel Bağış">
<meta name="keywords" content="iflpanel,bağış,yardım,para">
<meta name="author" content="Aliberk Sandıı">
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
<!-- Icons/Fonts/Images -->
<link rel="icon" type="image/x-icon" href="/assets/images/icons/favicon.ico">
<title>Bağış | iflpanel</title>
</head>
<body>
<header>
<a href="/" id="hlogo"><img src="/assets/images/icons/favicon.png"></a>
<nav>
<ul>
<a href="/yunohost/sso">
<li>Panel Giriş</li>
</a>
<a href="about.html">
<li>Hakkında</li>
</a>
</ul>
</nav>
</header>
<div class="main-scrollable">
<article class="plain">
<h2>Bağış</h2>
<div>
<span id="IBAN">TR28 0004 6003 3588 8000 0776 55</span> |
<div class="tooltip"><button onclick="copy2Clipboard('IBAN')">
<span class="tooltiptext" id="IBAN-tip">Panoya Kopyala</span>
Kopyala
</button>
</div>
<br>
<hr>
<span id="Papara">1444318251</span> |
<div class="tooltip"><button onclick="copy2Clipboard('Papara')">
<span class="tooltiptext" id="Papara-tip">Panoya Kopyala</span>
Kopyala
</button>
</div>
<br>
<hr>
<p>ıklama kısmını "iflpanel Bağış - isim" şeklinde doldurunuz. Eklediğiniz isim burada gözükecektir</p>
</div>
<hr>
<div style="text-align: center; align-self: center;">
<h2>Bağışçılar</h2>
<p>-</p>
</div>
</article>
<footer>
<div class="copyright">2023 © Aliberk Sandıı</div>
</footer>
</div>
<script src="/assets/js/copy.js"></script>
</body>
</html>

146
index.html Normal file
View File

@ -0,0 +1,146 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<!--!Copyright © 2023 Aliberk Sandıı -->
<!--!Copyright © 2023 iflpanel Developers -->
<meta charset="UTF-8">
<!-- Meta Content -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="İzmir Fen Lisesi Topluluk Sitesi Ana Sayfa">
<meta name="keywords" content="İFL,İzmir Fen,Topluluk,Lise,mainpage,main,anasayfa,ana sayfa">
<meta name="author" content="Aliberk Sandıı">
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
<!-- Icons/Fonts/Images -->
<link rel="icon" type="image/x-icon" href="/assets/images/icons/favicon.ico">
<title>iflpanel</title>
</head>
<body>
<header>
<a href="/" id="hlogo"><img src="/assets/images/icons/favicon.png"></a>
<nav>
<ul>
<a href="/yunohost/sso">
<li>Topluluk Girişi</li>
</a>
<a href="about.html">
<li>Hakkında</li>
</a>
</ul>
</nav>
</header>
<div class="main-scrollable">
<article class="sections">
<!-- TOPLULUK İÇİN -->
<div class="section">
<h2>Topluluk Servislerimiz</h2>
<ul class="grid grid2x2">
<!-- <li class="element hover">
<a href="https://vpn.iflpanel.com">
<h3 class="with-explanation ssavpn-logo">SSA VPN</h3>
<p class="explanation">Güvenli, Gizli ve Hızlı VPN servisi</p>
</a>
</li> -->
<li class="element hover">
<a href="https://galeri.iflpanel.com">
<h3 class="with-explanation">Galeri</h3>
<p class="explanation">Toplu Anılarınızı Saklayabileceğiniz Topluluk Galerisi</p>
</a>
</li>
<li class="element hover">
<a href="https://kutuphane.iflpanel.com">
<h3 class="with-explanation">Kütüphane</h3>
<p class="explanation">Kitaplar, kaynaklar, ders notları ve daha fazlası</p>
</a>
</li>
<!-- <li class="element hover">
<a href="https://tahta.iflpanel.com">
<h3 class="with-explanation">iflpanel Tahta</h3>
<p class="explanation">Akıllı Tahta Arka Planı</p>
</a>
</li> -->
</ul>
</div>
<!-- EDİTÖRLER İÇİN -->
<div class="section">
<h2>Editörler İçin</h2>
<ul class="grid">
<li class="element hover">
<a href="https://anket.iflpanel.com">
<h3 class="with-explanation">iflpanel Anket</h3>
<p class="explanation">Topluluğunuz için anketler oluşturun ve veri toplayın</p>
</a>
</li>
<li class="element hover">
<a href="https://wiki.iflpanel.com">
<h3 class="with-explanation">Wiki</h3>
<p class="explanation">Servislerin kullanımı ile ilgili detaylar için wiki</p>
</a>
</li>
<li class="element hover">
<a href="https://l.iflpanel.com">
<h3 class="with-explanation">Link Kısaltıcı</h3>
<p class="explanation">Hadi şu linki kısaltalım!</p>
</a>
</li>
</ul>
</div>
<!-- GELISTIRME SURECINDE
<div class="section">
<h2>Geliştirme Sürecinde 🔧</h2>
<ul class="grid grid2x2">
<li class="element">
<p>iflpanel Haberler</p>
</li>
<li class="element">
<p>Pansiyon Yönetim Servisi</p>
</li>
<li class="element">
<p>Telefon Uygulaması</p>
</li>
<li class="element">
<p>iflpanel <em>Social</em> (Sosyal Medya/Forum)</p>
</li>
</ul>
<div class="note"><span class="symbol">👉🏼</span> <a
href="https://anket.iflpanel.com/?r=iflpanel-meta-1">Ankete katılarak</a> uygulama isteğinde
bulunabilirsiniz!</div>
</div> -->
</article>
<footer>
<!-- <div>Giderlerimizi karşılamamızda yardımcı olmak için <a href="bagis.html">bağış</a> yapmayı düşünebilirsiniz</div> -->
<div class="copyright" style="text-align: center;">2023 © <a href="https://asandikci.com/">Aliberk
Sandıı</a><br><sup>İzmir Fen Lisesi 24 dönemi öğrencisi</sup></div>
</footer>
</div>
</body>
</html>