anna-sara/vbytes_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes with texts and matomo

Browse source
This commit is contained in:
Anna-Sara Sélea 2026-02-07 13:24:52 +01:00
parent 4b7c566226
commit 8f0a638013
9 changed files with 140 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public/index.html
View file

@ -24,6 +24,22 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.vbytes.se/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '27']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<title>vBytes Website</title>
</head>
<body>

2
src/App.js
View file

@ -8,6 +8,7 @@ import Glow from './components/Glow';
import InventorySection from './blocks/InventorySection';
import MemberSection from './blocks/MemberSection';
import PartnersSection from './blocks/PartnersSection';
import LANsection from './blocks/LANsection';
function App() {
const [opacity, setOpacity] = useState(1);
@ -42,6 +43,7 @@ function App() {
<Glow opacity={opacity} />
<Navbar />
<StartSection opacity={opacity}/>
<LANsection />
<AboutSection />
<MemberSection />
<InventorySection />

BIN
src/assets/img/stopmotion.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

2
src/blocks/AboutSection.jsx
View file

@ -53,7 +53,7 @@ const AboutSection = () => {
</div>
<div className="glowing-box"><h3>LAN</h3>
<p>24 timmar LAN-partys sker två gånger per år. Under LAN:et så anordnas det olika former av turneringar och tävlingar. </p>
<p>LANet har funnits i drygt 10 år och bruka samla runt 100 deltagare. </p>
<p>LANet har funnits i drygt 5 år och bruka samla runt 100 deltagare. </p>
<p className='next-lan'>Nästa LAN</p>
<Timer />
</div>

21
src/blocks/LANsection.jsx Normal file
View file

@ -0,0 +1,21 @@
import Timer from '../components/TimerAnmalan';
const LANsection = () => {
return (
<section id="lan" className="lan-section">
<div className="lan-section__container">
<h2>LAN 2026</h2>
<h3>2 mars kl 19.30 öppnar anmälan</h3>
<div className='lan-section__link-container'>
<Timer />
<a href="#!" target="_blank" className='glowing-btn'><span className='glowing-txt'>Till anmälan</span></a>
</div>
</div>
</section>
);
};
export default LANsection;

2
src/components/Timer.jsx
View file

@ -37,7 +37,7 @@ class Timer extends React.Component {
<div className="timer">
<p>
{days < 10 ? `0${days}` : days}:{hours < 10 ? `0${hours}` : hours}:
{minutes}:{seconds < 10 ? `0${seconds}` : seconds}
{minutes < 10 ? `0${minutes}`: minutes}:{seconds < 10 ? `0${seconds}` : seconds}
</p>
</div>
);

47
src/components/TimerAnmalan.jsx Normal file
View file

@ -0,0 +1,47 @@
import React from "react";
class Timer extends React.Component {
state = {
minutes: 0,
seconds: 0,
hours: 0,
days: 0
};
componentDidMount() {
let date = new Date('2026-03-02T19:30:00');
date.setDate(date.getDate());
let countDownDate = new Date(date).getTime();
console.log(countDownDate);
setInterval(() => {
let now = new Date().getTime();
let distance = countDownDate - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
this.setState({
minutes: minutes,
days: days,
hours: hours,
seconds: seconds
});
}, 1000);
}
render() {
const { minutes, seconds, hours, days } = this.state;
return (
<div className="timer">
<p>
{days < 10 ? `0${days}` : days}:{hours < 10 ? `0${hours}` : hours}:
{minutes < 10 ? `0${minutes}`: minutes}:{seconds < 10 ? `0${seconds}` : seconds}
</p>
</div>
);
}
}
export default Timer;

1
src/css/app.scss
View file

@ -11,6 +11,7 @@
@use './blocks/start-section.scss';
@use './blocks/inventory-section.scss';
@use './blocks/partners-section.scss';
@use './blocks/lan-section.scss';
//Components
@use './components/glow.scss';

51
src/css/blocks/_lan-section.scss Normal file
View file

@ -0,0 +1,51 @@
.lan-section {
width: 100%;
padding-bottom: 300px;
&__container {
width: 100%;
max-width: 1440px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 90%;
gap: 30px;
margin: 0 auto;
z-index: 20;
position: relative;
}
h2 {
font-size: 48px;
margin-bottom: 0;
text-align: center;
}
h3 {
font-size: 32px;
text-align: center;
}
.timer {
p {
text-align: center;
font-size:50px;
font-family: 'Jersey-Regular';
letter-spacing: 7px;
margin: 0;
margin-bottom: 20px;
font-variant-numeric: tabular-nums;
}
}
&__link-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
a {
pointer-events: none;
opacity: 0.4;
}
}
}