-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5b6a204
commit 4b4ef27
Showing
2 changed files
with
371 additions
and
213 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,159 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
| <title>Appel The Aventure-1.4.1</title> | ||
| <style> | ||
| body { | ||
| color: #ffffff; | ||
| font-family: sans-serif; | ||
| overflow: hidden; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #000000; | ||
| } | ||
| :root, body.is-fullscreen { | ||
| background-color: #000000; | ||
| } | ||
| [hidden] { | ||
| display: none !important; | ||
| } | ||
| #app, #loading, #error, #launch { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| .screen { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| cursor: default; | ||
| user-select: none; | ||
| background: linear-gradient(45deg, #1e1e1e, #333333); | ||
| } | ||
| /* Loading screen animation */ | ||
| #loading { | ||
| animation: fade-in 1.5s ease-out forwards; | ||
| } | ||
| @keyframes fade-in { | ||
| from { opacity: 0; } | ||
| to { opacity: 1; } | ||
| } | ||
| /* Progress bar styles */ | ||
| .progress-bar-outer { | ||
| height: 12px; | ||
| width: 250px; | ||
| max-width: 80%; | ||
| border-radius: 6px; | ||
| overflow: hidden; | ||
| border: 1px solid #ffffff; | ||
| margin-top: 20px; | ||
| background-color: rgba(255, 255, 255, 0.2); | ||
| } | ||
| .progress-bar-inner { | ||
| height: 100%; | ||
| width: 0; | ||
| background: linear-gradient(90deg, #4caf50, #81c784); | ||
| transition: width 0.3s ease; | ||
| } | ||
| /* Loading dots animation */ | ||
| .loading-dots { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-top: 10px; | ||
| } | ||
| .dot { | ||
| width: 10px; | ||
| height: 10px; | ||
| margin: 0 3px; | ||
| background-color: #81c784; | ||
| border-radius: 50%; | ||
| animation: bounce 1.4s infinite ease-in-out both; | ||
| } | ||
| .dot:nth-child(1) { | ||
| animation-delay: -0.32s; | ||
| } | ||
| .dot:nth-child(2) { | ||
| animation-delay: -0.16s; | ||
| } | ||
| .dot:nth-child(3) { | ||
| animation-delay: 0s; | ||
| } | ||
| @keyframes bounce { | ||
| 0%, 80%, 100% { transform: scale(0); } | ||
| 40% { transform: scale(1); } | ||
| } | ||
| /* Launch button */ | ||
| #launch { | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| cursor: pointer; | ||
| } | ||
| .green-flag { | ||
| width: 80px; | ||
| height: 80px; | ||
| padding: 16px; | ||
| border-radius: 100%; | ||
| background: rgba(255, 255, 255, 0.75); | ||
| border: 3px solid hsla(0, 100%, 100%, 1); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| box-sizing: border-box; | ||
| } | ||
| /* Footer styles */ | ||
| .footer { | ||
| position: absolute; | ||
| bottom: 20px; | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding: 0 20px; | ||
| font-size: 14px; | ||
| color: #cccccc; /* Gray color for copyright */ | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
|
|
||
| <!-- Launch screen --> | ||
| <div id="launch" class="screen" hidden title="Click to start"> | ||
| <div class="green-flag"> | ||
| <svg viewBox="0 0 16.63 17.5" width="42" height="44"> | ||
| <defs><style>.cls-1,.cls-2{fill:#4cbf56;stroke:#45993d;stroke-linecap:round;stroke-linejoin:round;}.cls-2{stroke-width:1.5px;}</style></defs> | ||
| <path class="cls-1" d="M.75,2A6.44,6.44,0,0,1,8.44,2h0a6.44,6.44,0,0,0,7.69,0V12.4a6.44,6.44,0,0,1-7.69,0h0a6.44,6.44,0,0,0-7.69,0"/> | ||
| <line class="cls-2" x1="0.75" y1="16.75" x2="0.75" y2="0.75"/> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Loading screen with animated progress --> | ||
| <div id="loading" class="screen"> | ||
| <div class="loading-image"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABACAYAAABcIPRGAAAAAXNSR0IArs4c6QAAAU5JREFUaEPtmWsKwyAQhJUeoWfrKXvDviwFbenasrtmxCiTPyEwGd35fIXEEEIKE1+RBQymtyCBdBqcqdJ8PH8JagIsoDNAEugcsGpPAmpEnQUk0Dlg1X59AmoE+xIseBbaV8Bqb5YgoFYpBL2/4F6hmi+XOLuyAO3Eb44/hEACnrSMWleoLvFe50DvSWkMvk22xD5AAm3wMW9VQyhVPLyAtHVhm18U9iygHggkIDL5DgQ2hKJwSu/J00bA6scCCl9rYvUc+b0KWf1I4PNLTY71Rw77oOxQw/eB0oHpCigJ33PCl3wvz7f8fFQIXAUpbdWCLaPTFoA5dKFcGlYhVNMYHxaAybHdhQTas8O8uZmANMB067+L/EJkASTgHHPwIeRsHy7fPAfgPXIasgBnYHA5CcAjdRqSgDMwuJwE4JE6DVUCTr/hcv4jG41gegJPL+naBw6pKCUAAAAASUVORK5CYII=" alt="Loading Icon"></div> | ||
| <div class="progress-bar-outer"> | ||
| <div class="progress-bar-inner" id="loading-inner"></div> | ||
| </div> | ||
| <div class="loading-dots"> | ||
| <div class="dot"></div> | ||
| <div class="dot"></div> | ||
| <div class="dot"></div> | ||
| </div> | ||
| <div class="footer"> | ||
| <div>Appel The Adventure ©</div> | ||
| <div>Version 1.4.1</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Error screen --> | ||
| <div id="error" class="screen" hidden> | ||
| <h1>Error</h1> | ||
| <details> | ||
| <summary id="error-message"></summary> | ||
| <p id="error-stack"></p> | ||
| </details> | ||
| </div> |
426 changes: 213 additions & 213 deletions
426
Galery/Appel-The-Adventure/play-plan/Appel The Aventure-1-6.html
Large diffs are not rendered by default.
Oops, something went wrong.