Zakaria/FancyWordle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding intro to the app with a skip button

Browse Source
This commit is contained in:
Zakaria
2026-05-21 09:38:27 -04:00
parent 69ed1c78ad
commit 166eacdbfd
6 changed files with 1053 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fancy-wordle-modern.html
+19 -3
View File
@@ -5,14 +5,30 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f7efe6">
<title>Fancy Wordle</title>
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="CSS/styles.css?v=8">
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="word-data.js?v=5" defer></script>
<script src="supabase-config.js?v=1" defer></script>
<script src="script.js?v=7" defer></script>
<script src="script.js?v=8" defer></script>
</head>
<body>
<body class="intro-active">
<section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
<button class="intro-skip" type="button" id="intro-skip" aria-label="Skip intro">Skip</button>
<div class="intro-stage" aria-hidden="true">
<div class="intro-scanline"></div>
<div class="intro-tiles" id="intro-tiles">
<div class="intro-tile" data-status="wrong"><span class="intro-letter">Q</span></div>
<div class="intro-tile" data-status="wrong"><span class="intro-letter">I</span></div>
<div class="intro-tile" data-status="wrong"><span class="intro-letter">N</span></div>
<div class="intro-tile" data-status="wrong"><span class="intro-letter">Z</span></div>
<div class="intro-tile" data-status="wrong"><span class="intro-letter">A</span></div>
<div class="intro-tile" data-status="wrong"><span class="intro-letter">T</span></div>
</div>
</div>
<div class="intro-caption">six letters flip into one answer</div>
</section>
<div class="app-shell">
<header class="topbar" aria-label="Game controls">
<a class="brand" href="#" aria-label="Restart Fancy Wordle">