aboutsummaryrefslogtreecommitdiff
path: root/static/bs/tutorial/tutorial.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/bs/tutorial/tutorial.css')
-rw-r--r--static/bs/tutorial/tutorial.css945
1 files changed, 0 insertions, 945 deletions
diff --git a/static/bs/tutorial/tutorial.css b/static/bs/tutorial/tutorial.css
deleted file mode 100644
index 4f2aff0..0000000
--- a/static/bs/tutorial/tutorial.css
+++ /dev/null
@@ -1,945 +0,0 @@
-/* ===================
- Root Variables and Resets
- =================== */
- :root {
- --main-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
- --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- --highlight-color: #fefcbf;
- }
-
- *, *::before, *::after {
- box-sizing: border-box;
- }
-
- /* ===================
- Container Structure
- =================== */
- .puzzle-container {
- width: 100%;
- margin: 0 auto;
- border: 1px solid #e2e8f0;
- border-radius: 0.5rem;
- background: white;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- padding: 0;
- display: flex;
- flex-direction: column;
- }
-
- @media (min-width: 1024px) {
- .puzzle-container {
- max-width: 42rem;
- }
- }
-
- /* ===================
- Header Styles
- =================== */
- /* Header Base Styles */
- .puzzle-header {
- background: white;
- border-bottom: 1px solid #e2e8f0;
- box-sizing: border-box;
- padding: 0.6rem;
- position: relative; /* Desktop default */
- text-align: center;
- z-index: 10;
- }
-
- /* Mobile-specific header styles */
- @media (max-width: 640px) {
- .puzzle-header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1000;
- padding: max(0.4rem, env(safe-area-inset-top));
- }
- }
-
- /* Header title */
- .puzzle-header h1 {
- margin: 0 0 0.5rem 0;
- text-align: center;
- font-size: clamp(2rem, 8vw, 3rem);
- cursor: pointer;
- font-family: var(--main-font);
- font-variant: small-caps;
- color: #1a202c;
- font-weight: 600;
- }
-
- @media (max-width: 640px) {
- .puzzle-header h1 {
- margin: 0;
- font-size: clamp(1.8rem, 7vw, 2.8rem);
- }
- }
-
- /* Help button */
- .puzzle-header .exit-button {
- position: absolute;
- top: 10px;
- right: 20px;
- background: none;
- border: 2px solid #333;
- border-radius: 50%;
- width: 2.4rem;
- height: 2.4rem;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-weight: bold;
- font-size: 1.2rem;
- color: #333;
- }
-
- @media (max-width: 640px) {
- .puzzle-header .exit-button {
- right: 10px;
- }
- }
-
- /* Navigation container */
- .puzzle-header .nav-container {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 1rem;
- }
-
- /* Navigation buttons */
- .puzzle-header .nav-button {
- padding: 4px 12px;
- border: none;
- border-radius: 4px;
- background: none;
- cursor: pointer;
- font-weight: bold;
- font-size: 1.5rem;
- color: #333;
- }
-
- .puzzle-header .nav-button:disabled {
- opacity: 0.3;
- cursor: default;
- }
-
- /* Puzzle date */
- .puzzle-header .puzzle-date {
- margin: 0;
- font-size: 20px;
- font-weight: 600;
- font-family: var(--main-font);
- font-variant: small-caps;
- color: #1a202c;
- }
-
- /* ===================
- Main Content Area
- =================== */
- /* New rules for loading state */
-
- .loading {
- text-align: center;
- padding: 2rem;
- }
-
- .puzzle-content {
- padding: 0rem 1rem 1rem 1rem;
- display: flex;
- flex-direction: column;
- gap: 0rem;
- width: 100%;
- }
-
- /* ===================
- Puzzle Display
- =================== */
- .puzzle-display {
- width: 100%;
- min-height: 40vh;
- max-height: 60vh;
- background: #f1f5f9;
- border-radius: 0.5rem;
- padding: 1.5rem;
- font-family: var(--mono-font);
- font-size: 24px;
- line-height: 1.5;
- overflow-y: auto;
- word-break: keep-all;
- overflow-wrap: break-word;
- hyphens: none;
- transition: all 0.3s ease;
- }
-
- .puzzle-display.completed {
- min-height: auto;
- max-height: none;
- height: auto;
- }
-
- /* ===================
- Active Clue & Mark Styles
- =================== */
- .active-clue {
- background-color: rgba(255, 255, 0, 0.2);
- border-radius: 3px;
- padding: 2px 4px;
- margin: -2px -4px;
- transition: background-color 0.3s ease;
- cursor: pointer;
- }
-
- .active-clue:hover {
- background-color: rgba(255, 255, 0, 0.3);
- }
-
- mark.solved {
- background-color: rgba(0, 255, 0, 0.2);
- border-radius: 3px;
- padding: 2px 4px;
- margin: -2px -4px;
- }
-
- mark {
- background-color: transparent;
- color: inherit;
- }
-
- /* ===================
- Input Styles
- =================== */
- .input-container {
- width: 100%;
- margin: 10px 0 0 0;
- position: relative;
- }
-
- .answer-input {
- width: 100%;
- padding: 16px;
- font-size: 16px !important;
- border: 1px solid #e2e8f0;
- border-radius: 6px;
- margin-bottom: 0px;
- box-sizing: border-box;
- font-family: var(--mono-font);
- }
-
- /* ===================
- Message Styles
- =================== */
- .message {
- padding: 0.5rem;
- margin: 0.5rem 0;
- border-radius: 0.375rem;
- text-align: center;
- font-family: var(--mono-font);
- display: none;
- }
-
- .message.success {
- background-color: #c6f6d5;
- color: #1a202c;
- overflow-wrap: anywhere;
- font-size: 1.2rem;
- display: block;
- padding: 20px;
- line-height: 2rem;
- }
-
- .message.success .completion-link {
- color: #2563eb;
- text-decoration: underline;
- }
-
- .message.error {
- background-color: #fee2e2;
- color: #ef4444;
- display: block;
- }
-
- /* ===================
- Completion Message
- =================== */
- .completion-message {
- margin: 0.5rem 0;
- padding: 0rem;
- border-radius: 0.375rem;
- text-align: center;
- font-family: var(--mono-font);
- font-size: 1.2rem;
- line-height: 1.5;
- }
-
- /* ===================
- Solved Expressions
- =================== */
- .solved-expressions {
- margin-top: 0rem;
- }
-
- .solved-expressions h3 {
- font-size: 1.2rem;
- font-weight: 500;
- margin-bottom: 0.75rem;
- font-family: var(--main-font);
- color: #1a202c;
- }
-
- .expression-item {
- background: #f1f5f9;
- padding: 0.75rem;
- border-radius: 0.375rem;
- margin-bottom: 0.5rem;
- font-size: 1.2rem;
- font-family: var(--mono-font);
- line-height: 1.5;
- }
-
- .expression-item .solution {
- font-weight: 600;
- color: #1a202c;
- }
-
-
- /* ===================
- Stats & Completion
- =================== */
- .stats-content {
- margin-top: 0rem;
- }
-
- .stat-items {
- margin: 0.5rem 0;
- }
-
- .stat-item {
- background: #f1f5f9;
- padding: 0.75rem;
- border-radius: 0.375rem;
- margin-bottom: 0.5rem;
- font-size: 1rem;
- line-height: 1.5;
- font-family: var(--main-font);
- }
-
- /* ===================
- Share Button Styles
- =================== */
- .share-buttons {
- margin-top: 1rem;
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- }
-
- .share-button {
- width: 100%;
- padding: 0.75rem;
- font-size: 1rem;
- font-family: var(--main-font);
- background: #1a202c;
- color: white;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- }
-
- .share-button.reset {
- background-color: #ff4444;
- }
-
- .share-button:hover {
- background: #2d3748;
- }
-
- .share-message {
- font-family: var(--main-font);
- color: #1a202c;
- text-align: center;
- padding: 0.5rem;
- margin-top: 0.5rem;
- background: var(--highlight-color);
- border-radius: 0.375rem;
- }
-
- /* ===================
- Rank Display
- =================== */
- .rank-display {
- font-family: var(--mono-font);
- position: relative;
- overflow: hidden;
- padding: 1rem;
- text-align: center;
- font-size: 1.2em;
- font-weight: 500;
- border-radius: 0.375rem;
- margin: 0rem 0rem 1rem 0rem;
- border: 1px solid rgba(255,255,255,0.4);
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
- cursor: pointer;
- transition: transform 0.2s;
- user-select: none;
- }
-
- .rank-display:active {
- transform: scale(0.95);
- }
- .rank-display .next-rank {
- font-size: 0.8em;
- font-weight: normal;
- }
-
- .rank-display .share-hint {
- font-size: 0.7em;
- margin-top: 0.5em;
- color: #666;
- }
-
- /* Rank gradients */
- .rank-display[data-rank="Tourist"] { background: linear-gradient(135deg, #f0fdf4 0%, #6ee7b7 100%); }
- .rank-display[data-rank="Commuter"] { background: linear-gradient(135deg, #fff7ed 0%, #fbd38d 100%); }
- .rank-display[data-rank="Resident"] { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); }
- .rank-display[data-rank="Council Member"] { background: linear-gradient(135deg, #fafaf9 0%, #d6d3d1 100%); }
- .rank-display[data-rank="Chief of Police"] { background: linear-gradient(135deg, #f0f9ff 0%, #93c5fd 100%); }
- .rank-display[data-rank="Mayor"] { background: linear-gradient(135deg, #fff1f2 0%, #fda4af 100%); }
- .rank-display[data-rank="Power Broker"] { background: linear-gradient(135deg, #fefce8 0%, #92400e 100%); }
- .rank-display[data-rank="Kingmaker"] { background: linear-gradient(135deg, #fffbeb 0%, #fcd34d 100%); }
- .rank-display[data-rank="Puppet Master"] { background: linear-gradient(135deg, #faf5ff 0%, #d8b4fe 100%); }
-
- /* ===================
- Shimmer Animation
- =================== */
- @keyframes shimmer {
- 0% { transform: translateX(-150%) rotate(45deg); }
- 100% { transform: translateX(150%) rotate(45deg); }
- }
-
- .rank-display::after {
- content: '';
- position: absolute;
- top: -50%;
- left: -100%;
- width: 300%;
- height: 200%;
- background: linear-gradient(
- to bottom right,
- rgba(255,255,255,0) 0%,
- rgba(255,255,255,0.3) 50%,
- rgba(255,255,255,0) 100%
- );
- transform: rotate(45deg);
- animation: shimmer 4s infinite linear;
- pointer-events: none;
- }
-
- /* ===================
- Mobile Styles
- =================== */
- @media (max-width: 640px) {
- body {
- margin: 0;
- padding: 0;
- height: 100vh;
- font-size: 14px;
- overflow: hidden;
- }
-
- .message.success {
- background-color: #c6f6d5;
- color: #1a202c;
- overflow-wrap: anywhere;
- font-size: 1rem;
- display: block;
- padding: 10px;
- line-height: 1.4rem;
- margin-top: 0.2rem;
- }
-
- /* Mobile container setup */
- .puzzle-container {
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- }
-
- /* Mobile content area */
- .puzzle-content {
- position: absolute;
- top: 70px;
- left: 0;
- right: 0;
- bottom: 0;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- padding: 0;
- gap: 0rem;
- }
-
- @font-face {
- font-family: 'CustomMono';
- /* Use ui-monospace for every character except underscore */
- src: local("ui-monospace");
- /* All Unicode except underscore (U+005F) */
- unicode-range: U+0000-005E, U+0060-10FFFF;
- }
-
- @font-face {
- font-family: 'CustomMono';
- /* Use Menlo for underscore only */
- src: local("Menlo");
- unicode-range: U+005F;
- }
-
- .puzzle-display {
- height: 155px;
- padding: 0.5rem 1rem 1rem 1rem;
- margin: 0;
- font-size: 1.2rem;
- background: #f1f5f9;
- padding-bottom: 200px;
- font-family: 'CustomMono', ui-monospace;
- }
-
- .puzzle-display.completed {
- padding-bottom: 1rem !important;
- }
-
-
- .rank-display {
- margin: 0rem 0.5rem 1rem 0.5rem;
- }
-
-
- /* Mobile input container */
- .input-container {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- background: white;
- z-index: 10;
- width: 100%;
- border-top: 1px solid #e2e8f0;
- box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
- padding: 0.5rem calc(0.5rem + env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom)) calc(0.5rem + env(safe-area-inset-right));
- box-sizing: border-box;
- }
-
- .custom-input {
- border: 1px solid #e2e8f0;
- padding: 0.63rem;
- border-radius: 6px;
- margin-bottom: 0.125rem;
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- font-size: 1.2rem;
- min-height: 2.4rem;
- background: white;
- width: 100%;
- color: #000;
- }
-
- .placeholder {
- color: #9ca3af;
- }
-
- /* Mobile keyboard */
- .custom-keyboard {
- width: 100%;
- padding: .25rem 0 0 0;
- box-sizing: border-box;
- background-color: white;
- touch-action: none;
- }
-
- .keyboard-row {
- display: grid;
- grid-template-columns: repeat(10, 1fr);
- gap: 0.02rem;
- margin-bottom: 0.125rem;
- justify-content: center;
- width: 100%;
- }
-
- .keyboard-key {
- height: 3.3rem;
- min-height: 2.2rem;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0.2rem;
- margin: 0.1rem 0.15rem 0.1rem 0.15rem;
- cursor: pointer;
- color: black;
- background-color:rgb(233, 233, 233);
- box-sizing: border-box;
- touch-action: manipulation;
- text-align: center;
- font-size: 1.125rem;
- font-weight: 600;
- border: 1px solid rgb(200, 200, 200);
- user-select: none;
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: none !important;
- appearance: none !important;
- border-radius: 4px !important;
- outline: none !important;
- -webkit-tap-highlight-color: transparent !important;
- transition: background-color 0.1s ease-out,
- transform 0.1s ease-out;
- -webkit-user-select: none;
- user-select: none;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .keyboard-key:active {
- background-color: #94a3b8;
- transform: translateY(2px);
- }
-
- .stat-item {
- background: #f1f5f9;
- padding: 0.75rem;
- border-radius: 0.375rem;
- margin-bottom: 0.5rem;
- font-size: 1rem;
- line-height: 1.5;
- }
-
- /* Hide desktop elements */
- .bottom-controls,
- .reset-button,
- .solved-expressions,
- .keystroke-stats,
- .share-button.copy {
- display: none;
- }
-
- /* Mobile completion state */
- .puzzle-container.completed .puzzle-content {
- position: static;
- height: auto;
- overflow: visible;
- margin-top: 85px;
- padding: 1rem;
- }
-
- .puzzle-container.completed {
- position: static;
- height: auto;
- min-height: 100vh;
- overflow-y: auto;
- }
-
- .puzzle-display.completed .input-container {
- display: none;
- }
-
- .puzzle-container.completed .solved-expressions,
- .puzzle-container.completed .keystroke-stats {
- display: block;
- margin: 1rem;
- }
-
- .keystroke-stats {
- margin-top: 0rem;
- }
- }
-
- /* ===================
- iOS-specific Styles
- =================== */
- @supports (-webkit-touch-callout: none) {
- .keyboard-key:active {
- background-color: #94a3b8 !important;
- transform: translateY(2px) !important;
- }
- }
-
-/* Tutorial Mode Styles */
-.tutorial-container {
- --tutorial-guidance-bg: #ffe8fa;
- --tutorial-guidance-border: #4a6fa5;
- --tutorial-highlight-border: #f6b73c;
- --tutorial-completion-bg: #e9f7ef;
- --tutorial-completion-border: #27ae60;
- --tutorial-button-bg: #2980b9;
- --tutorial-button-hover: #3498db;
- }
-
- /* Tutorial Guidance */
- .tutorial-guidance {
- background-color: #ffe8fa !important;
- border-radius: 8px;
- font-family: var(--main-font);
- border-left: 4px solid #ab57a8;
- border-right: 4px solid #ab57a8;
- height: 130px !important;
- overflow: hidden;
- padding: 16px;
- margin: 16px 0;
- vertical-align: middle;
- }
-
- .small-break {
- min-height: 1rem; /* adjust as needed */
- }
-
- @media (max-width: 640px) {
- .small-break {
- min-height: 0.8rem; /* adjust as needed */
- }
- }
-
- .tutorial-guidance.emerge {
- animation: emerge 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
- }
-
- @keyframes emerge {
- 0% {
- opacity: 0;
- transform: scale(0.95);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
- }
-
- .tutorial-guidance.highlight {
- background-color: #fff8e5;
- border-left-color: #f6b73c;
- }
-
- @media (max-width: 640px) {
- .tutorial-guidance {
- margin: 0.625rem 0.625rem 0.625rem 0.625rem !important; /* 10px */
- /*padding: 1rem 0.3125rem !important; /* 16px 5px */
- font-size: 0.9rem;
- height: 140px !important;
- vertical-align: middle;
- }
- }
-
- /* Hide guidance when puzzle is completed */
- .tutorial-guidance.completed,
- .puzzle-display.completed ~ .tutorial-guidance {
- /*display: none;*/
- }
-
- /* Tutorial Message */
- .tutorial-message {
- font-size: 16px;
- }
-
- .tutorial-message strong {
- font-weight: 600;
- }
-
- .tutorial-message a {
- text-decoration: none;
- border-bottom: 1px solid;
- padding-bottom: 1px;
- transition: color 0.2s;
- }
-
- .tutorial-message a:hover {
- opacity: 0.8;
- }
-
- .tutorial-message .emoji {
- font-size: 1.2em;
- }
-
- @media (max-width: 640px) {
- .tutorial-message {
- font-size: 14px;
- }
- }
-
- /* Tutorial Puzzle Display */
- .tutorial-puzzle-display {
- height: 155px !important;
- min-height: 155px !important;
- max-height: 155px !important;
- overflow-y: auto;
- background: #f1f5f9;
- border-radius: 0.5rem;
- padding: 1rem;
- font-family: var(--mono-font);
- line-height: 1.7;
- word-break: keep-all;
- overflow-wrap: break-word;
- transition: none;
- }
-
- .tutorial-puzzle-display.completed {
- height: 155px !important;
- min-height: 155px !important;
- max-height: 155px !important;
- }
-
- @media (max-width: 640px) {
- .tutorial-puzzle-display {
- height: 155px !important;
- min-height: 155px !important;
- max-height: 155px !important;
- padding: 0.8rem;
- }
- }
-
- /* Tutorial Highlights and Animations */
- .spotlight {
- background-color: #fff9c4;
- box-shadow: 0 0 0 2px #fff9c4;
- border-radius: 4px;
- }
-
- .correct {
- background-color: rgba(0, 255, 0, 0.25);
- box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
- border-radius: 4px;
- }
-
- @keyframes pulse {
- 0% {
- box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
- transform: scale(1);
- }
- 50% {
- box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
- transform: scale(1.05);
- }
- 100% {
- box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
- transform: scale(1);
- }
- }
-
- @keyframes tap-hint {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.05); }
- 100% { transform: scale(1); }
- }
-
- .active-clue.tutorial-highlight {
- box-shadow: 0 0 0 2px #ffc107;
- animation: pulse 2.5s infinite;
- background-color: rgba(255, 255, 0, 0.2);
- font-weight: 500;
- }
-
- .active-clue.tap-hint {
- animation: tap-hint 2s infinite;
- }
-
- /* Tutorial Completion */
- .tutorial-completion {
- background-color: #e9f7ef;
- padding: 20px;
- border-radius: 8px;
- margin: 10px 10px 0px 10px;
- text-align: center;
- border: 2px solid #27ae60;
- font-family: var(--mono-font);
- animation: fade-in 0.5s ease-in-out;
- }
-
- .tutorial-completion-title {
- font-size: 20px;
- margin-bottom: 10px;
- }
-
- .tutorial-completion-text {
- font-size: 16px;
- }
-
- .tutorial-completion-wrapper {
- margin: 0px;
- }
-
- @keyframes fade-in {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* Play Game Button */
- #playGameButton {
- margin-top: 15px;
- padding: 10px 20px;
- background-color: #2980b9;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 16px;
- transition: background-color 0.2s, transform 0.1s;
- }
-
- #playGameButton:hover {
- background-color: #3498db;
- }
-
- #playGameButton:active {
- transform: scale(0.98);
- }
-
- /* First Letter Hint */
- .first-letter-hint {
- font-weight: bold;
- color: #0c63e4;
- }
-
- /* Submit button and input wrapper */
- .input-submit-wrapper {
- display: flex;
- gap: 0.5rem;
- width: 100%;
- }
-
- .submit-answer {
- padding: 0 1.5rem;
- height: 60px;
- background-color: #2563eb;
- color: white;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- font-weight: 500;
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- white-space: nowrap;
- font-size: 1rem;
- }
-
- .submit-answer:hover {
- background-color: #1d4ed8;
- }
-
- .submit-answer:active {
- background-color: #1e40af;
- transform: scale(0.98);
- }
-
- .mobile-submit-button {
- background-color: #2563eb !important;
- color: white !important;
- font-size: 1rem !important;
- font-weight: 500 !important;
- }
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-03 19:47:45 +0000