Skip to content
Snippets Groups Projects
Commit 0779d806 authored by Tommy Eikrem Woldseth's avatar Tommy Eikrem Woldseth
Browse files

Merge branch 'media' into 'master' 

Media #3 #9

See merge request it2810-h20/team-75/prosjekt-2!14
parents b7b76dd5 e8a79a57
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 809 additions and 2 deletions
frontend/src/Components/ArtPage.tsx
+ 2
− 1
View file @ 0779d806
......@@ -4,6 +4,7 @@ import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
import NavButton from './NavButton';
import '../Style/ArtPage.css';
import Music from "./Music";
type props = {
......@@ -84,4 +85,4 @@ class ArtPage extends React.Component<props, state> {
}
}
export default ArtPage;
export default ArtPage;
\ No newline at end of file
frontend/src/Components/Music.tsx 0 → 100644
+ 11
− 0
View file @ 0779d806
import React from "react";
import sound from "../Media/bensound-energy.mp3";
const Music = () => {
return (
<div>
<audio src={sound} autoPlay/>
</div>
);
}
export default Music;
frontend/src/Media/250-milliseconds-of-silence.mp3 0 → 100644
+ 0
− 0
View file @ 0779d806
File added
frontend/src/Media/bensound-energy.mp3 0 → 100644
+ 0
− 0
View file @ 0779d806
File added
frontend/src/Media/bensound-epic.mp3 0 → 100644
+ 0
− 0
View file @ 0779d806
File added
frontend/src/Media/bensound-thejazzpiano.mp3 0 → 100644
+ 0
− 0
View file @ 0779d806
File added
frontend/src/SVG/svg1.svg 0 → 100644
+ 115
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<!-- Background -->
<circle r="24" cx="25" cy="25" style="stroke: blue; fill: lightgreen">
</circle>
<!-- Cells -->
<circle id="circle1" r="3" cx="15" cy="15" style="stroke: red; stroke-width: 0.5; fill: green">
<animate
xlink:href="#circle1"
attributeName="cx"
dur="3s"
values="15; 30; 23; 32; 15"
fill = "freeze"
repeatCount="indefinite"/>
<animate
xlink:href="#circle1"
attributeName="cy"
dur="3s"
values="15; 15; 27; 40; 15"
fill = "freeze"
repeatCount="indefinite"/>
</circle>
<circle id = "circle2" r="2" cx="30" cy="15" style="stroke: red; stroke-width: 0.5; fill: green">
<animate
xlink:href="#circle2"
attributeName="cx"
dur="3s"
values="30; 15; 40; 15; 30"
fill = "freeze"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle2"
attributeName="cy"
dur="3s"
values="15; 30; 32; 15; 15"
fill = "freeze"
repeatCount="indefinite"
/>
</circle>
<circle id="circle3" r="1" cx="15" cy="30" style="stroke: red; stroke-width: 0.5; fill: green">
<animate
xlink:href="#circle3"
attributeName="cx"
dur="2s"
values="15; 23; 32; 30; 15"
fill = "freeze"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle3"
attributeName="cy"
dur="2s"
values="30; 27; 40; 15; 30"
fill = "freeze"
repeatCount="indefinite"
/>
</circle>
<circle id="circle4" r="3" cx="23" cy="27" style="stroke: red; stroke-width: 0.5; fill: green">
<animate
xlink:href="#circle4"
attributeName="cx"
dur="4s"
values="23; 40; 15; 15; 23"
fill = "freeze"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle4"
attributeName="cy"
dur="4s"
values="27; 32; 15; 30; 27"
fill = "freeze"
repeatCount="indefinite"
/>
</circle>
<circle id="circle5" r="2.5" cx="40" cy="32" style="stroke: red; stroke-width: 0.5; fill: green">
<animate
xlink:href="#circle5"
attributeName="cx"
dur="4s"
values="40; 32; 30; 23; 40"
fill = "freeze"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle5"
attributeName="cy"
dur="4s"
values="32; 40; 15; 27; 32"
fill = "freeze"
repeatCount="indefinite"
/>
</circle>
<circle id="circle6" r="1.5" cx="32" cy="40" style="stroke: red; stroke-width: 0.5; fill: green">
<animate
xlink:href="#circle6"
attributeName="cx"
dur="3s"
values="32; 15; 15; 40; 32"
fill = "freeze"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle6"
attributeName="cy"
dur="3s"
values="40; 15; 30; 32; 40"
fill = "freeze"
repeatCount="indefinite"
/>
</circle>
</svg>
\ No newline at end of file
frontend/src/SVG/svg2.svg 0 → 100644
+ 68
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" style="background-color: black">
<!-- Upper left -->
<polygon fill="gold"
points="50,50 60,10 70,50 110,50 75,70 85,110 60,85 35,110 45,70 10,50">
<animate id="animation1"
attributeName="opacity"
from="0" to="1" dur="2s"
begin="animation2.end" />
<animate id="animation2"
attributeName="opacity"
from="1" to="0" dur="3s"
begin="0s;animation1.end" />
</polygon>
<!-- Middle -->
<polygon fill="gold"
points="183.75,183.75 191.25,153.75 198.75,183.75 228.75,183.75 202.5,198.75 210,228.75 191.25,210 172.5,228.75 180,198.75 153.75,183.75">
<animate id="animation3"
attributeName="opacity"
from="0" to="1" dur="2s"
begin="animation4.end" />
<animate id="animation4"
attributeName="opacity"
from="1" to="0" dur="2s"
begin="1s;animation3.end" />
</polygon>
<!-- Upper right -->
<polygon fill="gold"
points="330,50 340,10 350,50 390,50 355,70 365,110 340,85 315,110 325,70 290,50">
<animate id="animation5"
attributeName="opacity"
from="0" to="1" dur="2s"
begin="animation6.end" />
<animate id="animation6"
attributeName="opacity"
from="1" to="0" dur="2s"
begin="3s;animation5.end" />
</polygon>
<!-- Bottom right -->
<polygon fill="gold"
points="330,330 340,290 350,330 390,330 355,350 365,390 340,360 315,390 325,350 290,330">
<animate id="animation7"
attributeName="opacity"
from="0" to="1" dur="2s"
begin="animation8.end" />
<animate id="animation8"
attributeName="opacity"
from="1" to="0" dur="2s"
begin="2s;animation7.end" />
</polygon>
<!-- Bottom left -->
<polygon fill="gold"
points="50,330 60,290 70,330 110,330 75,350 85,390 60,365 35,390 45,350 10,330">
<animate id="animation9"
attributeName="opacity"
from="0" to="1" dur="3s"
begin="animation10.end" />
<animate id="animation10"
attributeName="opacity"
from="1" to="0" dur="2s"
begin="4s;animation9.end" />
</polygon>
</svg>
\ No newline at end of file
frontend/src/SVG/svg3.svg 0 → 100644
+ 168
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
<!-- Background -->
<rect width="400" height="400" style="fill: black" opacity="0">
<animate
id ="animation3"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="0s;animation4.end"/>
<animate
id ="animation4"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="animation3.end"/>
</rect>
<!-- Ground -->
<rect x="-10" y="310" width="420" height="100" style="fill: greenyellow; stroke: black; stroke-width: 2">
</rect>
<!-- Sun -->
<circle r="100" cx="5" cy="5" style="fill: yellow; stroke: black; stroke-width: 2">
<animate
id ="animation1"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="0s;animation2.end"/>
<animate
id ="animation2"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="animation1.end"/>
</circle>
<!-- Sunshine -->
<line x1="115" y1="30" x2="175" y2="60" style="stroke: yellow; stroke-width: 3">
<animate
id ="animation1"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="0s;animation2.end"/>
<animate
id ="animation2"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="animation1.end"/>
</line>
<line x1="100" y1="70" x2="155" y2="105" style="stroke: yellow; stroke-width: 3">
<animate
id ="animation1"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="0s;animation2.end"/>
<animate
id ="animation2"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="animation1.end"/>
</line>
<line x1="70" y1="100" x2="120" y2="140" style="stroke: yellow; stroke-width: 3">
<animate
id ="animation1"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="0s;animation2.end"/>
<animate
id ="animation2"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="animation1.end"/>
</line>
<!-- Moon -->
<circle r="100" cx="395" cy="5" style="fill: lightgoldenrodyellow; stroke: black; stroke-width: 2">
<animate
id ="animation3"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="0s;animation4.end"/>
<animate
id ="animation4"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="animation3.end"/>
</circle>
<circle r="15" cx="340" cy="25" style="stroke: goldenrod; stroke-width: 3; fill: #fced9f">
<animate
id ="animation3"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="0s;animation4.end"/>
<animate
id ="animation4"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="animation3.end"/>
</circle>
<circle r="10" cx="385" cy="45" style="stroke: goldenrod; stroke-width: 3; fill: #fced9f">
<animate
id ="animation3"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="0s;animation4.end"/>
<animate
id ="animation4"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="animation3.end"/>
</circle>
<circle r="12" cx="350" cy="65" style="stroke: goldenrod; stroke-width: 3; fill: #fced9f">
<animate
id ="animation3"
attributeName="opacity"
from="0"
to="1"
dur="5s"
begin="0s;animation4.end"/>
<animate
id ="animation4"
attributeName="opacity"
from="1"
to="0"
dur="5s"
begin="animation3.end"/>
</circle>
</svg>
\ No newline at end of file
frontend/src/SVG/svg4.svg 0 → 100644
+ 43
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" style="background-color: black">
<!-- Dial -->
<circle r="175" cx="200" cy="200" fill="white">
<animate
attributeName="fill"
begin="5s"
dur="20s"
values ="white; skyblue; orange; crimson; goldenrod; white"
repeatCount="indefinite"
/>
</circle>
<!-- Minute hand -->
<line x1="200" x2="200" y1="75" y2="200" stroke="black" stroke-width="3">
<animateTransform attributeName="transform"
type="rotate"
from="0 200 200" to="360 200 200"
begin="0s" dur="5s"
repeatCount="indefinite"
/>
</line>
<!-- Hour hand -->
<line x1="200" x2="300" y1="200" y2="200" stroke="black" stroke-width="3">
<animateTransform attributeName="transform"
type="rotate"
from="0 200 200" to="360 200 200"
begin="0s" dur="60s"
repeatCount="indefinite"
/>
</line>
<!-- Notches -->
<line x1 ="200" x2="200" y1="40" y2="55" stroke="black" stroke-width="2"></line>
<line x1 ="345" x2="360" y1="200" y2="200" stroke="black" stroke-width="2"></line>
<line x1 ="200" x2="200" y1="345" y2="360" stroke="black" stroke-width="2"></line>
<line x1 ="40" x2="55" y1="200" y2="200" stroke="black" stroke-width="2"></line>
<!-- Center circle -->
<circle r="5" cx="200" cy="200" fill="black"></circle>
</svg>
\ No newline at end of file
frontend/src/SVG/svg5.svg 0 → 100644
+ 48
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
<!-- Background -->
<rect width="400" height="400" fill="goldenrod"></rect>
<!-- Inner squares -->
<rect width="200" height="200" x="100" y="100" stroke="gray" stroke-width="3" fill="black">
<animateTransform attributeName="transform"
type="rotate"
from="0 200 200" to="360 200 200"
begin="0s" dur="5s"
repeatCount="indefinite"
/>
</rect>
<rect width="100" height="100" x="150" y="150" stroke="white" stroke-width="3" fill="goldenrod">
<animateTransform attributeName="transform"
type="rotate"
from="360 200 200" to="0 200 200"
begin="0s" dur="5s"
repeatCount="indefinite"
/>
</rect>
<rect width="50" height="50" x="175" y="175" stroke="gray" stroke-width="2" fill="black">
<animateTransform attributeName="transform"
type="rotate"
from="0 200 200" to="360 200 200"
begin="0s" dur="5s"
repeatCount="indefinite"
/>
</rect>
<rect width="25" height="25" x="187.5" y="187.5" stroke="white" stroke-width="2" fill="goldenrod">
<animateTransform attributeName="transform"
type="rotate"
from="360 200 200" to="0 200 200"
begin="0s" dur="5s"
repeatCount="indefinite"
/>
</rect>
<rect width="12.5" height="12.5" x="193.75" y="193.75" stroke="gray" stroke-width="1" fill="black">
<animateTransform attributeName="transform"
type="rotate"
from="0 200 200" to="360 200 200"
begin="0s" dur="5s"
repeatCount="indefinite"
/>
</rect>
</svg>
\ No newline at end of file
frontend/src/SVG/svg6.svg 0 → 100644
+ 70
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
<!-- Gradient for background -->
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:lime;stop-opacity:1" />
<stop offset="100%" style="stop-color:gold;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="400" height="400" x="0" y="0" fill="url(#grad1)" style="stroke: black; stroke-width: 4"/>
<!-- Lines to illustrate center -->
<line x1="200" x2="200" y1="0" y2="400" stroke="gray" stroke-dasharray="10 5"/>
<line x1="0" x2="400" y1="200" y2="200" stroke="gray" stroke-dasharray="10 5"/>
<!-- Circle -->
<circle id ="circle1" r="50" cx="95" cy="95" style="stroke: black; stroke-width: 2; fill: blue">
<animateTransform attributeName="transform"
type="rotate"
from="0 200 200" to="360 200 200"
begin="0s" dur="3s"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle1"
attributeName="r"
dur="9s"
from="50"
to="0"
repeatCount="indefinite"/>
<animate
xlink:href="#circle1"
attributeName="cx"
dur="9s"
from="95"
to="200"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle1"
attributeName="cy"
dur="9s"
from="95"
to="200"
repeatCount="indefinite"
/>
<animate
id="animation1"
attributeName="fill"
begin="8.9s;animation1.end+18s"
dur="0.001s"
from="blue"
to="red"
fill="freeze"
/>
<animate
id="animation2"
attributeName="fill"
begin="17.9s;animation2.end+18s"
dur="0.001s"
from="red"
to="blue"
fill="freeze"
/>
</circle>
</svg>
\ No newline at end of file
frontend/src/SVG/svg7.svg 0 → 100644
+ 279
− 0
View file @ 0779d806
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
<!-- Background -->
<rect width="400" height="400" x="0" y="0">
<animate
attributeName="fill"
dur="20s"
values ="black; skyblue; white; lime; black"
repeatCount="indefinite"
/>
</rect>
<!-- Big circles -->
<circle id="circle1" r="50" cx="50" cy="300" fill="goldenrod" stroke="black" stroke-width="1">
<animate
xlink:href="#circle1"
id="animation1"
attributeName="r"
dur="3s"
from="10"
to="50"
repeatCount="indefinite"/>
<animate
xlink:href="#circle1"
attributeName="cy"
dur="3s"
from="300"
to="50"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle1"
attributeName="cx"
dur="10s"
values="50; 350; 50"
repeatCount="indefinite"
/>
</circle>
<circle id="circle2" r="50" cx="350" cy="50" fill="crimson" stroke="black" stroke-width="1">
<animate
xlink:href="#circle2"
id="animation1"
attributeName="r"
dur="3s"
from="10"
to="50"
repeatCount="indefinite"/>
<animate
xlink:href="#circle2"
attributeName="cy"
dur="3s"
from="50"
to="300"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle2"
attributeName="cx"
dur="10s"
values="350; 50; 350"
repeatCount="indefinite"
/>
</circle>
<!-- Smaller circles -->
<circle id="circle3" r="5" cx="250" cy="300" fill="goldenrod" stroke="black" stroke-width="1">
<animate
xlink:href="#circle3"
id="animation1"
attributeName="r"
dur="2s"
from="5"
to="25"
repeatCount="indefinite"/>
<animate
xlink:href="#circle3"
attributeName="cy"
dur="2s"
from="300"
to="50"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle3"
attributeName="cx"
dur="10s"
values="250; 150; 250"
repeatCount="indefinite"
/>
</circle>
<circle id="circle4" r="5" cx="150" cy="300" fill="crimson" stroke="black" stroke-width="1">
<animate
xlink:href="#circle4"
id="animation1"
attributeName="r"
dur="2s"
from="5"
to="25"
repeatCount="indefinite"/>
<animate
xlink:href="#circle4"
attributeName="cy"
dur="2s"
from="300"
to="50"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle4"
attributeName="cx"
dur="10s"
values="150; 250; 150"
repeatCount="indefinite"
/>
</circle>
<!-- Smallest circles -->
<circle id="circle5" r="0" cx="225" cy="300" fill="crimson" stroke="black" stroke-width="1">
<animate
xlink:href="#circle5"
id="animation1"
attributeName="r"
dur="1s"
from="0"
to="15"
repeatCount="indefinite"/>
<animate
xlink:href="#circle5"
attributeName="cy"
dur="1s"
from="300"
to="50"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle5"
attributeName="cx"
dur="10s"
values="225; 175; 225"
repeatCount="indefinite"
/>
</circle>
<circle id="circle6" r="0" cx="175" cy="300" fill="crimson" stroke="black" stroke-width="1">
<animate
xlink:href="#circle6"
id="animation1"
attributeName="r"
dur="1s"
from="0"
to="15"
repeatCount="indefinite"/>
<animate
xlink:href="#circle6"
attributeName="cy"
dur="1s"
from="300"
to="50"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle6"
attributeName="cx"
dur="10s"
values="175; 225; 175"
repeatCount="indefinite"
/>
</circle>
<!-- Smallest circles, but from the top -->
<circle id="circle7" r="0" cx="225" cy="50" fill="goldenrod" stroke="black" stroke-width="1">
<animate
xlink:href="#circle7"
id="animation1"
attributeName="r"
dur="1s"
from="0"
to="15"
repeatCount="indefinite"/>
<animate
xlink:href="#circle7"
attributeName="cy"
dur="1s"
from="50"
to="300"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle7"
attributeName="cx"
dur="10s"
values="225; 175; 225"
repeatCount="indefinite"
/>
</circle>
<circle id="circle8" r="0" cx="175" cy="50" fill="goldenrod" stroke="black" stroke-width="1">
<animate
xlink:href="#circle8"
id="animation1"
attributeName="r"
dur="1s"
from="0"
to="15"
repeatCount="indefinite"/>
<animate
xlink:href="#circle8"
attributeName="cy"
dur="1s"
from="50"
to="300"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle8"
attributeName="cx"
dur="10s"
values="175; 225; 175"
repeatCount="indefinite"
/>
</circle>
<!-- Smaller circles again -->
<circle id="circle9" r="5" cx="250" cy="50" fill="goldenrod" stroke="black" stroke-width="1">
<animate
xlink:href="#circle9"
id="animation1"
attributeName="r"
dur="2s"
from="5"
to="25"
repeatCount="indefinite"/>
<animate
xlink:href="#circle9"
attributeName="cy"
dur="2s"
from="50"
to="300"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle9"
attributeName="cx"
dur="10s"
values="250; 150; 250"
repeatCount="indefinite"
/>
</circle>
<circle id="circle10" r="5" cx="150" cy="50" fill="crimson" stroke="black" stroke-width="1">
<animate
xlink:href="#circle10"
id="animation1"
attributeName="r"
dur="2s"
from="5"
to="25"
repeatCount="indefinite"/>
<animate
xlink:href="#circle10"
attributeName="cy"
dur="2s"
from="50"
to="300"
repeatCount="indefinite"
/>
<animate
xlink:href="#circle10"
attributeName="cx"
dur="10s"
values="150; 250; 150"
repeatCount="indefinite"
/>
</circle>
</svg>
\ No newline at end of file
frontend/src/SVGs.tsx
+ 1
− 1
View file @ 0779d806
......@@ -32,4 +32,4 @@ export default [ // Collection of Artworks that will be displayed
<rect width={"200"} height={80} fill={"teal"} />
</svg>,
// TODO: ADD SVGS IN HERE
];
\ No newline at end of file
];
frontend/src/react-app-env.d.ts
+ 4
− 0
View file @ 0779d806
/// <reference types="react-scripts" />
declare module '*.mp3' {
const src: string;
export default src;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment