Skip to content

Commit

Permalink
a proud intiative by
Browse files Browse the repository at this point in the history
  • Loading branch information
@FirePheonix
FirePheonix committed Jan 17, 2025
1 parent 4857278 commit 65031fd
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 106 deletions.
42 changes: 13 additions & 29 deletions css/activities.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1769,51 +1769,35 @@ table {
clear: both;
}
}
.upper-text, .lower-text {
.upper-text{
margin: 0;
font-size: 12px;
font-size: 14px;
font-style: italic;
font-weight: 100;
}
.lower-text{
text-align: right;
}
@keyframes rainbowAnimation {
0% { stop-color: red; }
20% { stop-color: orange; }
40% { stop-color: yellow; }
60% { stop-color: green; }
80% { stop-color: blue; }
100% { stop-color: violet; }
}
@keyframes dullBorderAnimation {
0% { stop-color: #7a7a7a; } /* Gray */
25% { stop-color: #a2a2a2; } /* Light Gray */
50% { stop-color: #5c5c5c; } /* Dark Gray */
75% { stop-color: #8e8e8e; } /* Medium Gray */
100% { stop-color: #7a7a7a; } /* Back to Gray */
}
.bottom-right-logo1{
position: absolute;
bottom: 30px; /* Distance from the bottom */
right: 125px; /* Distance from the right */
bottom: 32px; /* Distance from the bottom */
right: 23px; /* Distance from the right */
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.bottom-right-logo3{
position: absolute;
bottom: 3px; /* Distance from the bottom */
right: 3px; /* Distance from the right */
padding: 5px;
border-radius: 5px;
cursor: pointer;
color: black;
}
.logo-container{
position: absolute;
bottom: 3px; /* Distance from the bottom */
right: 25px; /* Distance from the right */
bottom: 1px; /* Distance from the bottom */
right: 23px; /* Distance from the right */
padding: 0px;
border-radius: 5px;
cursor: pointer;
}
#link-to-sugarLabs:link ,
#link-to-sugarLabs:visited ,
#link-to-sugarLabs:hover ,
#link-to-sugarLabs:active {
color: #000;
}
41 changes: 8 additions & 33 deletions dist/css/activity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,55 +229,30 @@ input.number {
#canvas {
overflow-y: visible;
}
.upper-text, .lower-text {
.upper-text {
margin: 0;
font-size: 23px;
font-size: 14px;
font-style: italic;
font-weight: 100;
}
.lower-text{
text-align: right;
}
@keyframes rainbowAnimation {
0% { stop-color: red; }
20% { stop-color: orange; }
40% { stop-color: yellow; }
60% { stop-color: green; }
80% { stop-color: blue; }
100% { stop-color: violet; }
}
@keyframes dullBorderAnimation {
0% { stop-color: #7a7a7a; } /* Gray */
25% { stop-color: #a2a2a2; } /* Light Gray */
50% { stop-color: #5c5c5c; } /* Dark Gray */
75% { stop-color: #8e8e8e; } /* Medium Gray */
100% { stop-color: #7a7a7a; } /* Back to Gray */
}
.bottom-right-logo1{
z-index: 99999;
position: absolute;
bottom: 57px; /* Distance from the bottom */
right: 210px; /* Distance from the right */
bottom: 32px; /* Distance from the bottom */
right: 23px; /* Distance from the right */
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.bottom-right-logo3{
z-index: 99999;
position: absolute;
bottom: 3px; /* Distance from the bottom */
right: 3px; /* Distance from the right */
padding: 5px;
border-radius: 5px;
cursor: pointer;
color: black;
}
.logo-container{
z-index: 99999;
position: absolute;
bottom: 0px; /* Distance from the bottom */
right: 20px; /* Distance from the right */
bottom: 1px; /* Distance from the bottom */
right: 23px; /* Distance from the right */
padding: 0px;
border-radius: 0px;
border-radius: 5px;
cursor: pointer;
}
#link-to-sugarLabs:link ,
Expand Down
78 changes: 34 additions & 44 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,54 +176,21 @@
<div class="loading-text" id="loadingText" style="margin-top:1.5rem;"></div>
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs">
<div class= "bottom-right-logo1" id="bottom-right-logo">
<h1 class="upper-text" id="this-is-a-text">This is a</h1>
<h1 class="upper-text" id="this-is-a-text"></h1>
</div>
<div class="logo-container" id="bottom-right-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501 167" height="50" width="150">
<!-- Define the gradient for the rainbow animation in 'sugar'-->
<defs>
<linearGradient id="rainbow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red">
<animate attributeName="stop-color" values="red;orange;yellow;green;blue;indigo;violet;red" dur="10s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="violet">
<animate attributeName="stop-color" values="violet;red;orange;yellow;green;blue;indigo;violet" dur="10s" repeatCount="indefinite" />
</stop>
</linearGradient>

<!-- Define the gradient for the border animation in 'sugar' -->
<linearGradient id="dull-colors-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#7a7a7a">
<animate attributeName="stop-color" values="#7a7a7a;#a2a2a2;#5c5c5c;#8e8e8e;#7a7a7a" dur="5s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#5c5c5c">
<animate attributeName="stop-color" values="#5c5c5c;#8e8e8e;#7a7a7a;#a2a2a2;#5c5c5c" dur="5s" repeatCount="indefinite" />
</stop>
</linearGradient>

</defs>

<!-- Logo paths -->
<path d="m63.05 117.52c-11.05 0-21.12-5.5-21.12-11.539 0-3.157 2.303-5.63 5.244-5.63 2.02 0 3.719 1.183 5.515 2.435 2.592 1.809 5.529 3.855 10.651 3.855 5.139 0 8.21-2.647 8.21-5.209 0-3.416-5.271-5.607-10.852-7.927-7.799-3.243-16.639-6.918-16.639-15.886 0-10.573 9.933-16.279 19.28-16.279 7.89 0 18.895 4.132 18.895 10.86 0 2.526-1.763 5.244-5.632 5.244-2.068 0-3.558-1.125-4.997-2.212-1.872-1.414-3.994-3.02-8.266-3.02-1.209 0-7.242.227-7.242 4.726 0 2.729 4.879 4.613 10.04 6.608 7.772 3 17.446 6.739 17.446 16.333.002 12.12-10.646 17.636-20.538 17.636"
fill="url(#rainbow-gradient)"
stroke="url(#dull-colors-gradient)"
stroke-width="3" />
class="color-change" />
<path d="m117.65 117.52c-10.726 0-22.19-5.854-22.19-22.281v-27.59c0-3.773 2.418-6.309 6.02-6.309s6.02 2.536 6.02 6.309v27.299c0 7.979 3.224 11.693 10.146 11.693 6.922 0 10.146-3.715 10.146-11.693v-27.3c0-3.773 2.418-6.309 6.02-6.309 3.6 0 6.02 2.536 6.02 6.309v27.59c0 16.428-11.46 22.282-22.18 22.282"
fill="url(#rainbow-gradient)"
stroke="url(#dull-colors-gradient)"
stroke-width="3" />
class="color-change" />
<path d="m175.53 137.85c-8.493 0-21.509-4.994-21.509-11.149 0-2.758 1.671-5.729 5.342-5.729 2.02 0 3.766 1.074 5.785 2.317 2.804 1.728 5.981 3.683 11.06 3.683 10.827 0 12.215-9.426 12.273-13.816-3.037 2.818-7.04 4.37-11.498 4.37-16.03 0-24.414-14.13-24.414-28.09s8.386-28.09 24.414-28.09c4.424 0 8.692 1.905 11.688 4.32.654-2.638 2.95-4.32 6.122-4.32 2.778 0 5.731 2.077 5.731 5.923v44.24c0 16-9.811 26.346-24.993 26.346m1.452-65.63c-9.132 0-12.372 9.271-12.372 17.212s3.24 17.211 12.372 17.211c9.13 0 12.371-9.271 12.371-17.211s-3.241-17.212-12.371-17.212"
fill="url(#rainbow-gradient)"
stroke="url(#dull-colors-gradient)"
stroke-width="3" />
class="color-change" />
<path d="m256.26 117.52c-2.625 0-5.279-1.729-5.68-5.04-3.492 3.314-7.752 5.04-12.52 5.04-16.03 0-24.411-14.13-24.411-28.09 0-13.958 8.385-28.09 24.411-28.09 4.755 0 8.745 1.484 12.563 4.743.52-3.119 3.091-4.743 5.636-4.743 2.776 0 5.727 2.076 5.727 5.923v44.33c.001 3.846-2.95 5.923-5.726 5.923m-18.199-45.3c-9.132 0-12.373 9.273-12.373 17.212 0 7.94 3.241 17.212 12.373 17.212 9.133 0 12.373-9.272 12.373-17.212 0-7.939-3.24-17.212-12.373-17.212"
fill="url(#rainbow-gradient)"
stroke="url(#dull-colors-gradient)"
stroke-width="3" />
class="color-change" />
<path d="m282.98 117.52c-3.601 0-6.02-2.536-6.02-6.311v-43.561c0-3.774 2.419-6.309 6.02-6.309 3.289 0 5.593 2.118 5.965 5.361 2.537-2.849 6.103-5.361 10.1-5.361 3.768 0 6.503 2.572 6.503 6.115 0 2.326-1.173 5.322-6.76 6.375-2.961.515-9.793 2.788-9.793 12.89v24.49c0 3.774-2.419 6.311-6.02 6.311"
fill="url(#rainbow-gradient)"
stroke="url(#dull-colors-gradient)"
stroke-width="3" />
class="color-change" />
<path d="m324.99 111.21c0 2.808-1.646 4.551-4.259 4.551-2.614 0-4.26-1.743-4.26-4.551v-66.21c0-2.808 1.646-4.55 4.26-4.55 2.613 0 4.259 1.743 4.259 4.55z"
fill="#969696"
stroke-width="0" />
Expand All @@ -237,18 +204,41 @@ <h1 class="upper-text" id="this-is-a-text">This is a</h1>
fill="#969696"
stroke-width="0" />
</svg>

<script>
// List of color pairs to dynamically alot.
const colorPairs = [
{ fill: "#A00000", stroke: "#FF7800" },
{ fill: "#68008C", stroke: "#78E600" },
{ fill: "#6E008C", stroke: "#00BEFF" },
{ fill: "#006E00", stroke: "#00BEFF" },
{ fill: "#033CD2", stroke: "#00BEFF" },
{ fill: "#033CD2", stroke: "#FF64D2" },
{ fill: "#006E00", stroke: "#78E600" },
{ fill: "#6E008C", stroke: "#FFD732" },
{ fill: "#68008C", stroke: "#78E600" },
{ fill: "#6E008C", stroke: "#FF7800" },
{ fill: "#6E008C", stroke: "#FF64D2" },
{ fill: "#033CD2", stroke: "#FF7800" }
];
const paths = document.querySelectorAll(".color-change");
// Randomly select a color pair
const randomColorPair = colorPairs[Math.floor(Math.random() * colorPairs.length)];
// apply random pairs.
paths.forEach(path => {
path.setAttribute("fill", randomColorPair.fill);
path.setAttribute("stroke", randomColorPair.stroke);
path.setAttribute("stroke-width",3)
});
document.getElementById("this-is-a-text").textContent = "A proud initiative by";
</script>

</div>
<div class= "bottom-right-logo3" id="bottom-right-logo">
<h1 class="lower-text" id="project-text">project.</h1>
</div>
</a>
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
const loadingText = document.getElementById("loadingText");
document.getElementById("project-text").textContent = _("project.");
document.getElementById("this-is-a-text").textContent = _("This is a");
const texts = ["Do, Re, Mi, Fa, Sol, La, Ti, Do", "Loading Music Blocks...", "Reading Music..."];

let index = 0;
Expand Down

0 comments on commit 65031fd

Please sign in to comment.