Merge pull request #77 from acmauth/AboutFAQ

About Us and FAQ pages are done

src/lib/components/about/about.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  
+  let personal_links = [
+    "https://github.com/TolisSth",
+    "https://www.linkedin.com/in/christos-balaktsis/",
+    "https://github.com/dangelidou",
+    "https://github.com/Kostaga",
+    "https://github.com/VirtualVirtuosoV1",
+    "https://gr.linkedin.com/in/myrto-gkogkou-67b004260",
+    "https://www.linkedin.com/in/neronmkp/",
+    "https://github.com/VasilisMicha"
+  ];
+
+  // Define a writable store for team members
+  const teamMembers = writable([]);
+  
+  // Function to fetch team members from the GitHub Markdown file
+  async function fetchTeamMembers() {
+    try {
+      const response = await fetch('https://raw.githubusercontent.com/acmauth/StudentCompanion/dev/README.md');
+      const markdownText = await response.text();
+
+      // Regular expression to match the table containing team members
+      const regex = /<table>(.*?)<\/table>/gs;
+      const tableMatch = regex.exec(markdownText);
+      if (!tableMatch) {
+        throw new Error('Table not found in the Markdown file');
+      }
+
+      // Regular expression to extract image URLs and names from table rows
+      const memberRegex = /<img src="(.*?)" .*?alt="(.*?)"\/>/g;
+      let members = [];
+      let match;
+      while ((match = memberRegex.exec(tableMatch[1])) !== null) {
+        members.push({ imageUrl: match[1], name: match[2] });
+      }
+
+      // Update the teamMembers store with the fetched data
+      teamMembers.set(members);
+    } catch (error) {
+      console.error('Error fetching team members:', error);
+    }
+  }
+
+  // Fetch team members on component mount
+  onMount(fetchTeamMembers);
+</script>
+
+<ion-content class="ion-padding">
+<div>
+<!-- About Us Card -->
+<div class="about-card">
+  <div class="card-content">
+    <!-- Introduction -->
+    <div class="section">
+      <h2 class="section-title">Ποιοι είμαστε</h2>
+      <p style="font-size: 14px;">Γεια χαρά! Χαιρόμαστε πολύ που χρησιμοποιείς το Aristomate, την εφαρμογή που φτιάχτηκε από φοιτητές για φοιτητές! <br> <br>
+        Οκτώ φοιτητές από την ομάδα της <a href="https://auth.acm.org/">ACM AUTh</a> διαπιστώσαμε ότι στο χάος της καθημερινότητας ενός φοιτητή, ένας “ψηφιακός φίλος” που συγκεντρώνει την ακαδημαϊκή του εμπειρία σε ένα και μοναδικό σημείο είναι χρήσιμος για την επιβίωσή του. 
+        </p>
+    </div>          
+
+    <!-- Meet the Team -->
+    <div class="section">
+      <h2 class="section-title">Γνώρισε την ομάδα μας</h2>
+        <!-- Use reactive statement to update UI when teamMembers changes -->
+        {#each $teamMembers as member, index}
+          <ion-card href={personal_links[index]}>
+            <ion-card-content class="team-card-content">
+              <div class="member-info">
+                <ion-avatar slot="start">
+                  <img src={member.imageUrl} alt={member.name}>
+                </ion-avatar>
+                <h3 class="member-name">{member.name}</h3>
+              </div>
+            </ion-card-content>
+          </ion-card>
+        {/each}
+    </div>
+
+    <!-- Mission Statement -->
+    <div class="section">
+      <h2 class="section-title">Η αποστολή μας</h2>
+      <p style="font-size: 14px;">Στόχος μας είναι να διευκολύνουμε τους φοιτητές του πανεπιστημίου τόσο στη γρηγορότερη ενημέρωσή τους πάνω στα μαθήματα και την πρόοδό τους, όσο και στην ευκολότερη φοιτητική “επιβίωση”.</p>
+    </div>
+
+    <!-- Contact Information -->
+    <div class="section">
+      <h2 class="section-title">Βρες μας</h2>
+      <div class="social-icons">
+        <a href="https://www.facebook.com/acmauth" target="_blank">
+          <img src="src/lib/assets/facebook.svg" alt="Facebook" class="social-icon facebook">
+        </a>
+        <a href="https://www.instagram.com/acmauth/" target="_blank">
+          <img src="src/lib/assets/instagram.svg" alt="Instagram" class="social-icon instagram">
+        </a>
+        <a href="https://github.com/acmauth/StudentCompanion" target="_blank">
+          <img src="src/lib/assets/github.svg" alt="GitHub" class="social-icon github">
+        </a>
+        <a href="https://www.linkedin.com/company/acm-auth-student-chapter/" target="_blank">
+          <img src="src/lib/assets/linkedin.svg" alt="LinkedIn" class="social-icon linkedin">
+        </a>
+        <a href="https://discord.gg/dUYrkbEj7q" target="_blank">
+          <img src="src/lib/assets/discord.svg" alt="Discord" class="social-icon discord">
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</ion-content>
+
+<style>
+/* Custom styles */
+.card-content {
+  padding: 20px;
+}
+
+.section {
+  margin-bottom: 30px;
+  align-items: flex-start;
+}
+
+.section-title {
+  color: var(--ion-color-primary);
+}
+
+
+.member-info {
+  display: flex;
+  align-items: center;
+}
+
+.member-name {
+  margin-left: 10px; /* Adjust as needed */
+}
+
+.social-icons {
+display: flex;
+justify-content: center;
+align-items: center;
+margin-top: 10px;
+}
+
+.social-icon {
+  width: 40px; /* Adjust the size of the icons */
+  height: 40px;
+  margin: 0 15px;
+  transition: transform 0.3s ease; /* Smooth transition on hover */
+}
+
+.social-icon:hover {
+  transform: scale(1.2); /* Increase size on hover */
+}
+
+
+</style>
+

src/lib/components/faq/faq.svelte

@@ -0,0 +1,46 @@
+<script lang="ts"> 
+    import { onMount } from 'svelte';   
+
+    let faqs = [
+        { id: 1, title: "Είναι ασφαλή τα δεδομένα μου;", answer: "Η φιλοσοφία μας είναι: ό,τι γίνεται στη συσκευή σου, μένει στη συσκευή σου. Αναπτύξαμε την εφαρμογή με μεθόδους και τεχνολογίες που διατηρούν τα δεδομένα σου ασφαλή και μόνο δικά σου. Τα στοιχεία σύνδεσης, τα προσωπικά δεδομένα και οι επιδόσεις σου είναι προσβάσιμα μόνο από εσένα και τις επίσημες υπηρεσίες του ΑΠΘ \(students.auth.gr, elearning.auth.gr κ.α.)."},
+        { id: 2, title: "Πώς η εφαρμογή διαχειρίζεται τα δεδομένα μου;", answer: "Η εφαρμογή αποτελεί ένα συνεχώς αναπτυσσόμενο ανοιχτό λογισμικό. Ολόκληρος ο κώδικας είναι πάντα διαθέσιμος online <a href=https://github.com/acmauth/StudentCompanion>εδώ</a>, όπου μπορείς να τον μελετήσεις και να προτείνεις αλλαγές ή επεκτάσεις."},
+        { id: 3, title: "Γιατί να χρησιμοποιήσω το Aristomate;", answer: "Η εφαρμογή αναπτύχθηκε για να καλύψει μια μεγάλη και προβληματική έλλειψη ολοκλήρωσης στα πληροφοριακά συστήματα του πανεπιστημίου. Δεν είναι κουραστικό να επισκέπτεσαι άλλη ιστοσελίδα για τους βαθμούς και τα στατιστικά σου και άλλη σελίδα για να ελέγξεις αν ανακοινώθηκε κάτι σε ένα μάθημα; Με το Aristomate η εναλλαγή αυτή γίνεται με το πάτημα ενός μόλις κουμπιού!"},
+        { id: 4, title: "Τι μπορώ να κάνω με το Aristomate;", answer: "<ul><li>Προβολή αναλυτικής βαθμολογίας και στατιστικών επιδόσεων μαθημάτων</li><li>Πρόβλεψη μεταβολής μέσου όρου με βάση προσωπικές εκτιμήσεις βαθμολογιών</li><li>Προβολή προγράμματος διαλέξεων και εξετάσεων</li><li>Δημιουργία προγράμματος μαθημάτων, προόδων και εργασιών</li><li>Προβολή μενού φοιτητικής λέσχης</li><li>Προβολή χάρτη του campus</li><li>Προβολή πληροφοριών φοιτητή</li><li>Προβολή ενημερώσεων από students.auth.gr και elearning.auth.gr</li><li>Προβολή χρήσιμων υπερσυνδέσμων προς ιστοτόπους του ΑΠΘ</li></ul>" },
+        { id: 5, title: "Μπορώ να προτείνω κάτι για την εφαρμογή;", answer: "Εννοείται! Θα χαρούμε να ακούσουμε τις ιδέες σου, μπορείς να μας στείλεις ένα μέιλ στο <a href='mailto:aristomate@auth.acm.org'>aristomate@auth.acm.org</a> ή να γίνεις και μέλος του chapter της acm για να τα συζητήσουμε και από κοντά! " },
+        { id: 6, title: "Μπορώ να κάνω δήλωση μαθημάτων ή υποβολή εργασιών;", answer: "Δυστυχώς, δεν είναι ακόμη δυνατή η δήλωση μαθημάτων ή η υποβολή εργασιών μέσω της εφαρμογής. Παράμεινε συντονισμένος για ενημερώσεις!" },
+        { id: 7, title: "Εντόπισα λάθος στα δεδομένα της εφαρμογής. Τι κάνω; ", answer: "Οι πληροφορίες για τα μαθήματα, τις επιδόσεις σου και τα προσωπικά σου στοιχεία λαμβάνονται από κατάλληλα συστήματα του ΑΠΘ. Η διαλειτουργικότητα μεταξύ συστημάτων πάντα ενέχει την πιθανότητα ελλείψεων ή παραλλαγμένης παρουσίασης των δεδομένων. Αν σε προβληματίζει κάτι που βλέπεις στην εφαρμογή, βασίσου στις πληροφορίες που παρουσιάζονται online απευθείας από το πανεπιστήμιο. Ωστόσο, θα μας βοηθούσε πολύ να επικοινωνήσεις μαζί μας στο <a href='mailto:aristomate@auth.acm.org'>aristomate@auth.acm.org</a> για να μας περιγράψεις το πρόβλημα!" },
+    ];
+
+    function toggleFullTitle(faq) {
+    faq.showFullTitle = !faq.showFullTitle;
+  }
+
+    onMount(() => {
+        faqs.forEach(faq => {
+        const answerDiv = document.getElementById(`faq-answer-${faq.id}`);
+        answerDiv.innerHTML = faq.answer;
+        });
+    });
+</script>
+
+<!-- FAQ.svelte -->
+<ion-content class="ion-padding">
+    <ion-accordion-group expand="inset">
+        {#each faqs as faq}
+            <ion-accordion value={faq.id.toString()}>
+            <ion-item slot="header" color="light" style="padding: 0;">
+                <ion-text style="display: block; font-size: 15px;">{faq.title}</ion-text>
+            </ion-item>
+            <div class="ion-padding" slot="content" style="font-size: 15px;">
+                <div id="faq-answer-{faq.id}" class="faq-answer"></div>
+            </div>
+            </ion-accordion>
+        {/each}
+        </ion-accordion-group>       
+</ion-content>
+
+
+<style>
+
+</style>
+

src/lib/components/personalInfo/settings.svelte

@@ -10,7 +10,7 @@
 <ion-card>
 	<ion-card-content>
 
-		<ion-item button>
+		<ion-item button href="/about">
 			<ion-icon size="small" icon={allIonicIcons.people} />
 			<ion-label class="ion-padding-start">Σχετικά με εμάς</ion-label>
 			<ion-icon size="small" icon={allIonicIcons.chevronForwardCircle} />
@@ -23,7 +23,7 @@
 			<ion-icon size="small" icon={allIonicIcons.chevronForwardCircle} />
 		</ion-item> -->
 
-		<ion-item button>
+		<ion-item button href="/faq">
 			<ion-icon size="small" icon={allIonicIcons.helpCircle} />
 			<ion-label class="ion-padding-start">FAQ</ion-label>
 			<ion-icon size="small" icon={allIonicIcons.chevronForwardCircle} />

src/routes/+page.svelte

@@ -32,6 +32,7 @@
     <ion-spinner name="dots" color="secondary" style="scale: 150%;"/>
 </ion-grid>
 
+
 <style>
 	ion-grid {
 		&.center-grid {
@@ -44,4 +45,5 @@
 	.pop-up-image {
 		transition: all ease-in-out 0.2s;
 	}
-</style>
+</style>
+

src/routes/about/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	import About from '$components/about/about.svelte';
+	import SubPageHeader from '$shared/subPageHeader.svelte';
+</script>
+
+<SubPageHeader title="Σχετικά με εμάς" />
+<About />

src/routes/faq/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	import FAQ from '$components/faq/faq.svelte';
+	import SubPageHeader from '$shared/subPageHeader.svelte';
+</script>
+
+<SubPageHeader title="FAQ" />
+<FAQ />