diff --git a/frontend/src/Components/Music.tsx b/frontend/src/Components/Music.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/frontend/src/Media/bensound-energy.mp3 b/frontend/src/Media/bensound-energy.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..9a8f68471a98b659ae3e9e7983116708bbac26af Binary files /dev/null and b/frontend/src/Media/bensound-energy.mp3 differ diff --git a/frontend/src/Media/bensound-epic.mp3 b/frontend/src/Media/bensound-epic.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..0a2308eb71782084b2d8413efb82d26ff38c5386 Binary files /dev/null and b/frontend/src/Media/bensound-epic.mp3 differ diff --git a/frontend/src/Media/bensound-thejazzpiano.mp3 b/frontend/src/Media/bensound-thejazzpiano.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..7dc446711789c44a40579a56c237fc23212ca765 Binary files /dev/null and b/frontend/src/Media/bensound-thejazzpiano.mp3 differ diff --git a/frontend/src/SVG/svg1.svg b/frontend/src/SVG/svg1.svg new file mode 100644 index 0000000000000000000000000000000000000000..e7f7ca7887aa0d57db7d6c6c6dadcaba42e419cb --- /dev/null +++ b/frontend/src/SVG/svg1.svg @@ -0,0 +1,115 @@ +<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 diff --git a/frontend/src/SVG/svg2.svg b/frontend/src/SVG/svg2.svg new file mode 100644 index 0000000000000000000000000000000000000000..fc5fa30aad51f193b883df2a5eddece211a4cd85 --- /dev/null +++ b/frontend/src/SVG/svg2.svg @@ -0,0 +1,68 @@ +<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 diff --git a/frontend/src/SVG/svg3.svg b/frontend/src/SVG/svg3.svg new file mode 100644 index 0000000000000000000000000000000000000000..7683aefbf0dffbf0e2de494a6ffda56c9ff7d837 --- /dev/null +++ b/frontend/src/SVG/svg3.svg @@ -0,0 +1,168 @@ +<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 diff --git a/frontend/src/SVG/svg4.svg b/frontend/src/SVG/svg4.svg new file mode 100644 index 0000000000000000000000000000000000000000..780b2e3d8c13ee5b9ba4fb93e73e98fc8b0ccc9e --- /dev/null +++ b/frontend/src/SVG/svg4.svg @@ -0,0 +1,43 @@ +<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 diff --git a/frontend/src/SVG/svg5.svg b/frontend/src/SVG/svg5.svg new file mode 100644 index 0000000000000000000000000000000000000000..8ba51cef54fff2ec3e049a952a3a615e6444fde3 --- /dev/null +++ b/frontend/src/SVG/svg5.svg @@ -0,0 +1,48 @@ +<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