Skip to content

Commit

Permalink
Merge pull request #1 from JollyJolli/beta
Browse files Browse the repository at this point in the history 
Beta
  • Loading branch information
@JollyJolli
JollyJolli committed Aug 26, 2024
2 parents 64f8256 + f16ddfc commit e1444d3
Show file tree
Hide file tree
Showing 4 changed files with 324 additions and 37 deletions.
92 changes: 92 additions & 0 deletions assets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,3 +210,95 @@ body.light-theme .cover-logo img {
body.light-theme .themelogo {
filter: invert(1);
}

/* Language Button */
.icons #language-btn {
background: linear-gradient(
to right,
var(--lightorangemix),
var(--purpinkish)
);
height: 3rem;
width: 3rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
}

.icons #language-btn i {
color: white;
font-size: 1.5rem; /* Adjust the size of the icon */
}

/* Modal Styles */
.modal-content {
background-color: var(--greyishblack);
color: white;
border-radius: 1rem;
border: none;
}

.modal-header {
border-bottom: none;
padding-bottom: 0.5rem;
}

.modal-title {
font-family: "Poppins", sans-serif;
font-size: 1.25rem;
font-weight: 500;
}

.modal-body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
}

.modal-footer {
border-top: none;
padding-top: 0.5rem;
justify-content: center;
}

.modal-footer .btn {
background-color: var(--lightorangemix);
color: white;
border: none;
font-family: "Poppins", sans-serif;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s;
}

.modal-footer .btn:hover {
background-color: var(--purpinkish);
}

/* Override default Bootstrap modal backdrop */
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.7);
}

/* Override default Bootstrap modal dialog */
.modal-dialog {
max-width: 90%;
margin: 1.75rem auto;
}

@media (min-width: 768px) {
.modal-dialog {
max-width: 400px;
}
}

@media (min-width: 1024px) {
.modal-dialog {
max-width: 500px;
}
}
87 changes: 87 additions & 0 deletions es/assets/script-es.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
// API endpoint
const apiUrl = "https://frasesapi.vercel.app/v1/frases/";

// Function to fetch a random quote
function getQuote() {
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
if (data.frases && data.frases.length > 0) {
// Get a random index from the array of quotes
const randomIndex = Math.floor(Math.random() * data.frases.length);
const quote = data.frases[randomIndex].frase;
const author = data.frases[randomIndex].autor;
displayQuote(quote, author);
} else {
console.error("No quotes found in the API response.");
}
})
.catch((error) => console.error("Error fetching quote:", error));
}

// Function to display the quote
function displayQuote(quote, author) {
const quoteElement = document.querySelector(".quote");
const authorElement = document.querySelector(".author");
quoteElement.textContent = `"${quote}"`;
authorElement.textContent = `—${author}`;
}

// Add event listener to generate button
document.getElementById("generate-btn").addEventListener("click", getQuote);

// Fetch a quote on page load
getQuote();

// Copy Quote

const quote = document.querySelector(".quote");
const copyBtn = document.getElementById("copy-btn");
const author = document.querySelector(".author");
const alertBox = document.getElementById("alert-box");
const alertMessage = document.getElementById("alert-message");

copyBtn.addEventListener("click", async () => {
try {
const quoteText = `${quote.textContent} ${author.textContent}`;
await navigator.clipboard.writeText(quoteText);
alertBox.classList.remove("hidden");
setTimeout(() => {
alertBox.classList.add("hidden");
}, 2000);
} catch (error) {
console.error("Error copying quote:", error);
}
});

// Share

const shareBtn = document.getElementById("share-btn");

shareBtn.addEventListener("click", async () => {
try {
const quoteText = `${quote.textContent} ${author.textContent}`;
const shareData = {
title: "Inspirational Quote",
text: quoteText,
url: window.location.href, // optional
};

if (navigator.share) {
await navigator.share(shareData);
} else {
console.error("Web Share API not supported");
}
} catch (error) {
console.error("Error sharing quote:", error);
}
});

// Get the theme toggle button
const themeToggle = document.getElementById("theme-toggle");

// Add an event listener to the button
themeToggle.addEventListener("click", () => {
// Toggle the dark theme class on the body element
document.body.classList.toggle("light-theme");
});
107 changes: 107 additions & 0 deletions es/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<!-- Link CSS -->
<link rel="stylesheet" href="../assets/styles.css" />

<title>Quotify</title>

<!-- Favicon -->
<link rel="icon" href="../assets/images/dark-logo.png" />
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&family=Vidaloka&display=swap" rel="stylesheet" />
</head>

<body>
<!-- Navbar -->
<div class="navbar container">
<div class="menu">
<button id="theme-toggle" class="btn">
<img src="../assets/images/moon.png" style="height: 1.5rem" class="themelogo" />
</button>
</div>
<div class="menu ml-auto">
<img src="../assets/images/dark-logo.png" style="height: 2rem" />
</div>
<div class="menu ml-auto">
<a href="https://github.com/Sabeer-Junaid/quotify" target="_blank">
<button id="code-btn" class="btn">
<img src="../assets/images/code-ico.png" style="height: 1.4rem" />
</button>
</a>
</div>
</div>

<!-- Main -->
<div class="cover-logo container">
<img src="../assets/images/dark-logo.png" class="logo" />
</div>

<div class="content container">
<p class="quote">
<!-- Fetch Quote Display here -->
</p>
<p class="author">
<!-- Fetch Author Display here -->
</p>
<div class="icons">
<button class="btn" id="share-btn">
<img src="../assets/images/share-ico.png" />
</button>
<button class="btn" id="generate-btn">
<img src="../assets/images/newquote-ico.png" />
</button>
<button class="btn" id="copy-btn">
<img src="../assets/images/copy-ico.png" />
</button>
<!-- Language Button -->
<button class="btn" data-toggle="modal" data-target="#languageModal">
<i class="fas fa-globe-americas"></i>
</button>
</div>
</div>

<div id="alert-box" class="hidden container">
<p id="alert-message">
<img src="../assets/images/greendot.png" height="10" width="10" /> Copiado
</p>
</div>

<!-- Language Modal -->
<div class="modal fade" id="languageModal" tabindex="-1" role="dialog" aria-labelledby="languageModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="languageModalLabel">Seleccionar Idioma</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<button class="btn btn-primary" onclick="window.location.href='../index.html'">Inglés</button>
</div>
</div>
</div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/script-es.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Loading

0 comments on commit e1444d3

Please sign in to comment.