Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history 
Signed-off-by: azjezz <azjezz@protonmail.com>
  • Loading branch information
@azjezz
azjezz committed Oct 15, 2024
0 parents commit d459848
Show file tree
Hide file tree
Showing 2 changed files with 276 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# carthage.software
275 changes: 275 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,275 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Carthage Software Cooperative</title>
<style>
/* Import Fonts */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Bebas+Neue&family=Cairo:wght@700&display=swap");

:root {
--background: #f2f1e8;
--foreground: #000000;
--primary: #c3bbb8;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Montserrat", sans-serif;
height: 100vh;
overflow: hidden;
background: var(--background);
display: flex;
flex-direction: column; /* Changed to column */
align-items: center;
justify-content: center; /* Will be adjusted with space-between */
position: relative;
color: var(--foreground);
}

.content {
z-index: 2;
background: var(--background);
margin: auto;
padding: 1rem;
position: relative;
border-radius: 12px;
text-align: center;
}

.title {
font-family: "Cairo", sans-serif;
font-size: 3.5rem;
text-transform: uppercase;
letter-spacing: 4px;
color: var(--foreground);
line-height: 1.2;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: var(--primary);
}

.title.english,
.title.amazigh {
direction: ltr;
}

.title.arabic {
direction: rtl;
}

.emojis {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}

.emoji {
position: absolute;
font-size: 2rem;
opacity: 0.8;
animation: float 5s ease-in-out infinite;
--translateX: -50%;
--translateY: -50%;
--rotate: 0deg;
--scale: 1;
transform: translate(var(--translateX), var(--translateY))
rotate(var(--rotate)) scale(var(--scale));
transition: transform 0.3s ease-in-out;
cursor: pointer;
pointer-events: auto;
}

.emoji:hover {
--scale: 2.5;
z-index: -2;
opacity: 1;
}

@keyframes float {
0% {
--translateX: -50%;
--translateY: -50%;
--rotate: 0deg;
}
25% {
--translateX: calc(-50% + 20px);
--translateY: calc(-50% - 10px);
--rotate: 3deg;
}
50% {
--translateX: -50%;
--translateY: -50%;
--rotate: 0deg;
}
75% {
--translateX: calc(-50% - 20px);
--translateY: calc(-50% + 10px);
--rotate: -3deg;
}
100% {
--translateX: -50%;
--translateY: -50%;
--rotate: 0deg;
}
}

@media (max-width: 600px) {
.letter {
padding: 20px;
}

.title {
font-size: 2rem;
}

.emoji {
font-size: 1.5rem;
}

footer {
font-size: 0.8rem;
}
}

/* New Footer Styles */
footer {
width: 100%;
text-align: center;
padding: 10px 0;
background: var(--background);
color: var(--foreground);
font-size: 1rem;
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid var(--primary);
}
</style>
</head>
<body>
<div class="emojis"></div>

<div class="content">
<div class="title english">Carthage Software Cooperative</div>
<div class="title arabic">تعاونية قرطاج للبرمجيات</div>
<div class="title amazigh">ⵜⴰⴷⵓⴽⵍⵉ ⵏ ⵓⵙⴻⵖⵣⴰⵏ ⵏ ⴽⴰⵔⵟⴰⵊ</div>
</div>

<script>
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}

function getPositionType() {
return Math.random() < 0.5 ? "h" : "v";
}

function getRandomRange(ranges) {
const selectedRange =
ranges[Math.floor(Math.random() * ranges.length)];
return getRandom(selectedRange[0], selectedRange[1]);
}

function isTooClose(newPos, existingPositions, buffer = 8) {
for (let pos of existingPositions) {
if (
Math.abs(newPos.top - pos.top) < buffer &&
Math.abs(newPos.left - pos.left) < buffer
) {
return true;
}
}
return false;
}

document.addEventListener("DOMContentLoaded", () => {
const emojisContainer = document.querySelector(".emojis");
const emojiTypes = ["crab", "fox", "elephant"];
const emojiCharacters = {
crab: "🦀",
fox: "🦊",
elephant: "🐘",
};
const existingPositions = [];

function createEmojis(type, count) {
for (let i = 0; i < count; i++) {
const emoji = document.createElement("div");
emoji.classList.add("emoji", type);
emoji.textContent = emojiCharacters[type];
emojisContainer.appendChild(emoji);

// Positioning
let topPos, leftPos;
let attempts = 0;
const maxAttempts = 100;

do {
const positionType = getPositionType();

if (positionType === "h") {
// Horizontal positioning
leftPos = getRandomRange([
[5, 20],
[80, 95],
]);
topPos = getRandom(5, 95);
} else {
// Vertical positioning
topPos = getRandomRange([
[5, 25],
[75, 95],
]);
leftPos = getRandom(5, 95);
}

attempts++;

if (attempts > maxAttempts) {
break; // Prevent infinite loops
}
} while (
isTooClose(
{ top: topPos, left: leftPos },
existingPositions,
)
);

// Save the position
existingPositions.push({ top: topPos, left: leftPos });

// Assign the positions
emoji.style.top = `${topPos}%`;
emoji.style.left = `${leftPos}%`;

// Random animation delay between 0s and 3s
const delay = getRandom(0, 3).toFixed(2);
emoji.style.animationDelay = `${delay}s`;

// Random animation duration between 2s and 10s
const duration = getRandom(2, 10).toFixed(2);
emoji.style.animationDuration = `${duration}s`;
}
}

emojiTypes.forEach((type) => {
createEmojis(type, Math.floor(getRandom(1, 5)));
});
});
</script>
</body>
</html>

0 comments on commit d459848

Please sign in to comment.