diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 9c21021..20afb81 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -312,6 +312,7 @@ display: flex; flex-direction: row; grid-gap: 25px; + flex-wrap: wrap; } .secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRowVisual { diff --git a/assets/css/footer.css b/assets/css/footer.css index eae2517..6b791a3 100644 --- a/assets/css/footer.css +++ b/assets/css/footer.css @@ -27,6 +27,7 @@ @media (max-width: 768px) { .secMainFooterInsideTop { grid-template-columns: 1fr; + grid-gap: 25px; } } @@ -64,6 +65,12 @@ width: 100%; } +@media (min-width: 300px) { + .secMainFooterInsideTopSecLeftTopImg { + max-width: 200px; + } +} + .secMainFooterInsideTopSecLeftBottomText { font-size: 14px; } diff --git a/assets/css/nav.css b/assets/css/nav.css index 4a8ae58..7873bbe 100644 --- a/assets/css/nav.css +++ b/assets/css/nav.css @@ -4,6 +4,10 @@ justify-content: center; } +.secMain.secMainNav::-webkit-scrollbar { + height: 10px; +} + .secMainNavInside { width: 100%; display: grid; @@ -30,6 +34,7 @@ .secMainNavInsideSecLeft { width: 100%; justify-content: center; + min-width: 100px; } .secMainNavInsideSecMid { @@ -69,6 +74,74 @@ justify-content: end; } +@media (max-width: 768px) { + .secMainNavInsideSecRightInside { + display: none; + } +} + .btnMain.secMainNavInsideSecRightInsideBtn { } +.btnMain.secMainNavInsideSecRightInsideBtnBurger { +} + +.secMainNavInsideSecRightInside.secMainNavInsideSecRightInsideMobile { + display: none; +} + +@media (max-width: 768px) { + .secMainNavInsideSecRightInside.secMainNavInsideSecRightInsideMobile { + display: flex; + } +} + +.secMainNavMobile { + transition: ease 0.4s; + position: fixed; + top: 0; + right: 0; + left: 100%; + bottom: 0; + background: white; + z-index: 10; + overflow: auto; + display: none; + flex-direction: column; +} + +.secMainNavMobile.secMainNavMobileShow { + transition: ease 0.4s; + display: flex; + left: 0%; +} + +.secMainNavMobileTop { + padding: 8px 10px; +} + +.secMainNavMobileMid { + display: flex; + flex-direction: column; + grid-gap: 15px; + overflow: auto; + border-top: solid 1px rgba(0,0,0,0.05); + border-bottom: solid 1px rgba(0,0,0,0.05); + padding: 15px; + flex-grow: 1; +} + +.secMainNavMobileBot { + padding: 15px; + display: flex; + flex-direction: row; + grid-gap: 15px; +} + +.btnMain.secMainNavMobileMidBtn { + padding: 15px; + background: rgba(76,130,163,0); + color: #4c82a3; + justify-content: start; +} + diff --git a/assets/css/premium.css b/assets/css/premium.css new file mode 100644 index 0000000..1c7e5da --- /dev/null +++ b/assets/css/premium.css @@ -0,0 +1,545 @@ +.secMBSI_DSMPremium { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 100px; + padding: 50px 0; +} + +@media (max-width: 576px) { + .secMBSI_DSMPremium { + padding: 0; + grid-gap: 50px; + } +} + +.secMBSI_DSMPremiumHero { + padding: 75px 0px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + grid-gap: 25px; + background: white; + text-align: center; + border-radius: 5px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +@media (max-width: 576px) { + .secMBSI_DSMPremiumHero { + padding: 25px 0px; + } +} + +.secMBSI_DSMPremiumHero > :nth-child(1) { + width: 100%; + max-width: 150px; +} + +.secMBSI_DSMPremiumHero > :nth-child(2) { + font-size: 50px; + font-weight: 900; +} + +@media (max-width: 576px) { + .secMBSI_DSMPremiumHero > :nth-child(2) { + font-size: 35px; + } +} + +.secMBSI_DSMPremiumHero > :nth-child(3) { + font-size: 24px; + font-weight: 500; + max-width: 700px; + opacity: 0.75; +} + +@media (max-width: 576px) { + .secMBSI_DSMPremiumHero > :nth-child(3) { + font-size: 18px; + } +} + +.secMBSI_DSMPremiumSec { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 50px; +} + +.secMBSI_DSMPremiumSecTop { + text-align: center; + text-transform: uppercase; +} + +.secMBSI_DSMPremiumSecTop > :nth-child(1) { + font-weight: 600; + color: rgba(0,0,0,0.65); + font-size: 38px; +} + +.secMBSI_DSMPremiumSecMid { + display: flex; + flex-direction: column; + grid-gap: 50px; +} + +@media (max-width: 576px) { + .secMBSI_DSMPremiumSecMid { + grid-gap: 25px; + } +} + +.secMBSI_DSMPremiumSecMidCards { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 25px; + justify-content: center; + flex-wrap: wrap; +} + +.secMBSI_DSMPremiumSecMidBoxes { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 25px; + justify-content: center; + flex-wrap: wrap; + text-align: center; +} + +.secMBSI_DSMPremiumSecMidBoxesBox { + transition: ease 0.3s; + flex-grow: 1; + background: white; + padding: 25px; + display: flex; + flex-direction: column; + grid-gap: 25px; + border-radius: 5px; + align-items: center; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.secMBSI_DSMPremiumSecMidBoxesBox:hover { + transition: ease 0.3s; + background: #4c82a3; + color: white; + transform: scale(1.02); + box-shadow: 0 0 8px 0 rgba(0,0,0,0); +} + +.secMBSI_DSMPremiumSecMidBoxesBox > :nth-child(1) { + font-size: 24px; + font-weight: 600; + flex-grow: 1; +} + +.secMBSI_DSMPremiumSecMidBoxesBox > * { + max-width: 350px; +} + +.secMBSI_DSMPremiumSecMidBoxesBox > :nth-child(2) { + font-size: 16px; + opacity: 0.75; +} + +.secMBSI_DSMPremiumSecMidSubscribe { + display: flex; + flex-direction: column; + grid-gap: 25px; + justify-content: center; + align-items: center; +} + +.secMBSI_DSMPremiumSecMidSubscribeBox { + width: 100%; + max-width: 1000px; + padding: 25px; + background: white; + border-radius: 5px; + display: flex; + flex-direction: row; + grid-gap: 50px; +} + +@media (max-width: 768px) { + .secMBSI_DSMPremiumSecMidSubscribeBox { + flex-direction: column; + grid-gap: 25px; + } +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSec { + display: flex; + flex-direction: column; + grid-gap: 15px; + width: 100%; + font-size: 16px; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecAlt { + display: flex; + flex-direction: row; + grid-gap: 15px; + width: 100%; + font-size: 16px; + justify-content: space-between; +} + +.secMBSI_DSMPremiumSecMidCardsInside { + transition: ease 0.4s; + width: 100%; + border-radius: 5px; + display: flex; + flex-direction: row; + grid-gap: 0px; + justify-content: center; + flex-wrap: wrap; +} + +.secMBSI_DSMPremiumSecMidCardsInside:hover { + transition: ease 0.4s; + grid-gap: 25px; +} + +@media (max-width: 1281px) { + .secMBSI_DSMPremiumSecMidCardsInside { + grid-gap: 25px; + } +} + +.secMBSI_DSMPremiumSecMidCardsInside > :first-child { + border-radius: 5px 0 0 5px; +} + +.secMBSI_DSMPremiumSecMidCardsInside > :last-child { + border-radius: 0 5px 5px 0; +} + +@media (max-width: 1281px) { + .secMBSI_DSMPremiumSecMidCardsInside > *, .secMBSI_DSMPremiumSecMidCardsInside > :first-child, .secMBSI_DSMPremiumSecMidCardsInside > :last-child { + border-radius: 5px; + } +} + +.secMBSI_DSMPremiumSecMidCardsCard { + transition: ease 0.3s; + width: 100%; + min-width: 400px; + max-width: 400px; + background: white; + display: flex; + flex-direction: column; + grid-gap: 25px; + padding: 25px; + cursor: default; + justify-content: end; +} + +@media (max-width: 768px) { + .secMBSI_DSMPremiumSecMidCardsCard { + max-width: unset; + min-width: unset; + } +} + +.secMBSI_DSMPremiumSecMidCardsCard:hover { + transition: ease 0.3s; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.15); + z-index: 10; + transform: scale(1.02); + border-radius: 5px; +} + +.secMBSI_DSMPremiumSecMidCardsCardTop { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; + text-align: center; +} + +.secMBSI_DSMPremiumSecMidCardsCardTop > p { + font-size: 16px; + font-weight: 600; + color: rgba(0,0,0,0.5); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + grid-gap: 10px; +} + +.secMBSI_DSMPremiumSecMidCardsCardTop > h1, .secMBSI_DSMPremiumSecMidCardsCardTop > h2, .secMBSI_DSMPremiumSecMidCardsCardTop > h3, .secMBSI_DSMPremiumSecMidCardsCardTop > h4, .secMBSI_DSMPremiumSecMidCardsCardTop > h5, .secMBSI_DSMPremiumSecMidCardsCardTop > h6 { + font-size: 48px; + font-weight: 600; + color: rgb(67,67,67); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + position: relative; + grid-gap: 15px; +} + +@media (max-width: 768px) { + .secMBSI_DSMPremiumSecMidCardsCardTop > h1, h2, h3, h4, h5, h6 { + flex-direction: column; + grid-gap: 5px; + } +} + +.secMBSI_DSMPremiumSecMidCardsCardMid { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; + /*flex-grow: 1;*/ +} + +.secMBSI_DSMPremiumSecMidCardsCardMid > :last-child { + border-bottom: solid 1px rgba(0,0,0,0); +} + +.secMBSI_DSMPremiumSecMidCardsCardMid > * { + transition: ease 0.3s; + border-bottom: solid 1px rgba(0,0,0,0.1); + padding: 10px 0; + color: rgba(0,0,0,0.75); + text-align: center; +} + +.secMBSI_DSMPremiumSecMidCardsCardMid > *:hover { + transition: ease 0.3s; + border-radius: 5px; + background: rgba(255,255,255,0.05); + border-radius: 5px; + border-bottom: solid 1px rgba(0,0,0,0); +} + +.secMBSI_DSMPremiumSecMidCardsInside > :first-child > .secMBSI_DSMPremiumSecMidCardsCardMid > *:hover, .secMBSI_DSMPremiumSecMidCardsInside > :last-child > .secMBSI_DSMPremiumSecMidCardsCardMid > *:hover { + transition: ease 0.3s; + border-radius: 5px; + background: rgba(0,0,0,0.05); + border-radius: 5px; + border-bottom: solid 1px rgba(0,0,0,0); +} + +.secMBSI_DSMPremiumSecMidCardsCardBot { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.secMBSI_DSMPremiumSecMidCardsCardNote { + font-size: 14px; + color: rgba(0,0,0,0.5); +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime { + background: #4c82a3; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * { + color: white; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > * { + color: white; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCard > * > * > :first-child { + text-decoration: line-through; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > * > :first-child { + text-decoration: line-through; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCard > * > * > * { + color: rgba(0,0,0,0.5); + font-size: 16px; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > * > * { + color: rgba(255,255,255,0.5); +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > a { + background: #447592; +} + +.secMBSI_DSMPremiumSecMidCardsCard.secMBSI_DSMPremiumSecMidCardsCardPrime > * > a:hover { + background: #5e8eab; +} + +.secMBSI_DSMPremiumSecMidCardsCardHead { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + grid-gap: 10px; +} + +.secMBSI_DSMPremiumSecMidCardsCardHead > * { + margin: 0; +} + +.secMBSI_DSMPremiumSecMidNote { + text-align: center; + color: rgba(0,0,0,0.25); + font-size: 16px; +} + +.secMBSI_DSMPremiumSecMidCardWrapper { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.secMBSI_DSMPremiumSecMidCard { + transition: ease 0.3s; + width: 100%; + padding: 25px; + background: #ffffff; + display: flex; + flex-direction: column; + grid-gap: 15px; + cursor: default; + justify-content: end; + border-radius: 5px; + border: solid 3px rgb(76,130,163); + text-align: center; +} + +.secMBSI_DSMPremiumSecMidCard:hover { + transition: ease 0.3s; + transform: scale(1.01); +} + +.secMBSI_DSMPremiumSecMidCardMid { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; + font-size: 16px; + /*padding: 10px 0;*/ + /*border-top: solid 1px rgba(0,0,0,0.1);*/ + /*border-bottom: solid 1px rgba(0,0,0,0.1);*/ +} + +.secMBSI_DSMPremiumSecMidCardBot { + display: flex; + flex-direction: row; + grid-gap: 15px; + width: 100%; + justify-content: center; + align-items: center; +} + +.secMBSI_DSMPremiumSecMidCardBot > * { + flex-grow: 1; + max-width: 200px; +} + +.secMBSI_DSMPremiumSecMidCardTopText { + font-size: 32px; + color: unset; + text-align: center; + font-weight: 600; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecQR { + width: 100%; + max-width: 200px; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecQRWrapper { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: solid 1px rgba(0,0,0,0.1); + padding: 15px; + border-radius: 5px; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecPackages { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper { + transition: ease 0.3s; + position: relative; + flex-grow: 1; + padding: 15px; + border: solid 2px rgba(76,130,163,0.1); + border-radius: 5px; + background: rgba(76,130,163,0.1); + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper:hover { + transition: ease 0.3s; + border: solid 2px rgba(76,130,163,0.2); + background: rgba(76,130,163,0.2); +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper > :nth-child(2) { + font-size: 24px; + color: #434343; + opacity: 0.5; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper > :nth-child(3) { + font-size: 14px; + color: rgba(0,0,0,0.5); + opacity: 0.5; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapper.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive { + transition: ease 0.3s; + position: relative; + flex-grow: 1; + padding: 15px; + border: solid 2px rgb(76,130,163); + border-radius: 5px; + background: rgba(76,130,163,0.25); +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive > :nth-child(2), .secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive > :nth-child(3) { + transition: ease 0.3s; + opacity: 1; +} + +.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckbox { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; + width: 100%; + opacity: 0; + cursor: pointer; + z-index: 1; +} + +.inputMainWrapper { + display: flex; + flex-direction: column; + grid-gap: 5px; +} + diff --git a/assets/css/settings.css b/assets/css/settings.css new file mode 100644 index 0000000..be6239a --- /dev/null +++ b/assets/css/settings.css @@ -0,0 +1,141 @@ +.settingsMain { + width: 100%; + display: grid; + grid-template-columns: 0.4fr 1.6fr; + position: relative; + grid-gap: 25px; +} + +.settingsMainSec { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 25px; +} + +.settingsMainSecInside { + width: 100%; + background: white; + padding: 15px; + border-radius: 5px; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.settingsMainSecInside.settingsMainSecInsideLeft { + position: sticky; + top: 15px; +} + +.settingsMainSecInside.settingsMainSecInsideRight { +} + +.btnMain.settingsMainSecInsideLeftBtn { + transition: ease 0.3s; + background: rgba(76,130,163,0); + color: #434343; + font-weight: 600; + opacity: 0.75; + justify-content: start; + grid-gap: 10px; +} + +.btnMain.settingsMainSecInsideLeftBtn:hover { + transition: ease 0.3s; + opacity: 0.85; + grid-gap: 15px; +} + +.btnMain.settingsMainSecInsideLeftBtn.settingsMainSecInsideLeftBtnActive { + transition: ease 0.3s; + background: rgb(76,130,163); + color: #ffffff; +} + +.settingsMainSecInsideRightSec { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.settingsMainSecInsideRightSecPic { + display: flex; + flex-direction: row; +} + +.settingsMainSecInsideRightSecPicInside { + position: relative; + width: 75px; + height: 75px; + background: rgba(0,0,0,0.1); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: solid 3px #79a1ba; + border-radius: 100px; + overflow: hidden; +} + +.settingsMainSecInsideRightSecPicInsideImg { + width: 100%; + height: 100%; + object-fit: contain; +} + +.settingsMainSecInsideRightSecPicInsideUpload > input { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + opacity: 0; + cursor: pointer; +} + +.settingsMainSecInsideRightSecPicInsideUpload > * { + cursor: pointer; +} + +.settingsMainSecInsideRightSecPicInsideUpload { + transition: ease 0.3s; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + background: rgba(0,0,0,0.25); + backdrop-filter: blur(1px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; + font-size: 24px; + cursor: pointer; + opacity: 0; + z-index: 1; +} + +.settingsMainSecInsideRightSecPicInsideUpload:hover { + transition: ease 0.3s; + background: rgba(0,0,0,0.25); + backdrop-filter: blur(1px); + opacity: 1; +} + +.btnMain.settingsMainSecInsideRightSecBtn { + max-width: 300px; + align-self: center; + width: 100%; +} + +.btnMain.settingsMainSecInsideRightSecBtnAlt { + align-self: end; +} + diff --git a/assets/css/sitewideNotif.css b/assets/css/sitewideNotif.css new file mode 100644 index 0000000..1c90145 --- /dev/null +++ b/assets/css/sitewideNotif.css @@ -0,0 +1,19 @@ +.siteWideNotif { + width: 100%; + background: #4c82a3; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.siteWideNotifInside { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 10px; + color: #ffffff; + justify-content: space-between; +} + diff --git a/assets/css/styles.css b/assets/css/styles.css index a6de248..2854769 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -133,6 +133,11 @@ p { text-decoration: underline; } +.linkMain.linkMainAlt { + color: #ffffff; + text-decoration: underline; +} + .btnMainImg { border-radius: 100px; width: 20px; @@ -223,6 +228,7 @@ h1, h2, h3, h4, h5, h6 { margin: 3px 0 0 0!important; box-shadow: 0 0 4px 0 rgb(0,0,0,0.25); width: 100%; + clip-path: inset(0 0 0 0); } .dropdown-item.dropdownMainMenuItem { @@ -456,3 +462,88 @@ h1, h2, h3, h4, h5, h6 { color: #ffffff; } +.toggleMain { + overflow: hidden; + border-radius: 4px; + position: relative; + width: calc(50px + 2px); + height: 26px; + background: rgb(76,130,163); + justify-content: center; + align-items: center; + box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.15); +} + +.toggleMain > div { + background: white; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.15); +} + +.toggleMainBall { + transition: ease 0.2s; + width: 18px; + height: 18px; + border-radius: 2px; + position: absolute; + top: 4px; + left: 4px; + right: 100%; +} + +.toggleMainBall.toggleMainBallChecked { + transition: ease 0.2s; + left: calc(100% - 20px - 3px); + right: 0%; +} + +.toggleMainCheckbox { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; +} + +.toggleMain.toggleMainAlt { + background: #ffffff; + outline: solid 2px #4c82a3; +} + +.toggleMain.toggleMainAlt > div { + background: #4c82a3; +} + +.secMainBodySecInsideTitle { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 0px; + margin: 0 0 15px 0; + grid-gap: 10px; +} + +.inputMainWrapperBtns { + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.btnMain.btnMainRed { + background: #ff6347; +} + +.btnMain.btnMainRed:hover { + background: #ff7f68; +} + +.inputMainWrapperText { + font-size: 14px; + color: rgba(0,0,0,0.75); + font-weight: 400; + padding: 0 0 0 5px; +} + diff --git a/assets/img/Untitled 1 (2).png b/assets/img/Untitled 1 (2).png new file mode 100644 index 0000000..0778d5a Binary files /dev/null and b/assets/img/Untitled 1 (2).png differ diff --git a/assets/js/navMobile.js b/assets/js/navMobile.js new file mode 100644 index 0000000..de8de30 --- /dev/null +++ b/assets/js/navMobile.js @@ -0,0 +1,15 @@ +document.querySelectorAll('.secMainNavInsideSecRightInsideBtnBurger').forEach(button => { + button.addEventListener('click', () => { + const mobileNav = document.querySelector('.secMainNavMobile'); + + if (mobileNav) { + if (mobileNav.classList.contains('secMainNavMobileShow')) { + mobileNav.classList.remove('secMainNavMobileShow'); + document.body.style.overflow = 'auto'; // Enable scroll + } else { + mobileNav.classList.add('secMainNavMobileShow'); + document.body.style.overflow = 'hidden'; // Disable scroll + } + } + }); +}); diff --git a/assets/js/popups.js b/assets/js/popups.js index 617786a..e4ba504 100644 --- a/assets/js/popups.js +++ b/assets/js/popups.js @@ -1,19 +1,41 @@ -// Function to handle loginBtn click -document.getElementById('loginBtn').addEventListener('click', function() { +// Function to show the popup +function showPopup() { var popupLogin = document.getElementById('popupLogin'); - popupLogin.style.display = 'flex'; - document.body.style.overflow = 'hidden'; // Disable scroll -}); - -// Function to handle popupMainInsideWrapperBoxTopBtn click -document.addEventListener('click', function(event) { - var clickedElement = event.target; - var popupMainInsideWrapperBoxTopBtn = document.querySelector('.popupMainInsideWrapperBoxTopBtn'); - - // Check if the clicked element or its parent elements match the target - if (popupMainInsideWrapperBoxTopBtn.contains(clickedElement)) { - var popupLogin = document.getElementById('popupLogin'); - popupLogin.style.display = 'none'; - document.body.style.overflow = ''; // Re-enable scroll + if (popupLogin) { + popupLogin.style.display = 'flex'; + document.body.style.overflow = 'hidden'; } -}); +} + +// Function to hide the popup +function hidePopup() { + var popupLogin = document.getElementById('popupLogin'); + var secMainNavMobileShow = document.querySelector('.secMainNavMobileShow'); + if (popupLogin) { + popupLogin.style.display = 'none'; + // Check if .secMainNavMobileShow is present before enabling scroll + if (!secMainNavMobileShow) { + document.body.style.overflow = ''; + } + } +} + +// Add event listeners to login buttons +for (let i = 0; i <= 10; i++) { // Assuming you have up to 10 login buttons + let btn = document.getElementById('loginBtn-' + i); + if (btn) { + btn.addEventListener('click', showPopup); + } +} + +// Also add an event listener for the base login button +let baseLoginBtn = document.getElementById('loginBtn'); +if (baseLoginBtn) { + baseLoginBtn.addEventListener('click', showPopup); +} + +// Add event listener to the popup close button +let closeButton = document.querySelector('.popupMainInsideWrapperBoxTopBtn'); +if (closeButton) { + closeButton.addEventListener('click', hidePopup); +} diff --git a/assets/js/premiumToggle.js b/assets/js/premiumToggle.js new file mode 100644 index 0000000..be21962 --- /dev/null +++ b/assets/js/premiumToggle.js @@ -0,0 +1,24 @@ +document.addEventListener('DOMContentLoaded', function () { + // Get all checkboxes with the class 'toggleMainCheckbox' + const checkboxes = document.querySelectorAll('.toggleMainCheckbox'); + + // Function to update the 'toggleMainBall' class based on the checkbox state + function updateBall(checkbox) { + const ball = checkbox.previousElementSibling; + if (checkbox.checked) { + ball.classList.add('toggleMainBallChecked'); + } else { + ball.classList.remove('toggleMainBallChecked'); + } + } + + checkboxes.forEach(function (checkbox) { + // Update the ball's state on page load + updateBall(checkbox); + + // Attach a change event listener to each checkbox + checkbox.addEventListener('change', function () { + updateBall(this); + }); + }); +}); diff --git a/assets/js/premiumTogglePackages.js b/assets/js/premiumTogglePackages.js new file mode 100644 index 0000000..22aca77 --- /dev/null +++ b/assets/js/premiumTogglePackages.js @@ -0,0 +1,19 @@ +document.querySelectorAll('.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckbox').forEach(radio => { + radio.addEventListener('change', () => { + document.querySelectorAll('.secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckbox').forEach(otherRadio => { + const parentDiv = otherRadio.closest('div'); + if (otherRadio.checked) { + parentDiv.classList.add('secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive'); + } else { + parentDiv.classList.remove('secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive'); + } + }); + }); + + // Initial check in case any radio is already checked + if (radio.checked) { + radio.closest('div').classList.add('secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive'); + } else { + radio.closest('div').classList.remove('secMBSI_DSMPremiumSecMidSubscribeBoxSecCheckboxWrapperActive'); + } +}); diff --git a/assets/js/priceChange.js b/assets/js/priceChange.js new file mode 100644 index 0000000..880113e --- /dev/null +++ b/assets/js/priceChange.js @@ -0,0 +1,54 @@ +document.addEventListener('DOMContentLoaded', () => { + const toggleCheckbox = document.querySelector('.toggleMainCheckbox'); + const secMBSI_DSMPremiumSecMidCardsInside = document.querySelector('.secMBSI_DSMPremiumSecMidCardsInside'); + + if (!secMBSI_DSMPremiumSecMidCardsInside) { + console.error('secMBSI_DSMPremiumSecMidCardsInside not found'); + return; + } + + const children = Array.from(secMBSI_DSMPremiumSecMidCardsInside.children); + if (children.length < 2) { + console.error('Not enough children in secMBSI_DSMPremiumSecMidCardsInside'); + return; + } + + const secondChild = children[1]; + const lastChild = children[children.length - 1]; + + function updateContent() { + const updateLastP = (card, h1Content, pContent) => { + const cardTop = card.querySelector('.secMBSI_DSMPremiumSecMidCardsCardTop'); + const lastP = cardTop.querySelectorAll('p').length > 0 ? cardTop.querySelectorAll('p')[cardTop.querySelectorAll('p').length - 1] : null; + const h1 = cardTop.querySelector('h1'); + + if (h1) { + h1.innerHTML = h1Content; + } + + if (lastP) { + lastP.innerHTML = pContent; + } + }; + + if (toggleCheckbox.checked) { + // Update second child + updateLastP(secondChild, '€300€250%16 off', '€25€20.83 per month for 12 months'); + + // Update last child + updateLastP(lastChild, '€180€150%16 off', '€15€12.5 per month for 12 months'); + + } else { + // Revert second child + updateLastP(secondChild, '€25', '€25 per month'); + + // Revert last child + updateLastP(lastChild, '€15', '€15 per month'); + } + } + + toggleCheckbox.addEventListener('change', updateContent); + + // Initial update based on the current checkbox state + updateContent(); +}); diff --git a/dashboard-complete.html b/dashboard-complete.html index 01d7cad..e5ff36b 100644 --- a/dashboard-complete.html +++ b/dashboard-complete.html @@ -15,6 +15,9 @@ + + + @@ -42,10 +45,62 @@ - Dashboard + Dashboard +
+
SettingsLogout
+
+ +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
@@ -434,8 +489,12 @@ + + + + diff --git a/dashboard-draft.html b/dashboard-draft.html index e304544..e732e4a 100644 --- a/dashboard-draft.html +++ b/dashboard-draft.html @@ -15,6 +15,9 @@ + + + @@ -42,10 +45,62 @@ - Dashboard
+ Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
@@ -608,8 +663,12 @@ + + + + diff --git a/dashboard-failed.html b/dashboard-failed.html index f1215de..7bb85d2 100644 --- a/dashboard-failed.html +++ b/dashboard-failed.html @@ -15,6 +15,9 @@ + + + @@ -428,8 +431,12 @@ + + + + diff --git a/dashboard-progress.html b/dashboard-progress.html index 7f91ab6..f18d4d1 100644 --- a/dashboard-progress.html +++ b/dashboard-progress.html @@ -15,6 +15,9 @@ + + + @@ -42,10 +45,62 @@ - Dashboard
+ Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
@@ -564,8 +619,12 @@ + + + + diff --git a/dashboard.html b/dashboard.html index ce36e19..7aca89e 100644 --- a/dashboard.html +++ b/dashboard.html @@ -15,6 +15,9 @@ + + + @@ -42,10 +45,62 @@ - Dashboard
+ Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
@@ -623,8 +678,12 @@ + + + + diff --git a/index.html b/index.html index 4c83c71..55e6916 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,9 @@ + + + @@ -42,10 +45,62 @@ - Dashboard
+ Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
@@ -258,8 +313,12 @@ + + + + diff --git a/loadingElement.html b/loadingElement.html index b002e2a..cce4436 100644 --- a/loadingElement.html +++ b/loadingElement.html @@ -15,6 +15,9 @@ + + + @@ -33,7 +36,7 @@
-

Loading...

+

Loading...

@@ -44,8 +47,12 @@ + + + + diff --git a/notifications.html b/notifications.html index d41d7fd..4de1d2b 100644 --- a/notifications.html +++ b/notifications.html @@ -15,6 +15,9 @@ + + + @@ -42,10 +45,62 @@ - Dashboard + Dashboard +
+
SettingsLogout
+
+ +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
@@ -172,8 +227,12 @@ + + + + diff --git a/premium.html b/premium.html index bd49946..d82010b 100644 --- a/premium.html +++ b/premium.html @@ -15,6 +15,9 @@ + + + @@ -23,6 +26,16 @@ +
+
+
+

You're currently using the free version of SIGit. Subscribe, add your own Blossom server, or self-host to enjoy the full benefits of SIGit.

+
+
+
@@ -42,17 +55,222 @@ - Dashboard
+ Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
-
-
+
+
+

SIGit Premium

+

The best way to experience signing documents and files, without worrying about the technical details.

+
+
+
+

Benefits

+
+
+
+
+

Expanded Creations & Storage Limits

+

Enjoy an expanded limit of 800 to 1,000 SIGit creations per month.

+
+
+

Expedited & Enhanced Quality Support

+

Benefit from a faster response to support tickets/enquiries.

+
+
+

Email & Notification Reminders

+

Get reminded of what you need to sign and who must sign next.

+
+
+
+
+
+
+

Packages

+
+
+
+
+
+
+
+
+
+
+
+

Free

+

€0

+

No need to pay

+
+
+

Email account

+

One file upload/creation

+

File upload size limit of 5 MB

+

File storage up to 3 months

+

Unlimited co-signers

+

reminder ()

+

Passing support

+
+
+
+
+
+

Gold

+

€300€250%16 off

+

€25€20.83 per month for 12 months

+
+
+

Email account

+

1,000 SIGit creations per month

+

File upload size limit of 100 MB

+

File storage up to 5 years

+

Unlimited co-signers

+

reminder ()

+

VIP support

+
+
Subscribe
+
+
+
+

Silver

+

€180€150%16 off

+

€15€12.5 per month for 12 months

+
+
+

Email account

+

800 SIGit creations per month

+

File upload size limit of 50 MB

+

File storage up to 5 years

+

Unlimited co-signers

+

reminder ()

+

Personal support

+
+
Subscribe
+
+
+
+
+
+
+

Self-Hostable

+
+
+

SIGit is an open-source project, as such you can self-host this project on your machine and set it up to a point where there's no limitations, for free. Other than that, you could also add your own Blossom server (in the settings page) to enjoy an expanded free experience without subscribing (the only thing you'd miss out on is email reminders/notifications).

+
+
+
+
+
+
+
+
+

Subscribe

+
+
+
+
+
+

Choose your subscription package

+
+
+

Gold Package

+

Enjoy the best possible experience at the most cost effective price.

+
+
+

Silver Package

+

Enjoy a balanced experience at a more reasonable price.

+
+
+
+

Subscription period: Yearly

+
+
+
+
+
+

Price: €250

+
+
+

Subscription type: Recuring

+
+
+
+
+
+
+

Subscribe by scanning this QR code with your Lightning Wallet

+
+

Or by using your LN Wallet browser extension

+
+

Notice

+

For a recuring subscription, you'd need a NWC enabled Lightning wallet. Suggestions: LifPay, Alby 

+
+
+
+
+
+
@@ -91,8 +309,12 @@ + + + + diff --git a/settings-account.html b/settings-account.html new file mode 100644 index 0000000..07e8e46 --- /dev/null +++ b/settings-account.html @@ -0,0 +1,187 @@ + + + + + + + SIGit + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
+
+
+
+
+
+
+

Settings

+
+
+
+
+ + + Profile + + + Account + + + Subscribetion + + + Relays + + + Servers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+

SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser.

+
nostr logo
+
+
+
+
+
+
+
+
+

Built by Nostr Dev 2024.

+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/settings-profile.html b/settings-profile.html new file mode 100644 index 0000000..98eec4a --- /dev/null +++ b/settings-profile.html @@ -0,0 +1,203 @@ + + + + + + + SIGit + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
+
+
+
+
+
+
+

Settings

+
+
+
+
+ + + Profile + + + Account + + + Subscribetion + + + Relays + + + Servers
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+

SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser.

+
nostr logo
+
+
+
+
+
+
+
+
+

Built by Nostr Dev 2024.

+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/settings-relays.html b/settings-relays.html new file mode 100644 index 0000000..d1f03dc --- /dev/null +++ b/settings-relays.html @@ -0,0 +1,191 @@ + + + + + + + SIGit + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
+
+
+
+
+
+
+

Settings

+
+
+
+
+ + + Profile + + + Account + + + Subscribetion + + + Relays + + + Servers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+

SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser.

+
nostr logo
+
+
+
+
+
+
+
+
+

Built by Nostr Dev 2024.

+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/settings-servers.html b/settings-servers.html new file mode 100644 index 0000000..8d0728a --- /dev/null +++ b/settings-servers.html @@ -0,0 +1,186 @@ + + + + + + + SIGit + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
+
+
+
+
+
+
+

Settings

+
+
+
+
+ + + Profile + + + Account + + + Subscribetion + + + Relays + + + Servers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+

SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser.

+
nostr logo
+
+
+
+
+
+
+
+
+

Built by Nostr Dev 2024.

+
+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/settings-sub.html b/settings-sub.html new file mode 100644 index 0000000..3ff5685 --- /dev/null +++ b/settings-sub.html @@ -0,0 +1,196 @@ + + + + + + + SIGit + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + Dashboard +
+
SettingsLogout
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+ + + Dashboard + + + Settings
+
+ + + Logout
+
+
+
+
+
+
+
+

Settings

+
+
+
+
+ + + Profile + + + Account + + + Subscribetion + + + Relays + + + Servers
+
+
+
+
+
+

Subscribed

+
+
+

Gold

+
+
+

Recurring

+
+
+
Subscribe
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+

SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser.

+
nostr logo
+
+
+
+
+
+
+
+
+

Built by Nostr Dev 2024.

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