API tools faq
paste
Advertisement
Primitiv0

Minimal Startpage

Primitiv0
May 13th, 2021
1,002
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.75 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <base target="_blank">
  7.     <title>Home</title>
  8. </head>
  9.  
  10.  
  11. <body data-palette="rainbow" data-page="1">
  12.  
  13. <main>
  14.    
  15.     <div class="container">
  16.    
  17.         <div class="tabs">
  18.             <div class="tab page1 active" data-color="1">1</div>
  19.             <div class="tab page1" data-color="2">2</div>
  20.             <div class="tab page1" data-color="3">3</div>
  21.             <div class="tab page1" data-color="4">4</div>
  22.             <div class="tab page1" data-color="5">5</div>
  23.             <div class="tab page2 notVisible" data-color="1">6</div>
  24.             <div class="tab page2 notVisible" data-color="2">7</div>
  25.             <div class="tab page2 notVisible" data-color="3">8</div>
  26.             <div class="tab page2 notVisible" data-color="4">9</div>
  27.             <div class="tab page2 notVisible" data-color="5">10</div>
  28.             <div class="tab page3 notVisible" data-color="1">11</div>
  29.             <div class="tab page3 notVisible" data-color="2">12</div>
  30.             <div class="tab page3 notVisible" data-color="3">13</div>
  31.             <div class="tab page3 notVisible" data-color="4">14</div>
  32.             <div class="tab page3 notVisible" data-color="5">15</div>
  33.             <div class="tab space"></div>
  34.             <div class="tab extra back">-</div>
  35.             <div class="tab extra next">+</div>
  36.         </div>
  37.        
  38.         <div class="content page1 active" data-color="1"></div>
  39.         <div class="content page1" data-color="2"></div>
  40.         <div class="content page1" data-color="3"></div>
  41.         <div class="content page1" data-color="4"></div>
  42.         <div class="content page1" data-color="5"></div>
  43.         <div class="content page2" data-color="1"></div>
  44.         <div class="content page2" data-color="2"></div>
  45.         <div class="content page2" data-color="3"></div>
  46.         <div class="content page2" data-color="4"></div>
  47.         <div class="content page2" data-color="5"></div>
  48.         <div class="content page3" data-color="1"></div>
  49.         <div class="content page3" data-color="2"></div>
  50.         <div class="content page3" data-color="3"></div>
  51.         <div class="content page3" data-color="4"></div>
  52.         <div class="content page3" data-color="5"></div>
  53.        
  54.         <div class="palette">
  55.             <div class="palette-content">
  56.                 <div data-color="rainbow"><span></span></div>
  57.                 <div data-color="random"><span>?</span></div>
  58.                 <div data-color="ice"><span></span></div>
  59.                 <div data-color="red"><span></span></div>
  60.                 <div data-color="orange"><span></span></div>
  61.                 <div data-color="green"><span></span></div>
  62.                 <div data-color="blue"><span></span></div>
  63.                 <div data-color="purple"><span></span></div>
  64.             </div>
  65.         </div>
  66.    
  67.     </div>
  68.    
  69. </main>
  70.  
  71. </body>
  72.  
  73. </html>
  74.  
  75.  
  76.  
  77. <style>
  78.  
  79. :root {
  80.     --bg: #1F2229;
  81.     --text: #D8DEE9;
  82.     --extra: hsl(222deg 14% 17%);
  83.     --random: hsl(222deg 14% 25%);
  84.    
  85.     --random-color: #fff;
  86.    
  87.     --grey: #a7aaaf;
  88.     --ice: #586479;
  89.     --red: hsl(4deg 60% 58%);
  90.     --orange: hsl(45deg 55% 50%);
  91.     --green: hsl(124deg 35% 48%);
  92.     --blue: hsl(205deg 41% 46%);
  93.     --purple: hsl(265deg 30% 48%); 
  94. }
  95.  
  96.  
  97. :root [data-palette="rainbow"] {
  98.     --color-1: var(--red);
  99.     --color-2: var(--orange);
  100.     --color-3: var(--green);
  101.     --color-4: var(--blue);
  102.     --color-5: var(--purple);
  103. }
  104. :root [data-palette="random"] {
  105.     --color-1: var(--random-color);
  106.     --color-2: var(--random-color);
  107.     --color-3: var(--random-color);
  108.     --color-4: var(--random-color);
  109.     --color-5: var(--random-color);
  110. }
  111. :root [data-palette="ice"] {
  112.     --color-1: var(--ice);
  113.     --color-2: var(--ice);
  114.     --color-3: var(--ice);
  115.     --color-4: var(--ice);
  116.     --color-5: var(--ice);
  117. }
  118. :root [data-palette="red"] {
  119.     --color-1: var(--red);
  120.     --color-2: var(--red);
  121.     --color-3: var(--red);
  122.     --color-4: var(--red);
  123.     --color-5: var(--red);
  124. }
  125. :root [data-palette="orange"] {
  126.     --color-1: var(--orange);
  127.     --color-2: var(--orange);
  128.     --color-3: var(--orange);
  129.     --color-4: var(--orange);
  130.     --color-5: var(--orange);
  131. }
  132. :root [data-palette="green"] {
  133.     --color-1: var(--green);
  134.     --color-2: var(--green);
  135.     --color-3: var(--green);
  136.     --color-4: var(--green);
  137.     --color-5: var(--green);
  138. }
  139. :root [data-palette="blue"] {
  140.     --color-1: var(--blue);
  141.     --color-2: var(--blue);
  142.     --color-3: var(--blue);
  143.     --color-4: var(--blue);
  144.     --color-5: var(--blue);
  145. }
  146. :root [data-palette="purple"] {
  147.     --color-1: var(--purple);
  148.     --color-2: var(--purple);
  149.     --color-3: var(--purple);
  150.     --color-4: var(--purple);
  151.     --color-5: var(--purple);
  152. }
  153.  
  154.  
  155.  
  156. * {
  157.     font-family: sf_compact_textregular;
  158.     font-family: Courier New;
  159.     text-decoration: none;
  160.     transition: .1s;
  161. }
  162.  
  163. html, body {
  164.     width: 100%;
  165.     height: 100vh;
  166.     margin: 0;
  167.     padding: 0;
  168.     outline: none;
  169.     display: flex;
  170.     justify-content: center;
  171. }
  172. main {
  173.     width: 100vw;
  174.     height: 100vh;
  175.     display: flex;
  176.     flex-direction: column;
  177. }
  178.  
  179.  
  180. /*container*/
  181. .container {
  182.     display: flex;
  183.     flex-direction: column;
  184.     justify-content: center;
  185.     align-items: stretch;
  186.     position: absolute;
  187.     top: 50%;
  188.     left: 50%;
  189.     transform: translate(-50%, -50%);
  190. }
  191.  
  192. /*tabs*/
  193. .tabs {
  194.     display: flex;
  195. }
  196. .tab {
  197.     display: flex;
  198.     justify-content: center;
  199.     align-items: center;
  200.     width: 50px;
  201.     height: 30px;
  202.     cursor: default;
  203. }
  204. .tab.notVisible {
  205.     display: none;
  206. }
  207. .tab.space {
  208.     flex-grow: 1;
  209. }
  210. body[data-page="1"] .tab.extra.back,
  211. body[data-page="3"] .tab.extra.next {
  212.     visibility: hidden;
  213. }
  214. body:not([data-page="1"]) .tab.extra.back:hover,
  215. body:not([data-page="3"]) .tab.extra.next:hover {
  216.     cursor: pointer;
  217. }
  218.  
  219. /*content*/
  220. .content {
  221.     display: none;
  222.     flex-direction: column;
  223.     padding: 50px 10px;
  224.     border: 3px solid;
  225. }
  226. .content.active {
  227.     display: flex;
  228. }
  229. .content > a {
  230.     display: flex;
  231.     justify-content: center;
  232.     align-items: center;
  233.     padding: 5px 20px;
  234.     cursor: pointer;
  235.     height: 20px;  
  236. }
  237.  
  238. /*palette*/
  239. .palette {
  240.     display: flex;
  241.     justify-content: center;
  242.     margin: 20px;
  243. }
  244. .palette-content {
  245.     display: flex;
  246.     justify-content: center;
  247.     cursor: pointer;
  248.     opacity: 0;
  249.     transition: .3s;
  250. }
  251. .palette div[data-color] {
  252.     padding-bottom: 2px;
  253.     border-bottom: 3px solid transparent;
  254. }
  255. .palette div span {
  256.     display: flex;
  257.     justify-content: center;
  258.     width: 20px;
  259.     height: 20px;
  260.     border-radius: 100%;
  261.     margin: 2px;
  262. }
  263.  
  264.  
  265. /*colors*/
  266. body {
  267.     background-color: var(--bg);
  268.     color: var(--text);
  269. }
  270.  
  271. body:not([data-page="1"]) .tab.extra.back:hover,
  272. body:not([data-page="3"]) .tab.extra.next:hover {
  273.     background: var(--extra);
  274. }
  275.  
  276. .content {
  277.     border-color: var(--extra);
  278. }
  279. .content > a {
  280.     color: var(--text);
  281. }
  282.  
  283. .tab.active[data-color="1"],
  284. .content[data-color="1"] a:hover {
  285.     background-color: var(--color-1);
  286. }
  287. .tab.active[data-color="2"],
  288. .content[data-color="2"] a:hover {
  289.     background-color: var(--color-2);
  290. }
  291. .tab.active[data-color="3"],
  292. .content[data-color="3"] a:hover {
  293.     background-color: var(--color-3);
  294. }
  295. .tab.active[data-color="4"],
  296. .content[data-color="4"] a:hover {
  297.     background-color: var(--color-4);
  298. }
  299. .tab.active[data-color="5"],
  300. .content[data-color="5"] a:hover {
  301.     background-color: var(--color-5);
  302. }
  303.  
  304. .content[data-color="1"] {  border-color: var(--color-1);}
  305. .content[data-color="2"] {  border-color: var(--color-2);}
  306. .content[data-color="3"] {  border-color: var(--color-3);}
  307. .content[data-color="4"] {  border-color: var(--color-4);}
  308. .content[data-color="5"] {  border-color: var(--color-5);}
  309.  
  310.  
  311. .palette div[data-color="rainbow"] span {  
  312.     border: 6px solid var(--grey);
  313.     box-sizing: border-box;
  314. }
  315. .palette div[data-color="random"] span {    background-color: var(--random);}
  316. .palette div[data-color="ice"] span {   background-color: var(--ice);}
  317. .palette div[data-color="red"] span {   background-color: var(--red);}
  318. .palette div[data-color="orange"] span {    background-color: var(--orange);}
  319. .palette div[data-color="green"] span { background-color: var(--green);}
  320. .palette div[data-color="blue"] span {  background-color: var(--blue);}
  321. .palette div[data-color="purple"] span {    background-color: var(--purple);}
  322.  
  323. .palette div.selected[data-color="rainbow"] {   border-color: var(--grey);}
  324. .palette div.selected[data-color="random"] {    border-color: var(--random);}
  325. .palette div.selected[data-color="ice"] {   border-color: var(--ice);}
  326. .palette div.selected[data-color="red"] {   border-color: var(--red);}
  327. .palette div.selected[data-color="orange"] {    border-color: var(--orange);}
  328. .palette div.selected[data-color="green"] { border-color: var(--green);}
  329. .palette div.selected[data-color="blue"] {  border-color: var(--blue);}
  330. .palette div.selected[data-color="purple"] {    border-color: var(--purple);}
  331.  
  332.  
  333.  
  334.    
  335. /*mobile*/
  336. @media screen and (max-width: 500px) {
  337.     .tab {
  338.         width: 30px;
  339.     }
  340. }
  341.  
  342.  
  343. </style>
  344.  
  345. <script>
  346.  
  347.     //links
  348.    
  349.     var links_var = [
  350.    
  351.     [
  352.         ['youtube', 'https://www.youtube.com'],
  353.         ['twitter', 'https://twitter.com'],
  354.         ['imgur', 'https://imgur.com/'],
  355.         ['facebook', 'https://www.facebook.com'],
  356.         ['reddit', 'https://www.reddit.com'],
  357.     ],
  358.     [
  359.         ['amazon', 'aaa'],
  360.         ['ebay', 'aaa'],
  361.         ['alibaba', 'aaa'],
  362.         ['amazon', 'aaa'],
  363.         ['ebay', 'aaa'],
  364.     ],
  365.     [
  366.         ['github', 'aaa'],
  367.         ['freenode', 'aaa'],
  368.         ['stackoverflow', 'aaa'],
  369.         ['github', 'aaa'],
  370.         ['freenode', 'aaa'],
  371.     ],
  372.     [
  373.         ['football', 'aaa'],
  374.         ['nba', 'aaa'],
  375.         ['nfl', 'aaa'],
  376.         ['tennis', 'aaa'],
  377.         ['rugby', 'aaa'],
  378.  
  379.     ],
  380.     [
  381.         ['google', 'aaa'],
  382.         ['drive', 'aaa'],
  383.         ['maps', 'aaa'],
  384.         ['photos', 'aaa'],
  385.         ['mega', 'aaa'],
  386.  
  387.     ],
  388.     //-----------------------6-10
  389.     [
  390.         ['link-26', 'aaa'],
  391.         ['link-27', 'aaa'],
  392.         ['link-28', 'aaa'],
  393.         ['link-29', 'aaa'],
  394.         ['link-30', 'aaa'],
  395.  
  396.     ],
  397.     [
  398.         ['link-31', 'aaa'],
  399.         ['link-32', 'aaa'],
  400.         ['link-33', 'aaa'],
  401.         ['link-34', 'aaa'],
  402.         ['link-35', 'aaa'],
  403.  
  404.     ],
  405.     [
  406.         ['link-36', 'aaa'],
  407.         ['link-37', 'aaa'],
  408.         ['link-38', 'aaa'],
  409.         ['link-39', 'aaa'],
  410.         ['link-40', 'aaa'],
  411.  
  412.     ],
  413.     [
  414.         ['link-41', 'aaa'],
  415.         ['link-42', 'aaa'],
  416.         ['link-43', 'aaa'],
  417.         ['link-44', 'aaa'],
  418.         ['link-45', 'aaa'],
  419.     ],
  420.     [
  421.         ['link-46', 'aaa'],
  422.         ['link-47', 'aaa'],
  423.         ['link-48', 'aaa'],
  424.         ['link-49', 'aaa'],
  425.         ['link-50', 'aaa'],
  426.     ],
  427.     //-----------------------11-15
  428.     [
  429.         ['link-51', 'aaa'],
  430.         ['link-52', 'aaa'],
  431.         ['link-53', 'aaa'],
  432.         ['link-54', 'aaa'],
  433.         ['link-55', 'aaa'],
  434.     ],
  435.     [
  436.         ['link-56', 'aaa'],
  437.         ['link-57', 'aaa'],
  438.         ['link-58', 'aaa'],
  439.         ['link-59', 'aaa'],
  440.         ['link-60', 'aaa'],
  441.     ],
  442.     [
  443.         ['link-61', 'aaa'],
  444.         ['link-62', 'aaa'],
  445.         ['link-63', 'aaa'],
  446.         ['link-64', 'aaa'],
  447.         ['link-65', 'aaa'],
  448.     ],
  449.     [
  450.         ['link-66', 'aaa'],
  451.         ['link-67', 'aaa'],
  452.         ['link-68', 'aaa'],
  453.         ['link-69', 'aaa'],
  454.         ['link-70', 'aaa'],
  455.     ],
  456.     [
  457.         ['link-71', 'aaa'],
  458.         ['link-72', 'aaa'],
  459.         ['link-73', 'aaa'],
  460.         ['link-74', 'aaa'],
  461.         ['link-75', 'aaa'],
  462.     ],
  463.  
  464.  
  465.  
  466.     ]
  467. //--------------------------------------------------------------------
  468.  
  469.  
  470.     //set color
  471.     if (typeof localStorage.palette == 'undefined'){
  472.         localStorage.setItem('palette', 'rainbow');
  473.     }
  474.  
  475.     document.querySelector('body').dataset.palette = localStorage.getItem('palette');
  476.     var palette_spans = document.querySelectorAll('.palette span');
  477.     for (let j=0; j<palette_spans.length; j++){
  478.         if (palette_spans[j].parentElement.dataset.color == localStorage.getItem('palette')){
  479.             palette_spans[j].parentElement.classList.add('selected');
  480.         }
  481.     }
  482.    
  483.    
  484.     //palette
  485.     document.querySelector('.palette').addEventListener('mouseenter', function(){
  486.         document.querySelector('.palette-content').style.opacity = '1';
  487.     })
  488.     document.querySelector('.palette').addEventListener('mouseleave', function(){
  489.         document.querySelector('.palette-content').style.opacity = '0';
  490.     })
  491.    
  492.     for (let i=0; i<palette_spans.length; i++){
  493.         palette_spans[i].addEventListener('click', function(){
  494.             for (let j=0; j<palette_spans.length; j++){
  495.                 palette_spans[j].parentElement.classList.remove('selected');
  496.             }
  497.             palette_spans[i].parentElement.classList.add('selected');
  498.             document.querySelector('body').dataset.palette = palette_spans[i].parentElement.dataset.color;
  499.             localStorage.setItem('palette', palette_spans[i].parentElement.dataset.color);
  500.         })
  501.     }
  502.    
  503.  
  504.     //links
  505.     var contents = document.querySelectorAll('.content');
  506.     for (let i=0; i<contents.length; i++){
  507.         for (let j=0; j<links_var[i].length; j++){
  508.            
  509.             var a_element = document.createElement('a');
  510.             a_element.setAttribute('data-id', 'i' + i + '_j' + j);
  511.             a_element.innerHTML = links_var[i][j][0];
  512.  
  513.             if (typeof links_var[i][j][1] == 'string'){
  514.                
  515.                 a_element.href = links_var[i][j][1];
  516.                 contents[i].appendChild(a_element);
  517.             }
  518.             else {
  519.  
  520.                 contents[i].appendChild(a_element);
  521.                 for (let k=0; k<links_var[i][j][1].length; k++){
  522.                     document.querySelector('a[data-id="i' + i + '_j' + j + '"]').setAttribute('data-link_' + k, links_var[i][j][1][k][1]);
  523.                 }
  524.                 document.querySelector('a[data-id="i' + i + '_j' + j + '"]').addEventListener('click', function(event){
  525.                     for (let k=0; k<links_var[i][j][1].length; k++){
  526.                         event.preventDefault();
  527.                         window.open(document.querySelector('a[data-id="i' + i + '_j' + j + '"]').getAttribute('data-link_' + k));
  528.                     }
  529.                 })
  530.             }
  531.         }
  532.     }
  533.  
  534.  
  535.     //random color
  536.     var temp_random = Math.floor((Math.random() * 360) + 1);
  537.     document.documentElement.style.setProperty('--random-color', 'hsl(' + temp_random + 'deg 41% 46%)');
  538.     document.querySelector('.palette div[data-color="random"').addEventListener('click', function(){
  539.         var temp_random = Math.floor((Math.random() * 360) + 1);
  540.         document.documentElement.style.setProperty('--random-color', 'hsl(' + temp_random + 'deg 41% 46%)');
  541.     })
  542.  
  543.  
  544.     //tabs
  545.     var tabs = document.querySelectorAll('.tab:not(.space):not(.extra)');
  546.     var contents = document.querySelectorAll('.content');
  547.     console.log('tabs', tabs);
  548.     console.log('contents', contents);
  549.     for (let i=0; i<tabs.length; i++){
  550.         tabs[i].addEventListener('mouseenter', function(){
  551.             for (let j=0; j<tabs.length; j++){
  552.                 tabs[j].classList.remove('active');
  553.             }
  554.             tabs[i].classList.add('active');
  555.             for (let j=0; j<contents.length; j++){
  556.                 contents[j].classList.remove('active');
  557.             }
  558.             contents[i].classList.add('active');
  559.         })
  560.     }
  561.  
  562.  
  563.     //extra
  564.     function show_page(x){
  565.         for (let i=0; i<tabs.length; i++){
  566.             tabs[i].classList.add('notVisible');
  567.             tabs[i].classList.remove('active');
  568.             contents[i].classList.remove('active');
  569.         }
  570.         var pageTabs = document.querySelectorAll('.tab.page' + x);
  571.         for (let i=0; i<pageTabs.length; i++){
  572.             pageTabs[i].classList.remove('notVisible');
  573.         }
  574.         document.querySelector('.tab.page' + x).classList.add('active');
  575.         document.querySelector('.content.page' + x).classList.add('active');
  576.         document.querySelector('body').dataset.page = x;
  577.     }
  578.    
  579.     var pages = 3;
  580.     document.querySelector('.tab.extra.back').addEventListener('click', function(){
  581.         var current_page = Number(document.querySelector('body').dataset.page);
  582.         if (current_page-1 >= 1){
  583.             show_page(current_page-1);
  584.         }
  585.     })
  586.     document.querySelector('.tab.extra.next').addEventListener('click', function(){
  587.         var current_page = Number(document.querySelector('body').dataset.page);
  588.         if (current_page+1 <= pages){
  589.             show_page(current_page+1);
  590.         }
  591.     })
  592.  
  593.  
  594. </script>
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!