Edrol97
Silver Coder
Right, so I wanted to edit and rationalise the code of one of my website pages with AI to ensure that it looked like a specific version of a news parody item. I'm generally anti-AI and I had a base design already, but it's changed a few things, and the logo now no longer shows up. I've checked and checked again that it is the correct file path. The logo also works in the favicon but does not work in the body.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Least Inaccurate Ever Seriously</title>
<link rel="icon" type="image/x-icon" href="img/background/LOL Logo.svg" />
<style>
@font-face {
font-family: Eliot Lord;
src: url(Fonts/Eliothand-Regular.otf);
}
@font-face {
font-family: Times;
src: url(/Fonts/TIMES%20CY.TTF);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
-webkit-user-drag: none;
}
body {
opacity: 100%;
font-family: Eliot Lord;
font-size: 2.2dvw;
margin: 0;
user-select: none;
-webkit-user-drag: none;
cursor: url(img/background/cursors/Cursor.svg),
url(img/background/Pointer.svg), pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: white;
min-height: 100vh;
overflow-x: hidden;
padding-top: 80px;
}
nav {
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 14px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 0 10%;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
box-sizing: border-box;
height: 80px;
}
nav img {
display: inline-block;
}
nav .logo {
height: 100%;
width: auto;
margin: 0;
position: relative;
left: 0;
}
nav a:hover {
color: #e4003b;
cursor: url(img/background/cursors/Pointer.svg), pointer;
}
button:hover {
cursor: url(img/background/cursors/Pointer.svg), pointer;
}
.nav-link {
padding: 28px 20px;
text-decoration: none;
color: #000000;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
border-bottom: 3px solid transparent;
display: inline-block;
height: 80px;
line-height: 80px;
padding-top: 0;
padding-bottom: 0;
}
.nav-link:hover {
border-bottom: 3px solid #e4003b;
color: #e4003b;
}
.line {
display: none;
}
.container {
max-width: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.95);
text-align: center;
}
h1 {
font-family: Eliot Lord;
color: #e4003b;
margin-bottom: 10px;
font-weight: 700;
}
.subtitle {
color: #b50938;
font-size: 1.1em;
margin-bottom: 40px;
}
.fact-card {
background: #fff;
border-radius: 15px;
padding: 30px;
margin: 30px 0;
box-shadow: 0 10px 30px rgba(0, 135, 220, 0.1);
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 0.3s ease;
}
.fact-text {
line-height: 1;
color: #2c3e50;
text-align: center;
}
.fact-category {
display: inline-block;
background: #0087dc;
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 1em;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
button {
font-family: Eliot Lord;
background: linear-gradient(45deg, #00bed6, #0087dc);
color: white;
border: none;
outline: none;
padding: 15px 40px;
font-size: 1em;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
button:focus {
outline: none;
}
button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(52, 152, 219, 0.4);
}
button:active {
transform: translateY(-1px);
}
option {
font-size: 2em;
font-family: Eliot Lord;
}
.controls {
margin: 30px 0;
}
.category-filter {
margin: 20px 0;
}
.category-filter select {
font-family: Eliot Lord;
padding: 30px 20px;
border-radius: 25px;
border: 2px solid #3498db;
font-size: 1em;
color: #2c3e50;
margin: 0 10px;
cursor: url(img/background/cursors/Pointer.svg), pointer;
}
.stats {
display: flex;
justify-content: space-around;
margin: 30px 0;
padding: 20px;
background: #ffffff;
border-radius: 10px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2em;
font-weight: bold;
color: #3498db;
}
.stat-label {
color: #7f8c8d;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
@media (max-width: 768px) {
nav {
height: 60px;
justify-content: space-between;
padding: 0 10px;
}
nav .logo {
height: 40px;
left: 0;
margin: 0;
}
.nav-link {
padding: 20px 8px;
font-size: 11px;
height: 60px;
line-height: 60px;
}
body {
padding-top: 60px;
}
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2em;
}
.fact-text {
font-size: 1.1em;
}
.stats {
flex-direction: column;
gap: 15px;
}
}
.author-section {
background: linear-gradient(135deg, #012169, #0087dc);
color: white;
padding: 40px 20px;
position: fixed;
top: 80px;
left: 0;
width: 100%;
z-index: 999;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 40px;
gap: 30px;
flex-wrap: wrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, top 0.3s ease;
}
.author-section.hidden {
transform: translateY(-220px);
}
.author-portrait {
width: 150px;
height: 150px;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.author-portrait img {
display: block;
}
.author-info {
max-width: 600px;
text-align: left;
}
.author-info h3 {
font-size: 1.8em;
margin-bottom: 10px;
color: white;
}
.author-info .author-title {
font-size: 1.1em;
color: #00bed6;
margin-bottom: 15px;
font-weight: 600;
}
.author-info p {
font-size: 1em;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.listen-btn {
background: white;
color: #012169;
border: none;
padding: 15px 45px;
border-radius: 50px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 15px;
}
.listen-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
background: #f0f0f0;
}
.listen-btn:active {
transform: translateY(-3px);
}
@media (max-width: 600px) {
.author-section {
flex-direction: column;
text-align: center;
}
.author-info {
text-align: center;
}
.author-portrait {
width: 100px;
height: 100px;
}
.author-info h3 {
font-size: 1.4em;
}
.author-info p {
font-size: 0.9em;
}
}
</style>
</head>
<body>
<nav>
<a href="Truedat.html">
<img src="img/background/LOL%20Logo.svg" alt="Logo" />
</a>
<div>
<a href="Hi.html" class="nav-link">Hi</a>
<a href="about_me.html" class="nav-link">Bio</a>
<a href="Art.html" class="nav-link">Pics</a>
<a href="cv.html" class="nav-link">CV</a>
<a href="Games.html" class="nav-link">Fun</a>
<a href="Joke.html" class="nav-link">Ha</a>
</div>
</nav>
<div class="author-section">
<a href="elcapital.html"><button>Don't Listen</button></a>
<div class="author-info">to the Fascist Media</div>
</div>
<div class="line">
<hr />
</div>
<div class="container">
<br />
<p class="subtitle">
<br />
<br />
<br />
On this page, there will be no fake news or alternative fact. Only
actual facts allowed.
</p>
<div class="stats">
<div class="stat-item"></div>
</div>
<div class="category-filter">
<label for="categorySelect">Choose Category: </label>
<select id="categorySelect" style="text-align: center">
<option value="all">All</option>
<option value="democracy">Democracy</option>
<option value="constitution">Constitution</option>
<option value="history">History</option>
<option value="parties">Parties</option>
<option value="economics">Economics</option>
<option value="international">International</option>
<option value="people">People</option>
</select>
</div>
<div class="controls">
<button class="generate-btn" onclick="generateFact()">
I need more info
</button>
</div>
<div class="fact-card" id="factCard">
<div class="fact-category" id="factCategory">Democracy</div>
<div class="fact-text" id="factText">
Click "Generate New Fact" to discover fascinating political facts from
around the world and throughout history!
</div>
</div>
<a href="Truedat.html"><button>Test your knowledge</button></a>
</div>
<script>
const politicalFacts = {
democracy: [
"Purportedly the oldest continuous parliament in the world is the Tynwald in the Isle of Man established in 979 AD.",
"There are 650 MPs in the House of Commons.",
"The 2nd Speaker of the House of Commons was the only speaker to lose his seat.",
"Our electoral system only represents 33.7% of the population, as decided by the general election in 2024. (Electoral Reform Society)",
"If Reform got in on current polling figures, it would still only represent 34% of the population. (Ipsos)",
"The UK has one of the lowest voter turnouts in the Western world, with only 67.3% of eligible voters participating in the 2019 General Election (Electoral Commission).",
"The Overton Window is a political theory that describes the range of policies politically acceptable to the mainstream population at a given time.",
],
history: [
"For a time in 1999, the UK had one party that had a cat (called Catmando) as its co-leader - the Official Monster Raving Loony Party. ",
"Nigel Farage stood 7 times before becoming an MP.",
"The longest serving chief mouser to the UK government was a cat called Peter III, who served for 16 years from 1929 to 1945. Larry has some catching up to do.",
],
international: [
"The Soviet Union at its peak included Lithuania, Ukraine, Latvia, Estonia, Moldova, Belarus, Georgia, Armenia, Azerbaijan, Kazakhstan, Uzbekistan, Turkmenistan, Kyrgyzstan, and Tajikistan. Putin is harking back to this.",
"NATO's Article 5 has been invoked only once in its history, following the September 11, 2001 attacks.",
"The European Union began as the European Coal and Steel Community with just six member countries in 1951.",
"The United Nations was established in 1945 after World War II to promote international cooperation and prevent future conflicts. How's that working out?",
"The Universal Declaration of Human Rights was adopted by the United Nations General Assembly in 1948 and outlines fundamental human rights to be universally protected.",
"The Geneva Conventions, established in 1949, set the standards for international law regarding humanitarian treatment during war, although currently the sanctions for breaking international law seem unclear.",
],
constitution: [
"The US Constitution is the world's oldest written national constitution still in use, ratified in 1788 and still causing problems.",
"The UK doesn't have a single written constitution and we're still surviving. We don't need US importation.",
"The Magna Carta, signed in 1215, is often cited as a foundational document for modern democracy and constitutional law.",
"The UK's unwritten constitution is made up of statutes, common law, and conventions.",
"The UK Government consists of two houses: the House of Commons and the House of Lords. Only when a bill passes through both houses and receives Royal Assent does it become law.",
"The Prime Minister is the head of government in the UK, while the monarch is the head of state. The Prime Minister is usually the leader of the party that has the most seats in the House of Commons.",
"Royal assent is deemed a technicality in modern times, with the last refusal being by Queen Anne in 1708.",
"The Fixed-term Parliaments Act 2011 established a five-year interval between general elections, but it can be overridden by a two-thirds majority in the House of Commons or a vote of no confidence.",
],
parties: [
"Reform UK is set to achieve an overall majority at the next General Election.",
"The UK's Conservative Party, founded in 1834, is often called the oldest political party in the world.",
"Only 39% of voters support the two main parties (Conservative and Labour) according to current polling. (Politico's poll of polls)",
"Boris Johnson and Number 10 Staff held at least 16 parties during COVID lockdowns, breaking their own laws (The Guardian).",
"The Labour Party was founded in 1900 and has traditionally been associated with the working class and trade unions.",
],
economics: [
"The real living wage in the UK equates to £26,208 per year for a full-time worker, according to the Living Wage Foundation. The Government says £25,396 is a living wage.",
"Austerity has cost the UK more than half a trillion pounds in lost economic growth since 2010. (Progressive Economy Forum)",
"The UK has one of the highest levels of wealth inequality in the developed world, with the top 10% of households owning 44% of the country's wealth. (ONS)",
"The UK has the highest rate of food bank usage in Europe, with over 2.5 million people using food banks in 2023. (Trussell Trust)",
"The UK government spent £37 billion on private finance initiatives (PFI) between 1997 and 2010, which has resulted in long-term debt obligations for public services. (National Audit Office)",
"The UK has one of the highest levels of household debt in the world, with an average debt of £15,000 per household. (Bank of England)",
"The UK has a trade deficit, importing more goods and services than it exports, which can impact the country's economic stability. (ONS)",
"The UK has one of the highest levels of public debt in the developed world, with a debt-to-GDP ratio of over 100%. (IMF)",
"The UK has one of the lowest levels of social mobility in the developed world, with a person's background having a significant impact on their life chances. (Social Mobility Commission)",
],
people: [
"The majority of British people (76.8%) are white according to the 2021/2022 census despite Reform UK's claims. (ONS)",
"A quarter of the global population will have a disability at any one time according to the World Health Organization (WHO).",
"The UK has one of the highest rates of income inequality in the developed world, with the top 10% of earners taking home 22% of the total income. (OECD)",
"700 million people could be displaced due to water stress by 2030 according to the UN",
"The UK has one of the highest rates of mental health issues in the developed world, with 1 in 4 people experiencing a mental health problem each year. (Mental Health Foundation)",
"The UK has one of the highest rates of obesity in Europe, with over 28% of adults classified as obese. (NHS)",
"The UK has one of the highest rates of homelessness in Europe, with an estimated 280,000 people experiencing homelessness each year. (Shelter)",
"The UK has one of the highest rates of child poverty in the developed world, with over 4 million children living in poverty. (Child Poverty Action Group)",
"The UK has one of the highest rates of elderly poverty in the developed world, with over 1.5 million pensioners living in poverty. (Age UK)",
"The UK has one of the highest rates of loneliness in the developed world, with over 9 million people experiencing loneliness. (Campaign to End Loneliness)",
],
media: [
"The BBC is funded by a license fee paid by UK households, which is currently £159 per year. (BBC)",
"The UK has one of the highest levels of media ownership concentration in the developed world, with a few large companies controlling the majority of media outlets. (Ofcom)",
"The UK has one of the highest levels of press freedom in the developed world, according to Reporters Without Borders. However, there have been concerns about government influence on the media in recent years.",
"The UK has one of the highest levels of social media usage in the developed world, with over 70% of adults using social media platforms. (Ofcom)",
"The UK has one of the highest levels of online harassment in the developed world, with over 40% of adults experiencing online harassment. (Ofcom)",
"The UK has one of the highest levels of fake news and misinformation in the developed world, with over 50% of adults reporting that they have encountered fake news online. (Ofcom)",
"GB News, a right-wing news channel, has been fined £1.5 million by Ofcom for breaches of impartiality rules. (Ofcom)",
"TALK TV lost 1 million viewers in its first month, a 50% drop from its launch audience. (BARB)",
"The Sun newspaper has the highest circulation in the UK, with an average daily circulation of over 1.2 million copies. (ABC)",
"The Guardian newspaper has the highest online readership in the UK, with over 30 million unique visitors per month. (SimilarWeb)",
"The Daily Mail newspaper has the highest number of social media followers in the UK, with over 10 million followers on Facebook and Twitter combined. (Socialbakers)",
"Fake News websites in the UK have increased by 50% in the past year, with over 1,000 fake news websites currently active. (Ofcom)",
"Over 80% of people in the UK regularly come across fake news (OnePoll)",
"Before Elon Musk bought Twitter, there were roughly 11.85 million bots. In 2025, this has increased to roughly 100 million bots (based on current estimates of 15-20% of 700 million accounts), with a plausible range of 50 million to 150 million. (Grok- Twitter's own AI bot) ",
"'NewsGuard's repeat audit of two leading generative AI tools finds an 80 to 98 percent likelihood of false claims on leading topics in the news.'",
],
};
let factsGenerated = 0;
let usedFacts = new Set();
function generateFact() {
const selectedCategory =
document.getElementById("categorySelect").value;
let availableFacts = [];
if (selectedCategory === "all") {
Object.values(politicalFacts).forEach((categoryFacts) => {
availableFacts.push(...categoryFacts);
});
} else {
availableFacts = politicalFacts[selectedCategory] || [];
}
// Filter out already used facts
const unusedFacts = availableFacts.filter(
(fact, index) => !usedFacts.has(`${selectedCategory}-${index}`)
);
// If all facts have been used, reset
if (unusedFacts.length === 0) {
usedFacts.clear();
}
// Select a random fact
const factIndex = Math.floor(
Math.random() * (unusedFacts.length || availableFacts.length)
);
const selectedFact =
unusedFacts.length > 0
? unusedFacts[factIndex]
: availableFacts[factIndex];
// Mark this fact as used
const originalIndex = availableFacts.indexOf(selectedFact);
usedFacts.add(`${selectedCategory}-${originalIndex}`);
// Determine the category for display
let displayCategory = selectedCategory;
if (selectedCategory === "all") {
// Find which category this fact belongs to
for (const [category, facts] of Object.entries(politicalFacts)) {
if (facts.includes(selectedFact)) {
displayCategory = category;
break;
}
}
}
// Update the display
document.getElementById("factText").textContent = selectedFact;
document.getElementById("factCategory").textContent =
formatCategoryName(displayCategory);
// Update category color
const categoryElement = document.getElementById("factCategory");
categoryElement.style.backgroundColor =
getCategoryColor(displayCategory);
// Update statistics
factsGenerated++;
const factsGeneratedElement = document.getElementById("factsGenerated");
if (factsGeneratedElement) {
factsGeneratedElement.textContent = factsGenerated;
}
// Add animation
const factCard = document.getElementById("factCard");
factCard.style.transform = "scale(0.95)";
factCard.style.opacity = "0.7";
setTimeout(() => {
factCard.style.transform = "scale(1)";
factCard.style.opacity = "1";
}, 150);
}
function formatCategoryName(category) {
const categoryNames = {
democracy: "Democracy",
history: "History",
international: "International",
constitution: "Constitution",
parties: "Parties",
economics: "Economics",
people: "People",
media: "Media",
};
return categoryNames[category] || category;
}
function getCategoryColor(category) {
const colors = {
democracy: "#faa61a",
history: "#d4af37",
international: "#1cabe2",
constitution: "#b50938",
parties: "#006548",
economics: "#7f00ff",
people: "#a20f87",
media: "#3498db",
};
return colors[category] || "#3498db";
}
// Generate an initial fact when the page loads
window.addEventListener("load", generateFact);
</script>
</body>
</html>
