Nantes Université

Skip to content
Extraits de code Groupes Projets
Valider c58f59b9 rédigé par Gwenole ROGER's avatar Gwenole ROGER
Parcourir les fichiers

Edit index.html

parent 6305dd40
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Pipeline #102261 réussi
Étape : test
Étape : deploy
Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 105 ajouts et 37 suppressions
index.html
+ 105
− 37
Voir le fichier @ c58f59b9
......@@ -5,6 +5,46 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texas Tribune Daily</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Styles for comments, avatars, and making links look like regular text */
.comment {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.comment img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 8px;
}
.comment a {
text-decoration: none;
color: black;
font-weight: normal;
}
.cookie-notice {
position: fixed;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
}
.cookie-notice button {
background: white;
border: none;
padding: 5px 10px;
margin-left: 10px;
cursor: pointer;
}
nav a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<header>
......@@ -25,8 +65,13 @@
<main>
<section id="headline">
<h2>Real Headline Here</h2>
<p>Your actual news article goes here.</p>
<h2>Potential Murder Suspect Found?</h2>
<p>
Authorities are investigating a person of interest in a local homicide case.
While details remain unclear, the suspect is said to have been spotted
near the crime scene just moments before the incident. More updates
as the story develops.
</p>
</section>
<section id="fake-news">
......@@ -37,8 +82,6 @@
<section id="comments">
<h3>Comments</h3>
<ul id="comment-section"></ul>
<input type="text" id="comment-input" placeholder="Write a comment...">
<button onclick="postComment()">Post</button>
</section>
</main>
......@@ -46,47 +89,72 @@
<p>&copy; 2025 Texas Tribune Daily | <a href="rickroll.html">About Us</a></p>
</footer>
<div class="cookie-notice" id="cookie-notice">
This website uses cookies to enhance your experience. <button onclick="acceptCookies()">Accept</button>
</div>
<script>
function acceptCookies() {
document.getElementById("cookie-notice").style.display = "none";
}
document.addEventListener("DOMContentLoaded", function() {
const subjects = ["Texas Man", "Local Farmer", "State Governor", "Cowboy", "BBQ Pitmaster", "Mysterious Stranger", "Houston Resident"];
const actions = ["Discovers", "Bans", "Legalizes", "Denounces", "Announces", "Introduces", "Rejects"];
const objects = ["Giant Armadillo", "UFO", "BBQ Tax", "Talking Cactus", "Wild Horse Stampede", "Alien Encounter", "Tornado Repellent"];
const locations = ["in Backyard", "Near Dallas", "During Rodeo", "at State Fair", "on Live TV", "on Highway 35", "in Austin"];
const avatarsAPI = "https://api.dicebear.com/7.x/identicon/svg?seed=";
const commentSection = document.getElementById("comment-section");
const numComments = Math.floor(Math.random() * 31) + 50;
function generateHeadline() {
return `${subjects[Math.floor(Math.random() * subjects.length)]} ${actions[Math.floor(Math.random() * actions.length)]} ${objects[Math.floor(Math.random() * objects.length)]} ${locations[Math.floor(Math.random() * locations.length)]}`;
}
const breakingNews = [
"BREAKING: Texas Declares Brisket a National Treasure!",
"BREAKING: Cowboy Boots Now Required for Voting in Dallas.",
"BREAKING: Scientists Discover that 90% of Texans Already Own a Truck."
const suspectComments = [
"I saw that suspect lurking around my neighborhood last week!",
"This suspect is definitely guilty, just look at them!",
"Anyone else think the suspect might be framed?",
"There were rumors about the suspect being in trouble before..."
];
const advertisingComments = [
"Hot singles in your area—click now!",
"Buy the new BBQ Master 3000 at half price! Limited time offer.",
"Earn $500/day working from home! Just click here now.",
"You won't believe these 10 new ways to cook chili!"
];
const randomComments = [
"I came here for the weather report, but this is wild.",
"Texas is the best state, hands down.",
"This is all a conspiracy if you ask me...",
"What if the suspect is actually an alien?"
];
function pickCommentCategory() {
let roll = Math.random();
if (roll < 0.4) return suspectComments;
if (roll < 0.7) return advertisingComments;
return randomComments;
}
document.getElementById("breaking-text").innerText = breakingNews[Math.floor(Math.random() * breakingNews.length)];
function generateOneComment() {
let commentArray = pickCommentCategory();
let commentText = commentArray[Math.floor(Math.random() * commentArray.length)];
let avatarURL = avatarsAPI + Math.random().toString(36).substring(7);
let newComment = document.createElement("li");
newComment.classList.add("comment");
let img = document.createElement("img");
img.src = avatarURL;
img.alt = "Profile";
let span = document.createElement("span");
span.innerText = commentText;
newComment.appendChild(img);
newComment.appendChild(span);
commentSection.appendChild(newComment);
}
const list = document.getElementById("fake-articles");
for (let i = 0; i < 7; i++) {
let li = document.createElement("li");
let a = document.createElement("a");
a.href = "rickroll.html";
a.innerText = generateHeadline();
li.appendChild(a);
list.appendChild(li);
for (let i = 0; i < numComments; i++) {
generateOneComment();
}
});
function postComment() {
let commentInput = document.getElementById("comment-input");
let commentSection = document.getElementById("comment-section");
let newComment = document.createElement("li");
let a = document.createElement("a");
a.href = "rickroll.html";
a.innerText = commentInput.value || "Anonymous says: Great article!";
newComment.appendChild(a);
commentSection.appendChild(newComment);
commentInput.value = "";
}
</script>
</body>
</html>
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter