text:
<repo_name>marcelohenrique/notas<file_sep>/README.md
# notas

http://marcelohenrique.github.io/notas/<file_sep>/js/index.js
$( document ).ready( function() {
   var $table = $( '#resultado' );
   $table.floatThead();
} );

function calcular() {
   var geraisQuestoes = parseInt( $( '#geraisQuestoes' ).val() );
   var geraisPeso = parseInt( $( '#geraisPeso' ).val() );
   var geraisMedia = parseFloat( $( '#geraisMedia' ).val() );
   var geraisDesvio = parseFloat( $( '#geraisDesvio' ).val() );

   var espQuestoes = parseInt( $( '#espQuestoes' ).val() );
   var espPeso = parseInt( $( '#espPeso' ).val() );
   var espMedia = parseFloat( $( '#espMedia' ).val() );
   var espDesvio = parseFloat( $( '#espDesvio' ).val() );

   var notaCorte = parseInt( $( '#notaCorte' ).val() );

   // geraisQuestoes = 30;
   // geraisPeso = 1;
   // geraisMedia = 15.94;
   // geraisDesvio = 4.48;
   //
   // espQuestoes = 50;
   // espPeso = 2;
   // espMedia = 19.33;
   // espDesvio = 6.55;
   //
   // notaCorte = 180;

   var notasConcurso = [];
   $( '#notas' ).val().split( '\n' ).forEach( function( e, i ) {
      notasConcurso.push( parseFloat( e ).toFixed( 2 ) );
   } );
   notasConcurso.sort( function( a, b ) {
      return b - a;
   } );
   // notasConcurso =
   // '236.38\n228.65\n224.18\n219.49\n208.10\n206.90\n207.50\n206.67'
   // .split( '\n' );

   $( '#resultado > tbody' ).remove();
   $( '#resultado' ).append( '<tbody>' );

   var notasGeradas = [];
   for ( i = geraisQuestoes; i > 0; i-- ) {
      for ( j = espQuestoes; j > 0; j-- ) {

         notasGeradas.push( new Nota( i, geraisPeso, geraisMedia, geraisDesvio,
               j, espPeso, espMedia, espDesvio ) );

      }
   }

   notasGeradas.sort( function( n1, n2 ) {
      return n1.notaTotal - n2.notaTotal;
   } );
   notasGeradas.reverse();

   var cont = 0;
   for ( i = 0; i < notasGeradas.length; i++ ) {
      var notaGerada = notasGeradas[ i ];

      var linha = $( '<tr>' );
      // #
      var notaSelecionada = ( cont < notasConcurso.length )
            && ( notaMaisProxima( parseFloat( notasConcurso[ cont ] ).toFixed(
                  2 ), notasGeradas, i ) );
      if ( notaSelecionada ) {

         var classificacao = '' + ++cont;
         var mais = false;
         while ( ( cont < notasConcurso.length )
               && ( notaMaisProxima( parseFloat( notasConcurso[ cont ] )
                     .toFixed( 2 ), notasGeradas, i ) ) ) {
            cont++;
            mais = true;
            // console.log(cont + ' - '
            // + parseFloat(notasGeradas[i + 1].notaTotal).toFixed(2)
            // + ' - '
            // + parseFloat(notasConcurso[cont - 1]).toFixed(2));
         }
         if ( mais ) {
            classificacao += ' - ' + cont;
         }
         linha.append( coluna( classificacao ) );
         linha.addClass( 'success' );
      } else {
         linha.append( coluna( '' ) );
      }

      // Acertos Gerais
      linha.append( coluna( notaGerada.questaoGeral ) );
      // Acertos Específica
      linha.append( coluna( notaGerada.questaoEspecifica ) );
      // Acertos Total
      linha.append( coluna( ( 1 * notaGerada.questaoGeral )
            + ( 1 * notaGerada.questaoEspecifica ) ) );
      // Pontos Gerais
      linha.append( coluna( notaGerada.questaoGeral * geraisPeso ) );
      // Pontos Específica
      linha.append( coluna( notaGerada.questaoEspecifica * espPeso ) );
      // Pontos Total
      linha.append( coluna( ( notaGerada.questaoGeral * geraisPeso )
            + ( notaGerada.questaoEspecifica * espPeso ) ) );
      // Nota Gerais
      linha.append( coluna( notaGerada.notaGeral ) );
      // Nota Específicas
      linha.append( coluna( notaGerada.notaEspecifica ) );
      // Nota Total
      linha.append( coluna( notaGerada.notaTotal ) );
      // Nota Cand.
      if ( notaSelecionada ) {
         linha.append( coluna( parseFloat( notasConcurso[ cont - 1 ] ).toFixed(
               2 ) ) );
      } else {
         linha.append( coluna( '' ) );
      }

      if ( notaGerada.notaTotal < notaCorte ) {
         linha.addClass( 'danger' );
      }

      $( '#resultado > tbody:last-child' ).append( linha );
   }
   mostrar();
}

function mostrar() {
   var mostrarTudo = $( '#mostrarTudo:checked' ).val() == undefined ? false
         : true;
   if ( mostrarTudo ) {
      $( '#resultado > tbody > tr[class!=success]' ).show();
   } else {
      $( '#resultado > tbody > tr[class!=success]' ).hide();
   }
}

function coluna( valor ) {
   return $( '<td>' ).text( valor );
}

function notaMaisProxima( nota, notasGeradas, i ) {
   var proximaNota = parseFloat( notasGeradas[ i + 1 ].notaTotal ).toFixed( 2 );

   if ( proximaNota < nota ) {

      var notaMaior = parseFloat( notasGeradas[ i ].notaTotal ).toFixed( 2 );
      var distanciaNotaMaior = notaMaior - nota;
      var distanciaNotaMenor = nota - proximaNota;

      if ( distanciaNotaMaior < distanciaNotaMenor ) {
         return true;
      }
   }
   return false;
}

repo_name: marcelohenrique/notas


text:
<file_sep>import labels from "./labels";

const projects = {
    fr: [
        {
            id: "1fe826f1-7e0c-40e2-b1ca-17df02beff87",
            title_key: "Oreus",
            description_key: "Oreus est une entreprise de développement de logiciels aidant les entrepreneurs à lancer leurs activités en ligne.",
            preview: "images/projects/oreus",
            url: "https://oreus.ca",
            status: "active",
            score: 90,
            release_date: new Date(2021, 6, 15),
            labels: [
                labels.software,
                labels.design,
                labels.entrepreneurship,
                labels.strategy,
                labels.seo,
            ]
        },
        {
            id: "<PASSWORD>",
            title_key: "Pinax",
            description_key: "PINAX est une entreprise facilitant l'accès aux données de la blockchain.",
            preview: "images/projects/pinax",
            url: "https://pinax.network",
            status: "active",
            score: 85,
            release_date: new Date(2023, 8, 14),
            labels: [
                labels.software,
                labels.design,
                labels.strategy,
                labels.seo,
            ]
        },
        {
            id: "e073c4f4-7ffe-4880-993a-59ced7f7b144",
            title_key: "Spyglass",
            description_key: "Spyglass est un outil de repérage de traces de transactions (non traitées) de la blockchain.",
            preview: "images/projects/spyglass",
            url: "https://spyglass.network",
            status: "active",
            score: 80,
            release_date: new Date(2023, 3, 12),
            labels: [
                labels.software,
                labels.design,
            ]
        },
        {
            id: "a2e03332-8117-4e2a-a721-dc9078101849",
            title_key: "Ergotera",
            description_key: "Ergotera est une organisation cherhant à améliorer l'accès aux technologies aux personnes handicapées.",
            preview: "images/projects/ergotera",
            url: "https://ergotera.dominicfournier.com",
            github: "https://github.com/Ergotera",
            status: "inactive",
            score: 60,
            release_date: new Date(2018, 4, 7),
            labels: [
                labels.software,
                labels.entrepreneurship,
                labels.design,
            ]
        },
        {
            id: "<PASSWORD>",
            title_key: "Portfolio 2020",
            description_key: "Voici le portfolio qui a précédé celui-ci.",
            preview: "images/projects/old_portfolio",
            url: "https://portfolio2020.dominicfournier.com",
            github: "https://github.com/DominicF96/Portfolio2020",
            status: "inactive",
            score: 70,
            release_date: new Date(2020, 2, 30),
            labels: [
                labels.software,
                labels.design,
            ]
        },
        {
            id: "<PASSWORD>",
            title_key: "Focus",
            description_key: "Focus est un Bot Discord offrant divers outils de productivité ainsi qu'un système de récompense.",
            preview: "images/projects/focus",
            url: "https://focus.dominicfournier.com",
            github: "https://github.com/DominicF96/focus-app-website",
            status: "inactive",
            score: 55,
            release_date: new Date(2020, 6, 15),
            labels: [
                labels.software,
                labels.design,
            ]
        }
    ],
    en: [
        {
            id: "1fe826f1-7e0c-40e2-b1ca-17df02beff87",
            title_key: "Oreus",
            description_key: "Oreus is a software development company helping entrepreneurs launch their online business.",
            preview: "images/projects/oreus",
            url: "https://oreus.ca",
            status: "active",
            score: 90,
            release_date: new Date(2021, 6, 15),
            labels: [
                labels.software,
                labels.entrepreneurship,
                labels.design,
            ]
        },
        {
          id: "3<PASSWORD>-<PASSWORD>",
          title_key: "Pinax",
          description_key: "Pinax is a company facilitating access to blockchain data.",
          preview: "images/projects/pinax",
          url: "https://pinax.network",
          status: "active",
          score: 85,
          release_date: new Date(2023, 8, 14),
          labels: [
              labels.software,
              labels.design,
          ]
      },
      {
          id: "e073c4f4-7ffe-4880-993a-59ced7f7b144",
          title_key: "Spyglass",
          description_key: "Spyglass is a tool for tracking traces of (untreated) transaction of the blockchain.",
          preview: "images/projects/spyglass",
          url: "https://spyglass.network",
          status: "active",
          score: 80,
          release_date: new Date(2023, 3, 12),
          labels: [
              labels.software,
              labels.design,
          ]
      },
        {
            id: "a2e03332-8117-4e2a-a721-dc9078101849",
            title_key: "Ergotera",
            description_key: "Ergotera is an organization aiming at facilitating access to technologies for handicaped people.",
            preview: "images/projects/ergotera",
            url: "https://ergotera.dominicfournier.com",
            github: "https://github.com/Ergotera",
            status: "inactive",
            score: 60,
            release_date: new Date(2018, 4, 7),
            labels: [
                labels.software,
                labels.entrepreneurship,
                labels.design,
            ]
        },
        {
            id: "60f6e94d-6539-4ecf-9211-67cd15366fff",
            title_key: "Portfolio 2020",
            description_key: "This was my portfolio prior to this one.",
            preview: "images/projects/old_portfolio",
            url: "https://portfolio2020.dominicfournier.com",
            github: "https://github.com/DominicF96/Portfolio2020",
            status: "inactive",
            score: 70,
            release_date: new Date(2020, 2, 30),
            labels: [
                labels.software,
                labels.design,
            ]
        },
        {
            id: "2ba5da6e-0c45-46b3-afd6-aadc70f4bee6",
            title_key: "Focus",
            description_key: "Focus is a Discord bot providing various productivity tools and a reward system.",
            preview: "images/projects/focus",
            url: "https://focus.dominicfournier.com",
            github: "https://github.com/DominicF96/focus-app-website",
            status: "inactive",
            score: 55,
            release_date: new Date(2020, 6, 15),
            labels: [
                labels.software,
                labels.design,
            ]
        }
    ]
}

export default projects;<file_sep>import React from 'react';
import styles from './ArticlePreview.module.scss';
import { useTranslation } from 'next-i18next';
import { Row, Col } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGlobe } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import ToggleLabel from '../../common/ToggleLabel/ToggleLabel';

const ArticlePreview = ({ article }) => {

  const { i18n, t } = useTranslation('blog');

  return (

      <Row>
        <Col xs="12">
          <div className={styles.ArticlePreviewImgBG} style={{ backgroundImage: `url(/images/blog/${article.id}.jpg)` }}>

        </Col>
        <Col xs="12">

{t(article.title_key)}

{t(article.description_key)}

{new Date(article.release_date).toLocaleDateString(i18n.language, {
              year: 'numeric',
              month: 'long',
              day: 'numeric'
            })}

            {article.url ? <FontAwesomeIcon color="#c6538c" icon={faGlobe} size="2x" /> : null}

        </Col>
      </Row>

  );
}

ArticlePreview.propTypes = {};

ArticlePreview.defaultProps = {};

export default ArticlePreview;
<file_sep>import React from 'react';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

import Layout from '../../../components/common/Layout/Layout';

/**
 * Displays the articles details page.
 */
const ArticleDetails = () => {
    return (
        <Layout>
            ArticleDetails
        </Layout>
    )
}

export async function getStaticProps({ locale }) {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common','blog'])),
            // Will be passed to the page component as props
        },
    };
}

export default ArticleDetails;<file_sep>.ThemeTogglerButton {}<file_sep>@import "../mixins.scss";

.progress {
    height: inherit;
    border-radius: 999px;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.25);
}

.progress-bar {
    padding: 0.25em 1em;
    border-radius: 999px;
    font-size: 2em;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    overflow: visible;
}

a:hover {
    color: $primary;
}

.progress-bar.bg-danger {
    background-color: $primary !important;
}
.progress-bar.bg-warning {
    background-color: $secondary !important;
}

.container {
    max-width: 1000px;
    margin-top: 175px;
    @media screen and (min-width: $screen_sm) {
        margin-top: 250px;
    }
}

.btn {
    border-radius: $spacing_3;
    &:focus,
    &:active {
        outline: none;
        box-shadow: none !important;
    }
}

.btn.btn-secondary {
    border: 0;
    text-transform: uppercase;
    background-color: $secondary;
    color: white;
}

.btn.btn-secondary {
    border: 0;
    text-transform: uppercase;
    background-color: $secondary;
    color: white;
}

.card {
    background-color: white;
    border: 0;
    @include shadow();
    border-radius: $spacing_3;
    overflow: hidden;
    margin: $spacing_8;
    .card-header {
        background-color: $secondary;
        border: 0;
        padding: $spacing_5 $spacing_4;
        text-align: center;
    }
}<file_sep>const articles = [
    {
        id: "2dc3b7dd-1a25-44af-99b4-91d680a14e99",
        title_key: "articles.interview_mistakes.title",
        description_key: "articles.interview_mistakes.description",
        url: "https://medium.com/better-programming/interview-mistakes-ive-seen-people-do-fc9015d30b41",
        release_date: new Date(2022, 1, 11),
        publisher: "Better Programming"
      },
      {
        id: "1c086669-5ce9-4423-92ea-e836a69fb934",
        title_key: "articles.engineering_communication.title",
        description_key: "articles.engineering_communication.description",
        url: "https://medium.com/better-programming/a-common-problem-in-software-engineering-e5707b58dba3",
        release_date: new Date(2022, 1, 6),
        publisher: "Better Programming"
    }
];

export default articles;<file_sep>import React from 'react';
import { useTranslation } from 'next-i18next';
import {ProgressBar, Row, Col} from "react-bootstrap";
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

import Layout from '../components/common/Layout/Layout';
import SkillsAndStrengths from '../components/Profile/SkillsAndStrengths/SkillsAndStrengths';
import AboutMe from '../components/Profile/AboutMe/AboutMe';
import WorkNeeds from '../components/Profile/WorkNeeds/WorkNeeds';

/**
 * Displays the profile page.
 */
const Profile = (props) => {

    return (
        <Layout>
          <AboutMe/>
          <SkillsAndStrengths/>
          <WorkNeeds/>
        </Layout>
    )
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common','profile'])),
      // Will be passed to the page component as props
    },
  };
}

export default Profile;<file_sep>import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/dist/client/router';
import cx from "classnames";

import Footer from './Footer/Footer';
import routes from "../../../routes";
import MobileNav from './Navs/MobileNav/MobileNav';
import BrandHeader from './Headers/BrandHeader/BrandHeader';
import HeaderNav from './Headers/HeaderNav/HeaderNav';
import ThemeContext from '../../../context/ThemeContext';
import { fixFontAwesomeSSRCSS } from '../../../utils/fontawesome.utils';

import styles from './Layout.module.scss';

fixFontAwesomeSSRCSS();

const Layout = (props) => {

  const router = useRouter();
  const { t } = useTranslation('common');

  const [theme, setTheme] = useState('theme--default');
  const [showMobileNav, setShowMobileNav] = useState(false);
  const [activeRoute, setActiveRoute] = useState(routes[0]);

  const showOnlyOnPagesOtherThanContact = () => {
    return router.pathname.indexOf("contact") === -1;
  }

  const toggleTheme = () => {
    // setTheme(theme.indexOf('dark') !== -1 ? 'theme--default' : 'theme--dark');
    setTheme("theme--dark");
  }

  const mobileToggleFct = () => {
    setShowMobileNav(!showMobileNav);
  }

  useEffect(() => {
    let active = router.pathname;
    routes.forEach((route) => {
      if (active.indexOf(route.url) !== -1) {
        setActiveRoute(route);
      }
    });
  }, [router.pathname, routes]);

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <BrandHeader
        firstname="Dominic"
        lastname="Fournier"
        slogan={t('brand_header.slogan')}
        mobileToggleFct={mobileToggleFct}
        isMobileNavOpen={showMobileNav}
      />
      <div className={`${styles.Layout} container`}>
        <MobileNav showNav={showMobileNav} onToggleNav={mobileToggleFct} />
        <HeaderNav />
        <div className={cx(styles.PageContent, styles[`PageContent${activeRoute.id}`])}>
          {props.children}

    </ThemeContext.Provider>
  );
}

Layout.propTypes = {};

Layout.defaultProps = {};

export default Layout;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import {Row, Col}  from "react-bootstrap";
import { useTranslation } from 'next-i18next';
import Link from 'next/link';

import LocaleSwitcher from './LocaleSwitcher';
import routes from "../../../../../routes";

import styles from './QuickAccess.module.scss';

const QuickAccess = () => {

  const { t } = useTranslation('common');

  return (

      <Row>
        <Col xs="6" lg="3">

{t('quick_access.pages')}

            {routes.map((route) => (
<Link href={route.url}>{t(route.key)}</Link>
))}

        </Col>
        <Col xs="6" lg="3">

{t('quick_access.languages')}

          <LocaleSwitcher/>
        </Col>
      </Row>

  );
}

QuickAccess.propTypes = {};

QuickAccess.defaultProps = {};

export default QuickAccess;
<file_sep>@import "../../../../../styles/mixins.scss";

.HeaderNav {
    max-width: 100vw !important;
    overflow: hidden;
}

.HeaderNavBanner {
    overflow:hidden;
    position: absolute;
    left: 0;
    top: -110px;
    color: white;
    background-color: $primary;
    padding: $spacing_3 $spacing_6 $spacing_3 $spacing_3;
    border-radius: 0 $spacing_2 $spacing_2 0;
    @media screen and (min-width: $screen_md) {
        border-radius: $spacing_2;
    }
    @include shadow($shadow_md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    z-index: 50;
    h3,h5 {
        color: white;
        @media screen and (min-width: $screen_md) {
            margin-bottom: 0;
        }
    }
    h5 {
        font-weight: normal;
    }
}

.HeaderNavSvg {
    position: absolute;
    width: 0 !important;
    z-index: 10;
}

.DLPosition {
    position: absolute !important;
    top: -130px;
    @media screen and (min-width: $screen_md) {
        left: 190px;
    }
}

.ActiveRouteHighlight {
    @media screen and (min-width: $screen_md) {
        font-size: $text_size_7;
        position: absolute;
        left: 190px;
        top: $spacing_1;
    }
}

.OtherLinks {
    display: none;
    list-style: none;
    font-weight: bold;
    position: absolute;
    top: -30px;
    left: -15px;
    @media screen and (min-width: $screen_md) {
        display: unset;
    }
    z-index: 99999;
}

.OtherLinksBefore1 {
    top: -160px;
}
.OtherLinksBefore2 {
    top: -200px;
}
.OtherLinksBefore3 {
    top: -245px;
}

.OtherLink {
    text-decoration: none;
    padding: $spacing_1 0;
}

.BannerProfile {
    right: 120px;
    @media screen and (min-width: $screen_md) {
        right: 360px;
    }
}
.SvgProfile {
    top: -140px;
    right: 15px;
    width: 190px !important;
    @media screen and (min-width: $screen_md) {
        top: -240px;
        right: 100px;
        width: 380px !important;
    }
}

.BannerProjects {
    right: 120px;
    @media screen and (min-width: $screen_md) {
        right: 230px;
    }
}
.SvgProjects {
    top: -195px;
    right: -65px;
    width: 350px !important;
    @media screen and (min-width: $screen_md) {
        top: -310px;
        right: -100px;
        width: 600px !important;
    }
}

.BannerBlog {
    right: 110px;
    @media screen and (min-width: $screen_md) {
        right: 220px;
    }
}

.SvgBlog {
    top: -190px;
    right: 0;
    width: 500px !important;
    @media screen and (min-width: $screen_md) {
        top: -330px;
        right: 130px;
        width: 800px !important;
    }
}

.BannerContact {
    right: 120px;
    @media screen and (min-width: $screen_md) {
        right: 400px;
    }
}
.SvgContact {
    top: -100px;
    right: -35px;
    width: 250px !important;
    @media screen and (min-width: $screen_md) {
        top: -340px;
        right: 170px;
        width: 400px !important;
    }
}<file_sep>/**
 * Returns different profile page highlight (greeting)
 * depending on time of day.
 */
 const _getProfileHighlight = () => {
    let time = new Date().getHours();
    if (time >= 5 && time < 12) {
        return "routes.highlights.profile.good_morning";
    } else if (time >= 12 && time < 17) {
        return "routes.highlights.profile.good_afternoon";
    } else {
        return "routes.highlights.profile.good_evening";
    }
}

const getRoutesWithHeadersData = (routes) => {

    const PROFILE = 0,
          PROJECTS = 1,
          BLOG = 2,
          CONTACT = 3;

    return [
        {
            ...routes[PROFILE],
            highlight: _getProfileHighlight()
        },
        {
            ...routes[PROJECTS],
            highlight: "routes.highlights.projects"
        },
        {
            ...routes[BLOG],
            highlight: "routes.highlights.blog"
        },
        {
            ...routes[CONTACT],
            highlight: "routes.highlights.contact",
        }
    ]
}

module.exports = {
    getRoutesWithHeadersData
};<file_sep>@import "../../../styles/mixins.scss";

.DynamicLabel {
    font-size: $text_size_0;
    color: $light--subtle-text;
    text-shadow: none;
    padding-bottom: $spacing_0;
}<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import { faFacebookF, faLinkedinIn, faGithub, faYoutube, faTwitter } from '@fortawesome/free-brands-svg-icons';
import { faGlobe, faFilePdf } from '@fortawesome/free-solid-svg-icons';
import styles from './IconLinks.module.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const IconLinks = ({urls}) => {

  const getIconFromUrl = (url) => {

    /**
     * Key value mapping social network url parts with
     * icons. Will be iterated in order so most generic
     * icons last.
     */
    const kv = {
      "facebook": faFacebookF,
      "linkedin": faLinkedinIn,
      "github": faGithub,
      "youtube": faYoutube,
      "twitter": faTwitter,
      ".pdf": faFilePdf,
      "https://www": faGlobe
    }

    for (let key in kv) {
      if(url.indexOf(key) !== -1) {
        return <FontAwesomeIcon icon={kv[key]} size="2x"/>;
      }
    }
    return null;
  }

  if(urls && urls.length > 0) {
    return (

        {urls.map((url, index) => {
          return (
            <a
              className={styles.IconLink}
              key={`url_${index}`}
              href={url}
              target="_blank"
              rel="noreferrer"
            >
            {getIconFromUrl(url)}

          );
        })}

    );
  } else {
    console.warn("No URLs provided to Icon Link, not rendering.");
    return null;
  }
}

IconLinks.propTypes = {};

IconLinks.defaultProps = {};

export default IconLinks;
<file_sep>import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'next-i18next';
import cx from "classnames";

import styles from './DynamicLabel.module.scss';

/**
 * Displays a random label from a list of pre-configured ones.
 */
const DynamicLabel = ({className}) => {

  const dynamicKeys = [
    "dynamic.time_to_code",
    "dynamic.state_of_website",
    "dynamic.test_coverage",
    "dynamic.status",
    "dynamic.dependencies",
    "dynamic.site_security",
  ];

  const { t } = useTranslation('common');
  const key = Math.floor(Math.random()*dynamicKeys.length);

  return (

      {t(dynamicKeys[key])}

  );
}

DynamicLabel.propTypes = {};

DynamicLabel.defaultProps = {};

export default DynamicLabel;
<file_sep>import React from 'react';
import { ScaleLoader } from 'react-spinners';

const Loading = () => (

    <ScaleLoader height={20} width={8} margin={1} color='white'/>

);

export default Loading;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import {Button} from "react-bootstrap";

import styles from './Searchbar.module.scss';

const Searchbar = () => (

    <input placeholder="SEARCH..."/><Button variant="secondary">GO</Button>

);

Searchbar.propTypes = {};

Searchbar.defaultProps = {};

export default Searchbar;
<file_sep>const profile = {
  birthday: "1996-03-12",
  carreerStart: "2017-09-01",
  extraExperienceDays: 14 * 30,
};

export default profile;<file_sep>import React from 'react';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Card, Col, Row } from "react-bootstrap";
import Carousel from "react-multi-carousel";

import Layout from '../components/common/Layout/Layout';
import UnderConstruction from '../components/common/UnderConstruction/UnderConstruction';
import DynamicLabel from '../components/common/DynamicLabel/DynamicLabel';
import { useTranslation } from 'next-i18next';

/**
 * Displays the contact page.
 */
const Contact = (props) => {

  const { t } = useTranslation('contact');

  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 1,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 1,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    }
  };

  return (
    <Layout>
      <Row>
        <Col xs="12" md={{span: 5, offset: 2}} lg={{span: 8, offset: 2}}>
          <DynamicLabel/>

{t("title")}

{t("desc_1")}

{t("desc_temp")}: <a href="mailto:<EMAIL>"><EMAIL>

          {/*
{t("desc_2")}

          <Row>
            <Col xs="12" md="6">
              <Card>
              <Card.Header>
{t("mentoring")}
</Card.Header>
                <Card.Body>BLAB ALBLALBLA</Card.Body>
              </Card>
            </Col>
            <Col xs="12" md="6">
              <Card>
                <Card.Header>
{t("ui_design")}
</Card.Header>
                <Card.Body>BLAB ALBLALBLA</Card.Body>
              </Card>
            </Col>
            <Col xs="12" md="6">
              <Card>
              <Card.Header>
{t("frontend_dev")}
</Card.Header>
                <Card.Body>BLAB ALBLALBLA</Card.Body>
              </Card>
            </Col>
            <Col xs="12" md="6">
              <Card>
              <Card.Header>
{t("fullstack_dev")}
</Card.Header>
                <Card.Body>BLAB ALBLALBLA</Card.Body>
              </Card>
            </Col>
          </Row> */}
        </Col>
      </Row>
    </Layout>
  )
}

export async function getInitialProps({req}) {
  let userAgent

    if (req) {
        userAgent = req.headers['user-agent']
    } else {
        userAgent = navigator.userAgent
    }

    const parser = new UAParser()
    parser.setUA(userAgent)
    const result = parser.getResult()
    const deviceType = (result.device && result.device.type) || 'desktop'

    return { deviceType }
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common','contact'])),
      // Will be passed to the page component as props
    },
  };
}

export default Contact;<file_sep>import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useRouter } from 'next/router'
import cx from "classnames";

import { playAudio } from '../../../utils/audio';

import styles from './DesktopNav.module.scss';

/**
 * Component for showing desktop navigation full of animations.
 *
 * @todo Implement
 */
const DesktopNav = ({className, configs}) => {

  const router = useRouter();

  const redirect = (e, href) => {
    e.preventDefault()
    playAudio("/audio/click.wav", 0.5);
    router.push({
      query: {
        section: href
      }
    })
  }

  // const getDynamicStyles = (config) => {
  //   return {
  //     marginTop: config.imageOffsetY,
  //     right: config.imageOffsetX
  //   }
  // }

  return (

        {configs.map((config) => {
          return

             redirect(e, config.url)}
            >
              {config.label}

        })}

  );
}

DesktopNav.propTypes = {
  className: PropTypes.string,
  configs: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    url: PropTypes.string,
    title: PropTypes.string,
    image: PropTypes.element,
    stripeEndPosX: PropTypes.number,
    imageAnimAngle: PropTypes.number,
    imageOffsetX: PropTypes.number,
    imageOffsetY: PropTypes.number,
  }))
};

DesktopNav.defaultProps = {};

export default DesktopNav;
<file_sep>import Link from 'next/link'
import { useRouter } from 'next/router'

/**
 * Displays a list of 'other locales' for the user to pick from if the
 * automatic locale isn't right.
 *
 * As seen here;
 * https://github.com/vercel/next.js/blob/canary/examples/i18n-routing/components/locale-switcher.js
 */
export default function LocaleSwitcher() {
  const router = useRouter()
  const { locales, locale: activeLocale } = router
  const otherLocales = locales.filter((locale) => locale !== activeLocale)

  return (

        {otherLocales.map((locale) => {
          const { pathname, query, asPath } = router
          return (

              <Link href={{ pathname, query }} as={asPath} locale={locale}>
                {locale}
              </Link>

          )
        })}

  )
}<file_sep>import React from 'react'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

import Layout from '../../../components/common/Layout/Layout';

/**
 * Displays the projects details page.
 */
const ProjectDetails = () => {
    return (
        <Layout>
            ProjectDetails
        </Layout>
    )
}

export async function getStaticProps({ locale }) {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common','projects'])),
            // Will be passed to the page component as props
        },
    };
}

export default ProjectDetails;<file_sep>@import "./overwrites/bootstrap.scss";
@import "./mixins.scss";
@import "./themes.scss";
@import url('https://fonts.googleapis.com/css2?family=Monda:wght@400;700&display=swap');

html,
body {
  font-family: 'Monda', sans-serif;
  font-size: 16px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow-x: hidden !important;
  background-color: #0D0B0B;
  color: white;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: $primary;
}

::selection {
  color: white;
  background: rgba($primary, 200);
}

h1,h2,h3,h4,h5,h6 {
  text-transform: uppercase;
  font-weight: bold;
  color: $primary;
  text-shadow: none;
}

.gold_text {
  color: $secondary;
}

.white_text {
  color: white;
}

.unstyled_list {
  list-style: none;
  padding-left: 0;
}

.toggle-tags-group {
  display: flex;
  flex-wrap: wrap;
}<file_sep>const { i18n } = require('./next-i18next.config');

module.exports = {
  reactStrictMode: true,
  i18n,
  async redirects() {
    return [
      {
        source: '/',
        destination: '/profile',
        permanent: true,
      },
      {
        source: '/blog',
        destination: '/blog/list',
        permanent: true,
      },
      {
        source: '/blog/details',
        destination: '/blog/list',
        permanent: true,
      },
      {
        source: '/project',
        destination: '/projects/list',
        permanent: true,
      },
      {
        source: '/projects',
        destination: '/projects/list',
        permanent: true,
      },
      {
        source: '/projects/details',
        destination: '/projects/list',
        permanent: true,
      },
    ]
  },
}
<file_sep>const Home = (props) => {
  // Simply acts as the application entry point,
  // any request to '/' will be redirected to
  // '/profile'
  return (

  )
}
export default Home;<file_sep>const playAudio = (url, volume = 0.8) => {
    let audio = new Audio(url);
    audio.volume = volume;
    audio.play();
}

module.exports = {
    playAudio
}<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import { Col, Row, ProgressBar } from "react-bootstrap";
import { useTranslation } from "next-i18next";

import DynamicLabel from '../../common/DynamicLabel/DynamicLabel';

import styles from './SkillsAndStrengths.module.scss';

const SkillsAndStrengths = () => {

  const { t } = useTranslation('profile');

  const technicalSkills = [
    { label: "React", value: 90 },
    { label: "HTML, CSS, JS", value: 90 },
    { label: "Next", value: 88 },
    { label: "Figma", value: 85 },
    { label: "SAAS", value: 80 },
    { label: "Node", value: 70 },
    { label: "Angular", value: 65 },
    { label: "SQL", value: 60 },
  ];

  const strengths = [
    { label: t('strengths.autonomy'), value: 93 },
    { label: t('strengths.communication'), value: 90 },
    { label: t('strengths.leadership'), value: 85 },
    { label: t('strengths.creativity'), value: 83 },
    { label: t('strengths.commitment'), value: 83 },
    { label: t('strengths.structuring'), value: 81 },
    { label: t('strengths.innovation'), value: 75 }
  ];

  return (

      <Row>
        <Col xs="12" md="6" className="px-4 py-0">
          <DynamicLabel />

{t('technical_skills.title')}

{t('technical_skills.desc')}

          {technicalSkills.map((skill, index) => {
            return (
              <ProgressBar
                key={`skill_${index}`}
                className="mt-2"
                variant="danger"
                style={{ backgroundColor: "#282323" }}
                now={skill.value}
                label={skill.label}
              />
            );
          })}
        </Col>
        <Col xs="12" md="6" className="px-4 py-5">
          <DynamicLabel />

{t('strengths.title')}

{t('strengths.desc')}

          {strengths.map((strength, index) => {
            return (
              <ProgressBar
                key={`strength_${index}`}
                className="mt-2"
                variant="warning"
                style={{ backgroundColor: "#282323" }}
                now={strength.value}
                label={strength.label}
              />
            );
          })}
        </Col>
      </Row>

  );
}

SkillsAndStrengths.propTypes = {};

SkillsAndStrengths.defaultProps = {};

export default SkillsAndStrengths;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

import ThemeTogglerButton from '../../../ThemeTogglerButton/ThemeTogglerButton';

import styles from './BrandHeader.module.scss';
import IconButton from '../../../IconButton/IconButton';
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';

/**
 * Component for showing the top branding and mobile nav.
 *
 * @component
 * @example
 * return (
 *   <BrandHeader
 *      className="some-special-class"
 *      firstname="firstname"
 *      lastname="lastname"
 *      slogan="slogan"
 *      mobileToggleFct={toggleFct}
 *      isMobileNavOpen={someState}
 *   />
 * )
 */
const BrandHeader = ({
  className,
  firstname,
  lastname,
  slogan,
  mobileToggleFct = () => console.warn("No Mobile Nav Function Provided to BrandHeader."),
  isMobileNavOpen = false
}) => {

  return (

      <Link href="/profile">

{firstname} {lastname}

            {slogan?.toUpperCase()}

      </Link>
      <IconButton icon={isMobileNavOpen ? faTimes : faBars} size="2x" onClick={mobileToggleFct} className={styles.MobileNavToggle} />
      {/* <ThemeTogglerButton/> */}

  );
}

BrandHeader.propTypes = {
  className: PropTypes.string,
  firstname: PropTypes.string,
  lastname: PropTypes.string,
  slogan: PropTypes.string
};

BrandHeader.defaultProps = {};

export default BrandHeader;
<file_sep>@import "../../../styles/mixins.scss";

.WorkNeeds {
    margin-top: $spacing_6;
}

.WorkGroup {
    @media screen and (max-width: $screen_md) {
        text-align: center;
        h1 {
            text-align: left;
        }
    }
}

.DLAL {
    text-align: left;
}<file_sep>import React, { useEffect, useState } from 'react';
import cx from "classnames";
import PropTypes from 'prop-types';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import Link from "next/link";

import routes from "../../../../../routes";
import DynamicLabel from '../../../DynamicLabel/DynamicLabel';
import { getRoutesWithHeadersData } from '../utils/dynamicHeader.utils';

import styles from './HeaderNav.module.scss';

const HeaderNav = () => {

  const router = useRouter();
  const { t } = useTranslation("common");
  const routesWithHeadersData = getRoutesWithHeadersData(routes);
  const [activeRoute, setActiveRoute] = useState({
    ...routesWithHeadersData[0],
    isInitialized: false,
    index: 0
  });

  useEffect(() => {
    let active = router.pathname;
    routesWithHeadersData.forEach((route, index) => {
      if(active.indexOf(route.url) !== -1) {
        setActiveRoute({
          ...route,
          isInitialized: true,
          index
        })
      }
    });
  }, [router.pathname, routes]);

  const renderOtherLinks = (routes, isBefore = true) => {
    return <ol className={cx(styles.OtherLinks, isBefore ? styles[`OtherLinksBefore${routes.length}`] : null)}>
        {routes.map((route) => (
<Link href={route.url}>{t(route.key)}</Link>
))}

  }

  return (

      {renderOtherLinks(routes.slice(0,activeRoute.index), true)}
      <DynamicLabel className={styles.DLPosition}/>
      <div className={cx(styles.HeaderNavBanner, styles[`Banner${activeRoute.id}`])}>

{t(activeRoute.key)}

{t(activeRoute.highlight)}

      {activeRoute && activeRoute.isInitialized ? <img className={cx(styles.HeaderNavSvg, styles[`Svg${activeRoute.id}`])} src={activeRoute.svg}/> : null}
      {renderOtherLinks(routes.slice(activeRoute.index+1, 999), false)}

  );
}

HeaderNav.propTypes = {};

HeaderNav.defaultProps = {};

export default HeaderNav;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import Image from "next/image";
import cx from "classnames";

import styles from './TextSvg.module.scss';

const TextSvg = ({svg, text, className, isBad}) => (

    <img src={svg} alt={`${text} icon`} className={styles.Svg} layout="fill"/>

{text}

);

TextSvg.propTypes = {};

TextSvg.defaultProps = {};

export default TextSvg;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import cx from "classnames";
import Link from "next/link";
import { useRouter } from 'next/router';
import { useTranslation } from "next-i18next";

import ThemeTogglerButton from '../../../ThemeTogglerButton/ThemeTogglerButton';
import BrandHeader from '../../Headers/BrandHeader/BrandHeader';
import routes from "../../../../../routes";

import styles from './MobileNav.module.scss';

const MobileNav = ({showNav, onToggleNav}) => {

  const router = useRouter();
  const { t } = useTranslation("common");

  const isRouteActive = (url) => {
    return router.pathname.indexOf(url) !== -1;
  }

  return (

        <BrandHeader
          firstname="Dominic"
          lastname="Fournier"
          slogan={t('brand_header.slogan')}
          mobileToggleFct={onToggleNav}
          isMobileNavOpen={showNav}
        />

          {routes.map((route) => (
<Link href={route.url}>{t(route.key)}</Link>
))}

      {/* <ThemeTogglerButton/> */}

  );
}

MobileNav.propTypes = {};

MobileNav.defaultProps = {};

export default MobileNav;
<file_sep>import React from 'react';
import styles from './ProjectPreview.module.scss';
import { useTranslation } from 'next-i18next';
import { Row,Col } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGlobe } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import ToggleLabel from '../../common/ToggleLabel/ToggleLabel';

const ProjectPreview = ({project}) => {

  const { i18n, t } = useTranslation('projects');

  return (

      <Row>
        <Col xs="12">
          <div className={styles.ProjectPreviewImgBG} style={{backgroundImage: `url(/${project.preview}.png)`}}>

        </Col>
        <Col xs="12">

{t(project.title_key)}

{t(project.description_key)}

            {/*
{new Date(project.release_date).toLocaleDateString(i18n.language, {
              year: 'numeric',
              month: 'long',
              day: 'numeric'
            })}
 */}
            {/*
{project.score}
 */}
            {project.url ? <FontAwesomeIcon color="#c6538c" icon={faGlobe} size="2x"/> : null}
            {project.github ? <FontAwesomeIcon color="#c6538c" icon={faGithub} size="2x"/> : null}

              {project.labels.map((label, index) => {
                return <ToggleLabel key={`label_${index}`} label={`${label.key}.title`} isActive={true}></ToggleLabel>
              })}

        </Col>
      </Row>

  );
}

ProjectPreview.propTypes = {};

ProjectPreview.defaultProps = {};

export default ProjectPreview;
<file_sep>import React from 'react';
import cx from "classnames";
import PropTypes from 'prop-types';
import { useTranslation } from "next-i18next";

import styles from './ToggleLabel.module.scss';

const ToggleLabel = ({isActive, onToggle, label}) => {

  const { t } = useTranslation('labels');

  return (
    <button className={cx(styles.ToggleLabel, isActive ? styles.ToggleLabelActive : "")} onClick={onToggle}>
      {t(label)}
    </button>
  );
}

ToggleLabel.propTypes = {};

ToggleLabel.defaultProps = {};

export default ToggleLabel;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import { Col, Row } from "react-bootstrap";
import { useTranslation } from "next-i18next";
import cx from "classnames";

import TextSvg from "../TextSvg/TextSvg";
import DynamicLabel from '../../common/DynamicLabel/DynamicLabel';

import styles from './WorkNeeds.module.scss';

const WorkNeeds = () => {

  const { t } = useTranslation('profile');

  return (

      <Row>
        <Col xs="12" md={{span: 5, offset: 2}} lg={{span: 10, offset: 2}}>

            <DynamicLabel className={styles.DLAL}/>

{t('work_needs.title')}

            <TextSvg svg="/images/profile/creativity.svg" text={t('work_needs.creative')} />
            <TextSvg svg="/images/profile/ambitious.svg" text={t('work_needs.ambitious')} />
            <TextSvg svg="/images/profile/relevant.svg" text={t('work_needs.relevant')} />
            <TextSvg svg="/images/profile/impactful.svg" text={t('work_needs.impactful')} />

            <DynamicLabel className={styles.DLAL}/>

{t('work_dread.title')}

            <TextSvg svg="/images/profile/robotic.svg" text={t('work_dread.robotic')} isBad={true}/>
            <TextSvg svg="/images/profile/patchy.svg" text={t('work_dread.patchy')} isBad={true}/>
            <TextSvg svg="/images/profile/rigid.svg" text={t('work_dread.rigid')} isBad={true}/>

        </Col>
      </Row>

  );
}

WorkNeeds.propTypes = {};

WorkNeeds.defaultProps = {};

export default WorkNeeds;
<file_sep>import React from 'react';
import ReactDOM from 'react-dom';
import BrandHeader from './BrandHeader';

it('It should mount', () => {
  const div = document.createElement('div');
  ReactDOM.render(<BrandHeader />, div);
  ReactDOM.unmountComponentAtNode(div);
});<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import { useRouter } from 'next/dist/client/router';

import ContactLink from './ContactLink/ContactLink';
import Copyrights from './Copyrights/Copyrights';
import IconLinks from './SocialLinks/IconLinks';
import QuickAccess from './QuickAccess/QuickAccess';
import BuiltWith from './BuiltWith/BuiltWith';

import styles from './Footer.module.scss';

/**
 * Displays the app footer with contact button, social links
 * and copyrights.
 *
 * @component
 * @example
 * return (
 *
 * )
 */
const Footer = ({
  showContact = true,
  showExternalLinks = true,
  showQuickAccess = true,
  showBuiltWith = true,
  showCopyrights = true
}) => {

  const router = useRouter();

  const urls = [
    `/files/CV_Dominic_Fournier_2023_${router.locale}_v1.pdf`,
    "https://www.linkedin.com/in/dominic-fournier-1b068212a",
    "https://github.com/DominicF96",
    "https://www.youtube.com/channel/UCu_phIvUh8leBp5vkCyLGow"
  ]

  return (

      {showContact ? <ContactLink/> : null}
      {showExternalLinks ? <IconLinks urls={urls}/> : null}
      {showQuickAccess ? <QuickAccess/> : null}
      {showBuiltWith ? <BuiltWith/> : null}
      {showCopyrights ? <Copyrights/> : null}

  );
}

Footer.propTypes = {};

Footer.defaultProps = {};

export default Footer;
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from "next-i18next";

import styles from './UnderConstruction.module.scss';

const UnderConstruction = ({svg}) => {

  const { t } = useTranslation('common');

  return (

{t('under_construction')}

{t('preview')}

  );
}

UnderConstruction.propTypes = {};

UnderConstruction.defaultProps = {};

export default UnderConstruction;
<file_sep>import React, { useState, useEffect } from 'react'
import { Row, Col} from 'react-bootstrap';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const axios = require('axios');

import labels from '../../data/labels';
import Layout from '../../components/common/Layout/Layout'
import ProjectPreview from "../../components/Projects/ProjectPreview/ProjectPreview";
import UnderConstruction from '../../components/common/UnderConstruction/UnderConstruction';
import DynamicLabel from '../../components/common/DynamicLabel/DynamicLabel';
import ToggleLabel from '../../components/common/ToggleLabel/ToggleLabel';
import Searchbar from '../../components/common/Searchbar/Searchbar';
import { ScaleLoader } from 'react-spinners';
import Loading from '../../components/common/Loading/Loading';

/**
 * Displays the projects list page.
 */
const ProjectsList = () => {

    const { i18n, t } = useTranslation('projects');
    const [activeLabels, setActiveLabels] = useState({});
    const [projects, setProjects] = useState({
        list: [],
        hasError: false,
        isLoading: true
    });

    const onToggleLabel = (key) => {
        setActiveLabels({
            ...activeLabels,
            [key]: activeLabels[key] ? !activeLabels[key] : true
        });
    }

    const getLabelTranslationKey = (key) => {
        return `${labels[key].key}${labels[key].type.indexOf('category') !== -1 ? ".title" : ""}`;
    }

    const fetchProjects = () => {
        axios.get(`/api/getFilteredProjects?lang=${i18n.language}`).then((res) => {
            setProjects({
                list: res.data,
                hasError: false,
                isLoading: false
            });
        }).catch((err) => {
            setProjects({
                list: [],
                hasError: true,
                isLoading: false
            });
        });
    }

    useEffect(() => {
        fetchProjects();
    }, [i18n.language])

    return (
        <Layout>
            <Row>
                <Col xs="12" md={{span: 5, offset: 2}} lg={{span: 6, offset: 2}}>
                    <DynamicLabel/>

{t("title")}

{t("desc")}

                    {/* <Searchbar/>

                        {t("filter_by_tag")}

                            {Object.keys(labels).map((key) => {
                            return <ToggleLabel
                                key={`label_${key}`}
                                isActive={activeLabels[key]}
                                onToggle={() => onToggleLabel(key)}
                                label={getLabelTranslationKey(key)}
                            />
                            })}

 */}

                        {t("sorted_by_best")}
                        {projects.hasError ?
{t('error.loading.list')}
 :
                            projects.isLoading ? <Loading/> :
                            projects.list.map((project) => {
                                return <ProjectPreview key={project.id} project={project}/>
                            })
                        }

                </Col>
            </Row>
        </Layout>
    )
}

export async function getStaticProps({ locale }) {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common','projects', "labels"])),
            // Will be passed to the page component as props
        },
    };
}

export default ProjectsList;<file_sep>/* eslint-disable @next/next/no-document-import-in-page */
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import Document, { Head, Main, NextScript, Html } from 'next/document';

import { GA_TRACKING_ID } from '../gtag';

export default class extends Document {
  render() {
    return (

          {/* Global Site Tag (gtag.js) - Google Analytics */}

branch_name: refs/heads/master

languages: SCSS JavaScript

repo_language: SCSS


text:
<repo_name>burnsra/LaunchAtLogin<file_sep>/.github/workflows/ci.yml
name: CI
on:
  - push
  - pull_request
jobs:
  build:
    runs-on: macOS-11
    steps:
      - uses: actions/checkout@v2
      - run: swift build

repo_language: YAML

repo_name: burnsra/LaunchAtLogin


text:
<repo_name>asaduzzamanR69/Live-chat-using-php-ajax-jquery-mysql<file_sep>/README.txt

1.Create a database called 'simple chat'  in your mysql server, then import the sql file provided here.

2.Make your own user id and password using registration

In this project , a simple chat application is done with the help of php, ajax, jquery and mysql.

Login and logout system using sessions has done for recognise different users using php.

Ajax is used to refresh data every moment behind the scene.

Jquery is used for display the message properly.

Mysql is used for store user information and messages.

<file_sep>/message.php
<?php
require_once('authenticate.php');
?>

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<?php

date_default_timezone_set("Asia/Dhaka"); // set of your own;

//finding target message
$target=$_GET["id"];

$user = $_SESSION["user"];
$status=$_SESSION["status"];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

//making user online
$sql1 = "UPDATE user_details SET status='Online' WHERE user_name='$user'";
$conn->query($sql1) ;

//finding target online status
$sql2 = "SELECT user_name,status,logout_time FROM user_details where user_name ='$target'";

// finding time dution of last logout , $date2 as present time, and $date1 as last logout time in 117 line
$date2=date_create(date('Y-m-d g:i:s a'));
$result1 = $conn->query($sql2);
 if ($result1->num_rows > 0) {
	echo "
";
    while($row = $result1->fetch_assoc()) {
		if ($row["status"]=="Online"){
    echo "
".$row["user_name"]." - Active now"."
";
		}
    if ($row["status"]=="Offline"){
		    $date1=date_create($row['logout_time']);
			$date=date_diff($date1,$date2);

            $year=$date-> format("%y");
            $month=$date-> format("%m");
            $days=$date-> format("%a");

            $day=$days-365*$year -30*$month ;

            $hour=$date->format("%h");
            $mins=$date->format("%i");
            $seconds=$date->format("%s");
			$Times=array($year,$month,$day,$hour,$mins,$seconds);
			$effect1=array(" year ago"," months ago"," days ago"," hours ago"," mins ago"," seconds ago");
			$effect2=array(" year ago"," month ago"," day ago"," hour ago"," min ago"," second ago");

			for ($i=0;$i<6;$i++)
               if($Times[$i]!= 0){
				   break;
			   }
              if ($Times[$i]==1){
		echo "
"."".$row["user_name"]." - Active ".$Times[$i].$effect2[$i]."".""."
";
			}
          else 		{
         echo "
"."".$row["user_name"]." - Active ".$Times[$i].$effect1[$i]."".""."
";
    }
	}
}
    echo "
";
}
$conn->close();

?>

  <input autocomplete="off" style="margin-bottom:3px;width:80%;height:40px;border:none;border-bottom:1px solid black"type="text"  name="msg" placeholder="Send a message..." autofocus/>
  <input style="border-radius:20px;outline:none;padding:10px;color:white;width:80px;background-color:#4267B2;border:none;border:none;" type="button" class ="<?php echo $target; ?>" name="send" value="Send"/>

<?php
 echo "Logged as ".$user."
";
 echo "MessageList"
?>

<form action="logout.php" method="post" class="logout">
<input style="border-radius:20px;outline:none;padding:5px;color:white;width:80px;background-color:#ef411e;border:none;border:1px solid red" type="submit" name="logout" value="Logout"/>
</form>

<file_sep>/login.php
<?php
session_start();
if(!(empty($_SESSION["authenticated"]) || $_SESSION["authenticated"] != 'true') ){
	header('Location:index.php');
}
?>
<?php
if (isset($_POST['login'])) {
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);

$username=$_POST['username'];
$password=$_POST['password'];

$sql = "select *from user_details where user_name='$username' and password='$password'";
$result = $conn->query($sql);

//check if any in the database
   if($result->num_rows>0) {
	   // if any, then make a sesson for this user
			$_SESSION["authenticated"] ='true' ;
            $_SESSION["user"] =$username;
            $_SESSION["status"]='Active';
			header('Location: index.php');
		}
		else {
			 echo "

Username or password error!

";
             ?>
<!DOCTYPE html>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

Login

		<form id="login" method="post">

			<input id="username" name="username" type="text" required placeholder="username">

			<input id="password" name="password" type="<PASSWORD>" required placeholder="<PASSWORD>">

			<input type="submit" value="Login" name="login">
		</form>

<?php

		}
$conn->close();
	}
 else {
?>
<!DOCTYPE html>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

Login

		<form id="login" method="post">
			<input id="username" name="username" type="text" required placeholder="username">

			<input id="password" name="password" type="<PASSWORD>" required placeholder="<PASSWORD>">

			<input type="submit" value="Login" name="login">
		</form>

	Not  a user? Registration

<?php } ?>

<file_sep>/registration.php

<?php
if (isset($_POST['registration'])) {
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);

$username=$_POST['username'];
$password=$_POST['password'];

$sql = "insert into user_details(user_name,password) values('$username','$password')";
if($conn->query($sql)===true){
	header('location:index.php');

}

$conn->close();
}
?>
<!DOCTYPE html>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

Registration

		<form id="login" method="post">
			<input id="username" name="username" type="text" required placeholder="username">

			<input id="password" name="password" type="<PASSWORD>" required placeholder="<PASSWORD>">

			<input type="submit" value="Registration" name="registration">
		</form>

<file_sep>/sendMessage.php
<?php
session_start();
if(empty($_SESSION["authenticated"]) || $_SESSION["authenticated"] != 'true') {
	echo "expired";
	die();
}
?>
<?php

$user = $_SESSION["user"];
$status=$_SESSION["status"];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

date_default_timezone_set("Asia/Dhaka");
$date=date('Y-m-d g:i:s a');

$target=$_POST['id'];
$M=$_POST['msg'];
$Mal=htmlspecialchars($M);
if ($Mal ==null){
}
else {

$sql = "INSERT INTO messages(msg_from, to_msg,messages,msg_date)
VALUES ('$user', '$target','$Mal','$date' )";

$conn->query($sql);
}

$sql3 = "SELECT msg_from,to_msg,messages, msg_date FROM messages where msg_from ='$user' AND to_msg ='$target' or msg_from='$target' and to_msg='$user'   ";
$result2 = $conn->query($sql3);

$conn->close();
?>
<file_sep>/logout.php
<?php
session_start();

  date_default_timezone_set("Asia/Dhaka");

  $status=$_SESSION["status"];
  $user = $_SESSION["user"];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";

 $conn = new mysqli($servername, $username, $password, $dbname);

 if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
 }

// making login status of this user offline

$date=date('Y-m-d g:i:s a');
 $sql1 = "UPDATE user_details SET status='Offline' WHERE user_name='$user'";
 $sql2 = "UPDATE user_details SET logout_time='$date' WHERE user_name='$user'";
 $conn->query($sql1) ;
 $conn->query($sql2) ;
 $conn->close();

 //then destroy the session for this user
  session_destroy();
  header("location:index.php");
?><file_sep>/simple chat.sql
-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 08, 2020 at 06:38 PM
-- Server version: 10.1.36-MariaDB
-- PHP Version: 7.2.10

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `chat`
--

-- --------------------------------------------------------

--
-- Table structure for table `messages`
--

CREATE TABLE `messages` (
  `id` int(200) NOT NULL,
  `msg_from` char(20) DEFAULT NULL,
  `to_msg` char(20) DEFAULT NULL,
  `messages` text,
  `msg_date` char(30) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `messages`
--

INSERT INTO `messages` (`id`, `msg_from`, `to_msg`, `messages`, `msg_date`) VALUES
(1, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:11:09 pm'),
(2, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:12:24 pm'),
(3, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:14:05 pm'),
(4, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:14:07 pm'),
(5, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:14:09 pm'),
(6, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:14:10 pm'),
(7, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:14:14 pm'),
(8, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:14:15 pm'),
(9, 'Asadul', 'Tamanna', 'h', '2020-04-08 7:14:17 pm'),
(10, 'Asadul', 'Tamanna', 'h', '2020-04-08 7:14:18 pm'),
(11, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:15:13 pm'),
(12, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:15:15 pm'),
(13, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:15:16 pm'),
(14, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:15:17 pm'),
(15, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:15:18 pm'),
(16, 'Asadul', 'Tamanna', 'h', '2020-04-08 7:15:18 pm'),
(17, 'Asadul', 'Tamanna', 'j', '2020-04-08 7:15:19 pm'),
(18, 'Asadul', 'Tamanna', 'j', '2020-04-08 7:15:19 pm'),
(19, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:15:21 pm'),
(20, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:15:22 pm'),
(21, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:15:23 pm'),
(22, 'Asadul', 'Tamanna', ';', '2020-04-08 7:15:24 pm'),
(23, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:24 pm'),
(24, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:24 pm'),
(25, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:25 pm'),
(26, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:25 pm'),
(27, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:26 pm'),
(28, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:26 pm'),
(29, 'Asadul', 'Tamanna', 'll', '2020-04-08 7:15:26 pm'),
(30, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:26 pm'),
(31, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:15:27 pm'),
(32, 'Asadul', 'Tamanna', 'll', '2020-04-08 7:15:29 pm'),
(33, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:16:34 pm'),
(34, 'Asadul', 'Tamanna', 'jm', '2020-04-08 7:16:35 pm'),
(35, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:36 pm'),
(36, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:37 pm'),
(37, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:37 pm'),
(38, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:38 pm'),
(39, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:38 pm'),
(40, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:39 pm'),
(41, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:39 pm'),
(42, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:39 pm'),
(43, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:40 pm'),
(44, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:40 pm'),
(45, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:41 pm'),
(46, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:41 pm'),
(47, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:41 pm'),
(48, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:42 pm'),
(49, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:42 pm'),
(50, 'Asadul', 'Tamanna', 'm', '2020-04-08 7:16:43 pm'),
(51, 'Asadul', 'Tamanna', '/', '2020-04-08 7:16:45 pm'),
(52, 'Asadul', 'Tamanna', 'hg', '2020-04-08 7:16:45 pm'),
(53, 'Asadul', 'Tamanna', 'sfsf', '2020-04-08 7:16:46 pm'),
(54, 'Asadul', 'Tamanna', 'sgr', '2020-04-08 7:16:47 pm'),
(55, 'Asadul', 'Tamanna', 'f', '2020-04-08 7:16:48 pm'),
(56, 'Asadul', 'Tamanna', 'j', '2020-04-08 7:16:49 pm'),
(57, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:16:50 pm'),
(58, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:16:51 pm'),
(59, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:16:52 pm'),
(60, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:53 pm'),
(61, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:16:54 pm'),
(62, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:54 pm'),
(63, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:16:55 pm'),
(64, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:56 pm'),
(65, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:16:56 pm'),
(66, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:57 pm'),
(67, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:58 pm'),
(68, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:58 pm'),
(69, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:59 pm'),
(70, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:16:59 pm'),
(71, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:00 pm'),
(72, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:00 pm'),
(73, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:01 pm'),
(74, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:01 pm'),
(75, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:01 pm'),
(76, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:02 pm'),
(77, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:02 pm'),
(78, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:02 pm'),
(79, 'Asadul', 'Tamanna', 'l', '2020-04-08 7:17:03 pm'),
(80, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:19:36 pm'),
(81, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 7:19:40 pm'),
(82, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:19:45 pm'),
(83, 'Asadul', 'Tamanna', 'km', '2020-04-08 7:19:46 pm'),
(84, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:19:47 pm'),
(85, 'Asadul', 'Tamanna', 'k', '2020-04-08 7:19:49 pm'),
(86, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:21:47 pm'),
(87, 'Tamanna', 'Asadul', 'Hmm', '2020-04-08 7:21:53 pm'),
(88, 'Tamanna', 'Asadul', 'Hmm', '2020-04-08 7:21:53 pm'),
(89, 'Tamanna', 'Asadul', 'Hmm', '2020-04-08 7:22:05 pm'),
(90, 'Tamanna', 'Asadul', 'Whats up', '2020-04-08 7:22:09 pm'),
(91, 'Tamanna', 'Asadul', 'Hey', '2020-04-08 7:22:17 pm'),
(92, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:22:23 pm'),
(93, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:22:36 pm'),
(94, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:22:41 pm'),
(95, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:22:43 pm'),
(96, 'Tamanna', 'Asadul', 'Hey', '2020-04-08 7:22:48 pm'),
(97, 'Asadul', 'Tamanna', 'hi', '2020-04-08 7:23:01 pm'),
(98, 'Asadul', 'Tamanna', 'whas up', '2020-04-08 7:23:07 pm'),
(99, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:28:50 pm'),
(100, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:29:20 pm'),
(101, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 7:29:29 pm'),
(102, 'Tamanna', 'Asadul', 'Hmm', '2020-04-08 7:29:31 pm'),
(103, 'Tamanna', 'Asadul', 'ðŸ˜‚', '2020-04-08 8:03:01 pm'),
(104, 'Tamanna', 'Asadul', 'Hey whats up', '2020-04-08 8:03:09 pm'),
(105, 'Tamanna', 'Asadul', 'Hey', '2020-04-08 8:03:13 pm'),
(106, 'Tamanna', 'Asadul', 'Ji', '2020-04-08 8:03:16 pm'),
(107, 'Tamanna', 'Asadul', 'ðŸ˜‚ðŸ˜‚ðŸ˜‚ðŸŒ', '2020-04-08 8:03:22 pm'),
(108, 'Asadul', 'Tamanna', 'ðŸ˜‚ðŸ˜‚ðŸ˜‚ðŸŒ', '2020-04-08 8:03:36 pm'),
(109, 'Tamanna', 'Asadul', 'Hi', '2020-04-08 8:03:57 pm'),
(110, 'Tamanna', 'Asadul', 'Hmm', '2020-04-08 8:04:00 pm'),
(111, 'Tamanna', 'Asadul', 'Whats up', '2020-04-08 8:04:05 pm'),
(112, 'Tamanna', 'Asadul', 'Hey', '2020-04-08 8:04:07 pm'),
(113, 'Tamanna', 'Asadul', 'Lala ', '2020-04-08 8:04:13 pm'),
(114, 'Asadul', 'Tamanna', 'yes', '2020-04-08 8:04:19 pm'),
(115, 'Asadul', 'Tamanna', 'yes', '2020-04-08 8:04:22 pm'),
(116, 'Asadul', 'Tamanna', 'ðŸ˜‚ðŸ˜‚ðŸ˜‚ðŸŒ', '2020-04-08 8:04:24 pm'),
(117, 'Tamanna', 'Asadul', 'Ki koro ', '2020-04-08 8:04:33 pm'),
(118, 'Asadul', 'Tamanna', 'hi', '2020-04-08 8:06:17 pm'),
(119, 'Asadul', 'Tamanna', 'hi', '2020-04-08 8:24:55 pm'),
(120, 'Asadul', 'Tamanna', 'jo', '2020-04-08 8:25:26 pm'),
(121, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:45:34 pm'),
(122, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:46:55 pm'),
(123, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 9:47:00 pm'),
(124, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 9:48:04 pm'),
(125, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:49:02 pm'),
(126, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 9:49:05 pm'),
(127, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:49:33 pm'),
(128, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:49:45 pm'),
(129, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:50:13 pm'),
(130, 'Asadul', 'Tamanna', 'hm', '2020-04-08 9:50:18 pm'),
(131, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:50:52 pm'),
(132, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 9:50:58 pm'),
(133, 'Asadul', 'Tamanna', 'hey', '2020-04-08 9:51:03 pm'),
(134, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:52:06 pm'),
(135, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:52:10 pm'),
(136, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:53:21 pm'),
(137, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:53:29 pm'),
(138, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:53:32 pm'),
(139, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:53:37 pm'),
(140, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:54:18 pm'),
(141, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 9:54:22 pm'),
(142, 'Asadul', 'Tamanna', 'him', '2020-04-08 9:54:25 pm'),
(143, 'Asadul', 'Tamanna', 'hm', '2020-04-08 9:54:33 pm'),
(144, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:55:10 pm'),
(145, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:55:42 pm'),
(146, 'Asadul', 'Tamanna', 'hi', '2020-04-08 9:57:01 pm'),
(147, 'Asadul', 'Tamanna', 'hmm', '2020-04-08 9:57:06 pm'),
(148, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:03:23 pm'),
(149, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:04:24 pm'),
(150, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:14:04 pm'),
(151, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:14:14 pm'),
(152, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:35:57 pm'),
(153, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:36:18 pm'),
(154, 'Asadul', 'Tamanna', 'hi', '2020-04-08 10:36:28 pm');

-- --------------------------------------------------------

--
-- Table structure for table `user_details`
--

CREATE TABLE `user_details` (
  `user_name` char(20) DEFAULT NULL,
  `password` text,
  `status` char(10) DEFAULT NULL,
  `logout_time` char(50) DEFAULT NULL,
  `type_status` char(20) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user_details`
--

INSERT INTO `user_details` (`user_name`, `password`, `status`, `logout_time`, `type_status`) VALUES
('tahmid', 'tahmid', 'Offline', '2020-04-02 10:05:03 am', NULL),
('Sifat', 'sifat', 'Offline', '2020-04-06 6:04:27 pm', NULL),
('Babor', 'Babor', 'Offline', '2020-04-03 8:42:00 pm', NULL),
('Tamanna', 'tamanna', 'Offline', '2020-04-08 8:04:50 pm', NULL),
('Monowar', 'monowar', 'Offline', '2020-04-02 11:57:42 am', NULL),
('Asadul', 'asadul', 'Offline', '2020-04-08 10:36:34 pm', NULL),
('Asiya', '<PASSWORD>', 'Offline', '2020-04-02 11:37:07 am', NULL);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `messages`
--
ALTER TABLE `messages`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `messages`
--
ALTER TABLE `messages`
  MODIFY `id` int(200) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=155;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
<file_sep>/messages_refresh.php
<?php
session_start();

//when no user session
// when message.php in one tab, and in another tab the user has done logout, then this will output "expired" which in result make message.php file to login page without refreshing
if(empty($_SESSION["authenticated"]) || $_SESSION["authenticated"] != 'true') {
	echo "expired";
	die();
}

// if user has session then.
else {
date_default_timezone_set("Asia/Dhaka");

$user = $_SESSION["user"];
$target=$_POST['id'];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT msg_from,to_msg,messages, msg_date FROM messages where msg_from ='$user' AND to_msg ='$target' or msg_from='$target' and to_msg='$user'   ";
$result = $conn->query($sql);

// preparing messages with time in secs, mins etc
 if ($result->num_rows > 0) {
	        $date2=date_create(date('Y-m-d g:i:s a')); // present time
    while($row = $result->fetch_assoc()) {
		    $date1=date_create($row['msg_date']);    // msg_date time
			$date=date_diff($date1,$date2);

            $year=$date-> format("%y");
            $month=$date-> format("%m");
            $days=$date-> format("%a");

            $day=$days-365*$year -30*$month ;

            $hour=$date->format("%h");
            $mins=$date->format("%i");
            $seconds=$date->format("%s");
			$Times=array($year,$month,$day,$hour,$mins,$seconds);
			$effect1=array(" year ago"," months ago"," days ago"," hours ago"," mins ago"," secs ago");
			$effect2=array(" year ago"," month ago"," day ago"," hour ago"," min ago"," sec ago");

			for ($i=0;$i<5;$i++){
               if($Times[$i]!= 0){
				   break;
			   }
			}

         if  ($row["msg_from"]==$user){

		 echo "
".$row["messages"];
		if ($Times[$i]==1 || $Times[$i]==0){
			echo "
".$Times[$i].$effect2[$i]."
";
		}
		else {
			echo "
".$Times[$i].$effect1[$i]."
";
		}
		}

		if ($row["msg_from"]==$target){
		 echo "
".$row["messages"];
		if ($Times[$i]==1 || $Times[$i]==0){
			echo "
".$Times[$i].$effect2[$i]."
";
		}
		else {
			echo "
".$Times[$i].$effect1[$i]."
";
		}
		}

    }
}
}

$conn->close();

?>
<file_sep>/index_refresh.php
<?php
session_start();
if(empty($_SESSION["authenticated"]) || $_SESSION["authenticated"] != 'true') {
	echo "expired";
	die();
}
?>
<?php
$user = $_SESSION["user"];
$status=$_SESSION["status"];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql1 = "UPDATE user_details SET status='Online' WHERE user_name='$user'";
$conn->query($sql1) ;
?>

<?php
$user = $_SESSION["user"];
class member{

	function __construct(){

	}
	function get_member(){
		date_default_timezone_set("Asia/Dhaka");
		$date2=date_create(date('Y-m-d g:i:s a'));
		$user = $_SESSION["user"];

		$servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "simple chat";
        $conn = new mysqli($servername, $username, $password, $dbname);
        if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
      }

		$sql = "select user_name,logout_time,status from user_details where user_name != '$user'";
        $result = $conn->query($sql);
		echo "
";
        if ($result->num_rows > 0) {

        while($row = $result->fetch_assoc()) {
			$id=$row["user_name"];
			echo "
";
            echo "".$row["user_name"]."	";
        if ($row["status"]=="Offline"){
            $date1=date_create($row['logout_time']);

			$date=date_diff($date1,$date2);

            $year=$date-> format("%y");
            $month=$date-> format("%m");
            $days=$date-> format("%a");

            $day=$days-365*$year -30*$month ;

            $hour=$date->format("%h");
            $mins=$date->format("%i");
            $seconds=$date->format("%s");
			$Times=array($year,$month,$day,$hour,$mins,$seconds);
			$effect1=array(" years ago"," months ago"," days ago"," hours ago"," mins ago"," seconds ago");
			$effect2=array(" year ago"," month ago"," day ago"," hour ago"," min ago"," second ago");

			for ($i=1;$i<=6;$i++)
               if($Times[$i]!= 0){
				   break;
			   }
        	if ($Times[$i]==1){
		echo ""."".$Times[$i].$effect2[$i].""."	";
			}
             else{
        echo ""."".$Times[$i].$effect1[$i].""."	";
			 }
		}
		if ($row["status"]=="Online"){
        echo "Active now	";
         }
		   echo "
";

         }

         }
      echo "
";

	}
}

$member=new member();
$member -> get_member();

?>
<file_sep>/index.php
<?php

require_once('authenticate.php');
?>
<?php
$user = $_SESSION["user"];
$status=$_SESSION["status"];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "simple chat";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql1 = "UPDATE user_details SET status='Online' WHERE user_name='$user'";
$conn->query($sql1) ;
?>

<?php
date_default_timezone_set("Asia/Dhaka"); //make of your own city
$user = $_SESSION["user"];

// geting users details in mins ,days etc
class member{

	function __construct(){

	}
	function get_member(){

		$date2=date_create(date('Y-m-d g:i:s a')); //present time;
		$user = $_SESSION["user"];

		$servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "simple chat";
        $conn = new mysqli($servername, $username, $password, $dbname);
        if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
      }

		$sql = "select user_name,logout_time,status from user_details where user_name != '$user'";
        $result = $conn->query($sql);
		echo "
";
        if ($result->num_rows > 0) {

        while($row = $result->fetch_assoc()) {
			$id=$row["user_name"];
			echo "
";
            echo "".$row["user_name"]."	";
        if ($row["status"]=="Offline"){
            $date1=date_create($row['logout_time']); // login status

			$date=date_diff($date1,$date2);

            $year=$date-> format("%y");
            $month=$date-> format("%m");
            $days=$date-> format("%a");

            $day=$days-365*$year -30*$month ;

            $hour=$date->format("%h");
            $mins=$date->format("%i");
            $seconds=$date->format("%s");
			$Times=array($year,$month,$day,$hour,$mins,$seconds);
			$effect1=array(" years ago"," months ago"," days ago"," hours ago"," mins ago"," seconds ago");
			$effect2=array(" year ago"," month ago"," day ago"," hour ago"," min ago"," second ago");

			for ($i=1;$i<=6;$i++)
               if($Times[$i]!= 0){
				   break;
			   }
        	if ($Times[$i]==1){
		echo ""."".$Times[$i].$effect2[$i].""."	";
			}
             else{
        echo ""."".$Times[$i].$effect1[$i].""."	";
			 }
		}
		if ($row["status"]=="Online"){
        echo "Active now	";
         }
		   echo "
";

         }

         }
      echo "
";

	}
}

$member=new member();

?>
<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">

  <?php
  //finding users in this site
  $member -> get_member();
  ?>

<?php
 echo "Logged as ".$user."";
?>

<form action="logout.php" method="post" class="logout">
<input style="border-radius:20px;outline:none;padding:5px;color:white;width:80px;background-color:#ef411e;border:none;border:1px solid red" type="submit" name="logout" value="Logout"/>
</form>

languages: Text SQL PHP

repo_language: Text


text:
<file_sep>package socket.servers;

import services.Service;

import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Scanner;

public class TCPServer implements Runnable {

    public int id = 0;

    public static Service service;
    public Socket client;

    public static int producerId = 1;
    public static int consumerId = 1;

    public TCPServer(Socket client) {

        this.client = client;
        service = new Service();
    }

    public static void main(String[] args) {
        try {
            ServerSocket serverSocket = new ServerSocket(12345);
            System.out.println("Porta 12345 aberta!");

            System.out.println("Aguardando conexão do cliente...");

            while (true) {
                Socket client = serverSocket.accept();

                TCPServer tcpServer = new TCPServer(client);
                Thread thread = new Thread(tcpServer);
                thread.start();
            }
        } catch (Exception e) {
            System.out.println("Erro: " + e.getMessage());
        }
    }

    @Override
    public void run() {
        System.out.println("Novo cliente conectado...");

        try {
            Scanner scanner = new Scanner(this.client.getInputStream());

            while (scanner.hasNextLine()) {
                String data = scanner.nextLine();

                int typeRequest = Integer.parseInt(data);

                if (this.id == 0) {
                    this.id = typeRequest == Service.CONSUMER_REQUEST_TYPE ? consumerId++ : producerId++;
                }

                service.run(id, typeRequest);
            }

            scanner.close();

            this.client.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
<file_sep>package services;

public class Consumer extends Thread {

    public Service service;
    public int consumerId;

    public Consumer(Service service, int consumerId) {
        this.service = service;
        this.consumerId = consumerId;
    }

    public void run() {
        while (true) {
            this.service.items.down();
            this.service.mutex.down();

            int item = this.service.buffer.get(0);
            this.service.buffer.remove(0);
            this.service.itemCount--;

            System.out.println("consumidor #" + this.consumerId + ": consumindo item #" + item);

            this.service.mutex.up();

            try {
                sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}<file_sep># Implementação de Produtor/Consumidor Utilizando Sockets (TCP) e RMI

**TESTANDO TROCA DE MENSAGENS VIA SOCKET (TCP/IP)**

- Executar a função main da classe socket.servers.TCPServer;
- Executar a função main da classe socket.clients.TCPClient e informar no console se deseja consumir (1) ou produzir (2);

**TESTANDO TROCA DE MENSAGENS VIA RMI**

- Executar a função main da classe rmi.Server;
- Executar a função main da classe rmi.Client e informar no console se deseja consumir (1) ou produzir (2);

*Obs.: É possível executar N clientes, os mesmos podem ser produtor ou consumidor.*
<file_sep>package services;

public class Semaphore {

    public Semaphore() {
        count = 0;
    }

    public Semaphore(int i) {
        count = i;
    }

    public synchronized void down() {
        while (count == 0) {
            try {
                wait();
            } catch (InterruptedException ignored) {
            }
        }

        count--;
    }

    public synchronized void up() {
        count++;
        notify();
    }

    protected int count;
}

branch_name: refs/heads/main

languages: Java Markdown

repo_language: Java