Flags of Countries in Different Styles
About this app
Flags of countries but in the style of other countries
Flags of Countries in Different Styles Flags of Countries in Different Styles Generate Flags
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flags of Countries in Different Styles</title>
<meta name="description" content="Flags of countries but in the style of other countries">
<meta name="keywords" content="flags, countries, styles">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Built-In Functions for Apps -->
<script type="text/javascript">
var localStoragePrefix = "ct-169273070192176";
var lastSave = 0;
// save to localstorage
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
// save to cookie
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}
// load from localstorage
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
// Function to generate random colors
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to generate random flags in different styles
function generateFlags() {
var countries = [
{ name: "United States", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1920px-Flag_of_the_United_States.svg.png" },
{ name: "United Kingdom", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/a/ae/Flag_of_the_United_Kingdom.svg/1280px-Flag_of_the_United_Kingdom.svg.png" },
{ name: "France", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/1920px-Flag_of_France.svg.png" },
{ name: "Germany", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/2560px-Flag_of_Germany.svg.png" },
{ name: "Japan", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/2560px-Flag_of_Japan.svg.png" },
{ name: "Italy", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/2560px-Flag_of_Italy.svg.png" },
{ name: "Spain", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/2560px-Flag_of_Spain.svg.png" },
{ name: "Russia", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/f/f3/Flag_of_Russia.svg/2560px-Flag_of_Russia.svg.png" },
{ name: "China", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/2560px-Flag_of_the_People%27s_Republic_of_China.svg.png" },
{ name: "India", flag: "https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/2560px-Flag_of_India.svg.png" },
];
var styles = [
{ name: "USA Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/2560px-Flag_of_the_United_States.svg.png" },
{ name: "UK Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/2560px-Flag_of_the_United_Kingdom.svg.png" },
{ name: "France Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/2560px-Flag_of_France.svg.png" },
{ name: "Germany Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/2560px-Flag_of_Germany.svg.png" },
{ name: "Japan Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/2560px-Flag_of_Japan.svg.png" },
{ name: "Italy Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Italy.svg/2560px-Flag_of_Italy.svg.png" },
{ name: "Spain Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/2560px-Flag_of_Spain.svg.png" },
{ name: "Russia Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Flag_of_Russia.svg/2560px-Flag_of_Russia.svg.png" },
{ name: "China Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/2560px-Flag_of_the_People%27s_Republic_of_China.svg.png" },
{ name: "India Style", flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Flag_of_India.svg/2560px-Flag_of_India.svg.png" },
];
var flagContainer = $("#flag-container");
flagContainer.empty();
for (var i = 0; i < countries.length; i++) {
var country = countries[i];
var style = styles[Math.floor(Math.random() * styles.length)];
var flagCard = $("<div>").addClass("card mb-3");
var cardHeader = $("<div>").addClass("card-header").text(country.name);
var cardBody = $("<div>").addClass("card-body");
var flagImage = $("<img>").attr("src", country.flag).addClass("img-fluid");
var styleImage = $("<img>").attr("src", style.flag).addClass("img-fluid");
cardBody.append(flagImage);
cardBody.append(styleImage);
flagCard.append(cardHeader);
flagCard.append(cardBody);
flagContainer.append(flagCard);
}
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
}
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.card {
border-radius: 10px;
}
.card-header {
background-color: #007bff;
color: white;
font-weight: bold;
}
.card-body {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.card-body img {
max-width: 100px;
max-height: 100px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Flags of Countries in Different Styles</h1>
<button id="generate-btn" class="btn btn-primary">Generate Flags</button>
<div id="flag-container" class="row mt-4"></div>
</div>
<script type="text/javascript">
// Generate flags on button click
$(document).ready(function() {
$("#generate-btn").click(function() {
generateFlags();
});
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!