API tools faq
paste
Advertisement
TheiPhoneFan

(6.0) Rock Paper Scissors In Sidebar/Top Bar

TheiPhoneFan
Dec 29th, 2023 (edited)
322
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.60 KB | None | 0 0
raw download clone embed print report
  1. <!-- Created By TheiPhoneFan on December 29, 2023 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <!-- External Font -->
  6.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
  7.     <!-- Stylesheet Links -->
  8.     <link rel="stylesheet" href="../theme/style.css">
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  10.     <!-- Page Title -->
  11.     <title>Sidebar & Top Bar Navigaton</title>
  12.    <!-- Favicon Image Link -->
  13.    <link rel="icon" type="image/x-png" href="../logos/tif-logo.png">
  14.    <!-- Scales Website Content -->
  15.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.    <!-- Enables Unicode Characters To Be Displayed -->
  17.    <meta charset="UTF-8">
  18.    <style>
  19.        body {
  20.            background-color: black;
  21.         }
  22.  
  23.         /* Top Bar CSS */
  24.         .navbar {
  25.             overflow: hidden;
  26.             background-image: url(../theme/pinstripes-1x.png);
  27.             border-radius: 13px;
  28.             border: 1px solid #ccc;
  29.         }
  30.         @media (max-width: 750px) {
  31.             .navbar {
  32.                 display: none;
  33.             }
  34.         }
  35.         .navbar a {
  36.             float: left;
  37.             font-size: 16px;
  38.             color: black;
  39.             text-align: center;
  40.             padding: 14px 16px;
  41.             text-decoration: none;
  42.             font-family: 'Roboto', sans-serif;
  43.             font-weight: 300;
  44.             color: gray;
  45.             cursor: pointer;
  46.         }
  47.         .navbar a img {
  48.             vertical-align: middle;
  49.         }
  50.         .dropdown {
  51.             float: left;
  52.             overflow: hidden;
  53.             font-weight: 300;
  54.         }
  55.         .dropdown .dropbtn {
  56.             font-size: 16px;
  57.             border: none;
  58.             outline: none;
  59.             color: white;
  60.             padding: 14px 16px;
  61.             background-color: inherit;
  62.             background-image: none;
  63.             font-family: 'Roboto', sans-serif;
  64.             font-weight: 300;
  65.             margin: 0;
  66.             color: gray;
  67.             cursor: pointer;
  68.             border-radius:0px;
  69.             text-shadow: none;
  70.             height:100%;
  71.         }
  72.         .navbar a:hover, .dropdown:hover, .navbar a:hover, .dropbtn:hover {
  73.             background-color: #eeeeee;
  74.             transition: 0.3s;
  75.             color: #000000;
  76.         }
  77.         .dropdown-content {
  78.             display: none;
  79.             position: absolute;
  80.             background-image: url('../theme/pinstripes-1x.png');
  81.             min-width: 160px;
  82.             z-index: 1;
  83.             border-radius: 16px;
  84.             border: 1px solid #ccc;
  85.             max-width: 100%; /* Added to limit the width to 100% of the screen */
  86.             box-sizing: border-box; /* Added to include padding and border in the width calculation */
  87.             margin-bottom: 1px;
  88.         }
  89.         .dropdown-content a {
  90.             float: none;
  91.             color: black;
  92.             padding: 12px 16px;
  93.             text-decoration: none;
  94.             display: block;
  95.             max-height: 200px; /* Adjust the value as needed */
  96.             overflow-x: hidden;
  97.             text-align: left;
  98.             cursor: pointer;
  99.         }
  100.         .dropdown-content a:hover {
  101.             background-color: #eeeeee;
  102.         }
  103.         .dropdown-content p {
  104.             color: black;
  105.             font-size: 16px;
  106.         }
  107.         .dropdown:hover .dropdown-content {
  108.             display: block;
  109.         }
  110.  
  111.  
  112.         /* Sidebar CSS */
  113.         .sidebar {
  114.             height: 100%;
  115.             width: 310px;
  116.             position: fixed;
  117.             top: 0;
  118.             left: -310px; /* Hide the sidebar off-screen by default */
  119.             background-image: url('../theme/pinstripes-1x.png');
  120.             padding-top: 20px;
  121.             transition: left 0.3s; /* Add a smooth transition effect when the sidebar slides in/out */
  122.             overflow-x: auto;
  123.             overflow-y: auto;
  124.         }
  125.  
  126.         @media (min-width: 750px) {
  127.             .sidebar {
  128.                 display: none;
  129.             }
  130.         }
  131.  
  132.         .site-title {
  133.             text-align: center;
  134.         }
  135.         @media (min-width: 750px) {
  136.             .site-title {
  137.                 display: none;
  138.             }
  139.         }
  140.  
  141.         /* Define the CSS styles for the links in the sidebar */
  142.         .sidebar a {
  143.             padding: 12px 25px;
  144.             text-decoration: none;
  145.             font-size: 20px;
  146.             color: black;
  147.             display: block;
  148.             font-family: 'Roboto', sans-serif;
  149.             height:20px;
  150.         }
  151.  
  152.         /* Change the color of the links when hovered over */
  153.         .sidebar a:hover {
  154.             background-color: #eeeeee;
  155.             height:20px;
  156.             border-radius: 10px;
  157.         }
  158.  
  159.         details {
  160.             padding: 12px 25px;
  161.             cursor: pointer;
  162.         }
  163.         details hr {
  164.             color:black;
  165.             background-color:black;
  166.             margin-top:5px;
  167.             margin-bottom:5px;
  168.         }
  169.         summary {
  170.             padding: 3px;
  171.             text-decoration: none;
  172.             font-size: 20px;
  173.             color: black;
  174.             font-weight:300;
  175.             font-family: 'Roboto', sans-serif;
  176.             height:20px;
  177.         }
  178.         summary:hover {
  179.             background-color: #eeeeee;
  180.             height:20px;
  181.             border-radius:16px;
  182.         }
  183.        
  184.         .openbtn {
  185.             position: fixed;
  186.             z-index: 1;
  187.             margin-left: 10px;
  188.             background-color: #333;
  189.             color: white;
  190.             border: none;
  191.             cursor: pointer;
  192.             width: 40px;
  193.             height:40px;
  194.             font-size:20px;
  195.             margin-top:10px;
  196.             font-size: 20px;
  197.             display: flex;
  198.             justify-content: center;
  199.             align-items: center;
  200.         }
  201.  
  202.         @media (min-width: 750px) {
  203.             .openbtn {
  204.                 display: none;
  205.             }
  206.         }
  207.  
  208.         @keyframes details-show {
  209.             from {
  210.                 opacity:0;
  211.                 transform: var(--details-translate, translateY(-0.5em));
  212.             }
  213.         }
  214.  
  215.         details[open] > *:not(summary) {
  216.             animation: details-show 0.3s ease-in-out;
  217.         }
  218.  
  219.         .rpc {
  220.             color: white;
  221.             font-size:20px;
  222.             font-weight: 400;
  223.             text-align: center;
  224.         }
  225.  
  226.         .rpc-menu {
  227.             text-align: center;
  228.         }
  229.  
  230.         .choose, .result {
  231.             color: black;
  232.             text-align: center;
  233.         }
  234.     </style>
  235. </head>
  236. <body>
  237. <!-- Top Bar -->
  238. <div class="navbar">
  239.   <!-- Site Title -->
  240.   <a href="../index.html" style="background-color:transparent;cursor:pointer;color:black;"><b>TheiPhoneFan.com</b></a>
  241.  
  242.   <!-- Home -->
  243.   <a href="../index.html">Home <img src="../previews/icons/home.png" height="15"></a>
  244.  
  245.   <!-- Channel Related Dropdown -->
  246.   <div class="dropdown">
  247.     <button class="dropbtn">Channel Related <i class="fa fa-caret-down"></i></button>
  248.     <div class="dropdown-content">
  249.       <a href="../channel-related.html" style="border-radius: 16px 16px 0px 0px;"><b>Channel Related</b> <img src="../previews/icons/triangle.png" height="15"></a>
  250.       <a href="https://www.youtube.com/@theiphonefan761/about">Channel Info <img src="../previews/icons/channel-info.png" height="15"></a>
  251.       <a href="../music-i-use.html">Music I Use <img src="../previews/icons/music-i-use.png" height="15"></a>
  252.       <a href="../my-playlists.html">My Playlists <img src="../previews/icons/triangle.png" height="15"></a>
  253.       <a href="../my-top-5-vids.html">My Top 5 Vids <img src="../previews/icons/triangle.png" height="15"></a>
  254.       <a href="../my-videos.html">My Videos <img src="../previews/icons/triangle.png" height="15"></a>
  255.       <a href="../thumbnail-design.html" style="border-radius: 0px 0px 16px 16px;">Thumbnail Design <img src="../previews/icons/thumbnail-design.png" height="15"></a>
  256.     </div>
  257.   </div>
  258.  
  259.   <!-- Content Dropdown -->
  260.   <div class="dropdown">
  261.     <button class="dropbtn">Content <i class="fa fa-caret-down"></i></button>
  262.     <div class="dropdown-content">
  263.       <a href="../content.html" style="border-radius: 16px 16px 0px 0px;"><b>Content</b></a>
  264.       <a href="../apple-archive.html">Apple Archive <img src="../previews/icons/apple.png" height="15"></a>
  265.       <a href="../apple-concepts.html">Apple Concepts <img src="../previews/icons/apple.png" height="15"></a>
  266.       <a href="../articles.html">Articles <img src="../previews/icons/articles.png" height="15"></a>
  267.       <a href="../blog.html">Blog <img src="../previews/icons/blog.png" height="15"></a>
  268.       <a href="../clipart.html">Clipart <img src="../previews/icons/clipart.png" height="15"></a>
  269.       <a href="../my-photography.html">My Photography <img src="../previews/icons/my-photography.png" height="15"></a>
  270.       <a href="../wallpapers.html" style="border-radius: 0px 0px 16px 16px;">Wallpapers <img src="../previews/icons/wallpapers.png" height="20"></a>
  271.     </div>
  272.   </div>
  273.  
  274.   <!-- Scam Avoidance Dropdown -->
  275.   <div class="dropdown">
  276.     <button class="dropbtn">Scam Avoidance <i class="fa fa-caret-down"></i></button>
  277.     <div class="dropdown-content">
  278.       <a href="../scam-avoidance.html" style="border-radius: 16px 16px 0px 0px;"><b>Scam Avoidance</b></a>
  279.       <a href="../common-scams.html">Common Scams <img src="../previews/icons/common-scams.png" height="15"></a>
  280.       <a href="../report-a-scam.html">Report a Scam <img src="../previews/icons/report.png" height="15"></a>
  281.       <a href="../scam-avoidance-blog.html">Scam Avoidance Blog <img src="../previews/icons/blog.png" height="15"></a>
  282.       <a href="../scam-avoidance-tips.html">Scam Avoidance Tips</a>
  283.       <a href="../scam-avoidance-tips.html" style="border-radius: 0px 0px 16px 16px;">Scam Info Updates <img src="../previews/icons/updates.png" height="15"></a>
  284.     </div>
  285.   </div>
  286.  
  287.   <!-- Site Related Dropdown -->
  288.   <div class="dropdown">
  289.     <button class="dropbtn">Site Related <i class="fa fa-caret-down"></i></button>
  290.     <div class="dropdown-content">
  291.       <a href="../site-related.html" style="border-radius: 16px 16px 0px 0px;"><b>Site Related</b></a>
  292.       <a href="../all-pages.html">All Pages <img src="../previews/icons/all-pages.png" height="12" style="vertical-align:baseline;"></a>
  293.       <a href="../changelog.html">Changelog</a>
  294.       <a href="../downloads.html">Downloads <img src="../previews/icons/downloads.png" height="15"></a>
  295.       <a href="../get-help.html">Get Help <img src="../previews/icons/get-help.png" height="15"></a>
  296.       <a href="../previews.html">Previews</a>
  297.       <a href="../report-an-issue.html">Report an Issue <img src="../previews/icons/report.png" height="15"></a>
  298.       <a href="../saved-site-revisions.html">Saved Site Revisions <img src="../previews/icons/floppy.png" height="15"></a>
  299.       <a style="background-color:transparent;cursor:default;"><b>Site Options</b></a>
  300.       <a href="https://the-iphone-fan.weebly.com">Old Site</a>
  301.       <a href="https://sites.google.com/view/iphonefan/" style="border-radius: 0px 0px 16px 16px;">Even Older Site</a>
  302.     </div>
  303.   </div>
  304.  
  305.   <!-- Help & Contact Dropdown -->
  306.   <div class="dropdown">
  307.     <button class="dropbtn">Help & Contact <i class="fa fa-caret-down"></i></button>
  308.    <div class="dropdown-content">
  309.        <a href="../help-contact.html" style="border-radius: 16px 16px 0px 0px;"><b>Help & Contact</b></a>
  310.        <a href="../contact-me.html">Contact Me  <img src="../previews/icons/contact-me.png" height="15"></a>
  311.        <a href="../website-survey.html">Site Survey  <img src="../previews/icons/survey.png" height="15"></a>
  312.        &nbsp;
  313.         <a href="https://m.youtube.com/channel/UC_xMgHdzp5AWR7rVZ89-sYg">YouTube▶️</a>
  314.         <a href="https://twitter.com/theiphonefan">𝕏</a>
  315.         <a href="https://www.instagram.com/theiphonefan_/">Instagram📷</a>
  316.         <a href="mailto:jordan.theiphonefan@gmail.com" style="border-radius: 0px 0px 16px 16px;">Mail✉️</a>
  317.     </div>
  318.   </div>
  319.  
  320.   <!-- Help & Contact Dropdown -->
  321.   <div class="dropdown">
  322.     <button class="dropbtn">Game <i class="fa fa-caret-down"></i></button>
  323.     <div class="dropdown-content">
  324.         <p class="choose">Choose your move:</p>
  325.         <div class="rpc-menu">
  326.             <button onclick="playGame('rock')" class="rpc">Rock🪨</button>
  327.             <button onclick="playGame('paper')" class="rpc">Paper📄</button>
  328.             <button onclick="playGame('scissors')" class="rpc">Scissors✂️</button>
  329.         </div>
  330.         <p id="result" class="result"></p>
  331.     </div>
  332.   </div>
  333.   </div>
  334. </div>
  335.  
  336. <!-- Sidebar Button -->
  337. <button class="openbtn" onclick="toggleSidebar()">☰</button>
  338.  
  339. <div class="sidebar" id="mySidebar">
  340.     <h3 style="color:black;margin-top:40px;">TheiPhoneFan.com</h3>
  341.     <a href="../index.html">Home🏠</a>
  342.     <details>
  343.         <summary>Channel Related</summary>
  344.         <a href="../channel-related.html"><b>Channel Related</b></a>
  345.         <a href="https://www.youtube.com/@theiphonefan761/about">Channel Info  <img src="../previews/icons/channel-info.png" height="15"></a>
  346.         <a href="../music-i-use.html">Music I Use <img src="../previews/icons/music-i-use.png" height="15"></a>
  347.         <a href="../my-playlists.html">My Playlists <img src="../previews/icons/triangle.png" height="15"></a>
  348.         <a href="../my-top-5-vids.html">My Top 5 Vids <img src="../previews/icons/triangle.png" height="15"></a>
  349.         <a href="../my-videos.html">My Videos <img src="../previews/icons/triangle.png" height="15"></a>
  350.         <a href="../thumbnail-design.html">Thumbnail Design <img src="../previews/icons/thumbnail-design.png" height="15"></a>
  351.         <hr>
  352.     </details>
  353.     <details>
  354.         <summary>Content</summary>
  355.         <a href="../content.html"><b>Content</b></a>
  356.         <a href="../apple-archive.html">Apple Archive <img src="../previews/icons/apple.png" height="15"></a>
  357.         <a href="../apple-concepts.html">Apple Concepts <img src="../previews/icons/apple.png" height="15"></a>
  358.         <a href="../articles.html">Articles <img src="../previews/icons/articles.png" height="15"></a>
  359.         <a href="../blog.html">Blog <img src="../previews/icons/blog.png" height="15"></a>
  360.         <a href="../clipart.html">Clipart <img src="../previews/icons/clipart.png" height="15"></a>
  361.         <a href="../my-photography.html">My Photography <img src="../previews/icons/my-photography.png" height="15"></a>
  362.         <a href="../wallpapers.html">Wallpapers <img src="../previews/icons/wallpapers.png" height="20"></a>
  363.         <hr>
  364.     </details>
  365.     <details>
  366.         <summary>Scam Avoidance</summary>
  367.         <a href="../scam-avoidance.html"><b>Scam Avoidance</b></a>
  368.         <a href="../common-scams.html">Common Scams <img src="../previews/icons/common-scams.png" height="15"></a>
  369.         <a href="../report-a-scam.html">Report a Scam <img src="../previews/icons/report.png" height="15"></a>
  370.         <a href="../scam-avoidance-blog.html">Scam Avoidance Blog <img src="../previews/icons/blog.png" height="15"></a>
  371.         <a href="../scam-avoidance-tips.html">Scam Avoidance Tips</a>
  372.         <a href="../scam-info-updates.html">Scam Info Updates <img src="../previews/icons/updates.png" height="15"></a>
  373.         <hr>
  374.     </details>
  375.     <details>
  376.         <summary>Site Related</summary>
  377.             <a href="../site-related.html"><b>Site Related</b></a>
  378.             <a href="../all-pages.html">All Pages <img src="../previews/icons/all-pages.png" height="12" style="vertical-align:baseline;"></a>
  379.             <a href="../changelog.html">Changelog</a>
  380.             <a href="../downloads.html">Downloads <img src="../previews/icons/downloads.png" height="15"></a>
  381.             <a href="../get-help.html">Get Help <img src="../previews/icons/get-help.png" height="15"></a>
  382.             <a href="../previews.html">Previews</a>
  383.             <a href="../report-an-issue.html">Report an Issue <img src="../previews/icons/report.png" height="15"></a>
  384.             <a href="../saved-site-revisions.html">Saved Site Revisions <img src="../previews/icons/floppy.png" height="15"></a>
  385.             <a style="cursor:default;"><b>Site Options</b></a>
  386.             <a href="https://the-iphone-fan.weebly.com">Old Site</a>
  387.             <a href="https://sites.google.com/view/iphonefan/">Even Older Site</a>
  388.         <hr>
  389.     </details>
  390.     <details>
  391.         <summary>Help & Contact</summary>
  392.        <a href="../help-contact.html"><b>Help & Contact</b></a>
  393.        <a href="../contact-me.html">Contact Me  <img src="../previews/icons/contact-me.png" height="15"></a>
  394.        <a href="../website-survey.html">Site Survey  <img src="../previews/icons/survey.png" height="15"></a>
  395.        <hr>
  396.    </details>
  397.  
  398.    <div class="mydiv" style="margin-bottom:20px;">
  399.         <a href="https://www.youtube.com/channel/UC_xMgHdzp5AWR7rVZ89-sYg" style="padding:0px;background-color:transparent;display:inline;">
  400.             <img src="../theme/social-icons/youtube-social.png" alt="YouTube" width="40">
  401.         </a>
  402.         <a href="https://twitter.com/theiphonefan" style="padding:0px;background-color:transparent;display:inline;">
  403.             <img src="../theme/social-icons/x-social.png" alt="X" width="40">
  404.         </a>
  405.         <a href="https://instagram.com/theiphonefan_/" style="padding:0px;background-color:transparent;display:inline;">
  406.             <img src="../theme/social-icons/instagram-social.png" alt="Instagram" width="40">
  407.         </a>
  408.         <a href="mailto:jordan.theiphonefan@gmail.com" style="padding:0px;background-color:transparent;display:inline;">
  409.             <img src="../theme/social-icons/mail-social.png" alt="Instagram" width="40">
  410.         </a>
  411.     </div>
  412.  
  413.     <p class="choose">Choose your move:</p>
  414.     <div class="rpc-menu">
  415.         <button onclick="playGame('rock')" class="rpc">Rock🪨</button>
  416.         <button onclick="playGame('paper')" class="rpc">Paper📄</button>
  417.         <button onclick="playGame('scissors')" class="rpc">Scissors✂️</button>
  418.     </div>
  419.     <p id="result" class="result"></p>
  420. </div>
  421.  
  422. <noscript>
  423.     <img src="../theme/critical-error.png" style="border-radius:4px;" width="30px">
  424.     Your browser does not support JavaScript or it is disabled. To use all site features, please enable JavaScript or try another browser.
  425. </noscript>
  426.  
  427.     <div class="header">
  428.         <div class="mydiv">
  429.             <!-- Page Title & Info -->
  430.             <h1>Sidebar/Top Bar Navigation</h1>
  431.             <p>On this page, you can test two new methods of navigation, the sidebar & top bar.</p>
  432.            <ul>
  433.                <li>The <u>sidebar</u> is designed for mobile devices. It displays on screens/windows 750px or less (about 7.8 in).</li>
  434.                <li>The <u>top bar</u> is designed for desktop devices. It displays on screens/windows 751px or more.</li>
  435.            </ul>
  436.            <p><b>Current Issues:</b> On touch devices, if you open a dropdown and try to exit it will not close. To exit it simply reload the page. Aka the top bar doesn't work properly on touch screens.</p>
  437.        </div>
  438.    </div>
  439.  
  440. <script>
  441.    // JavaScript function to toggle the sidebar //
  442.    function toggleSidebar() {
  443.        var sidebar = document.getElementById('mySidebar');
  444.         if (sidebar.style.left === '0px') {
  445.             sidebar.style.left = '-310px';
  446.             document.getElementsByClassName('openbtn')[0].innerHTML = '☰';
  447.         } else {
  448.             sidebar.style.left = '0px';
  449.             document.getElementsByClassName('openbtn')[0].innerHTML = '×';
  450.         }
  451.     }
  452.  
  453.     function playGame(userChoice) {
  454.             // Array of possible moves
  455.             const moves = ['rock', 'paper', 'scissors'];
  456.  
  457.             // Get a random move for the computer
  458.             const computerChoice = moves[Math.floor(Math.random() * moves.length)];
  459.  
  460.             // Determine the winner
  461.             const result = determineWinner(userChoice, computerChoice);
  462.  
  463.             // Display the result
  464.             document.getElementById("result").innerHTML = `You chose ${userChoice}. Computer chose ${computerChoice}. ${result}`;
  465.         }
  466.  
  467.         function determineWinner(user, computer) {
  468.             if (user === computer) {
  469.                 return "It's a tie!";
  470.             } else if ((user === 'rock' && computer === 'scissors') ||
  471.                       (user === 'paper' && computer === 'rock') ||
  472.                       (user === 'scissors' && computer === 'paper')) {
  473.                return "You win!";
  474.             } else {
  475.                 return "Computer wins!";
  476.             }
  477.         }
  478. </script>
  479.  
  480.  
  481. </body>
  482. </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!