API tools faq
paste
Advertisement
Jacobisthebest2024

My Website Html!

Jacobisthebest2024
Dec 8th, 2024 (edited)
100
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Account Status</title>
  8. <style>
  9. :root {
  10. --primary-color: #d9534f;
  11. --primary-hover: #c9302c;
  12. --secondary-color: #5bc0de;
  13. --light-bg: #f0f0f0;
  14. --light-text: #333;
  15. --dark-bg: #333;
  16. --dark-text: #f0f0f0;
  17. --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  18. --border-radius: 8px;
  19. --transition-speed: 0.3s;
  20. --success-color: #5cb85c;
  21. --error-color: #d9534f;
  22. }
  23.  
  24. body {
  25. font-family: 'Segoe UI', Arial, sans-serif;
  26. background-color: var(--light-bg);
  27. color: var(--light-text);
  28. margin: 0;
  29. padding: 0;
  30. transition: background-color var(--transition-speed), color var(--transition-speed);
  31. line-height: 1.6;
  32. }
  33.  
  34. .dark-mode {
  35. background-color: var(--dark-bg);
  36. color: var(--dark-text);
  37. }
  38.  
  39. .dark-mode .message-box,
  40. .dark-mode section,
  41. .dark-mode .user-profile {
  42. background-color: #444;
  43. color: var(--dark-text);
  44. border-color: #555;
  45. }
  46.  
  47. .dark-mode .modal,
  48. .dark-mode .contact-modal,
  49. .dark-mode .login-modal,
  50. .dark-mode .settings-modal {
  51. background-color: #444;
  52. color: var(--dark-text);
  53. }
  54.  
  55. .dark-mode .modal-header,
  56. .dark-mode .modal-footer,
  57. .dark-mode .contact-modal-header,
  58. .dark-mode .contact-modal-footer,
  59. .dark-mode .login-modal-header,
  60. .dark-mode .login-modal-footer,
  61. .dark-mode .settings-modal-header,
  62. .dark-mode .settings-modal-footer {
  63. background-color: #333;
  64. border-color: #555;
  65. }
  66.  
  67. .loading-screen {
  68. display: none;
  69. justify-content: center;
  70. align-items: center;
  71. position: fixed;
  72. width: 100%;
  73. height: 100vh;
  74. background-color: rgba(255, 255, 255, 0.8);
  75. z-index: 9999;
  76. }
  77.  
  78. .dark-mode .loading-screen {
  79. background-color: rgba(0, 0, 0, 0.8);
  80. }
  81.  
  82. .loading {
  83. font-size: 24px;
  84. color: var(--light-text);
  85. display: flex;
  86. flex-direction: column;
  87. align-items: center;
  88. }
  89.  
  90. .loading::after {
  91. content: "";
  92. width: 30px;
  93. height: 30px;
  94. margin-top: 10px;
  95. border: 5px solid var(--primary-color);
  96. border-radius: 50%;
  97. border-top-color: transparent;
  98. animation: spinner 1s linear infinite;
  99. }
  100.  
  101. @keyframes spinner {
  102. to {
  103. transform: rotate(360deg);
  104. }
  105. }
  106.  
  107. .dark-mode .loading {
  108. color: var(--dark-text);
  109. }
  110.  
  111. .container {
  112. display: none;
  113. justify-content: center;
  114. align-items: center;
  115. min-height: 80vh;
  116. flex-direction: column;
  117. padding: 20px;
  118. margin-bottom: 80px; /* Space for footer */
  119. }
  120.  
  121. .message-box {
  122. background-color: #fff;
  123. padding: 30px;
  124. border: 1px solid #ddd;
  125. box-shadow: var(--box-shadow);
  126. text-align: center;
  127. margin-bottom: 20px;
  128. animation: fadeInUp 2s forwards;
  129. border-radius: var(--border-radius);
  130. width: 100%;
  131. max-width: 600px;
  132. }
  133.  
  134. nav {
  135. width: 100%;
  136. background-color: var(--dark-bg);
  137. color: #fff;
  138. padding: 15px 0;
  139. text-align: center;
  140. animation: fadeInDown 2s forwards;
  141. position: sticky;
  142. top: 0;
  143. z-index: 1000;
  144. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  145. display: flex;
  146. justify-content: center;
  147. flex-wrap: wrap;
  148. align-items: center;
  149. }
  150.  
  151. nav a {
  152. color: #fff;
  153. margin: 0 15px;
  154. text-decoration: none;
  155. position: relative;
  156. padding: 5px 0;
  157. font-weight: 500;
  158. transition: all 0.3s ease;
  159. }
  160.  
  161. nav a::after {
  162. content: '';
  163. position: absolute;
  164. bottom: 0;
  165. left: 0;
  166. width: 0;
  167. height: 2px;
  168. background-color: var(--primary-color);
  169. transition: width 0.3s;
  170. }
  171.  
  172. nav a:hover::after {
  173. width: 100%;
  174. }
  175.  
  176. nav button {
  177. background-color: var(--primary-color);
  178. color: white;
  179. border: none;
  180. padding: 8px 15px;
  181. margin: 0 5px;
  182. border-radius: var(--border-radius);
  183. cursor: pointer;
  184. transition: background-color 0.3s;
  185. }
  186.  
  187. nav button:hover {
  188. background-color: var(--primary-hover);
  189. }
  190.  
  191. footer {
  192. text-align: center;
  193. padding: 20px 0;
  194. background-color: var(--dark-bg);
  195. color: #fff;
  196. position: fixed;
  197. width: 100%;
  198. bottom: 0;
  199. animation: fadeInUp 2s forwards;
  200. box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  201. }
  202.  
  203. h1 {
  204. color: var(--primary-color);
  205. margin-top: 0;
  206. }
  207.  
  208. p {
  209. margin-top: 20px;
  210. }
  211.  
  212. .modal,
  213. .contact-modal,
  214. .login-modal,
  215. .settings-modal {
  216. display: none;
  217. position: fixed;
  218. top: 50%;
  219. left: 50%;
  220. transform: translate(-50%, -50%);
  221. width: 90%;
  222. max-width: 400px;
  223. background-color: #fff;
  224. border: 1px solid #ddd;
  225. box-shadow: var(--box-shadow);
  226. z-index: 10000;
  227. border-radius: var(--border-radius);
  228. overflow: hidden;
  229. animation: fadeIn 0.3s;
  230. }
  231.  
  232. .modal-overlay {
  233. display: none;
  234. position: fixed;
  235. top: 0;
  236. left: 0;
  237. right: 0;
  238. bottom: 0;
  239. background-color: rgba(0, 0, 0, 0.5);
  240. z-index: 9999;
  241. animation: fadeIn 0.3s;
  242. }
  243.  
  244. .modal-header,
  245. .contact-modal-header,
  246. .login-modal-header,
  247. .settings-modal-header {
  248. padding: 15px;
  249. background-color: #f5f5f5;
  250. border-bottom: 1px solid #ddd;
  251. border-top-left-radius: var(--border-radius);
  252. border-top-right-radius: var(--border-radius);
  253. display: flex;
  254. justify-content: space-between;
  255. align-items: center;
  256. }
  257.  
  258. .modal-header h2,
  259. .contact-modal-header h2,
  260. .login-modal-header h2,
  261. .settings-modal-header h2 {
  262. margin: 0;
  263. font-size: 1.25rem;
  264. }
  265.  
  266. .close-icon {
  267. cursor: pointer;
  268. font-size: 1.5rem;
  269. color: #777;
  270. transition: color 0.3s;
  271. }
  272.  
  273. .close-icon:hover {
  274. color: var(--primary-color);
  275. }
  276.  
  277. .modal-body,
  278. .contact-modal-body,
  279. .login-modal-body,
  280. .settings-modal-body {
  281. padding: 20px;
  282. }
  283.  
  284. .modal-footer,
  285. .contact-modal-footer,
  286. .login-modal-footer,
  287. .settings-modal-footer {
  288. padding: 15px;
  289. background-color: #f5f5f5;
  290. border-top: 1px solid #ddd;
  291. text-align: right;
  292. border-bottom-left-radius: var(--border-radius);
  293. border-bottom-right-radius: var(--border-radius);
  294. }
  295.  
  296. .modal button,
  297. .contact-modal button,
  298. .login-modal button,
  299. .settings-modal button,
  300. .message-box button {
  301. padding: 8px 15px;
  302. background-color: var(--primary-color);
  303. color: #fff;
  304. border: none;
  305. cursor: pointer;
  306. border-radius: 5px;
  307. transition: background-color 0.3s;
  308. margin-left: 10px;
  309. }
  310.  
  311. .modal button.close,
  312. .contact-modal button.close,
  313. .login-modal button.close,
  314. .settings-modal button.close {
  315. background-color: var(--secondary-color);
  316. }
  317.  
  318. .modal button:hover,
  319. .contact-modal button:hover,
  320. .login-modal button:hover,
  321. .settings-modal button:hover,
  322. .message-box button:hover {
  323. background-color: var(--primary-hover);
  324. }
  325.  
  326. .modal form,
  327. .contact-modal form,
  328. .login-modal form {
  329. display: flex;
  330. flex-direction: column;
  331. }
  332.  
  333. .form-group {
  334. margin-bottom: 15px;
  335. }
  336.  
  337. .form-group label {
  338. display: block;
  339. margin-bottom: 5px;
  340. font-weight: 500;
  341. }
  342.  
  343. .form-group input,
  344. .form-group textarea {
  345. width: 100%;
  346. padding: 10px;
  347. border: 1px solid #ddd;
  348. border-radius: 5px;
  349. font-family: inherit;
  350. font-size: 1rem;
  351. transition: border-color 0.3s;
  352. }
  353.  
  354. .form-group input:focus,
  355. .form-group textarea:focus {
  356. outline: none;
  357. border-color: var(--primary-color);
  358. box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.2);
  359. }
  360.  
  361. section {
  362. padding: 30px;
  363. background-color: #fff;
  364. margin: 20px auto;
  365. border: 1px solid #ddd;
  366. box-shadow: var(--box-shadow);
  367. border-radius: var(--border-radius);
  368. max-width: 800px;
  369. animation: fadeIn 1s;
  370. }
  371.  
  372. section h2 {
  373. color: var(--primary-color);
  374. margin-top: 0;
  375. padding-bottom: 10px;
  376. border-bottom: 2px solid #eee;
  377. }
  378.  
  379. .faq {
  380. margin: 15px 0;
  381. cursor: pointer;
  382. padding: 15px;
  383. border: 1px solid #ddd;
  384. border-radius: 5px;
  385. transition: all 0.3s;
  386. box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  387. }
  388.  
  389. .faq:hover {
  390. background-color: #f9f9f9;
  391. transform: translateY(-2px);
  392. box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  393. }
  394.  
  395. .faq.active {
  396. border-color: var(--primary-color);
  397. background-color: rgba(217, 83, 79, 0.05);
  398. }
  399.  
  400. .faq-answer {
  401. display: none;
  402. padding: 15px;
  403. border-top: 1px solid #ddd;
  404. margin-top: 10px;
  405. line-height: 1.6;
  406. }
  407.  
  408. .success-message,
  409. .error-message {
  410. color: var(--success-color);
  411. font-weight: bold;
  412. margin-top: 10px;
  413. padding: 10px;
  414. border-radius: 5px;
  415. animation: fadeIn 0.5s;
  416. }
  417.  
  418. .error-message {
  419. color: white;
  420. background-color: var(--error-color);
  421. }
  422.  
  423. .success-message {
  424. color: white;
  425. background-color: var(--success-color);
  426. }
  427.  
  428. .back-to-top {
  429. position: fixed;
  430. bottom: 80px;
  431. right: 20px;
  432. background-color: var(--primary-color);
  433. color: white;
  434. border: none;
  435. border-radius: 50%;
  436. width: 50px;
  437. height: 50px;
  438. font-size: 20px;
  439. cursor: pointer;
  440. display: none;
  441. transition: all 0.3s;
  442. box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  443. z-index: 99;
  444. }
  445.  
  446. .back-to-top:hover {
  447. background-color: var(--primary-hover);
  448. transform: translateY(-3px);
  449. box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  450. }
  451.  
  452. .toast {
  453. position: fixed;
  454. bottom: 20px;
  455. right: 20px;
  456. background-color: var(--success-color);
  457. color: white;
  458. padding: 15px 25px;
  459. border-radius: 5px;
  460. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  461. display: none;
  462. z-index: 10000;
  463. animation: slideIn 0.5s;
  464. }
  465.  
  466. @keyframes slideIn {
  467. from {
  468. transform: translateX(100%);
  469. opacity: 0;
  470. }
  471. to {
  472. transform: translateX(0);
  473. opacity: 1;
  474. }
  475. }
  476.  
  477. .cookie-consent {
  478. position: fixed;
  479. bottom: 0;
  480. left: 0;
  481. right: 0;
  482. background-color: var(--dark-bg);
  483. color: #fff;
  484. padding: 15px;
  485. text-align: center;
  486. display: none;
  487. z-index: 9998;
  488. animation: slideUp 0.5s;
  489. box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  490. }
  491.  
  492. @keyframes slideUp {
  493. from {
  494. transform: translateY(100%);
  495. }
  496. to {
  497. transform: translateY(0);
  498. }
  499. }
  500.  
  501. .cookie-consent button {
  502. background-color: var(--secondary-color);
  503. border: none;
  504. color: white;
  505. padding: 8px 15px;
  506. margin-left: 10px;
  507. cursor: pointer;
  508. border-radius: 5px;
  509. transition: background-color 0.3s;
  510. }
  511.  
  512. .cookie-consent button:hover {
  513. background-color: #46b8da;
  514. }
  515.  
  516. .rating {
  517. display: flex;
  518. justify-content: center;
  519. margin: 15px 0;
  520. }
  521.  
  522. .rating label {
  523. margin: 0 5px;
  524. cursor: pointer;
  525. font-size: 24px;
  526. color: #ccc;
  527. transition: color 0.3s;
  528. }
  529.  
  530. .rating input {
  531. display: none;
  532. }
  533.  
  534. .rating label:hover,
  535. .rating label:hover ~ label,
  536. .rating input:checked ~ label {
  537. color: #ffcc00;
  538. }
  539.  
  540. .character-count {
  541. font-size: 12px;
  542. color: #888;
  543. margin-top: 5px;
  544. text-align: right;
  545. }
  546.  
  547. .password-toggle {
  548. cursor: pointer;
  549. color: #007bff;
  550. text-decoration: underline;
  551. margin-top: 5px;
  552. display: block;
  553. font-size: 14px;
  554. }
  555.  
  556. .user-profile {
  557. display: none;
  558. margin: 20px auto;
  559. padding: 30px;
  560. background-color: #fff;
  561. border: 1px solid #ddd;
  562. border-radius: var(--border-radius);
  563. box-shadow: var(--box-shadow);
  564. width: 100%;
  565. max-width: 600px;
  566. animation: fadeIn 1s;
  567. }
  568.  
  569. .user-avatar {
  570. width: 100px;
  571. height: 100px;
  572. border-radius: 50%;
  573. background-color: #eee;
  574. margin: 0 auto 20px;
  575. display: flex;
  576. align-items: center;
  577. justify-content: center;
  578. font-size: 40px;
  579. color: #aaa;
  580. }
  581.  
  582. .logout-button {
  583. background-color: var(--primary-color);
  584. color: white;
  585. border: none;
  586. padding: 10px 15px;
  587. border-radius: 5px;
  588. cursor: pointer;
  589. margin-top: 20px;
  590. transition: background-color 0.3s;
  591. }
  592.  
  593. .logout-button:hover {
  594. background-color: var(--primary-hover);
  595. }
  596.  
  597. .ad-blocker-warning {
  598. display: none;
  599. background-color: #f8d7da;
  600. color: #721c24;
  601. padding: 15px;
  602. border: 1px solid #f5c6cb;
  603. border-radius: 5px;
  604. margin: 20px auto;
  605. max-width: 800px;
  606. animation: fadeIn 1s;
  607. }
  608.  
  609. .points-display {
  610. font-weight: bold;
  611. margin: 20px;
  612. padding: 10px 15px;
  613. background-color: #f8f9fa;
  614. border-radius: 5px;
  615. display: inline-block;
  616. box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  617. animation: pulse 2s infinite;
  618. }
  619.  
  620. @keyframes pulse {
  621. 0% {
  622. box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.4);
  623. }
  624. 70% {
  625. box-shadow: 0 0 0 5px rgba(217, 83, 79, 0);
  626. }
  627. 100% {
  628. box-shadow: 0 0 0 0 rgba(217, 83, 79, 0);
  629. }
  630. }
  631.  
  632. @keyframes fadeIn {
  633. from {
  634. opacity: 0;
  635. }
  636. to {
  637. opacity: 1;
  638. }
  639. }
  640.  
  641. @keyframes fadeInUp {
  642. from {
  643. transform: translateY(20px);
  644. opacity: 0;
  645. }
  646.  
  647. to {
  648. transform: translateY(0);
  649. opacity: 1;
  650. }
  651. }
  652.  
  653. @keyframes fadeInDown {
  654. from {
  655. transform: translateY(-20px);
  656. opacity: 0;
  657. }
  658.  
  659. to {
  660. transform: translateY(0);
  661. opacity: 1;
  662. }
  663. }
  664.  
  665. /* Responsive design improvements */
  666. @media (max-width: 768px) {
  667. nav {
  668. flex-direction: column;
  669. padding: 10px 0;
  670. }
  671.  
  672. nav a {
  673. margin: 5px 10px;
  674. }
  675.  
  676. nav button {
  677. margin: 5px;
  678. }
  679.  
  680. section {
  681. padding: 20px;
  682. margin: 15px;
  683. }
  684.  
  685. .message-box {
  686. padding: 20px;
  687. }
  688.  
  689. .back-to-top {
  690. bottom: 70px;
  691. right: 15px;
  692. width: 40px;
  693. height: 40px;
  694. font-size: 16px;
  695. }
  696. }
  697. </style>
  698. </head>
  699.  
  700. <body>
  701. <nav>
  702. <div class="nav-links">
  703. <a href="#home" data-tooltip="Go to Home">Home</a>
  704. <a href="#about" data-tooltip="Learn more About us">About</a>
  705. <a href="#contact" data-tooltip="Get in touch">Contact</a>
  706. <a href="#faqs" data-tooltip="Frequently Asked Questions">FAQs</a>
  707. </div>
  708. <div class="nav-actions">
  709. <button id="settings-button" aria-label="Settings"><i class="fa">⚙️</i></button>
  710. <button id="theme-toggle" aria-label="Toggle Theme"><i class="fa">🌓</i></button>
  711. <button id="login-button">Login</button>
  712. </div>
  713. </nav>
  714.  
  715. <div class="loading-screen">
  716. <div class="loading">Loading...</div>
  717. </div>
  718.  
  719. <div class="container">
  720. <div class="message-box" role="alert">
  721. <h1>Account Deleted</h1>
  722. <p>Your account has been successfully deleted.</p>
  723. <p>If you have any questions, please contact our support team.</p>
  724. <div class="message-actions">
  725. <button class="feedback-button">Share Feedback</button>
  726. <button class="contact-button">Contact Support</button>
  727. </div>
  728. <div class="success-message"></div>
  729. </div>
  730.  
  731. <!-- User Profile Section -->
  732. <div class="user-profile" id="user-profile">
  733. <div class="user-avatar">👤</div>
  734. <h2>Your Profile</h2>
  735. <p><strong>Username:</strong> <span id="profile-username"></span></p>
  736. <p><strong>Email:</strong> <span id="profile-email"></span></p>
  737. <button class="logout-button" id="logout-button">Logout</button>
  738. </div>
  739.  
  740. <!-- Ad Blocker Warning -->
  741. <div class="ad-blocker-warning" id="ad-blocker-warning">
  742. <p>It seems you are using an ad blocker. Please consider disabling it to support us.</p>
  743. <button id="dismiss-ad-warning">Dismiss</button>
  744. </div>
  745.  
  746. <!-- Points Display -->
  747. <div class="points-display" id="points-display">
  748. Points Earned: <span id="points">0</span>
  749. </div>
  750. </div>
  751.  
  752. <section id="about">
  753. <h2>About Us</h2>
  754. <p>We are committed to providing the best service for our customers. Our team is dedicated to ensuring your
  755. satisfaction.</p>
  756. <p>For any inquiries, please reach out to us through the contact form or our support channels.</p>
  757. </section>
  758.  
  759. <section id="faqs">
  760. <h2>Frequently Asked Questions</h2>
  761. <div class="faq" role="button" aria-expanded="false" tabindex="0">
  762. <strong>Q:</strong> How can I retrieve my account?
  763. <div class="faq-answer" aria-hidden="true">A: Unfortunately, once an account is deleted, it cannot be
  764. retrieved. Please contact support for further assistance.</div>
  765. </div>
  766. <div class="faq" role="button" aria-expanded="false" tabindex="0">
  767. <strong>Q:</strong> Who can I contact for more help?
  768. <div class="faq-answer" aria-hidden="true">A: You can reach our support team through the Contact section
  769. for more help.</div>
  770. </div>
  771. <div class="faq" role="button" aria-expanded="false" tabindex="0">
  772. <strong>Q:</strong> What should I do if I change my mind about deleting my account?
  773. <div class="faq-answer" aria-hidden="true">A: If you have any concerns, please get in touch with our
  774. support team as soon as possible.</div>
  775. </div>
  776. <div class="faq" role="button" aria-expanded="false" tabindex="0">
  777. <strong>Q:</strong> Can I create a new account after deletion?
  778. <div class="faq-answer" aria-hidden="true">A: Yes, you can create a new account anytime after deletion.
  779. </div>
  780. </div>
  781. </section>
  782.  
  783. <div class="modal-overlay" id="modal-overlay"></div>
  784.  
  785. <div class="modal" role="dialog" aria-labelledby="feedback-label" aria-hidden="true">
  786. <div class="modal-header">
  787. <h2 id="feedback-label">Feedback</h2>
  788. <span class="close-icon">&times;</span>
  789. </div>
  790. <div class="modal-body">
  791. <form id="feedback-form" aria-labelledby="feedback-label">
  792. <div class="form-group">
  793. <label for="feedback">Your Feedback:</label>
  794. <textarea id="feedback" name="feedback" rows="4" required></textarea>
  795. <div class="character-count" id="feedback-char-count">0/200</div>
  796. </div>
  797. <div class="rating">
  798. <input type="radio" id="star5" name="rating" value="5">
  799. <label for="star5">★</label>
  800. <input type="radio" id="star4" name="rating" value="4">
  801. <label for="star4">★</label>
  802. <input type="radio" id="star3" name="rating" value="3">
  803. <label for="star3">★</label>
  804. <input type="radio" id="star2" name="rating" value="2">
  805. <label for="star2">★</label>
  806. <input type="radio" id="star1" name="rating" value="1">
  807. <label for="star1">★</label>
  808. </div>
  809. <div class="error-message" id="feedback-error"></div>
  810. <button type="submit">Submit</button>
  811. </form>
  812. <p><strong>Instructions:</strong> Please provide your feedback regarding our service. Your input is valuable to
  813. us!</p>
  814. </div>
  815. </div>
  816.  
  817. <div class="contact-modal" role="dialog" aria-labelledby="contact-label" aria-hidden="true">
  818. <div class="contact-modal-header">
  819. <h2 id="contact-label">Contact Support</h2>
  820. <span class="close-icon">&times;</span>
  821. </div>
  822. <div class="contact-modal-body">
  823. <form id="contact-form" aria-labelledby="contact-label">
  824. <div class="form-group">
  825. <label for="name">Your Name:</label>
  826. <input type="text" id="name" name="name" required>
  827. </div>
  828. <div class="form-group">
  829. <label for="email">Your Email:</label>
  830. <input type="email" id="email" name="email" required>
  831. </div>
  832. <div class="form-group">
  833. <label for="message">Your Message:</label>
  834. <textarea id="message" name="message" rows="4" required></textarea>
  835. <div class="character-count" id="message-char-count">0/500</div>
  836. </div>
  837. <div class="error-message" id="contact-error"></div>
  838. <button type="submit">Send</button>
  839. </form>
  840. <p><strong>Instructions:</strong> Fill out the form to get in touch with our support team. We'll get back to
  841. you as soon as possible!</p>
  842. </div>
  843. </div>
  844.  
  845. <div class="login-modal" role="dialog" aria-labelledby="login-label" aria-hidden="true">
  846. <div class="login-modal-header">
  847. <h2 id="login-label">Login</h2>
  848. <span class="close-icon">&times;</span>
  849. </div>
  850. <div class="login-modal-body">
  851. <form id="login-form" aria-labelledby="login-label">
  852. <div class="form-group">
  853. <label for="username">Username:</label>
  854. <input type="text" id="username" name="username" required>
  855. </div>
  856. <div class="form-group">
  857. <label for="password">Password:</label>
  858. <input type="password" id="password" name="password" required>
  859. <span class="password-toggle" id="toggle-password">Show Password</span>
  860. </div>
  861. <a href="#" id="forgot-password">Forgot Password?</a>
  862. <div class="error-message" id="login-error"></div>
  863. <button type="submit">Login</button>
  864. </form>
  865. </div>
  866. </div>
  867.  
  868. <div class="settings-modal" role="dialog" aria-labelledby="settings-label" aria-hidden="true">
  869. <div class="settings-modal-header">
  870. <h2 id="settings-label">Settings</h2>
  871. <span class="close-icon">&times;</span>
  872. </div>
  873. <div class="settings-modal-body">
  874. <h3>Preferences</h3>
  875. <div class="form-group">
  876. <label for="notifications">
  877. <input type="checkbox" id="notifications"> Enable Notifications
  878. </label>
  879. </div>
  880. <div class="form-group">
  881. <label for="points-system">
  882. <input type="checkbox" id="points-system"> Enable Points System
  883. </label>
  884. </div>
  885. <div class="form-group">
  886. <label for="animation-speed">Animation Speed:</label>
  887. <select id="animation-speed">
  888. <option value="slow">Slow</option>
  889. <option value="normal" selected>Normal</option>
  890. <option value="fast">Fast</option>
  891. </select>
  892. </div>
  893. <div class="error-message" id="settings-error"></div>
  894. <button id="save-settings">Save Settings</button>
  895. </div>
  896. </div>
  897.  
  898. <button class="back-to-top" aria-label="Back to top">↑</button>
  899. <div class="toast" id="toast">Thank you for your feedback!</div>
  900.  
  901. <div class="cookie-consent" id="cookie-consent">
  902. <p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.
  903. <button id="accept-cookies">Accept</button>
  904. <button id="cookie-settings">Settings</button>
  905. </p>
  906. </div>
  907.  
  908. <footer>
  909. <p>&copy; 2023 Your Company. All rights reserved.</p>
  910. <div class="footer-links">
  911. <a href="#">Privacy Policy</a> |
  912. <a href="#">Terms of Service</a> |
  913. <a href="#">Contact Us</a>
  914. </div>
  915. </footer>
  916.  
  917. <script>
  918. document.addEventListener("DOMContentLoaded", function () {
  919. // DOM elements
  920. const loadingScreen = document.querySelector(".loading-screen");
  921. const container = document.querySelector(".container");
  922. const feedbackError = document.getElementById("feedback-error");
  923. const contactError = document.getElementById("contact-error");
  924. const loginError = document.getElementById("login-error");
  925. const toast = document.getElementById("toast");
  926. const cookieConsent = document.getElementById("cookie-consent");
  927. const modalOverlay = document.getElementById("modal-overlay");
  928. const adBlockerWarning = document.getElementById("ad-blocker-warning");
  929. const pointsDisplay = document.getElementById("points-display");
  930. const pointsValue = document.getElementById("points");
  931.  
  932. // Loading screen
  933. loadingScreen.style.display = "flex";
  934.  
  935. // Load user preferences from localStorage
  936. function loadUserPreferences() {
  937. // Theme preference
  938. if (localStorage.getItem('theme') === 'dark') {
  939. document.body.classList.add('dark-mode');
  940. }
  941.  
  942. // User profile
  943. if (localStorage.getItem('username')) {
  944. document.getElementById('profile-username').textContent = localStorage.getItem('username');
  945. document.getElementById('profile-email').textContent = localStorage.getItem('email') || 'No email provided';
  946. document.getElementById('user-profile').style.display = 'block';
  947. document.getElementById('login-button').textContent = 'My Account';
  948. }
  949.  
  950. // Settings
  951. if (localStorage.getItem('notifications') === 'true') {
  952. document.getElementById('notifications').checked = true;
  953. }
  954.  
  955. if (localStorage.getItem('points-system') === 'true') {
  956. document.getElementById('points-system').checked = true;
  957. pointsDisplay.style.display = 'inline-block';
  958. pointsValue.textContent = localStorage.getItem('points') || '0';
  959. } else {
  960. pointsDisplay.style.display = 'none';
  961. }
  962.  
  963. // Animation speed
  964. const animationSpeed = localStorage.getItem('animation-speed');
  965. if (animationSpeed) {
  966. document.getElementById('animation-speed').value = animationSpeed;
  967. document.documentElement.style.setProperty('--transition-speed',
  968. animationSpeed === 'slow' ? '0.6s' :
  969. animationSpeed === 'fast' ? '0.2s' : '0.3s');
  970. }
  971. }
  972.  
  973. // Initialize app
  974. function initApp() {
  975. loadUserPreferences();
  976.  
  977. setTimeout(() => {
  978. loadingScreen.style.display = "none";
  979. container.style.display = "flex";
  980. // Increment points if points system is enabled
  981. if (localStorage.getItem('points-system') === 'true') {
  982. let points = parseInt(localStorage.getItem('points') || '0');
  983. points += 10;
  984. localStorage.setItem('points', points);
  985. pointsValue.textContent = points;
  986.  
  987. // Show points notification
  988. showToast("You earned 10 points for visiting!");
  989. }
  990. }, 1500); // Reduced loading time for better UX
  991.  
  992. // Show cookie consent if not accepted
  993. if (!localStorage.getItem('cookiesAccepted')) {
  994. cookieConsent.style.display = "block";
  995. }
  996.  
  997. // Check for ad blocker
  998. setTimeout(() => {
  999. if (!window.canRunAds) {
  1000. adBlockerWarning.style.display = "block";
  1001. }
  1002. }, 2000);
  1003. }
  1004.  
  1005. // Initialize the app
  1006. initApp();
  1007.  
  1008. // Helper functions
  1009. function showToast(message, duration = 3000) {
  1010. toast.innerText = message;
  1011. toast.style.display = "block";
  1012. setTimeout(() => {
  1013. toast.style.opacity = 0;
  1014. setTimeout(() => {
  1015. toast.style.display = "none";
  1016. toast.style.opacity = 1;
  1017. }, 300);
  1018. }, duration);
  1019. }
  1020.  
  1021. function openModal(modal) {
  1022. modalOverlay.style.display = "block";
  1023. modal.style.display = "block";
  1024. // Focus on first input
  1025. const firstInput = modal.querySelector('input, textarea');
  1026. if (firstInput) firstInput.focus();
  1027. }
  1028.  
  1029. function closeModal(modal) {
  1030. modalOverlay.style.display = "none";
  1031. modal.style.display = "none";
  1032. }
  1033.  
  1034. function closeAllModals() {
  1035. document.querySelectorAll('.modal, .contact-modal, .login-modal, .settings-modal').forEach(modal => {
  1036. modal.style.display = "none";
  1037. });
  1038. modalOverlay.style.display = "none";
  1039. }
  1040.  
  1041. // Event listeners
  1042. document.getElementById("accept-cookies").addEventListener("click", function () {
  1043. localStorage.setItem('cookiesAccepted', 'true');
  1044. cookieConsent.style.display = "none";
  1045. });
  1046.  
  1047. document.getElementById("cookie-settings").addEventListener("click", function() {
  1048. alert("Cookie settings functionality would go here.");
  1049. });
  1050.  
  1051. document.querySelector(".feedback-button").addEventListener("click", function () {
  1052. openModal(document.querySelector(".modal"));
  1053. });
  1054.  
  1055. document.querySelector(".contact-button").addEventListener("click", function () {
  1056. openModal(document.querySelector(".contact-modal"));
  1057. // Auto-fill from localStorage if available
  1058. if (localStorage.getItem('name')) {
  1059. document.getElementById('name').value = localStorage.getItem('name');
  1060. }
  1061. if (localStorage.getItem('email')) {
  1062. document.getElementById('email').value = localStorage.getItem('email');
  1063. }
  1064. });
  1065.  
  1066. document.getElementById("login-button").addEventListener("click", function () {
  1067. if (localStorage.getItem('username')) {
  1068. // If logged in, scroll to profile
  1069. document.getElementById('user-profile').scrollIntoView({behavior: 'smooth'});
  1070. } else {
  1071. // If not logged in, show login modal
  1072. openModal(document.querySelector(".login-modal"));
  1073. }
  1074. });
  1075.  
  1076. document.getElementById("settings-button").addEventListener("click", function () {
  1077. openModal(document.querySelector(".settings-modal"));
  1078. });
  1079.  
  1080. document.getElementById("dismiss-ad-warning").addEventListener("click", function() {
  1081. adBlockerWarning.style.display = "none";
  1082. });
  1083.  
  1084. // Close buttons and overlay
  1085. document.querySelectorAll(".close-icon").forEach(button => {
  1086. button.addEventListener("click", function () {
  1087. closeAllModals();
  1088. });
  1089. });
  1090.  
  1091. modalOverlay.addEventListener("click", function() {
  1092. closeAllModals();
  1093. });
  1094.  
  1095. // Save settings
  1096. document.getElementById("save-settings").addEventListener("click", function() {
  1097. // Save notification preference
  1098. localStorage.setItem('notifications', document.getElementById('notifications').checked);
  1099.  
  1100. // Save points system preference
  1101. const pointsEnabled = document.getElementById('points-system').checked;
  1102. localStorage.setItem('points-system', pointsEnabled);
  1103.  
  1104. // Update points display
  1105. pointsDisplay.style.display = pointsEnabled ? 'inline-block' : 'none';
  1106.  
  1107. // Save animation speed
  1108. const animationSpeed = document.getElementById('animation-speed').value;
  1109. localStorage.setItem('animation-speed', animationSpeed);
  1110. document.documentElement.style.setProperty('--transition-speed',
  1111. animationSpeed === 'slow' ? '0.6s' :
  1112. animationSpeed === 'fast' ? '0.2s' : '0.3s');
  1113.  
  1114. showToast("Settings saved successfully!");
  1115. closeAllModals();
  1116. });
  1117.  
  1118. // Feedback Form Submission
  1119. document.querySelector("#feedback-form").addEventListener("submit", function (event) {
  1120. event.preventDefault();
  1121. feedbackError.textContent = ""; // Clear previous error message
  1122.  
  1123. // Validate form
  1124. const feedback = document.getElementById('feedback').value;
  1125. if (!feedback.trim()) {
  1126. feedbackError.textContent = "Please provide your feedback";
  1127. return;
  1128. }
  1129.  
  1130. // Check if rating is selected
  1131. const rating = document.querySelector('input[name="rating"]:checked');
  1132. if (!rating) {
  1133. feedbackError.textContent = "Please select a rating";
  1134. return;
  1135. }
  1136.  
  1137. // Simulate form submission loading
  1138. const submitButton = this.querySelector('button[type="submit"]');
  1139. const originalButtonText = submitButton.textContent;
  1140. submitButton.textContent = "Submitting...";
  1141. submitButton.disabled = true;
  1142.  
  1143. setTimeout(() => {
  1144. // Simulate a random error for demonstration (less frequent now)
  1145. const hasError = Math.random() < 0.2; // 20% chance of error
  1146. if (hasError) {
  1147. feedbackError.textContent = "Failed to submit feedback. Please try again.";
  1148. } else {
  1149. closeAllModals();
  1150. showToast("Thank you for your feedback!");
  1151. this.reset(); // Reset the form fields
  1152.  
  1153. // Add points if points system is enabled
  1154. if (localStorage.getItem('points-system') === 'true') {
  1155. let points = parseInt(localStorage.getItem('points') || '0');
  1156. points += 50;
  1157. localStorage.setItem('points', points);
  1158. pointsValue.textContent = points;
  1159. showToast("You earned 50 points for your feedback!", 4000);
  1160. }
  1161. }
  1162. submitButton.textContent = originalButtonText;
  1163. submitButton.disabled = false;
  1164. }, 1000); // Simulate async submission
  1165. });
  1166.  
  1167. // Contact Form Submission
  1168. document.querySelector("#contact-form").addEventListener("submit", function (event) {
  1169. event.preventDefault();
  1170. contactError.textContent = ""; // Clear previous error message
  1171.  
  1172. // Save name and email to localStorage for autofill
  1173. localStorage.setItem('name', document.getElementById('name').value);
  1174. localStorage.setItem('email', document.getElementById('email').value);
  1175.  
  1176. // Simulate form submission loading
  1177. const submitButton = this.querySelector('button[type="submit"]');
  1178. const originalButtonText = submitButton.textContent;
  1179. submitButton.textContent = "Sending...";
  1180. submitButton.disabled = true;
  1181.  
  1182. setTimeout(() => {
  1183. // Simulate a random error for demonstration (less frequent now)
  1184. const hasError = Math.random() < 0.2; // 20% chance of error
  1185. if (hasError) {
  1186. contactError.textContent = "Failed to send message. Please try again.";
  1187. } else {
  1188. closeAllModals();
  1189. showToast("Your message has been sent!");
  1190. this.reset(); // Reset the form fields
  1191.  
  1192. // Add points if points system is enabled
  1193. if (localStorage.getItem('points-system') === 'true') {
  1194. let points = parseInt(localStorage.getItem('points') || '0');
  1195. points += 30;
  1196. localStorage.setItem('points', points);
  1197. pointsValue.textContent = points;
  1198. showToast("You earned 30 points for contacting us!", 4000);
  1199. }
  1200. }
  1201. submitButton.textContent = originalButtonText;
  1202. submitButton.disabled = false;
  1203. }, 1000); // Simulate async submission
  1204. });
  1205.  
  1206. // Login Form Submission
  1207. document.querySelector("#login-form").addEventListener("submit", function (event) {
  1208. event.preventDefault();
  1209. loginError.textContent = ""; // Clear previous error message
  1210.  
  1211. const predefinedUsername = "user";
  1212. const predefinedPassword = "password";
  1213.  
  1214. // Simulate form submission loading
  1215. const submitButton = this.querySelector('button[type="submit"]');
  1216. const originalButtonText = submitButton.textContent;
  1217. submitButton.textContent = "Logging in...";
  1218. submitButton.disabled = true;
  1219.  
  1220. setTimeout(() => {
  1221. const username = document.getElementById('username').value;
  1222. const password = document.getElementById('password').value;
  1223.  
  1224. if (username === predefinedUsername && password === predefinedPassword) {
  1225. // Store user data in localStorage
  1226. localStorage.setItem('username', username);
  1227. localStorage.setItem('email', "[email protected]"); // Placeholder for email
  1228.  
  1229. closeAllModals();
  1230.  
  1231. // Update UI for logged in user
  1232. document.getElementById('profile-username').textContent = localStorage.getItem('username');
  1233. document.getElementById('profile-email').textContent = localStorage.getItem('email');
  1234. document.getElementById('user-profile').style.display = 'block';
  1235. document.getElementById('login-button').textContent = 'My Account';
  1236.  
  1237. showToast("Login successful!");
  1238. this.reset(); // Reset the form fields
  1239.  
  1240. // Add points if points system is enabled
  1241. if (localStorage.getItem('points-system') === 'true') {
  1242. let points = parseInt(localStorage.getItem('points') || '0');
  1243. points += 100;
  1244. localStorage.setItem('points', points);
  1245. pointsValue.textContent = points;
  1246. showToast("You earned 100 points for logging in!", 4000);
  1247. }
  1248. } else {
  1249. loginError.textContent = "Invalid username or password. Please try again. (Hint: Use 'user' and 'password')";
  1250. }
  1251. submitButton.textContent = originalButtonText;
  1252. submitButton.disabled = false;
  1253. }, 1000); // Simulate async submission
  1254. });
  1255.  
  1256. // Character Count for Feedback and Message
  1257. const feedbackTextarea = document.getElementById("feedback");
  1258. const messageTextarea = document.getElementById("message");
  1259. const feedbackCharCount = document.getElementById("feedback-char-count");
  1260. const messageCharCount = document.getElementById("message-char-count");
  1261.  
  1262. feedbackTextarea.addEventListener("input", function () {
  1263. const count = this.value.length;
  1264. const max = 200;
  1265. feedbackCharCount.textContent = `${count}/${max}`;
  1266.  
  1267. // Visual feedback for character limit
  1268. if (count > max) {
  1269. feedbackCharCount.style.color = 'red';
  1270. } else if (count > max * 0.8) {
  1271. feedbackCharCount.style.color = 'orange';
  1272. } else {
  1273. feedbackCharCount.style.color = '#888';
  1274. }
  1275. });
  1276.  
  1277. messageTextarea.addEventListener("input", function () {
  1278. const count = this.value.length;
  1279. const max = 500;
  1280. messageCharCount.textContent = `${count}/${max}`;
  1281.  
  1282. // Visual feedback for character limit
  1283. if (count > max) {
  1284. messageCharCount.style.color = 'red';
  1285. } else if (count > max * 0.8) {
  1286. messageCharCount.style.color = 'orange';
  1287. } else {
  1288. messageCharCount.style.color = '#888';
  1289. }
  1290. });
  1291.  
  1292. // Smooth scrolling for navigation links
  1293. const navLinks = document.querySelectorAll("nav a");
  1294. navLinks.forEach(link => {
  1295. link.addEventListener("click", function (event) {
  1296. event.preventDefault();
  1297. const targetId = link.getAttribute("href").substring(1);
  1298. const targetElement = document.getElementById(targetId);
  1299.  
  1300. if (targetElement) {
  1301. targetElement.scrollIntoView({
  1302. behavior: "smooth"
  1303. });
  1304. }
  1305. });
  1306. });
  1307.  
  1308. // FAQ accordions
  1309. const faqs = document.querySelectorAll(".faq");
  1310. faqs.forEach(faq => {
  1311. faq.addEventListener("click", function () {
  1312. const answer = this.querySelector(".faq-answer");
  1313. const expanded = this.getAttribute('aria-expanded') === 'true';
  1314.  
  1315. // Close other FAQs
  1316. faqs.forEach(item => {
  1317. if (item !== faq) {
  1318. item.querySelector(".faq-answer").style.display = "none";
  1319. item.setAttribute('aria-expanded', 'false');
  1320. item.classList.remove('active');
  1321. }
  1322. });
  1323.  
  1324. // Toggle current FAQ
  1325. answer.style.display = expanded ? "none" : "block";
  1326. this.setAttribute('aria-expanded', !expanded);
  1327. this.classList.toggle('active');
  1328. answer.setAttribute('aria-hidden', expanded);
  1329. });
  1330.  
  1331. // Keyboard support for FAQs
  1332. faq.addEventListener("keydown", function(event) {
  1333. if (event.key === 'Enter' || event.key === ' ') {
  1334. event.preventDefault();
  1335. faq.click();
  1336. }
  1337. });
  1338. });
  1339.  
  1340. // Back to top button functionality
  1341. const backToTopButton = document.querySelector(".back-to-top");
  1342. window.addEventListener("scroll", function() {
  1343. if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
  1344. backToTopButton.style.display = "block";
  1345. } else {
  1346. backToTopButton.style.display = "none";
  1347. }
  1348. });
  1349.  
  1350. backToTopButton.addEventListener("click", function () {
  1351. window.scrollTo({
  1352. top: 0,
  1353. behavior: "smooth"
  1354. });
  1355. });
  1356.  
  1357. // Theme toggle functionality
  1358. document.getElementById("theme-toggle").addEventListener("click", function () {
  1359. document.body.classList.toggle("dark-mode");
  1360. // Save theme preference in localStorage
  1361. if (document.body.classList.contains('dark-mode')) {
  1362. localStorage.setItem('theme', 'dark');
  1363. } else {
  1364. localStorage.removeItem('theme');
  1365. }
  1366. });
  1367.  
  1368. // Password visibility toggle
  1369. const togglePassword = document.getElementById("toggle-password");
  1370. const passwordInput = document.getElementById("password");
  1371. togglePassword.addEventListener("click", function () {
  1372. const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
  1373. passwordInput.setAttribute("type", type);
  1374. this.textContent = type === "password" ? "Show Password" : "Hide Password";
  1375. });
  1376.  
  1377. // Forgot password link
  1378. document.getElementById("forgot-password").addEventListener("click", function (event) {
  1379. event.preventDefault();
  1380. alert("Please contact support to reset your password.");
  1381. });
  1382.  
  1383. // Logout functionality
  1384. document.getElementById("logout-button").addEventListener("click", function () {
  1385. localStorage.removeItem('username');
  1386. localStorage.removeItem('email');
  1387. document.getElementById('user-profile').style.display = 'none';
  1388. document.getElementById('login-button').textContent = 'Login';
  1389. showToast("You have logged out successfully!");
  1390. });
  1391.  
  1392. // Define the ad detection function
  1393. window.canRunAds = true;
  1394. });
  1395. </script>
  1396. </body>
  1397.  
  1398. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!