tech-terms/contentexample.html at main · haileyen27/tech-terms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example Article - Tech Terms</title>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body>
        <header>
            <h1 id="title">Tech Terms</h1>
            <div id="navbar">
                <button type="button" class="navbutton"><a href="./index.html">Home</a></button> <!-- change buttons to onclick when JS/php is integrated -H-->
                <select type ="button" class="navbutton" name="categories" placeholder="Categories" onchange="
                    if(this.value == 3) {
                        window.location.href = './categories/events.html';
                    } else if (this.value == 2){
                        window.location.href = './categories/locations.html';
                    } else if (this.value == 1){
                        window.location.href = './categories/terms.html';
                    }
                ">
                    <option value="0">Categories</option>
                    <option value="1">Terms</option>
                    <option value="2">Locations</option>
                    <option value="3">Events</option>
                </select> <!-- end of dropdown -->
                <button onclick= "randomURL()" type="button" class="navbutton">Random</button>
                <script>
                    function randomURL(){
                        var arrayOfSites = ["./articles/EatsHit.html", "./articles/WalkerPool.html"];
                        var randomSite = arrayOfSites[Math.floor(Math.random() * arrayOfSites.length)];
                        window.location.replace(randomSite);
                    }
                </script>
                <div class="navbutton" style="padding:0px;border-width:0px;">
                    <input type="text" class="navbutton" id="searchbar" name="searchbar" placeholder="Search..."><input type="submit" class="navbutton" value="&rArr;">
                    <!--Searchbar and submit button must remain on same line or it adds a gap. Button will be connected to PHP for search functionality. -H-->
                </div>
                <button type="button" class="navbutton" id="login">Log In</button>
            </div>
        </header>

        <main>
            <div class="spacer"></div> <!-- spacer used to prevent main body from overlapping with header -H -->
            <div class="tags">
                Tags: <a>Templates</a>, <a>Articles</a>
            </div>
            <div class="article-title">
                <h1>Example Article</h1>
            </div>
            <div class="article-content"> <!-- div used to realign flexboxes at smaller sizes -H -->
                <div class="boxes"> <!-- div used to realign flexboxes at smaller sizes -H -->
                    <div class="contents"> <!--table of contents -H -->
                        <!--
                            These should be the list of categories we'll need. They can be omitted as fits the page.
                            (TODO) link them to a header in the page
                            May add more as I think of it
                            -H
                         -->
                        <li>Summary</li>
                        <li>Details</li>
                        <li>Other Information</li>
                        <li>History</li>
                        <li>See Also</li>
                        <li>References</li>
                    </div>
                    <div class="infobox">
                        <li>image here</li>
                        <li>info line 1</li>
                        <li>etc.</li> <!--TODO: fill out infobox framework -H -->
                    </div>
                </div>
                <div class="content-body"> <!-- the article itself -H -->
                    <h2>Summary</h2>
                    <p>Welcome to Tech Terms example article page! This is the content body. This is where the main article goes.</p>
                    <h2>Details</h2>
                    <p>etc.</p>
                    <h2>Other Information</h2>
                    <p>etc.</p>
                    <h2>History</h2>
                    <p>etc.</p>
                    <h2>See Also</h2>
                    <p>etc.</p>
                    <h2>References</h2>
                    <p>etc.</p>
                </div>
            </div>
        </main>

        <footer>
            <p>Copyright [team] 2024</p>
        </footer>

    </body>
</html>