Jump to content
  • EN

TEST-T: Difference between revisions

From Teltonika Telematics Wiki
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
<div style="display: flex; flex-direction: row;">
<!DOCTYPE html>
[[File:FTC927 under the front dashboard in the middle of the car.jpg|thumb|left|280px|link=Special:Redirect/file/FTC927 under the front dashboard in the middle of the car.jpg|Dashboard in the middle of the car mount]]
<html lang="en">
[[File:FTC927 beneath the speedometer panel.jpg|thumb|left|300px|link=Special:Redirect/file/FTC927 beneath the speedometer panel.jpg|Beneath the speedometer panel]]
<head>
[[File:FTC927 above the glove box.jpg|thumb|left|300px|link=Special:Redirect/file/FTC927 above the glove box.jpg|Above glove box]]
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wikimedia Style Dropdown</title>
    <style>
        /* Wikimedia-inspired styling */
        .mw-dropdown {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
            font-size: 14px;
            max-width: 300px;
            margin: 20px auto;
        }


[[File:Dead reckoning In the trunk-1.jpg|thumb|left|300px|link=Special:Redirect/file/Dead reckoning In the trunk-1.jpg|In the trunk]]
        /* The clickable button/summary */
[[File:Dead reckoning In the trunk-2.jpg|thumb|left|300px|link=Special:Redirect/file/Dead reckoning In the trunk-2.jpg|In the trunk]]
        .mw-dropdown-summary {
[[File:Dead reckoning Above glove box.jpg|thumb|left|300px|link=Special:Redirect/file/Dead reckoning Above glove box.jpg|Above glove box]]
            display: flex;
[[File:Dead reckoning Under the hood.jpg|thumb|left|300px|link=Special:Redirect/file/Dead reckoning Under the hood.jpg|Under the hood]]
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background-color: #f8f9fa;
            border: 1px solid #a2a9b1;
            border-radius: 2px;
            cursor: pointer;
            user-select: none;
            font-weight: bold;
            color: #202122;
            transition: border-color 0.1s, background-color 0.1s;
        }


        .mw-dropdown-summary:hover {
            background-color: #ffffff;
            border-color: #3366cc; /* Wikimedia Blue */
        }


</div>
        /* The arrow icon */
        .mw-dropdown-arrow {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #202122;
            transition: transform 0.2s ease;
        }


Bad '''mounting'''  examples:<br>
        /* Container for the hidden content */
<div style="display: flex; flex-direction: row;">
        .mw-dropdown-content {
[[File:Dead Reckoning Unwanted movements will be detected by the IMU.png|thumb|left|280px|link=Special:Redirect/file/Dead Reckoning Unwanted movements will be detected by the IMU.png|Unwanted movements will be detected by the IMU]]
            display: none;
[[File:Dead Reckoning Metal parts above the mount.png|thumb|left|300px|link=Special:Redirect/file/Dead Reckoning Metal parts above the mount.png|Metal parts above the mount]]
            padding: 12px;
[[File:Dead Reckoning vibration could cause unwanted device movements.png|thumb|left|300px|link=Special:Redirect/file/Dead Reckoning vibration could cause unwanted device movements.png|Places, where vibration could cause unwanted device movements]]
            background-color: #ffffff;
</div>
            border: 1px solid #a2a9b1;
            border-top: none;
            border-radius: 0 0 2px 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            color: #202122;
        }
 
        /* Active states triggered via JS */
        .mw-dropdown.is-open .mw-dropdown-content {
            display: block;
        }
 
        .mw-dropdown.is-open .mw-dropdown-arrow {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
 
    <div class="mw-dropdown" id="wikimediaDropdown">
        <div class="mw-dropdown-summary">
            <span>Click to reveal details</span>
            <span class="mw-dropdown-arrow"></span>
        </div>
        <div class="mw-dropdown-content">
            <p>This is the hidden content! You can put text, links, images, or forms inside here.</p>
        </div>
    </div>
 
    <script>
        const dropdown = document.getElementById('wikimediaDropdown');
        const summary = dropdown.querySelector('.mw-dropdown-summary');
 
        summary.addEventListener('click', () => {
            dropdown.classList.toggle('is-open');
        });
 
        // Optional: Close the dropdown if clicking outside of it
        window.addEventListener('click', (e) => {
            if (!dropdown.contains(e.target)) {
                dropdown.classList.remove('is-open');
            }
        });
    </script>
 
</body>
</html>

Revision as of 11:36, 16 June 2026

Main Page > Software & Applications > TEST-T

<!DOCTYPE html> <html lang="en"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Wikimedia Style Dropdown</title>
   <style>
       /* Wikimedia-inspired styling */
       .mw-dropdown {
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
           font-size: 14px;
           max-width: 300px;
           margin: 20px auto;
       }

       /* The clickable button/summary */
       .mw-dropdown-summary {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 8px 12px;
           background-color: #f8f9fa;
           border: 1px solid #a2a9b1;
           border-radius: 2px;
           cursor: pointer;
           user-select: none;
           font-weight: bold;
           color: #202122;
           transition: border-color 0.1s, background-color 0.1s;
       }

       .mw-dropdown-summary:hover {
           background-color: #ffffff;
           border-color: #3366cc; /* Wikimedia Blue */
       }

       /* The arrow icon */
       .mw-dropdown-arrow {
           display: inline-block;
           width: 0;
           height: 0;
           border-left: 5px solid transparent;
           border-right: 5px solid transparent;
           border-top: 5px solid #202122;
           transition: transform 0.2s ease;
       }

       /* Container for the hidden content */
       .mw-dropdown-content {
           display: none;
           padding: 12px;
           background-color: #ffffff;
           border: 1px solid #a2a9b1;
           border-top: none;
           border-radius: 0 0 2px 2px;
           box-shadow: 0 1px 2px rgba(0,0,0,0.05);
           color: #202122;
       }

       /* Active states triggered via JS */
       .mw-dropdown.is-open .mw-dropdown-content {
           display: block;
       }

       .mw-dropdown.is-open .mw-dropdown-arrow {
           transform: rotate(180deg);
       }
   </style>

</head> <body> 

           Click to reveal details

This is the hidden content! You can put text, links, images, or forms inside here.

   <script>
       const dropdown = document.getElementById('wikimediaDropdown');
       const summary = dropdown.querySelector('.mw-dropdown-summary');

       summary.addEventListener('click', () => {
           dropdown.classList.toggle('is-open');
       });

       // Optional: Close the dropdown if clicking outside of it
       window.addEventListener('click', (e) => {
           if (!dropdown.contains(e.target)) {
               dropdown.classList.remove('is-open');
           }
       });
   </script>

</body> </html>

Retrieved from "https://wiki.teltonika-gps.com/index.php?title=TEST-T&oldid=114594"