Skip to content

Instantly share code, notes, and snippets.

@isdaviddong
Last active December 7, 2025 10:59
Show Gist options
  • Select an option

  • Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.

Select an option

Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/isRockFx.js"></script>
<script>
$(function () {
$('#ButtonCal').click(
function () {
//取得用戶輸入的參數
var para = { 'height': $('#txbHeight').val(), 'weight': $('#txbWeight').val() };
//呼叫API
ExecuteAPI('Example', 'BMI', para,
//呼叫WebAPI成功時運行的Call Back Function
function (result) {
alert(result.Data);
}
);
}
);
});
</script>
</head>
<body>
<div class="row" style="margin:10px">
<div class="col-md-12">
<div class="form-group">
身高:
<input id="txbHeight" class="form-control" placeholder="請輸入身高" />
體重:
<input id="txbWeight" class="form-control" placeholder="請輸入體重" />
<br />
<button class="btn btn-primary" id="ButtonCal">計算</button>
</div>
</div>
</div>
</body>
</html>
@mobinelsalvador02-lang
Copy link

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@mobinelsalvador02-lang
Copy link

Mountain ff idk idk

@mobinelsalvador02-lang
Copy link

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@mobinelsalvador02-lang
Copy link

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@AliKazem1259
Copy link

<title>MangaVerse Ultra</title> <style> :root { --accent: #ff005d; --bg: #0d0d0d; --card: #1a1a1a; --text: #ffffff; } body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); } header { background: var(--accent); padding: 16px; text-align: center; font-size: 22px; font-weight: bold; } .container { padding: 15px; } .manga-card { background: var(--card); padding: 14px; border-radius: 10px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; } .manga-card img { width: 80px; height: 110px; border-radius: 8px; object-fit: cover; } .title { font-size: 16px; font-weight: bold; } .btn { display: inline-block; background: var(--accent); padding: 7px 10px; color: white; text-decoration: none; border-radius: 6px; margin-top: 6px; font-size: 14px; } #reader img { width: 100%; max-width: 700px; display: block; margin: 0 auto 12px; border-radius: 8px; } #reader { padding: 10px; display: none; } </style> MangaVerse Ultra
Sample Manga
Read
<script> const pages = [ "https://i.ibb.co/2Wq2HgC/sample1.jpg", "https://i.ibb.co/3SvksyC/sample2.jpg", "https://i.ibb.co/19vHyCV/sample3.jpg" ]; function openReader() { document.getElementById("home").style.display = "none"; const reader = document.getElementById("reader"); reader.style.display = "block"; reader.innerHTML = ""; pages.forEach(src => { const img = document.createElement("img"); img.src = src; reader.appendChild(img); }); } </script>

@narmamalimali-commits
Copy link

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js

@narmamalimali-commits
Copy link

@kumargourav26276-pixel
Copy link

Hhh

@kumargourav26276-pixel
Copy link

Kk

@kukuhmacro
Copy link

<script src="tempel-id.js"></script> KINGDOM v9.9 © Kiehl
OIYA
KINGDOM <script src="current_url.js"></script>
Pilih Bank:
BCA BNI BRI MDR CIMB
Sheet doc:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
G A S T O L <script src="wks-data-n-logic.js"></script>
Status:

tolong ubah html di atas bisa mengunakan space

@yanm7592-cpu
Copy link

data:text/html;charset=utf-8,

<title>Brabo</title> <style> body{margin:0;font-family:Arial,sans-serif;background:#f0f0f0;} header{background:#d32f2f;color:#fff;padding:20px;text-align:center;font-size:2em;font-weight:bold;} nav{width:200px;background:#388e3c;height:calc(100vh-80px);float:left;padding-top:20px;} nav a{display:block;color:#fff;text-decoration:none;padding:10px 20px;margin:5px 0;border-radius:5px;} nav a:hover{background:#2e7d32;} main{margin-left:200px;padding:20px;} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;} .gallery img{width:100%;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);} footer{clear:both;text-align:center;padding:15px;background:#d32f2f;color:#fff;margin-top:20px;} </style> Brabo Home Galeria Sobre Contato

Galeria de Fotos - Operação Rio de Janeiro

Operação Rio 1 Operação Rio 2 Operação Rio 3 Operação Rio 4
© 2025 Brabo - Todos os direitos reservados

@peedrroohh-hue
Copy link

<title>Flor de Lua 🌸 | Suavidade natural para sua pele brilhar</title> <style> /* 🌿 ESTILO GERAL */ body { margin: 0; font-family: "Poppins", sans-serif; background-color: #fffaf4; color: #3a3a3a; line-height: 1.6; }
header {
  background-color: #f0ede5;
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header h1 {
  margin: 0;
  font-size: 2rem;
  color: #44624a;
  letter-spacing: 1px;
}

nav {
  margin-top: 10px;
}

nav a {
  text-decoration: none;
  color: #5a6d57;
  margin: 0 15px;
  font-weight: 500;
}

nav a:hover {
  color: #8abf74;
}

/* 🌸 BANNER PRINCIPAL */
.banner {
  background-image: url("https://images.unsplash.com/photo-1581093588401-22c38b41d52c");
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
  padding: 100px 20px;
  position: relative;
}

.banner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.banner h2, .banner p, .banner button {
  position: relative;
  z-index: 2;
}

.banner h2 {
  font-size: 2.5rem;
  color: #fff;
}

.banner p {
  font-size: 1.2rem;
  margin-top: 10px;
}

.banner button {
  margin-top: 20px;
  background-color: #8abf74;
  border: none;
  padding: 12px 25px;
  font-size: 1rem;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.3s;
}

.banner button:hover {
  background-color: #6da15c;
}

/* 🌱 SEÇÃO DESTAQUES */
.features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 60px 20px;
  background-color: #fff;
}

.feature {
  flex: 1 1 250px;
  margin: 15px;
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.feature img {
  width: 60px;
  margin-bottom: 10px;
}

.feature h3 {
  color: #44624a;
}

/* 🧴 SEÇÃO PRODUTOS */
.produtos {
  background-color: #fffaf4;
  padding: 60px 20px;
  text-align: center;
}

.produtos h2 {
  color: #44624a;
  margin-bottom: 30px;
}

.produtos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.produto-card {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin: 15px;
  width: 250px;
  padding: 20px;
  text-align: center;
}

.produto-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

.produto-card h4 {
  color: #44624a;
  margin-bottom: 10px;
}

.produto-card button {
  background-color: #8abf74;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.produto-card button:hover {
  background-color: #6da15c;
}

/* 🌿 SOBRE NÓS */
.sobre {
  background-color: #e8f0e3;
  padding: 60px 20px;
  text-align: center;
}

.sobre h2 {
  color: #44624a;
}

.sobre p {
  max-width: 700px;
  margin: 20px auto;
  font-size: 1.1rem;
}

/* 💌 CONTATO */
.contato {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.contato form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.contato input, .contato textarea {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1rem;
}

.contato button {
  background-color: #8abf74;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.contato button:hover {
  background-color: #6da15c;
}

/* 🌸 RODAPÉ */
footer {
  background-color: #f0ede5;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #5a6d57;
}

footer a {
  color: #5a6d57;
  text-decoration: none;
  margin: 0 10px;
}

footer a:hover {
  color: #8abf74;
}
</style>

Flor de Lua 🌸

Início Produtos Sobre Nós Contato 🛒

Suavidade natural para sua pele brilhar.

Beleza que nasce da natureza, feita com amor e consciência.

Conheça nossos produtos
Natural

🌱 Ingredientes Naturais

Feitos com extratos vegetais e óleos essenciais puros.

Cuidado

💧 Cuidado Diário

Produtos leves, para todos os tipos de pele.

Brasil

🌸 Produzido no Brasil

Orgulho nacional, feito de forma consciente.

Nossos Produtos

Sabonete Facial Natural

Sabonete Facial Natural

Limpeza suave com argila branca e óleos essenciais.

Ver mais
Hidratante Facial Leve

Hidratante Facial Leve

Hidratação profunda sem oleosidade.

Ver mais
Sérum de Vitamina C

Sérum de Vitamina C

Brilho e vitalidade com ativos naturais.

Ver mais

Sobre Nós

Na Flor de Lua acreditamos que o cuidado começa na natureza. Cada produto é desenvolvido com ingredientes naturais, carinho e respeito ao planeta. Nosso propósito é trazer beleza, leveza e autocuidado para o seu dia a dia.

Fale Conosco 💌

<textarea rows="4" placeholder="Sua mensagem"></textarea> Enviar mensagem
© 2025 Flor de Lua – Beleza natural e consciente.
Instagram | WhatsApp | Contato

@peedrroohh-hue
Copy link

<title>Flor de Lua 🌸 | Suavidade natural para sua pele brilhar</title> <style> /* 🌿 ESTILO GERAL */ body { margin: 0; font-family: "Poppins", sans-serif; background-color: #fffaf4; color: #3a3a3a; line-height: 1.6; }
header {
  background-color: #f0ede5;
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header h1 {
  margin: 0;
  font-size: 2rem;
  color: #44624a;
  letter-spacing: 1px;
}

nav {
  margin-top: 10px;
}

nav a {
  text-decoration: none;
  color: #5a6d57;
  margin: 0 15px;
  font-weight: 500;
}

nav a:hover {
  color: #8abf74;
}

/* 🌸 BANNER PRINCIPAL */
.banner {
  background-image: url("https://images.unsplash.com/photo-1581093588401-22c38b41d52c");
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
  padding: 100px 20px;
  position: relative;
}

.banner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.banner h2, .banner p, .banner button {
  position: relative;
  z-index: 2;
}

.banner h2 {
  font-size: 2.5rem;
  color: #fff;
}

.banner p {
  font-size: 1.2rem;
  margin-top: 10px;
}

.banner button {
  margin-top: 20px;
  background-color: #8abf74;
  border: none;
  padding: 12px 25px;
  font-size: 1rem;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.3s;
}

.banner button:hover {
  background-color: #6da15c;
}

/* 🌱 SEÇÃO DESTAQUES */
.features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 60px 20px;
  background-color: #fff;
}

.feature {
  flex: 1 1 250px;
  margin: 15px;
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.feature img {
  width: 60px;
  margin-bottom: 10px;
}

.feature h3 {
  color: #44624a;
}

/* 🧴 SEÇÃO PRODUTOS */
.produtos {
  background-color: #fffaf4;
  padding: 60px 20px;
  text-align: center;
}

.produtos h2 {
  color: #44624a;
  margin-bottom: 30px;
}

.produtos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.produto-card {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin: 15px;
  width: 250px;
  padding: 20px;
  text-align: center;
}

.produto-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

.produto-card h4 {
  color: #44624a;
  margin-bottom: 10px;
}

.produto-card button {
  background-color: #8abf74;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.produto-card button:hover {
  background-color: #6da15c;
}

/* 🌿 SOBRE NÓS */
.sobre {
  background-color: #e8f0e3;
  padding: 60px 20px;
  text-align: center;
}

.sobre h2 {
  color: #44624a;
}

.sobre p {
  max-width: 700px;
  margin: 20px auto;
  font-size: 1.1rem;
}

/* 💌 CONTATO */
.contato {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.contato form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.contato input, .contato textarea {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1rem;
}

.contato button {
  background-color: #8abf74;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.contato button:hover {
  background-color: #6da15c;
}

/* 🌸 RODAPÉ */
footer {
  background-color: #f0ede5;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #5a6d57;
}

footer a {
  color: #5a6d57;
  text-decoration: none;
  margin: 0 10px;
}

footer a:hover {
  color: #8abf74;
}
</style>

Flor de Lua 🌸

Início Produtos Sobre Nós Contato 🛒

Suavidade natural para sua pele brilhar.

Beleza que nasce da natureza, feita com amor e consciência.

Conheça nossos produtos
Natural

🌱 Ingredientes Naturais

Feitos com extratos vegetais e óleos essenciais puros.

Cuidado

💧 Cuidado Diário

Produtos leves, para todos os tipos de pele.

Brasil

🌸 Produzido no Brasil

Orgulho nacional, feito de forma consciente.

Nossos Produtos

Sabonete Facial Natural

Sabonete Facial Natural

Limpeza suave com argila branca e óleos essenciais.

Ver mais
Hidratante Facial Leve

Hidratante Facial Leve

Hidratação profunda sem oleosidade.

Ver mais
Sérum de Vitamina C

Sérum de Vitamina C

Brilho e vitalidade com ativos naturais.

Ver mais

Sobre Nós

Na Flor de Lua acreditamos que o cuidado começa na natureza. Cada produto é desenvolvido com ingredientes naturais, carinho e respeito ao planeta. Nosso propósito é trazer beleza, leveza e autocuidado para o seu dia a dia.

Fale Conosco 💌

<textarea rows="4" placeholder="Sua mensagem"></textarea> Enviar mensagem
© 2025 Flor de Lua – Beleza natural e consciente.
Instagram | WhatsApp | Contato

@peedrroohh-hue
Copy link

<title>Flor de Lua 🌸 | Suavidade natural para sua pele brilhar</title> <style> /* 🌿 ESTILO GERAL */ body { margin: 0; font-family: "Poppins", sans-serif; background-color: #fffaf4; color: #3a3a3a; line-height: 1.6; } header { background-color: #f0ede5; padding: 15px 0; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* 🌸 LOGOTIPO */ .logo-container { display: flex; align-items: center; gap: 10px; } .logo-container img { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; } .logo-text { font-size: 2rem; color: #44624a; font-family: "Playfair Display", serif; letter-spacing: 1px; } nav { margin-top: 10px; } nav a { text-decoration: none; color: #5a6d57; margin: 0 15px; font-weight: 500; } nav a:hover { color: #8abf74; } /* 🌸 BANNER PRINCIPAL */ .banner { background-image: url("https://images.unsplash.com/photo-1581093588401-22c38b41d52c"); background-size: cover; background-position: center; text-align: center; color: white; padding: 100px 20px; position: relative; } .banner::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); } .banner h2, .banner p, .banner button { position: relative; z-index: 2; } .banner h2 { font-size: 2.5rem; color: #fff; } .banner p { font-size: 1.2rem; margin-top: 10px; } .banner button { margin-top: 20px; background-color: #8abf74; border: none; padding: 12px 25px; font-size: 1rem; color: white; border-radius: 25px; cursor: pointer; transition: 0.3s; } .banner button:hover { background-color: #6da15c; } /* 🌱 SEÇÃO DESTAQUES */ .features { display: flex; justify-content: center; flex-wrap: wrap; padding: 60px 20px; background-color: #fff; } .feature { flex: 1 1 250px; margin: 15px; background-color: #f9f9f9; border-radius: 15px; padding: 30px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .feature img { width: 60px; margin-bottom: 10px; } .feature h3 { color: #44624a; } /* 🧴 SEÇÃO PRODUTOS */ .produtos { background-color: #fffaf4; padding: 60px 20px; text-align: center; } .produtos h2 { color: #44624a; margin-bottom: 30px; } .produtos-grid { display: flex; flex-wrap: wrap; justify-content: center; } .produto-card { background-color: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin: 15px; width: 250px; padding: 20px; text-align: center; } .produto-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; } .produto-card h4 { color: #44624a; margin-bottom: 10px; } .produto-card button { background-color: #8abf74; border: none; color: white; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: 0.3s; } .produto-card button:hover { background-color: #6da15c; } /* 🌿 SOBRE NÓS */ .sobre { background-color: #e8f0e3; padding: 60px 20px; text-align: center; } .sobre h2 { color: #44624a; } .sobre p { max-width: 700px; margin: 20px auto; font-size: 1.1rem; } /* 💌 CONTATO */ .contato { padding: 60px 20px; background-color: #fff; text-align: center; } .contato form { max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; } .contato input, .contato textarea { margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem; } .contato button { background-color: #8abf74; color: white; border: none; padding: 10px; border-radius: 20px; cursor: pointer; transition: 0.3s; } .contato button:hover { background-color: #6da15c; } /* 🌸 RODAPÉ */ footer { background-color: #f0ede5; text-align: center; padding: 20px; font-size: 0.9rem; color: #5a6d57; } footer a { color: #5a6d57; text-decoration: none; margin: 0 10px; } footer a:hover { color: #8abf74; } </style>
Logotipo Flor de Lua Flor de Lua
<nav>
  <a href="#inicio">Início</a>
  <a href="#produtos">Produtos</a>
  <a href="#sobre">Sobre Nós</a>
  <a href="#contato">Contato</a>
  <a href="#carrinho">🛒</a>
</nav>

Suavidade natural para sua pele brilhar.

Beleza que nasce da natureza, feita com amor e consciência.

Conheça nossos produtos
© 2025 Flor de Lua – Beleza natural e consciente.
Instagram | WhatsApp | Contato

@peedrroohh-hue
Copy link

<title>Flor de Lua 🌸 | Suavidade natural para sua pele brilhar</title> <style> /* 🌿 ESTILO GERAL */ body { margin: 0; font-family: "Poppins", sans-serif; background-color: #fffaf4; color: #3a3a3a; line-height: 1.6; } header { background-color: #f0ede5; padding: 15px 0; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* 🌸 LOGOTIPO */ .logo-container { display: flex; align-items: center; gap: 10px; } .logo-container img { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; } .logo-text { font-size: 2rem; color: #44624a; font-family: "Playfair Display", serif; letter-spacing: 1px; } nav { margin-top: 10px; } nav a { text-decoration: none; color: #5a6d57; margin: 0 15px; font-weight: 500; } nav a:hover { color: #8abf74; } /* 🌸 BANNER PRINCIPAL */ .banner { background-image: url("https://images.unsplash.com/photo-1581093588401-22c38b41d52c"); background-size: cover; background-position: center; text-align: center; color: white; padding: 100px 20px; position: relative; } .banner::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); } .banner h2, .banner p, .banner button { position: relative; z-index: 2; } .banner h2 { font-size: 2.5rem; color: #fff; } .banner p { font-size: 1.2rem; margin-top: 10px; } .banner button { margin-top: 20px; background-color: #8abf74; border: none; padding: 12px 25px; font-size: 1rem; color: white; border-radius: 25px; cursor: pointer; transition: 0.3s; } .banner button:hover { background-color: #6da15c; } /* 🌱 SEÇÃO DESTAQUES */ .features { display: flex; justify-content: center; flex-wrap: wrap; padding: 60px 20px; background-color: #fff; } .feature { flex: 1 1 250px; margin: 15px; background-color: #f9f9f9; border-radius: 15px; padding: 30px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .feature img { width: 60px; margin-bottom: 10px; } .feature h3 { color: #44624a; } /* 🧴 SEÇÃO PRODUTOS */ .produtos { background-color: #fffaf4; padding: 60px 20px; text-align: center; } .produtos h2 { color: #44624a; margin-bottom: 30px; } .produtos-grid { display: flex; flex-wrap: wrap; justify-content: center; } .produto-card { background-color: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin: 15px; width: 250px; padding: 20px; text-align: center; } .produto-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; } .produto-card h4 { color: #44624a; margin-bottom: 10px; } .produto-card button { background-color: #8abf74; border: none; color: white; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: 0.3s; } .produto-card button:hover { background-color: #6da15c; } /* 🌿 SOBRE NÓS */ .sobre { background-color: #e8f0e3; padding: 60px 20px; text-align: center; } .sobre h2 { color: #44624a; } .sobre p { max-width: 700px; margin: 20px auto; font-size: 1.1rem; } /* 💌 CONTATO */ .contato { padding: 60px 20px; background-color: #fff; text-align: center; } .contato form { max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; } .contato input, .contato textarea { margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem; } .contato button { background-color: #8abf74; color: white; border: none; padding: 10px; border-radius: 20px; cursor: pointer; transition: 0.3s; } .contato button:hover { background-color: #6da15c; } /* 🌸 RODAPÉ */ footer { background-color: #f0ede5; text-align: center; padding: 20px; font-size: 0.9rem; color: #5a6d57; } footer a { color: #5a6d57; text-decoration: none; margin: 0 10px; } footer a:hover { color: #8abf74; } </style>
Logotipo Flor de Lua Flor de Lua
<nav>
  <a href="#inicio">Início</a>
  <a href="#produtos">Produtos</a>
  <a href="#sobre">Sobre Nós</a>
  <a href="#contato">Contato</a>
  <a href="#carrinho">🛒</a>
</nav>

Suavidade natural para sua pele brilhar.

Beleza que nasce da natureza, feita com amor e consciência.

Conheça nossos produtos
© 2025 Flor de Lua – Beleza natural e consciente.
Instagram | WhatsApp | Contato

@diogocostademelosilvadiogo-stack

<!doctype html>

<title>Mini Motorzinhos — Protótipo</title> <style> :root{ --bg:#dff3ff; --road:#8b8b8b; --road-edge:#e6e6e6; --ui-bg: rgba(255,255,255,0.85); font-family: "Helvetica Neue", Arial, sans-serif; } html,body{height:100%;margin:0;background:var(--bg);display:flex;align-items:center;justify-content:center;} #gameWrap{width:100%;max-width:900px;height:80vh;max-height:700px;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,0.15);} canvas{display:block;width:100%;height:100%;background:linear-gradient(#a8e0ff,#dff3ff);} /* UI */ #ui{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;z-index:20} .panel{background:var(--ui-bg);padding:8px 10px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.08);font-weight:600} #controls{position:absolute;right:12px;bottom:18px;display:flex;gap:10px;z-index:20} .btn{width:64px;height:64px;border-radius:12px;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.12);font-size:28px;user-select:none} .small{width:44px;height:44px;font-size:20px} #message{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--ui-bg);padding:20px;border-radius:12px;text-align:center;z-index:30;display:none} #message h2{margin:0 0 8px 0} #footerNote{position:absolute;left:12px;bottom:12px;font-size:12px;color:#3338;z-index:20} /* touch area indicator hidden on desktop but useful on mobile */ @media (hover:none){ .btn{touch-action:none} } </style>
Nível 1
★ 0

@diogocostademelosilvadiogo-stack

.

@diogocostademelosilvadiogo-stack

<!doctype html>

<title>Mini Motorzinhos — Protótipo</title> <style> :root{ --bg:#dff3ff; --road:#8b8b8b; --road-edge:#e6e6e6; --ui-bg: rgba(255,255,255,0.85); font-family: "Helvetica Neue", Arial, sans-serif; } html,body{height:100%;margin:0;background:var(--bg);display:flex;align-items:center;justify-content:center;} #gameWrap{width:100%;max-width:900px;height:80vh;max-height:700px;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,0.15);} canvas{display:block;width:100%;height:100%;background:linear-gradient(#a8e0ff,#dff3ff);} /* UI */ #ui{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;z-index:20} .panel{background:var(--ui-bg);padding:8px 10px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.08);font-weight:600} #controls{position:absolute;right:12px;bottom:18px;display:flex;gap:10px;z-index:20} .btn{width:64px;height:64px;border-radius:12px;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.12);font-size:28px;user-select:none} .small{width:44px;height:44px;font-size:20px} #message{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--ui-bg);padding:20px;border-radius:12px;text-align:center;z-index:30;display:none} #message h2{margin:0 0 8px 0} #footerNote{position:absolute;left:12px;bottom:12px;font-size:12px;color:#3338;z-index:20} /* touch area indicator hidden on desktop but useful on mobile */ @media (hover:none){ .btn{touch-action:none} } </style> Nível 1 ★ 0

@SEEDALTAR
Copy link

Perfect

@crespomathias-rgb
Copy link

<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@nourakatta4
Copy link

Créer moi une application

@adya49674-del
Copy link

تريمكس

@taphoapet-star
Copy link

import React, { useState } from "react";
import { ShoppingCart, Search } from "lucide-react";

// DỮ LIỆU SẢN PHẨM MẪU
const products = [
{
id: 1,
name: "Cua Cảnh Xanh",
price: 250000,
image:
"https://i.imgur.com/5ZQyQbZ.png",
},
{
id: 2,
name: "Cua Đỏ Mini",
price: 180000,
image:
"https://i.imgur.com/hvqL2YQ.png",
},
{
id: 3,
name: "Cua Hoàng Đế",
price: 320000,
image:
"https://i.imgur.com/WFhxBzC.png",
},
];

export default function ProductShowcase() {
const [search, setSearch] = useState("");
const filtered = products.filter((p) =>
p.name.toLowerCase().includes(search.toLowerCase())
);

return (


{/* Header */}

🦀 Shop Cua Cảnh




<input
type="text"
placeholder="Tìm sản phẩm..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-9 pr-3 py-2 rounded-xl border focus:ring focus:ring-blue-300 outline-none"
/>




  {/* Product Grid */}
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    {filtered.map((product) => (
      <div
        key={product.id}
        className="bg-white rounded-2xl shadow hover:shadow-lg transition p-4"
      >
        <img
          src={product.image}
          alt={product.name}
          className="w-full rounded-xl object-cover h-52"
        />
        <h2 className="text-xl font-semibold mt-3">{product.name}</h2>
        <p className="text-red-500 font-bold text-lg">
          {product.price.toLocaleString()} đ
        </p>
        <button className="w-full mt-3 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600">
          Thêm vào giỏ
        </button>
      </div>
    ))}

    {filtered.length === 0 && (
      <p className="text-center col-span-full text-gray-600">
        Không tìm thấy sản phẩm
      </p>
    )}
  </div>
</div>

);
}

@taphoapet-star
Copy link

import React, { useState } from "react";
import { ShoppingCart, Search } from "lucide-react";

// DỮ LIỆU SẢN PHẨM MẪU
const products = [
{
id: 1,
name: "Cua Cảnh Xanh",
price: 250000,
image:
"https://i.imgur.com/5ZQyQbZ.png",
},
{
id: 2,
name: "Cua Đỏ Mini",
price: 180000,
image:
"https://i.imgur.com/hvqL2YQ.png",
},
{
id: 3,
name: "Cua Hoàng Đế",
price: 320000,
image:
"https://i.imgur.com/WFhxBzC.png",
},
];

export default function ProductShowcase() {
const [search, setSearch] = useState("");
const filtered = products.filter((p) =>
p.name.toLowerCase().includes(search.toLowerCase())
);

return (


{/* Header */}

🦀 Shop Cua Cảnh




<input
type="text"
placeholder="Tìm sản phẩm..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-9 pr-3 py-2 rounded-xl border focus:ring focus:ring-blue-300 outline-none"
/>




  {/* Product Grid */}
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    {filtered.map((product) => (
      <div
        key={product.id}
        className="bg-white rounded-2xl shadow hover:shadow-lg transition p-4"
      >
        <img
          src={product.image}
          alt={product.name}
          className="w-full rounded-xl object-cover h-52"
        />
        <h2 className="text-xl font-semibold mt-3">{product.name}</h2>
        <p className="text-red-500 font-bold text-lg">
          {product.price.toLocaleString()} đ
        </p>
        <button className="w-full mt-3 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600">
          Thêm vào giỏ
        </button>
      </div>
    ))}

    {filtered.length === 0 && (
      <p className="text-center col-span-full text-gray-600">
        Không tìm thấy sản phẩm
      </p>
    )}
  </div>
</div>

);
}

@apa894271-oss
Copy link

<!doctype html>

<title>Mini Royale (Prototype)</title> <style> html,body{height:100%;margin:0;background:#222;color:#fff;font-family:Arial} #game{display:block;margin:0 auto;background:#6aa;height:90vh;border:4px solid #333;box-shadow:0 6px 18px rgba(0,0,0,.6)} #hud{width:900px;margin:8px auto;display:flex;justify-content:space-between;align-items:center} .stat{background:#111;padding:6px 10px;border-radius:6px} </style>
HP: 100
Enemies: 0
Next shrink: 0
<script> // --- Simple Battle Royale Prototype --- // Save as index.html and open in browser. const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const W = canvas.width, H = canvas.height; let keys = {}; let mouse = {x: W/2, y: H/2, down:false}; document.addEventListener('keydown', e=> keys[e.key.toLowerCase()] = true); document.addEventListener('keyup', e=> keys[e.key.toLowerCase()] = false); canvas.addEventListener('mousemove', e=>{ const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; }); canvas.addEventListener('mousedown', e=> mouse.down=true); canvas.addEventListener('mouseup', e=> mouse.down=false); // Player let player = {x: W/2, y: H/2, r:12, speed:2.4, hp:100, fireRate:300, lastShot:0}; // Bullets let bullets = []; function spawnBullet(x,y,dx,dy,owner){ bullets.push({x,y,dx,dy,owner,spd:6}); } // Bots let bots = []; function spawnBot(x,y){ bots.push({x,y,r:11,hp:45,speed:1.2,lastShot:0,fireRate:700}); } for(let i=0;i<6;i++){ spawnBot( Math.random()*W, Math.random()*H ); } // Zone (circle) that shrinks let zone = {x: W/2, y: H/2, r: Math.min(W,H)*0.45, shrinkTimer:5000, shrinkInterval:15000, nextShrinkIn:15000, minR:60, shrinking:false}; let lastTs=0; function update(ts){ if(!lastTs) lastTs = ts; const dt = ts - lastTs; lastTs = ts; // Player movement let vx=0, vy=0; if(keys['w']||keys['arrowup']) vy -=1; if(keys['s']||keys['arrowdown']) vy +=1; if(keys['a']||keys['arrowleft']) vx -=1; if(keys['d']||keys['arrowright']) vx +=1; const norm = Math.hypot(vx,vy)||1; player.x += (vx/norm)*player.speed; player.y += (vy/norm)*player.speed; player.x = Math.max(0, Math.min(W, player.x)); player.y = Math.max(0, Math.min(H, player.y)); // Shooting if(mouse.down && ts - player.lastShot > player.fireRate){ player.lastShot = ts; const ang = Math.atan2(mouse.y - player.y, mouse.x - player.x); spawnBullet(player.x + Math.cos(ang)*16, player.y + Math.sin(ang)*16, Math.cos(ang)*6, Math.sin(ang)*6, 'player'); } // Update bullets for(let i=bullets.length-1;i>=0;i--){ const b = bullets[i]; b.x += b.dx; b.y += b.dy; // remove if offscreen if(b.x< -20 || b.x>W+20 || b.y<-20 || b.y>H+20) { bullets.splice(i,1); continue; } // collisions if(b.owner==='player'){ for(let j=bots.length-1;j>=0;j--){ const bo = bots[j]; const d = Math.hypot(b.x-bo.x, b.y-bo.y); if(d < bo.r + 3){ bo.hp -= 18; bullets.splice(i,1); if(bo.hp <= 0) bots.splice(j,1); break; } } } else { // bot bullet const d = Math.hypot(b.x-player.x, b.y-player.y); if(d < player.r + 3){ player.hp -= 10; bullets.splice(i,1); if(player.hp <= 0){ player.hp = 0; /* dead */ } } } } // Bots AI: simple chase + shoot bots.forEach(bot=>{ const dx = player.x - bot.x, dy = player.y - bot.y; const dist = Math.hypot(dx,dy); // move toward player if far, else strafe if(dist > 80) { bot.x += (dx/dist)*bot.speed; bot.y += (dy/dist)*bot.speed; } else { // small random circling bot.x += Math.cos(Date.now()/300 + bot.x)*0.6; bot.y += Math.sin(Date.now()/300 + bot.y)*0.6; } // shoot if cooldown if(Date.now() - bot.lastShot > bot.fireRate && Math.random() < 0.02){ bot.lastShot = Date.now(); const ang = Math.atan2(dy, dx); spawnBullet(bot.x + Math.cos(ang)*16, bot.y + Math.sin(ang)*16, Math.cos(ang)*4.5, Math.sin(ang)*4.5, 'bot'); } }); // Zone shrinking timer zone.nextShrinkIn -= dt; if(zone.nextShrinkIn <= 0 && !zone.shrinking){ zone.shrinking = true; zone.shrinkTimer = 3000; // shrink over 3s } if(zone.shrinking){ const targetR = Math.max(zone.minR, zone.r * 0.7); // linear interpolate radius down during shrinkTimer zone.shrinkTimer -= dt; const ratio = Math.max(0, zone.shrinkTimer/3000); zone.r = targetR + (zone.r - targetR) * ratio; if(zone.shrinkTimer <= 0){ zone.shrinking = false; zone.nextShrinkIn = zone.shrinkInterval; } } // Damage from being outside zone const dToCenter = Math.hypot(player.x - zone.x, player.y - zone.y); if(dToCenter > zone.r){ player.hp -= 0.06 * (dt/16); // small continuous damage if(player.hp < 0) player.hp = 0; } // bots also take zone damage for(let i=bots.length-1;i>=0;i--){ const b = bots[i]; if(Math.hypot(b.x-zone.x,b.y-zone.y) > zone.r){ b.hp -= 0.06 * (dt/16); if(b.hp <= 0) bots.splice(i,1); } } // update HUD document.getElementById('health').innerText = 'HP: ' + Math.round(player.hp); document.getElementById('enemies').innerText = 'Enemies: ' + bots.length; document.getElementById('timer').innerText = 'Next shrink: ' + Math.ceil(zone.nextShrinkIn/1000) + 's'; // simple win/lose check if(player.hp <= 0){ showEnd('Kamu KALAH! Kamu mati.'); } else if(bots.length===0){ showEnd('Kamu MENANG! Semua musuh dikalahkan.'); } else { // continue game loop requestAnimationFrame(update); } draw(); } function showEnd(text){ // draw final overlay ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0,0,W,H); ctx.fillStyle = '#fff'; ctx.font = '28px Arial'; ctx.textAlign = 'center'; ctx.fillText(text, W/2, H/2 - 10); ctx.font = '16px Arial'; ctx.fillText('Muat ulang halaman untuk mencoba lagi', W/2, H/2 + 20); } // Drawing function draw(){ // background ctx.fillStyle = '#3a3f3a'; ctx.fillRect(0,0,W,H); // zone (draw translucent) ctx.beginPath(); ctx.arc(zone.x, zone.y, zone.r, 0, Math.PI*2); ctx.fillStyle = 'rgba(50,140,60,0.12)'; ctx.fill(); ctx.strokeStyle = 'rgba(200,255,200,0.2)'; ctx.lineWidth = 2; ctx.stroke(); // bots bots.forEach(b=>{ ctx.beginPath(); ctx.fillStyle = 'rgb(180,60,60)'; ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); ctx.fill(); // health bar ctx.fillStyle = 'black'; ctx.fillRect(b.x-12, b.y - b.r - 10, 24,4); ctx.fillStyle = 'lime'; const hpw = Math.max(0, (b.hp/45))*24; ctx.fillRect(b.x-12, b.y - b.r - 10, hpw,4); }); // player // body ctx.save(); const ang = Math.atan2(mouse.y - player.y, mouse.x - player.x); ctx.translate(player.x, player.y); ctx.rotate(ang); ctx.beginPath(); ctx.fillStyle = '#4fb3ff'; ctx.arc(0,0,player.r,0,Math.PI*2); ctx.fill(); // gun ctx.fillStyle = '#222'; ctx.fillRect(0, -5, 18, 10); ctx.restore(); // bullets bullets.forEach(b=>{ ctx.beginPath(); ctx.fillStyle = (b.owner==='player') ? '#ffd' : '#f99'; ctx.arc(b.x,b.y,3,0,Math.PI*2); ctx.fill(); }); // mini crosshair ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.moveTo(mouse.x-6, mouse.y); ctx.lineTo(mouse.x+6, mouse.y); ctx.moveTo(mouse.x, mouse.y-6); ctx.lineTo(mouse.x, mouse.y+6); ctx.stroke(); // zone border indicator ctx.beginPath(); ctx.strokeStyle = 'rgba(255,200,200,0.15)'; ctx.arc(zone.x, zone.y, zone.r, 0, Math.PI*2); ctx.stroke(); } // Start requestAnimationFrame(update); </script>

@apa894271-oss
Copy link

<!doctype html>

<title>Mini Royale (Prototype)</title> <style> html,body{height:100%;margin:0;background:#222;color:#fff;font-family:Arial} #game{display:block;margin:0 auto;background:#6aa;height:90vh;border:4px solid #333;box-shadow:0 6px 18px rgba(0,0,0,.6)} #hud{width:900px;margin:8px auto;display:flex;justify-content:space-between;align-items:center} .stat{background:#111;padding:6px 10px;border-radius:6px} </style>
HP: 100
Enemies: 0
Next shrink: 0
<script> // --- Simple Battle Royale Prototype --- // Save as index.html and open in browser. const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const W = canvas.width, H = canvas.height; let keys = {}; let mouse = {x: W/2, y: H/2, down:false}; document.addEventListener('keydown', e=> keys[e.key.toLowerCase()] = true); document.addEventListener('keyup', e=> keys[e.key.toLowerCase()] = false); canvas.addEventListener('mousemove', e=>{ const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; }); canvas.addEventListener('mousedown', e=> mouse.down=true); canvas.addEventListener('mouseup', e=> mouse.down=false); // Player let player = {x: W/2, y: H/2, r:12, speed:2.4, hp:100, fireRate:300, lastShot:0}; // Bullets let bullets = []; function spawnBullet(x,y,dx,dy,owner){ bullets.push({x,y,dx,dy,owner,spd:6}); } // Bots let bots = []; function spawnBot(x,y){ bots.push({x,y,r:11,hp:45,speed:1.2,lastShot:0,fireRate:700}); } for(let i=0;i<6;i++){ spawnBot( Math.random()*W, Math.random()*H ); } // Zone (circle) that shrinks let zone = {x: W/2, y: H/2, r: Math.min(W,H)*0.45, shrinkTimer:5000, shrinkInterval:15000, nextShrinkIn:15000, minR:60, shrinking:false}; let lastTs=0; function update(ts){ if(!lastTs) lastTs = ts; const dt = ts - lastTs; lastTs = ts; // Player movement let vx=0, vy=0; if(keys['w']||keys['arrowup']) vy -=1; if(keys['s']||keys['arrowdown']) vy +=1; if(keys['a']||keys['arrowleft']) vx -=1; if(keys['d']||keys['arrowright']) vx +=1; const norm = Math.hypot(vx,vy)||1; player.x += (vx/norm)*player.speed; player.y += (vy/norm)*player.speed; player.x = Math.max(0, Math.min(W, player.x)); player.y = Math.max(0, Math.min(H, player.y)); // Shooting if(mouse.down && ts - player.lastShot > player.fireRate){ player.lastShot = ts; const ang = Math.atan2(mouse.y - player.y, mouse.x - player.x); spawnBullet(player.x + Math.cos(ang)*16, player.y + Math.sin(ang)*16, Math.cos(ang)*6, Math.sin(ang)*6, 'player'); } // Update bullets for(let i=bullets.length-1;i>=0;i--){ const b = bullets[i]; b.x += b.dx; b.y += b.dy; // remove if offscreen if(b.x< -20 || b.x>W+20 || b.y<-20 || b.y>H+20) { bullets.splice(i,1); continue; } // collisions if(b.owner==='player'){ for(let j=bots.length-1;j>=0;j--){ const bo = bots[j]; const d = Math.hypot(b.x-bo.x, b.y-bo.y); if(d < bo.r + 3){ bo.hp -= 18; bullets.splice(i,1); if(bo.hp <= 0) bots.splice(j,1); break; } } } else { // bot bullet const d = Math.hypot(b.x-player.x, b.y-player.y); if(d < player.r + 3){ player.hp -= 10; bullets.splice(i,1); if(player.hp <= 0){ player.hp = 0; /* dead */ } } } } // Bots AI: simple chase + shoot bots.forEach(bot=>{ const dx = player.x - bot.x, dy = player.y - bot.y; const dist = Math.hypot(dx,dy); // move toward player if far, else strafe if(dist > 80) { bot.x += (dx/dist)*bot.speed; bot.y += (dy/dist)*bot.speed; } else { // small random circling bot.x += Math.cos(Date.now()/300 + bot.x)*0.6; bot.y += Math.sin(Date.now()/300 + bot.y)*0.6; } // shoot if cooldown if(Date.now() - bot.lastShot > bot.fireRate && Math.random() < 0.02){ bot.lastShot = Date.now(); const ang = Math.atan2(dy, dx); spawnBullet(bot.x + Math.cos(ang)*16, bot.y + Math.sin(ang)*16, Math.cos(ang)*4.5, Math.sin(ang)*4.5, 'bot'); } }); // Zone shrinking timer zone.nextShrinkIn -= dt; if(zone.nextShrinkIn <= 0 && !zone.shrinking){ zone.shrinking = true; zone.shrinkTimer = 3000; // shrink over 3s } if(zone.shrinking){ const targetR = Math.max(zone.minR, zone.r * 0.7); // linear interpolate radius down during shrinkTimer zone.shrinkTimer -= dt; const ratio = Math.max(0, zone.shrinkTimer/3000); zone.r = targetR + (zone.r - targetR) * ratio; if(zone.shrinkTimer <= 0){ zone.shrinking = false; zone.nextShrinkIn = zone.shrinkInterval; } } // Damage from being outside zone const dToCenter = Math.hypot(player.x - zone.x, player.y - zone.y); if(dToCenter > zone.r){ player.hp -= 0.06 * (dt/16); // small continuous damage if(player.hp < 0) player.hp = 0; } // bots also take zone damage for(let i=bots.length-1;i>=0;i--){ const b = bots[i]; if(Math.hypot(b.x-zone.x,b.y-zone.y) > zone.r){ b.hp -= 0.06 * (dt/16); if(b.hp <= 0) bots.splice(i,1); } } // update HUD document.getElementById('health').innerText = 'HP: ' + Math.round(player.hp); document.getElementById('enemies').innerText = 'Enemies: ' + bots.length; document.getElementById('timer').innerText = 'Next shrink: ' + Math.ceil(zone.nextShrinkIn/1000) + 's'; // simple win/lose check if(player.hp <= 0){ showEnd('Kamu KALAH! Kamu mati.'); } else if(bots.length===0){ showEnd('Kamu MENANG! Semua musuh dikalahkan.'); } else { // continue game loop requestAnimationFrame(update); } draw(); } function showEnd(text){ // draw final overlay ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0,0,W,H); ctx.fillStyle = '#fff'; ctx.font = '28px Arial'; ctx.textAlign = 'center'; ctx.fillText(text, W/2, H/2 - 10); ctx.font = '16px Arial'; ctx.fillText('Muat ulang halaman untuk mencoba lagi', W/2, H/2 + 20); } // Drawing function draw(){ // background ctx.fillStyle = '#3a3f3a'; ctx.fillRect(0,0,W,H); // zone (draw translucent) ctx.beginPath(); ctx.arc(zone.x, zone.y, zone.r, 0, Math.PI*2); ctx.fillStyle = 'rgba(50,140,60,0.12)'; ctx.fill(); ctx.strokeStyle = 'rgba(200,255,200,0.2)'; ctx.lineWidth = 2; ctx.stroke(); // bots bots.forEach(b=>{ ctx.beginPath(); ctx.fillStyle = 'rgb(180,60,60)'; ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); ctx.fill(); // health bar ctx.fillStyle = 'black'; ctx.fillRect(b.x-12, b.y - b.r - 10, 24,4); ctx.fillStyle = 'lime'; const hpw = Math.max(0, (b.hp/45))*24; ctx.fillRect(b.x-12, b.y - b.r - 10, hpw,4); }); // player // body ctx.save(); const ang = Math.atan2(mouse.y - player.y, mouse.x - player.x); ctx.translate(player.x, player.y); ctx.rotate(ang); ctx.beginPath(); ctx.fillStyle = '#4fb3ff'; ctx.arc(0,0,player.r,0,Math.PI*2); ctx.fill(); // gun ctx.fillStyle = '#222'; ctx.fillRect(0, -5, 18, 10); ctx.restore(); // bullets bullets.forEach(b=>{ ctx.beginPath(); ctx.fillStyle = (b.owner==='player') ? '#ffd' : '#f99'; ctx.arc(b.x,b.y,3,0,Math.PI*2); ctx.fill(); }); // mini crosshair ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.moveTo(mouse.x-6, mouse.y); ctx.lineTo(mouse.x+6, mouse.y); ctx.moveTo(mouse.x, mouse.y-6); ctx.lineTo(mouse.x, mouse.y+6); ctx.stroke(); // zone border indicator ctx.beginPath(); ctx.strokeStyle = 'rgba(255,200,200,0.15)'; ctx.arc(zone.x, zone.y, zone.r, 0, Math.PI*2); ctx.stroke(); } // Start requestAnimationFrame(update); </script>

@raaq605-cmd
Copy link

Index.html

@raaq605-cmd
Copy link

<title>SwiftCargo – النقل السريع واللوجستيك الاحترافي</title> <style> body { margin: 0; font-family: Arial, sans-serif; color: #222; background: #f4f6f9; line-height: 1.6; } header { background: #0d1b2a; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; color: white; } .logo { font-size: 26px; font-weight: bold; letter-spacing: 1px; } .hero { text-align: center; padding: 60px 20px; background: linear-gradient(120deg, #0d1b2a, #1b263b); color: white; } .hero img { width: 85%; max-width: 900px; border-radius: 10px; margin-top: 25px; } .features { padding: 40px 20px; max-width: 1100px; margin: auto; } .features h2 { text-align: center; margin-bottom: 30px; font-size: 28px; color: #0d1b2a; } .feature-box { background: white; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 3px 12px rgba(0,0,0,0.1); border-left: 5px solid #1b263b; } .cta { text-align: center; padding: 50px 20px; } .cta a { display: inline-block; background: #1b263b; color: white; padding: 15px 35px; border-radius: 8px; font-size: 20px; text-decoration: none; transition: 0.3s; } .cta a:hover { background: #415a77; } footer { background: #0d1b2a; color: white; padding: 20px; text-align: center; margin-top: 40px; } form { background: white; padding: 20px; border-radius: 12px; max-width: 600px; margin: 20px auto; box-shadow: 0 3px 12px rgba(0,0,0,0.1); } input, textarea { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; } button { background: #1b263b; color: white; padding: 14px; border: none; border-radius: 8px; width: 100%; cursor: pointer; font-size: 18px; } button:hover { background: #415a77; } </style>
SwiftCargo

النقل اللوجستي بلا حدود

نقل سريع، آمن وموثوق عبر Volkswagen Crafter عالية السعة.

<!-- ★ ضع صورتك هنا بعد تسميتها: crafter-real.jpg -->
<img src="crafter-real.jpg" alt="SwiftCargo Volkswagen Crafter">

لماذا SwiftCargo؟

<div class="feature-box">✔ نقل لوجستي احترافي للشركات والمطارات والموانئ باستخدام Volkswagen Crafter</div>
<div class="feature-box">✔ تتبع مباشر لكل شحنة لضمان وصولها في الوقت المحدد</div>
<div class="feature-box">✔ حلول شحن آمنة، سريعة وفعالة</div>
<div class="feature-box">✔ فريق متخصص، عمليات دقيقة، وانسيابية كاملة في الخدمة</div>
ابدأ شحنتك الآن

تواصل معنا

    <input type="text" name="name" placeholder="الاسم الكامل" required>
    <input type="email" name="email" placeholder="البريد الإلكتروني" required>
    <input type="text" name="phone" placeholder="رقم الهاتف" required>
    <textarea name="message" placeholder="اكتب رسالتك..." rows="5" required></textarea>
    
    <button type="submit">إرسال</button>
</form>
للتواصل:
📧 raaq605@gmail.com
📞 0666116722

© 2025 SwiftCargo

@shassouni33-bit
Copy link

Great

@108232-lab
Copy link

Title: "Cosmic Cutthroats" — Fortnite Battle Royale Season Concept

Instruction:
Create a complete Fortnite Battle Royale season called "Cosmic Cutthroats." Produce content in Fortnite’s colorful, high-energy style. Deliver a season reveal that includes a map update, unlockable weapons, a vehicle, gameplay features, three skins with mini-backstories, and a short cinematic storyline. Use vivid visual descriptions and explain mechanical behavior for weapons, vehicles, and new mechanics. Keep tone playful, cinematic, and explosive.

Season Summary:
Theme: Space Pirates have invaded the Island to steal the Time Core — an artifact that controls speed and reality. The pirate warlord Dark Velocity seeks to freeze and fast-forward worlds using warp-speed energy.

Map Update — 4 POIs (include visuals, hazards, loot, and short lore for each):

  1. Nebula Harbor

    • Visuals: Crashed starship skeletons, shipping containers with glowing nebula-bloom algae, ropes and neon flags.
    • Hazards: Pirate guard patrols, explosive fuel crates.
    • Loot: High-tier pirate tech, weapon caches in cargo holds.
    • Lore: Once a trade port; now a black market for stolen Time Core tech.
  2. Starlance Quarry

    • Visuals: Jagged meteor crystals protruding from rock, faint gravity shimmer, dust motes that glow.
    • Hazards: Low-gravity pockets that change jump arcs and fall damage.
    • Loot: Crystal shards that unlock temporary low-grav boots and rare crafting components.
    • Lore: Miners harvested time-tinged crystals—until the pirates set up camps to seize them.
  3. Black Flag Citadel

    • Visuals: Floating citadel spliced with ship plating and warp-gates, giant skull-figurehead silhouette.
    • Hazards: Warp-doors that randomly teleport players between rooms; security turrets.
    • Loot: Mythic vault with boss key access, rare warp-tech weapons.
    • Lore: Dark Velocity’s stronghold — rumored to house the Time Core schematics.
  4. Astro-Motor Speedway

    • Visuals: Glittering cosmic track looping cliffs, holographic billboards, drifting ramps.
    • Hazards: High-speed sections that fling players off if not in vehicles.
    • Loot: Vehicle spawn points, speed-boost pads, mid-tier weapons in pit garages.
    • Lore: Pirates converted an old racing circuit into a smuggling and training ground.

New Unlockable Weapons (4) — describe visuals and mechanics:

  1. Warp-Pistol

    • Visuals: Sleek compact sidearm with a spinning chronal core and star-trail muzzle flashes.
    • Mechanics: Fires projectiles that can “blink” a short distance after being shot, allowing bullets to bypass thin walls or appear behind cover. Short cooldown per shot to prevent abuse.
  2. Gravity Grappler

    • Visuals: Harpoon-like gun with glowing tether and pulsing gravity nodes.
    • Mechanics: Pulls an enemy toward the user or launches the user toward a targeted surface. Can cancel movement early; moderate cooldown.
  3. Star-Splitter Cannon

    • Visuals: Shoulder-mounted energy cannon with a crystal-lined barrel that charges in three segments.
    • Mechanics: Charged shot pierces builds and armor; full charge deals heavy structure damage. Overheat mechanic prevents continuous fire.
  4. Cosmo-Cutlass

    • Visuals: A radiant blade with a comet-trail edge and an etched time-glyph hilt.
    • Mechanics: Melee weapon with dash-enabled combos; each landed combo builds a temporary "speed meter" that grants short burst of sprint and reduced cooldowns.

New Vehicle:
Comet Cruiser (hover-car)

  • Visuals: Sleek, low-profile hovercar with comet-tail exhaust and pulsating underglow.
  • Mechanics: Drift-boost system, short "warp dash" that teleports the vehicle a short distance on a cooldown, and a mounted mini-laser for light suppression fire. Can be upgraded at certain garages.

Gameplay Features & Events:

  • Meteor Loot Drops: Periodic meteors crash into random locations, creating temporary high-loot zones guarded by pirate minibosses.
  • Warp Storm Zones: Temporary circular zones that speed up movement, increase reload speeds, and distort bullet trajectories slightly — high-risk, high-reward.
  • Pirate Raid Events: Timed events where waves of pirate NPCs attempt to capture a POI; teams can defend/contest for exclusive reward caches and keys to the Black Flag Citadel vault.
  • Unlock progression: Players can discover vault keys and blueprint shards across the map to unlock weapon upgrades and Comet Cruiser mods.

Skins (3) — include variants & lore hooks:

  1. Captain Starhook (Legendary)

    • Look: Rugged space-pirate captain with a mechanical hook arm and a star-map cloak.
    • Backstory: A famed hunter turned pirate-hunter; lost an arm during an orbital duel. Joins the defense to reclaim stolen time tech.
    • Variants: Classic, Void-Coated, Timeworn (with glow intensity changes).
    • Emote / Back Bling: Hook grappling emote / Starlog journal back bling.
  2. Nova Navigator (Epic)

    • Look: Explorer pilot with compact jet harness and holographic navigation helm.
    • Backstory: Cartographer of rifts who defected when she realized Dark Velocity will fracture worlds.
    • Variants: Scout, Explorer, Rift-Tamer.
    • Gadget: Mini-map pulse reveal once per match.
  3. Plasma Prowler (Rare)

    • Look: Sleek stealth android with cat-like silhouette and night-vision visor.
    • Backstory: An espionage bot turned rebel, reprogrammed to sabotage pirate operations.
    • Variants: Stealth, Neon Prowl, Circuit Fade.
    • Passive: Slight movement-silence when crouched.

Short Cinematic Storyline (season reveal script):
Opening shot: Stars tear open as rift-storms scatter meteors toward the Island. A battered starship plummets and crashes into the sea. Cut to Nebula Harbor: pirate banners unfurl. Dark Velocity emerges in a flash of warped light, smirking as he lifts a shard of the Time Core. "With speed, I will unmake the patient," he declares. Montage: pirates claiming POIs, heroes sabotaging warp-gates, meteor strikes tearing craters. Climactic tease: Dark Velocity powers a miniature warp engine; the sky fractures and a clockface melts across the clouds. Text overlay: "Can you stop time from becoming theirs?" End on an explosive cliffhanger.

Deliverables:

  • Map descriptions for each POI with topography, ideal combat scenarios, and suggested loot tables.
  • Full mechanics breakdown for the 4 weapons and the Comet Cruiser.
  • Event designs for Meteor Loot Drops, Warp Storm Zones, and Pirate Raids.
  • Three skin concepts with variants, back bling, and small gameplay flavor.
  • A 3-paragraph cinematic reveal script and one hook line for a trailer.

Tone & Style Notes:

  • Use Fortnite’s playful, bold descriptive voice. Emphasize neon cosmic colors (purples, blues, gold).
  • Keep explanations concise but mechanically specific so designers can implement or artists can visualize.

End of ACode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment