libsoc/site-libsoc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
a-ill
2023-07-04 19:21:15 +03:00
parent 0fee9d91df
commit 3515603e93
44 changed files with 2769 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
Server/app/svelte/src/compass-component.svelte Normal file
View File

@@ -0,0 +1,203 @@
<svelte:options tag="compass-component" />
<script>
// Import statements
import { onMount } from 'svelte'
import { writable } from 'svelte/store';
import { loadLocaleContent } from "/js/libraries/serverTools.js"
// Import components
// Main code
let loaded
let content = writable({})
let locale = loadLocaleContent(content,"compass-component",loaded)
let qTag = 0
let answers = []
let capitalismScore = ""
let vanguardismScore = ""
let socialismScore = ""
function next(i) {
if (answers[i]!=undefined) {
if (qTag < $content.qs.length) {
if (qTag==($content.qs.length-1)) {
capitalismScore = Math.round(answers.map(x => x.includes("C")).filter(Boolean).length*100/answers.length).toString()
vanguardismScore = Math.round(answers.map(x => x.includes("V")).filter(Boolean).length*100/answers.length).toString()
socialismScore = Math.round(answers.map(x => x.includes("LS")).filter(Boolean).length*100/answers.length).toString()
}
qTag = qTag + 1
}
}
}
function back(i) {
if (qTag!=0) {
qTag = qTag - 1
}
}
onMount(() => {
})
/**/
</script>
{#key loaded}
{#if Object.keys($content).length!=0}
<div id="container">
<div id="text-container">
<h1>{$content.heading}</h1>
<img id="compass-img" src="/img/common/compass.svg" alt="compass">
{#key qTag}
{#if qTag!=$content.qs.length}
<p>{$content.qs[qTag].q}</p>
<div class="quiz-inputs">
{#each $content.qs[qTag].as as a,i}
<div class="radio-container">
<input type="radio" id={"option"+i} bind:group={answers[qTag]} name="options" value={a[1]}>
<button on:click={() => answers[qTag] = a[1]} class="input-label" for={"option"+i}>{a[0]}</button>
</div>
{/each}
</div>
<button on:click={() => back(qTag)} class="quiz-buttons">back</button><button on:click={() => next(qTag)} class="quiz-buttons">next</button>
{:else}
<p>You are compatible with ...</p>
<ul class="results-list">
<li>capitalism by <span>{capitalismScore}</span>%</li>
<li>vanguardism by <span>{vanguardismScore}</span>%</li>
<li>libertarian socialism by <span>{socialismScore}</span>%</li>
</ul>
<button on:click={() => back(qTag)} class="quiz-buttons">back</button>
{/if}
{/key}
</div>
</div>
{/if}
{/key}
<style>
@import '/css/common.css';
.results-list {
margin-left: 2rem;
margin-bottom: 2rem;
}
.results-list li {
margin-bottom: 0.5rem;
}
.radio-container {
display: grid;
grid-template-columns: min-content auto;
margin-bottom: 1rem;
}
.quiz-inputs {
position: relative;
margin-bottom: 2rem;
}
.quiz-inputs input {
position: relative;
top: -0.1rem;
height: 1.2rem;
width: 1.2rem;
margin: auto;
accent-color: #DD1C1A;
cursor: pointer;
}
.quiz-inputs button {
font-family: var(--serif,serif);
font-size: 1.15rem;
margin-left: 1rem;
position: relative;
top: -0.2rem;
text-align: left;
}
.quiz-buttons:nth-of-type(1) {
margin-right: 2rem;
}
.quiz-buttons {
font-size: 1.3rem;
color: white;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #5B6970;
border-radius: 1rem;
}
#compass-img {
position: absolute;
width: 9rem;
left: 50%;
transform: translate(-50%);
z-index: 0;
opacity: 0.2;
}
#text-container>:nth-child(3) {
margin-top: 8rem;
}
h4 {
margin-bottom: 2rem;
}
.location-info {
position: relative;
margin-bottom: 2rem;
}
.location-info p {
margin-bottom: 0;
}
a {
color: #DD1C1A;
}
#map {
--height: 30rem;
--width: 100%;
--margin-bottom: 3rem;
}
#text-container {
max-width: calc(100vw - 4rem);
margin: auto;
}
h1 {
margin-bottom: 1rem;
font-size: 2.2rem;
text-align: center;
}
h3 {
margin-bottom: 1rem;
}
#container {
margin: auto;
max-width: 800px;
margin-top: 1rem;
margin-bottom: 4rem;
}
#container>div>p {
margin-bottom: 1rem;
}
#container p {
text-align: justify;
}
</style>

10
Server/app/svelte/src/footer/footer-component.svelte
View File

@@ -25,7 +25,7 @@
<h2>{$content.contactUs}</h2>
<!--<p>Email: <a href="mailto:info@chiron.com">info@libsoc.org</a></p>-->
<p>WhatsApp: <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer style="margin-left: 0.5rem;">{$content.inviteLink}</a></p>
<p>Discord: <a href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer style="margin-left: 2rem;">{$content.inviteLink}</a></p>
<p>Discord: <a href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer style="margin-left: 1.8rem;">{$content.inviteLink}</a></p>
</div>
</div>
<button on:click={() => {location.href='#'}} id="footer-up" aria-label="go up">
@@ -86,7 +86,7 @@ footer p, footer a {
footer h2 {
color: #ffffff;
font-size: 1.4rem;
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
@@ -110,19 +110,19 @@ footer h2 {
#tag-line {
position: relative;
margin: auto;
font-size: 1.2rem;
font-size: 1.1rem;
text-align: center;
padding-bottom: 1rem;
}
footer a {
font-size: 1.2rem;
font-size: 1.1rem;
color: #ffffff;
}
footer p, footer label {
display: block;
font-size: 1.2rem;
font-size: 1.1rem;
color: #d8d8d8;
font-family: var(--sans-serif,sans-serif);
margin-bottom: 0.5rem;