Advertisement
soutadoori

Carousel page base

Feb 25th, 2024 (edited)
863
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.97 KB | None | 0 0
  1. <!--CSS carousel tabs credit: https://yeolithm.com/carousel/tutorial-->
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  5. <head>
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  8.  
  9. <script>
  10. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  11. if (storedTheme) {
  12.     document.documentElement.setAttribute("data-theme", storedTheme);
  13. }
  14. </script>
  15.  
  16.     <title>{Title}</title>
  17.     <link rel="shortcut icon" href="{Favicon}">
  18.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  19.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  20.    
  21.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  22.    
  23.     <link rel="preconnect" href="https://fonts.googleapis.com">
  24.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25.     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  26.  
  27. <style type="text/css">
  28.  
  29. :root {
  30.     --body-font: 1.5rem;
  31.     --line-height: 1.6;
  32.     --normal-font-weight: 400;
  33.     --medium-font-weight: 500;
  34.     --semi-bold-font-weight: 600;
  35.     --bold-font-weight: 700;
  36.    
  37.     --gap1: 1.2rem;
  38.     --gap2: 1.5rem;
  39.     --gap3: 2.5rem;
  40.     --gap4: 3.5rem;
  41.    
  42.     --gap-top-bottom: 12rem;
  43.     --gap-post-margin: 10rem;
  44.     --text-margin: 1.8rem;
  45.    
  46.     --round1: 0.5rem;
  47.     --round2: 0.7rem;
  48.     --round3: 1rem;
  49.     --circle: 100%;
  50. }
  51.  
  52. :root, html[data-theme='light'] {
  53.     --light-on: block;
  54.     --light-off: none;
  55.    
  56.     --color-accent: 77,100,141;
  57.     --color-accent-text: 255,255,255;
  58.     --color-background: 244,244,244;
  59.     --color-text: 31,43,62;
  60.     --color-link: 15,28,46;
  61.     --color-link-hover: 31,58,95;
  62.     --color-post-background: 255,255,255;
  63.     --color-post-borders: 225,225,225;
  64.     --color-post-accent: 250,250,250;
  65.     --color-post-accent-text: 0,0,0;
  66. }
  67.  
  68. html[data-theme='dark'] {
  69.     --light-on: none;
  70.     --light-off: block;
  71.    
  72.     --color-accent: 172,194,239;
  73.     --color-accent-text: 0,0,0;
  74.     --color-background: 15,28,46;
  75.     --color-text: 224,224,224;
  76.     --color-link: 206,232,255;
  77.     --color-link-hover: 125,155,208;
  78.     --color-post-background: 31,43,62;
  79.     --color-post-borders: 55,67,87;
  80.     --color-post-accent: 55,67,87;
  81.     --color-post-accent-text: 255,255,255;
  82. }
  83.  
  84. html.theme-transition,
  85. html.theme-transition *,
  86. html.theme-transition *:before,
  87. html.theme-transition *:after {
  88.   transition: 0s !important;
  89.   transition-delay: 0 !important;
  90. }
  91.  
  92. /*----------TUMBLR CONTROLS----------*/
  93.  
  94. *,*::before,*::after {
  95.     -webkit-font-smoothing: antialiased;
  96.     text-rendering: optimizeLegibility;
  97.     -moz-osx-font-smoothing: grayscale;
  98.     box-sizing: border-box;
  99. }
  100.  
  101. * {
  102.     margin: 0;
  103.     scrollbar-width: thin; /* firefox scrollbar  */
  104.     scrollbar-color: rgb(var(--color-accent)) rgb(var(--main-background));
  105. }
  106.  
  107. html {
  108.     height: 100%;
  109.     font-size: 62.5%;
  110.     scrollbar-width: thin;
  111. }
  112.  
  113. button,
  114. textarea,
  115. select {
  116.     font: inherit;
  117. }
  118.  
  119. button {
  120.     outline: none;
  121.     border: 0;
  122.     background: transparent;
  123.     padding: 0;
  124.     cursor: pointer;
  125.     color: inherit;
  126. }
  127.  
  128. input{
  129.     font: inherit;
  130.     border: none;
  131.     outline: 0;
  132.     padding: 0;
  133.     background-color: transparent;
  134.     color: rgb(var(--color-text));
  135. }
  136.  
  137. p,h1,h2,h3,h4,h5,h6 {
  138.     overflow-wrap: break-word;
  139. }
  140.  
  141. .tmblr-iframe-pushdown {
  142.     padding-top: 0!important;
  143. }
  144.  
  145. .iframe-controls--phone-mobile {
  146.     display: none!important;
  147. }
  148.  
  149. /* ------------------------------------- tooltips */
  150. .tippy-box[data-theme~='custom'] {
  151.     font-size: var(--body-font);
  152.     font-weight: 400;
  153.     text-align:center;
  154.     padding: 0;
  155.     color: rgb(var(--color-accent-text));
  156.     border: 0px solid rgb(var(--borders));
  157.     border-radius: var(--round1);
  158.     background-color: rgb(var(--color-accent));
  159.     text-transform: lowercase;
  160.     margin: 1.5rem;
  161.     z-index: 9999999;
  162. }
  163.  
  164. ::-moz-selection {
  165.     background-color: rgb(var(--color-accent));
  166.     color:rgb(var(--color-text));
  167. }
  168.  
  169. ::selection {
  170.     background-color: rgb(var(--color-accent));
  171.     color:rgb(var(--color-text));
  172. }
  173.  
  174. /* ------------------------------------- scrollbar (not firefrox) */
  175. ::-webkit-scrollbar {
  176.     width: 8px;
  177.     background-color: rgb(var(--color-background));
  178. }
  179.  
  180. ::-webkit-scrollbar-thumb {
  181.     background: rgb(var(--color-accent));
  182.     border-radius: var(--round1);
  183. }
  184.  
  185. ::-webkit-scrollbar-track {
  186.     background-color: rgb(var(--color-background));
  187. }
  188.  
  189. iframe.tmblr-iframe, .tmblr-iframe {
  190.     display: none;
  191. }
  192.  
  193. body {
  194.     font-size: var(--body-font);
  195.     line-height: var(--line-height);
  196.     font-family: "Poppins", sans-serif;
  197.     font-weight: var(--normal-font-weight);
  198.     background-color: rgb(var(--color-background));
  199.     color: rgb(var(--color-text));
  200. }
  201.  
  202. a {
  203.     text-decoration: none;
  204.     font-weight: var(--medium-font-weight);
  205.     color: rgb(var(--color-link));
  206. }
  207.  
  208. a:hover {
  209.     color: rgb(var(--color-link-hover));
  210.     transition: .4s;
  211. }
  212.  
  213. .buttons {
  214.     display: inline-flex;
  215.     align-items: center;
  216.     gap: 0.5rem;
  217.     position: fixed;
  218.     left: 1rem;
  219.     top: 1rem;
  220.     z-index: 99;
  221. }
  222.  
  223. .toggle-menu {
  224.     display: none;
  225. }
  226.  
  227. button.theme-toggle, .toggle-menu {
  228.     color: rgb(var(--color-link));
  229.     font-size: 2.5rem;
  230. }
  231.  
  232. .light-on {
  233.     display: var(--light-on);
  234. }
  235.  
  236. .light-off {
  237.     display: var(--light-off);
  238. }
  239.  
  240. #container {
  241.     display: flex;
  242.     justify-content: center;
  243.     align-items: center;
  244.     min-height: 100vh;
  245. }
  246.  
  247. #carousel {
  248.     flex: initial;
  249.     display: block;
  250. }
  251.  
  252. #carousel {
  253.     overflow: hidden;
  254.     width: 100%;
  255.     height: 100vh;
  256.     height: 100dvh;
  257. }
  258.  
  259. .cage {
  260.     overflow-y: auto;
  261.     overflow-x: hidden;
  262. }
  263.  
  264. .p-wrapper {
  265.     position: relative;
  266.     width: 100%;
  267.     height: 100%;
  268.     transition: transform 0.4s ease-in-out;
  269. }
  270.  
  271. #button_a:checked ~ #carousel .p-wrapper {
  272.     -webkit-transform: translateY(0);
  273.     transform: translateY(0);
  274. }
  275.  
  276. #button_b:checked ~ #carousel .p-wrapper {
  277.     -webkit-transform: translateY(-100%);
  278.     transform: translateY(-100%);
  279. }
  280.  
  281. #button_c:checked ~ #carousel .p-wrapper {
  282.     -webkit-transform: translateY(-200%);
  283.     transform: translateY(-200%);
  284. }
  285.  
  286. #button_d:checked ~ #carousel .p-wrapper {
  287.     -webkit-transform: translateY(-300%);
  288.     transform: translateY(-300%);
  289. }
  290.  
  291. [class^="panel_"] {
  292.     overflow: auto;
  293.     position: relative;
  294.     width: inherit;
  295.     height: inherit;
  296.     padding: 48px;
  297. }
  298.  
  299. #navigation {
  300.     position: fixed;
  301.     top: 1rem;
  302.     right: 1rem;
  303.     z-index: 99;
  304.     display: flex;
  305.     justify-content: center;
  306.     align-items: center;
  307.     gap: var(--gap1)
  308. }
  309.  
  310. [class^="label_"] {
  311.     display: block;
  312.     cursor: pointer;
  313.     margin: 8px 0;
  314.     width: 32px;
  315.     height: 32px;
  316.     line-height: 32px;
  317.     text-align: center;
  318.     border-radius: 4px;
  319.     color: rgb(var(--color-link));
  320.     background-color: rgb(var(--color-post-background));
  321.     transition: all 0.3s ease;
  322. }
  323.  
  324. [class^="label_"]:hover {
  325.     color: rgb(var(--color-accent-text));
  326.     background-color: rgb(var(--color-accent));
  327. }
  328.  
  329. #button_a:checked ~ #navigation .label_a,
  330. #button_b:checked ~ #navigation .label_b,
  331. #button_c:checked ~ #navigation .label_c,
  332. #button_d:checked ~ #navigation .label_d {
  333.      cursor: default;
  334.      color: rgb(var(--color-accent-text));
  335.      background-color: rgb(var(--color-accent));
  336. }
  337.  
  338. @media screen and (max-width: 1100px) {
  339.  
  340. }
  341.  
  342. @media screen and (max-width: 850px) {
  343.  
  344.    
  345. }
  346.  
  347. </style>
  348. </head>
  349. <body>
  350.  
  351.    <div class="buttons">
  352.         <button class="theme-toggle" aria-label="toggle dark or light mode" type="button">
  353.             <i class="ti ti-sun light-on"></i>
  354.             <i class="ti ti-moon light-off"></i>
  355.         </button>
  356.         <button class="toggle-menu" aria-label="toggle menu" type="button" id="menu-button">
  357.             <i class="ti ti-menu-deep"></i>
  358.         </button>
  359.     </div>
  360.  
  361. <div id="container">        
  362.  
  363.     <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  364.     <input hidden type="radio" name="carousel-control" id="button_b"/>
  365.     <input hidden type="radio" name="carousel-control" id="button_c"/>
  366.     <input hidden type="radio" name="carousel-control" id="button_d"/>      
  367.  
  368.     <div id="navigation">        
  369.         <label for="button_a" class="label_a"> <span> a </span> </label>        
  370.         <label for="button_b" class="label_b"> <span> b </span> </label>
  371.         <label for="button_c" class="label_c"> <span> c </span> </label>        
  372.         <label for="button_d" class="label_d"> <span> d </span> </label>    
  373.     </div> <!-- // #navigation -->  
  374.    
  375.     <div id="carousel">
  376.         <div class="p-wrapper">                
  377.             <section class="panel_a cage">
  378.                 <h2> Panel a </h2>
  379.             </section>
  380.            
  381.             <section class="panel_b cage">
  382.                 <h2> Panel b </h2>
  383.             </section>
  384.            
  385.             <section class="panel_c cage">
  386.                 <h2> Panel c </h2>
  387.             </section>
  388.            
  389.             <section class="panel_d cage">
  390.                 <h2> Panel d </h2>
  391.             </section>                  
  392.         </div> <!-- // .p-wrapper -->
  393.     </div> <!-- // #carousel -->  
  394.  
  395. </div> <!-- // #container -->
  396.  
  397.  
  398. <!-- TOOLTIP: tippy.js -->
  399. <script src="https://unpkg.com/@popperjs/core@2"></script>
  400. <script src="https://unpkg.com/tippy.js@6"></script>
  401.  
  402. <script>
  403.  
  404.     // ------------------- tooltip
  405.     const commonOptions = {
  406.         theme: "custom",
  407.         arrow: false,
  408.         followCursor: true,
  409.         placement: "top",
  410.         touch: "hold",
  411.     };
  412.    
  413.     tippy("[title]", {
  414.         ...commonOptions,
  415.         content(reference) {
  416.             const title = reference.getAttribute("title");
  417.             reference.removeAttribute("title");
  418.             return title;
  419.         },
  420.     });
  421.    
  422.     // ------------------- toggle menu
  423.     const menu = document.getElementById("nav-container");
  424.     const button = document.getElementById("menu-button");
  425.     const buttonOpen = button.querySelector("i");
  426.    
  427.     button.addEventListener("click", () => {
  428.        menu.classList.toggle("open");
  429.        
  430.        const isOpen = menu.classList.contains("open");
  431.        
  432.        if(isOpen) {
  433.            buttonOpen.setAttribute("class", "ti ti-x");
  434.        } else {
  435.            buttonOpen.setAttribute("class", "ti ti-menu-deep");
  436.        }
  437.     });
  438.    
  439.     // ------------------- toggle dark/light by @mournstera
  440.     const themeToggleButtons = document.querySelectorAll(".theme-toggle");
  441.    
  442.     themeToggleButtons.forEach((btn) => {
  443.             const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  444.             const initialTooltipText = storedTheme === "dark" ? "Toggle light mode" : "Toggle dark mode";
  445.             tippy(btn, {
  446.                 ...commonOptions,
  447.                 content: initialTooltipText,
  448.             });
  449.         btn.addEventListener("click", function () {
  450.    
  451.             document.documentElement.classList.add("theme-transition");
  452.    
  453.             let currentTheme = document.documentElement.getAttribute("data-theme");
  454.             let targetTheme = (currentTheme === "light") ? "dark" : "light";
  455.    
  456.             window.setTimeout(function () {
  457.                 document.documentElement.classList.remove("theme-transition");
  458.             }, 50);
  459.  
  460.             document.documentElement.setAttribute("data-theme", targetTheme);
  461.             localStorage.setItem("theme", targetTheme);
  462.         });
  463.     });
  464. </script>
  465. </body>
  466. </html> <!---------------------------END--------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement