Hugging Face's logo

Spaces:
noah33565
/
NoahsAPP
Running

App Files Community
NoahsAPP / index.html
noah33565's picture
noah33565
Update index.html
80f0bc7 verified
raw
history blame contribute delete
18.7 kB
<!DOCTYPE html>
<html lang="de">
<head>
 <meta name="google-site-verification" content="ndJbshO4CFOPURJ44uy8W8qBR_JMsq-gWqqqLtFODtc" />
 <meta name="description" content="NoahsAPP – Deine App für Chat und mehr">
<meta name="keywords" content="NoahsAPP, NoahsChat, Chat, App">
<!-- Vorschau beim Teilen -->
<meta property="og:title" content="NoahsAPP">
<meta property="og:description" content="Deine App für Chat und mehr">
<meta property="og:url" content="https://noah33565-chat.static.hf.space">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NoahsAPP</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap" rel="stylesheet">
<style>
 :root {
 --bg: #050a0f;
 --surface: #0a1520;
 --accent: #00d4ff;
 --accent2: #ff6b35;
 --glow: rgba(0, 212, 255, 0.3);
 --text: #e0f4ff;
 --muted: #4a7a99;
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body {
 background: var(--bg);
 color: var(--text);
 font-family: 'Rajdhani', sans-serif;
 min-height: 100vh;
 overflow-x: hidden;
 }
 body::before {
 content: '';
 position: fixed;
 inset: 0;
 background-image:
 linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
 background-size: 60px 60px;
 animation: gridScroll 20s linear infinite;
 pointer-events: none;
 z-index: 0;
 }
 @keyframes gridScroll {
 0% { transform: translateY(0); }
 100% { transform: translateY(60px); }
 }
 body::after {
 content: '';
 position: fixed;
 inset: 0;
 background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
 pointer-events: none;
 z-index: 0;
 }
 header {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 40px;
 background: linear-gradient(180deg, rgba(5,10,15,0.95) 0%, transparent 100%);
 backdrop-filter: blur(10px);
 }
 .logo {
 font-family: 'Orbitron', monospace;
 font-weight: 900;
 font-size: 1.8rem;
 letter-spacing: 0.1em;
 color: var(--accent);
 text-shadow: 0 0 20px var(--glow), 0 0 40px var(--glow);
 animation: logoPulse 3s ease-in-out infinite;
 }
 .logo span { color: var(--accent2); }
 @keyframes logoPulse {
 0%, 100% { text-shadow: 0 0 20px var(--glow), 0 0 40px var(--glow); }
 50% { text-shadow: 0 0 30px rgba(0,212,255,0.6), 0 0 60px rgba(0,212,255,0.4), 0 0 80px rgba(0,212,255,0.2); }
 }
 .team-btn {
 font-family: 'Orbitron', monospace;
 font-size: 0.85rem;
 font-weight: 700;
 letter-spacing: 0.15em;
 padding: 10px 28px;
 background: transparent;
 border: 2px solid var(--accent);
 color: var(--accent);
 cursor: pointer;
 position: relative;
 overflow: hidden;
 transition: color 0.3s;
 text-decoration: none;
 display: inline-block;
 clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
 }
 .team-btn::before {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--accent);
 transform: translateX(-100%);
 transition: transform 0.3s ease;
 }
 .team-btn:hover::before { transform: translateX(0); }
 .team-btn:hover { color: var(--bg); }
 .team-btn span { position: relative; z-index: 1; }
 .discord-btn {
 font-family: 'Rajdhani', sans-serif;
 font-weight: 600;
 font-size: 0.9rem;
 padding: 8px 20px;
 background: rgba(88,101,242,0.2);
 border: 1px solid rgba(88,101,242,0.6);
 color: #7289da;
 cursor: pointer;
 text-decoration: none;
 display: inline-block;
 transition: all 0.3s;
 letter-spacing: 0.05em;
 clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
 }
 .discord-btn:hover {
 background: rgba(88,101,242,0.5);
 color: #fff;
 box-shadow: 0 0 20px rgba(88,101,242,0.4);
 }
 .header-right {
 display: flex;
 gap: 12px;
 align-items: center;
 }
 .hero {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 120px 40px 80px;
 }
 .hero-title {
 font-family: 'Orbitron', monospace;
 font-size: clamp(3rem, 8vw, 7rem);
 font-weight: 900;
 line-height: 1;
 letter-spacing: 0.05em;
 background: linear-gradient(135deg, #00d4ff 0%, #ffffff 40%, #ff6b35 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: heroReveal 1s ease-out forwards;
 opacity: 0;
 transform: translateY(30px);
 }
 @keyframes heroReveal {
 to { opacity: 1; transform: translateY(0); }
 }
 .hero-sub {
 font-size: 1.2rem;
 color: var(--muted);
 letter-spacing: 0.3em;
 text-transform: uppercase;
 margin-top: 16px;
 animation: heroReveal 1s 0.2s ease-out forwards;
 opacity: 0;
 transform: translateY(20px);
 }
 .hero-line {
 width: 200px;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--accent), transparent);
 margin: 32px auto;
 animation: heroReveal 1s 0.4s ease-out forwards;
 opacity: 0;
 }
 /* Ping status bar */
 .ping-status {
 position: relative;
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-bottom: 40px;
 font-family: 'Orbitron', monospace;
 font-size: 0.6rem;
 letter-spacing: 0.2em;
 color: var(--muted);
 text-transform: uppercase;
 }
 .ping-dot {
 width: 6px; height: 6px;
 background: #4eff91;
 border-radius: 50%;
 box-shadow: 0 0 6px #4eff91;
 animation: pingAnim 2s ease-in-out infinite;
 }
 @keyframes pingAnim {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.4; transform: scale(0.6); }
 }
 #ping-label { color: #4eff91; }
 .section-label {
 position: relative;
 z-index: 1;
 text-align: center;
 font-family: 'Orbitron', monospace;
 font-size: 0.75rem;
 letter-spacing: 0.4em;
 color: var(--accent);
 text-transform: uppercase;
 margin-bottom: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
 }
 .section-label::before,
 .section-label::after {
 content: '';
 width: 80px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--accent));
 }
 .section-label::after { transform: rotate(180deg); }
 .cards {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 24px;
 padding: 0 40px 100px;
 max-width: 1200px;
 margin: 0 auto;
 }
 .card {
 background: linear-gradient(135deg, rgba(10,21,32,0.9) 0%, rgba(5,10,15,0.95) 100%);
 border: 1px solid rgba(0,212,255,0.15);
 padding: 36px 32px;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 text-decoration: none;
 display: block;
 transition: transform 0.3s, border-color 0.3s;
 clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
 animation: cardReveal 0.6s ease-out forwards;
 opacity: 0;
 transform: translateY(30px);
 }
 .card:nth-child(1) { animation-delay: 0.5s; }
 .card:nth-child(2) { animation-delay: 0.7s; }
 .card:nth-child(3) { animation-delay: 0.9s; }
 .card:nth-child(4) { animation-delay: 1.1s; }
 @keyframes cardReveal {
 to { opacity: 1; transform: translateY(0); }
 }
 .card::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(0,212,255,0.05) 0%, transparent 60%);
 opacity: 0;
 transition: opacity 0.3s;
 }
 .card::after {
 content: '';
 position: absolute;
 top: 0; right: 0;
 width: 0; height: 0;
 border-style: solid;
 border-width: 0 20px 20px 0;
 border-color: transparent var(--accent) transparent transparent;
 opacity: 0.5;
 }
 .card:hover { transform: translateY(-6px); border-color: rgba(0,212,255,0.5); box-shadow: 0 20px 60px rgba(0,212,255,0.1), 0 0 0 1px rgba(0,212,255,0.1) inset; }
 .card:hover::before { opacity: 1; }
 .card-tag {
 font-family: 'Orbitron', monospace;
 font-size: 0.65rem;
 letter-spacing: 0.3em;
 color: var(--accent);
 text-transform: uppercase;
 margin-bottom: 16px;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .card-tag::before { content: ''; width: 20px; height: 1px; background: var(--accent); }
 .card-title {
 font-family: 'Orbitron', monospace;
 font-size: 1.5rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 12px;
 letter-spacing: 0.05em;
 }
 .card-title span { color: var(--accent); }
 .card-desc {
 font-size: 1rem;
 color: var(--muted);
 line-height: 1.6;
 font-weight: 300;
 margin-bottom: 24px;
 }
 .card-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: 'Orbitron', monospace;
 font-size: 0.7rem;
 letter-spacing: 0.2em;
 color: var(--accent);
 text-transform: uppercase;
 }
 .card-cta svg { transition: transform 0.3s; }
 .card:hover .card-cta svg { transform: translateX(6px); }
 /* Hack card */
 .card.hack-card { border-color: rgba(255,107,53,0.2); cursor: default; }
 .card.hack-card::after { border-color: transparent var(--accent2) transparent transparent; }
 .card.hack-card:hover { border-color: rgba(255,107,53,0.5); box-shadow: 0 20px 60px rgba(255,107,53,0.1); }
 .card.hack-card .card-tag { color: var(--accent2); }
 .card.hack-card .card-tag::before { background: var(--accent2); }
 .card.hack-card .card-title span { color: var(--accent2); }
 /* Code blocks */
 .code-block {
 background: rgba(0,0,0,0.6);
 border: 1px solid rgba(255,107,53,0.2);
 border-left: 3px solid var(--accent2);
 padding: 12px 16px;
 margin-bottom: 12px;
 font-family: 'Courier New', monospace;
 font-size: 0.7rem;
 color: #aef3c7;
 line-height: 1.6;
 word-break: break-all;
 position: relative;
 cursor: pointer;
 transition: background 0.2s;
 }
 .code-block:hover { background: rgba(0,0,0,0.8); }
 .code-label {
 font-family: 'Rajdhani', sans-serif;
 font-size: 0.75rem;
 color: var(--accent2);
 letter-spacing: 0.15em;
 font-weight: 600;
 margin-bottom: 6px;
 text-transform: uppercase;
 }
 .copy-hint {
 position: absolute;
 top: 8px; right: 8px;
 font-family: 'Rajdhani', sans-serif;
 font-size: 0.65rem;
 color: rgba(255,107,53,0.5);
 letter-spacing: 0.1em;
 }
 .copy-hint.copied { color: #4eff91; }
 .ping {
 display: inline-block;
 width: 8px; height: 8px;
 background: #4eff91;
 border-radius: 50%;
 box-shadow: 0 0 8px #4eff91;
 animation: pingAnim 2s ease-in-out infinite;
 margin-right: 8px;
 }
 /* Chat card */
 .card.chat-card { border-color: rgba(78,255,145,0.2); }
 .card.chat-card::after { border-color: transparent #4eff91 transparent transparent; }
 .card.chat-card::before { background: linear-gradient(135deg, rgba(78,255,145,0.05) 0%, transparent 60%); }
 .card.chat-card:hover { border-color: rgba(78,255,145,0.5); box-shadow: 0 20px 60px rgba(78,255,145,0.1); }
 .card.chat-card .card-tag { color: #4eff91; }
 .card.chat-card .card-tag::before { background: #4eff91; }
 .card.chat-card .card-title span { color: #4eff91; }
 .card.chat-card .card-cta { color: #4eff91; }
 /* Discord card */
 .card.discord-card { border-color: rgba(88,101,242,0.2); }
 .card.discord-card::after { border-color: transparent #5865f2 transparent transparent; }
 .card.discord-card:hover { border-color: rgba(88,101,242,0.5); box-shadow: 0 20px 60px rgba(88,101,242,0.1); }
 .card.discord-card .card-tag { color: #7289da; }
 .card.discord-card .card-tag::before { background: #7289da; }
 .card.discord-card .card-title span { color: #7289da; }
 .card.discord-card .card-cta { color: #7289da; }
 footer {
 position: relative;
 z-index: 1;
 text-align: center;
 padding: 40px;
 border-top: 1px solid rgba(0,212,255,0.1);
 font-family: 'Orbitron', monospace;
 font-size: 0.6rem;
 letter-spacing: 0.3em;
 color: var(--muted);
 }
 /* Hidden ping iframes */
 .ping-frame { display: none; }
</style>
</head>
<body>
<!-- Hidden iframes for keeping spaces alive -->
<iframe id="frame-ki" class="ping-frame" title="ping-ki"></iframe>
<iframe id="frame-chat" class="ping-frame" title="ping-chat"></iframe>
<header>
 <div class="logo">Noahs<span>APP</span></div>
 <div class="header-right">
 <a href="https://discord.gg/Wf3cRWsDmU" target="_blank" class="discord-btn">Discord</a>
 <a href="team.html" class="team-btn"><span>&#9654; TEAM</span></a>
 </div>
</header>
<section class="hero">
 <h1 class="hero-title">NoahsAPP</h1>
 <p class="hero-sub">Dein Hub f&#252;r alle Projekte</p>
 <div class="hero-line"></div>
</section>
<!-- Auto-ping status -->
<div class="ping-status">
 <div class="ping-dot"></div>
 <span id="ping-label">SPACES AKTIV</span>
 <span>&#8212;</span>
 <span id="ping-timer">wird geladen...</span>
</div>
<div class="section-label">Projekte</div>
<div class="cards">
<h1>Noahs Snap name:noah_335432</h1>
<!-- NoahsKI -->
 <a href="https://noah33565-noahski.hf.space/" target="_blank" class="card">
 <div class="card-tag">KI &#183; Live</div>
 <h2 class="card-title">Noahs<span>KI</span></h2>
 <p class="card-desc">Dein pers&#246;nlicher KI-ChatBot &#8211; direkt im Browser, keine Installation n&#246;tig.</p>
 <div class="card-cta">
 <span class="ping"></span>
 Jetzt starten
 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
 </div>
 </a>
<!-- NoahsHacks -->
 <div class="card hack-card">
 <div class="card-tag">Roblox &#183; Scripts</div>
 <h2 class="card-title">Noahs<span>Hacks</span></h2>
 <p class="card-desc">Roblox Scripts &#8211; einfach kopieren &amp; in die Console einf&#252;gen.</p>
<div class="code-label">&#9656; ALL GAMES</div>
 <div class="code-block" onclick="copyCode(this, 'loadstring(game:HttpGet(&quot;https://raw.githubusercontent.com/Noah2012Noah/ALL-GAMES/refs/heads/main/ALL%20GAMES%20v.01&quot;, true))()')">
 <span class="copy-hint">klick zum kopieren</span>
 loadstring(game:HttpGet("https://raw.githubusercontent.com/Noah2012Noah/ALL-GAMES/refs/heads/main/ALL%20GAMES%20v.01", true))()
 </div>
<div class="code-label">&#9656; PRISON LIFE</div>
 <div class="code-block" onclick="copyCode(this, 'loadstring(game:HttpGet(&quot;https://raw.githubusercontent.com/Noah2012Noah/Prision-Life-by-Noah/main/v.01&quot;))()')">
 <span class="copy-hint">klick zum kopieren</span>
 loadstring(game:HttpGet("https://raw.githubusercontent.com/Noah2012Noah/Prision-Life-by-Noah/main/v.01"))()
 </div>
 </div>
<!-- NoahsChat -->
 <a href="https://noah33565-chat.static.hf.space/" target="_blank" class="card chat-card">
 <div class="card-tag">Chat &#183; Live</div>
 <h2 class="card-title">Noahs<span>Chat</span></h2>
 <p class="card-desc">Echtzeit-Chat mit Accounts, Gruppen-Channels und Direktnachrichten &#8211; f&#252;r die ganze Community.</p>
 <div class="card-cta">
 <span class="ping" style="background:#4eff91;box-shadow:0 0 8px #4eff91;"></span>
 Chat &#246;ffnen
 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
 </div>
 </a>
<!-- Discord -->
 <a href="https://discord.gg/Wf3cRWsDmU" target="_blank" class="card discord-card">
 <div class="card-tag">Community &#183; Discord</div>
 <h2 class="card-title">Noahs<span>Server</span></h2>
 <p class="card-desc">Tritt dem Community-Discord bei &#8211; Support, Updates und mehr direkt vom Team.</p>
 <div class="card-cta">
 Server beitreten
 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
 </div>
 </a>
</div>
<footer>&#169; 2025 NoahsAPP &#183; Made by Noah &#183; All Rights Reserved</footer>
<script>
// ─── COPY CODE ───
function copyCode(el, text) {
 navigator.clipboard.writeText(text).then(() => {
 const hint = el.querySelector('.copy-hint');
 hint.textContent = '&#10003; Kopiert!';
 hint.classList.add('copied');
 setTimeout(() => {
 hint.textContent = 'klick zum kopieren';
 hint.classList.remove('copied');
 }, 2000);
 });
}
// ─── AUTO-PING: keep HuggingFace Spaces alive ───
const SPACES = [
 { id: 'frame-ki', url: 'https://noah33565-noahski.hf.space/' },
 { id: 'frame-chat', url: 'https://noah33565-chat.static.hf.space/' },
];
const PING_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
const STORAGE_KEY = 'noahsapp_last_ping';
function pingSpaces() {
 SPACES.forEach(space => {
 const frame = document.getElementById(space.id);
 if (frame) {
 // Add cache-bust so browser actually reloads it
 frame.src = space.url + '?ping=' + Date.now();
 }
 });
 // Save timestamp
 localStorage.setItem(STORAGE_KEY, Date.now().toString());
 updatePingLabel();
 console.log('[NoahsAPP] Spaces gepingt um', new Date().toLocaleTimeString('de-DE'));
}
function updatePingLabel() {
 const last = parseInt(localStorage.getItem(STORAGE_KEY) || '0');
 const timerEl = document.getElementById('ping-timer');
 if (!last) {
 timerEl.textContent = 'noch nie gepingt';
 return;
 }
 const diff = Date.now() - last;
 const h = Math.floor(diff / 3600000);
 const m = Math.floor((diff % 3600000) / 60000);
 const s = Math.floor((diff % 60000) / 1000);
 if (h > 0) timerEl.textContent = 'letzter ping vor ' + h + 'h ' + m + 'm';
 else if (m > 0) timerEl.textContent = 'letzter ping vor ' + m + 'm ' + s + 's';
 else timerEl.textContent = 'letzter ping vor ' + s + 's';
}
function checkAndPing() {
 const last = parseInt(localStorage.getItem(STORAGE_KEY) || '0');
 const now = Date.now();
 if (!last || (now - last) >= PING_INTERVAL_MS) {
 pingSpaces();
 } else {
 updatePingLabel();
 }
}
// Update timer display every second
setInterval(updatePingLabel, 1000);
// Check every minute if 24h have passed
setInterval(checkAndPing, 60 * 1000);
// Run on load (with small delay so iframes are ready)
setTimeout(checkAndPing, 2000);
</script>
</body>
</html>