Merge remote-tracking branch 'origin/dev' into feat/visual-programming-interface

# Conflicts:
#	src/main.tsx

src/App.css

@@ -18,6 +18,20 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+
+.logopepper {
+  height: 8em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logopepper:hover {
+  filter: drop-shadow(0 0 10em #ff0707);
+}
+.logopepper.react:hover {
+  filter: drop-shadow(0 0 10em #4eff14aa);
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -27,16 +41,75 @@
   }
 }
 
+
+@keyframes logo-pepper-spin {
+  from {
+    transform: rotate(-20deg);
+  }
+  to {
+    transform: rotate(20deg);
+  }
+}
+
+
+
+@keyframes logo-pepper-scale {
+  from {
+    transform: scale(1,1);
+  }
+  to {
+    transform: scale(1.5,1.5);
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
 }
 
-.card {
-  padding: 2em;
+@media (prefers-reduced-motion: no-preference) {
+  .logopepper {
+    animation: logo-pepper-spin infinite 1s linear alternate;
+  }
 }
 
-.read-the-docs {
-  color: #888;
+@media (prefers-reduced-motion: no-preference) {
+  .logoPepperScaling {
+    animation: logo-pepper-scale infinite 1s linear alternate;
+  }
+}
+
+
+
+
+
+button.reset {
+  background-color: crimson;
+  color: white;
+}
+button.reset:hover {
+  background-color: darkred;
+}
+
+button.movePage {
+  position: fixed;          /* Position the button relative to the viewport (screen),
+                               not inside its parent. It stays in place even when you scroll. */
+
+  top: 50%;                 /* Place the button halfway down from the top of the screen. */
+                   /* Stick the button to the left edge of the screen. */
+  border: 3px solid black;
+  outline: 1px solid white;
+  transform: translateY(-50%); 
+  background-color: aquamarine;
+  color: white;
+}
+button.movePage.left{
+  left: 5%;
+}
+button.movePage.right{
+  right: 5%;
+}
+button.movePage:hover{
+  background-color: rgb(0, 176, 176);
 }

src/App.tsx

@@ -1,34 +1,15 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import { Routes, Route } from 'react-router'
 import './App.css'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
+import Home from './pages/Home/Home.tsx'
 
-function App() {
-  const [count, setCount] = useState(0)
-
+function App(){
+  
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/Template" element={<TemplatePage />} />
+    </Routes>
   )
 }
 

src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/components/components.tsx

@@ -0,0 +1,20 @@
+// src/components/Counter.tsx
+import { useState } from 'react'
+//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
+import '../App.css'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="card">
+      <button onClick={() => setCount((count) => count + 3)}>
+        count is {count}
+      </button>
+      <button className='reset' onClick={() => setCount(0)}>
+        Reset Counter
+      </button>
+    </div>
+  )
+}
+export default Counter

src/main.tsx

@@ -1,12 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
 import './index.css'
 import App from './App.tsx'
-import VisualProgrammingUI from "./visualProgrammingUI/VisProgUI.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
-      <VisualProgrammingUI />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

src/pages/Home/Home.module.css

@@ -0,0 +1,6 @@
+.read_the_docs {
+  color: #888;
+}
+.card {
+  padding: 2em;
+}

src/pages/Home/Home.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import reactLogo from '../../assets/react.svg'
+import viteLogo from '../../assets/vite.svg'
+import pepperLogo from '../../assets/pepper_transp2_small.svg'
+import style from './Home.module.css'
+import Counter from '../../components/components.tsx'
+
+function Home() {
+  
+
+
+  return (
+    <>
+      <div>
+        <div className = "logoPepperScaling">
+          <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+            <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
+          </a>
+        </div>
+        
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      
+        <Counter />
+        <Link to = '/Template'>
+            <button className='movePage right' onClick={() : void => {}}>
+            Page Cool --{'>'}
+            </button>
+        </Link>
+        
+        <p>
+            Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      
+      <p className={style.read_the_docs}>
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default Home

src/pages/TemplatePage/Template.module.css

@@ -0,0 +1,4 @@
+button.reset:hover {
+  background-color: yellow;
+}
+

src/pages/TemplatePage/Template.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import Counter from '../../components/components.tsx'
+import style from './Template.module.css'
+
+//this is your css file where you can style your buttons and such
+//you can still use css parts from App.css, but also overwrite them
+
+function TemplatePage() {
+  
+
+  return (
+    <>
+      <Counter />
+      <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
+        <button className= 'movePage left' onClick={() :void => {}}>
+          Page {'<'}-- Go Home
+        </button>
+      </Link>
+    </>
+  )
+}
+
+export default TemplatePage