index.html

<style>
    body {
        background-color: rgb(168, 235, 255);
        font-weight: bold;
        color: rgb(255, 0, 0);
    }
    
    article {
        width: 80%;
        margin: 0 auto;
    }
    
    h1 {
        font-family: garamond;
        font-size: xx-large;
        padding-bottom: 10px;
        border-bottom: 3px solid rgb(255, 255, 255);
        margin-top: 40px;
    }
    
    h2{
        font-family: 'Courier New', Courier, monospace;
        font-size: xx-large;
        padding-bottom: 10px;
        margin-top: 40px;
    }
    
    .Protestor{
        text-align: center;
    }
    
    p{
        line-height: 24px;
        text-align: center;
        font-family: 'Courier New', Courier, monospace;
    }
    
    ul{
        line-height: 24px;
        text-align: left;
        font-family: 'Courier New', Courier, monospace;
    }
    
    .listToggle:hover + .hiddenList{
        display: block;
    }
    .hiddenList:hover{
        display: block;
    }
    
    .hiddenList{
        display: none;
    }
    
    #sourceInfo{
        color: purple;
    }
    #sourceInfo:hover{
        color:rgb(206, 0, 242);
        cursor: pointer;
    }
    #sources{
        overflow: hidden;
        transition: height 1s;
    }
    #udhrtitle:hover{
        color:rgb(187, 0, 230);
        cursor: pointer;
    }
    #udhr1:hover{
        color:rgb(176, 179, 11);
        cursor: pointer;
    }
    #udhr2:hover{
        color:rgb(4, 188, 87);
        cursor: pointer;
    }
    #udhr3:hover{
        color:rgb(255, 115, 0);
        cursor: pointer;
    }
    </style>
    
<script>
    function changeText(elementId) {
        let chosenElement = document.getElementById(elementId);
        let udhrText, ourText;

        if(elementId == "udhr1"){
            udhrText = "Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference";
            ourText = "Internet access should not be contingent on personal opinion, nor should information providers attempt to manipulate public opinion through the regulation of content.";
        }

        else if(elementId == "udhr2"){
            udhrText = "and to seek, receive and impart information";
            ourText = "Information providers should maintain a neutral position in generating, surfacing, and regulating access to information, while publishers should be free to share whatever they want as long as they are held legally liable for this freedom.";
        }

        else if(elementId == "udhr3"){
            udhrText = "and ideas through any media and regardless of frontiers.";
            ourText = "As technology advances, these tenets should be upheld; additionally, new technologies should have these values at the foundation of their design.";
        }

        else{
            udhrText = "UDHR Article 19";
            ourText = "Our Declaration on Expression";
        }

        if(chosenElement.innerHTML == ourText)
            chosenElement.innerHTML = udhrText;
        else
            chosenElement.innerHTML = ourText;
    }

    function toggleImage(id, source){

        if(source.includes("Red"))
            document.getElementById(id).src = "Banksy_Protestor_Green.png";

        else if (source.includes("Green"))
            document.getElementById(id).src = "Banksy_Protestor_Purple.png";
        
        else if (source.includes("Purple"))
            document.getElementById(id).src = "Banksy_Protestor_Yellow.png";
        
        else if (source.includes("Yellow"))
            document.getElementById(id).src = "Message.png";

        else
            document.getElementById(id).src = "Banksy_Protestor_Red.png";
    }

    function toggleSources(){
        const sources = document.getElementById('sources');
        if (sources.style.height === sources.dataset.initialHeight) {
            sources.style.height = '0px';
        } 
        else { 
            sources.style.height = sources.dataset.initialHeight;
        }
    }

    function setupSources () {
        const sources = document.getElementById('sources');
        sources.dataset.initialHeight = sources.offsetHeight + 'px';
        sources.style.height = '0px';
    }
    
    window.addEventListener('load', setupSources)
</script>

<head>
    <title>A Universal Declaration of Expression</title>
    <link rel="shortcut icon" href="favicon.png" />
</head>

<body>

<h1>On the right to expression...</h1>

<article>

    <h2 id ="udhrtitle" onclick="changeText(id)">
        UDHR Article 19
    </h2>

    <p>
    <a id ="udhr1" onclick="changeText(id)">
        Everyone has the right to freedom of opinion and expression; this 
        right includes freedom to hold opinions without interference 
    </a>
    <a id ="udhr2" onclick="changeText(id)">
        and to seek, receive and impart information 
    </a>

    <a id ="udhr3" onclick="changeText(id)">
        and ideas through any media and regardless of frontiers.
    </a>
    </p>

</article>

<div class = "Protestor">
    <img id = "Graffiti" src="Banksy_Protestor_Red.png" onclick = "toggleImage(id, src)" alt="Banksy Protest Art">
</div>

<article>
    <p>
        The right to expression is one that mediates our interpersonal 
        relationships, creating both spoken and implicit rules of interaction, 
        as well as a mutual framework on which we dictate our social engagements. 
        As the boundary between the digital and physical worlds becomes increasingly blurry, 
        the right to expression on the internet must be perceived as a continuation of how 
        this right ought to govern both our in-person and digital interactions. 
        We cannot look at these two mediums as separate spheres; rather, we must
        understand expression in the digital world as a continuation of how it is manifested
        in our daily interactions in the physical world.
    </p>
</article>

<article>
    <p>
        The internet is inherently a community space. While what is accepted 
        online will change from platform to platform or user group to user group, 
        respectful interaction on the internet is predicated on the assumption 
        that we think of ourselves as an influential part of this digital community. 
    </p>
    <ul>
        <li>
            Closed communities, such as paid services or social media interest groups, 
            should make every effort to 
            <a target = "_blank" href = "https://blog.vanillaforums.com/community/community-guidelines-why-theyre-vital-and-how-to-improve-them">
                create their own community guidelines.</a>
        </li>
        <li>
            Given the complicated relationship between freedom of expression and the spread
            of misinformaton, we believe that the Miller Test provides a useful community-oriented framework for 
            determining what online content should be regulated by 
            <a class = "listToggle">
                asking...
            </a>
            <div class = "hiddenList">
                <ul type = "square">
                    <li>
                        Whether the average person applying contemporary community 
                        standards would find that the work, taken as a whole, appeals to the prurient interest.
                    </li>
                    <li>
                        Whether the work depicts or describes, in a patently 
                        offensive way, sexual conduct that would generate
                        profound discomfort in minors and their guardiands.
                    </li>
                    <li>
                        Whether digital interactions should be aimed at literary, artistic, 
                        political, scientifical, or social pursuits.
                    </li>
                </ul>
            </div>
        </li>
        <li>
            Based on these questions, digital interactions should follow three values: 
            <ul>
                <li>
                    They should provide a positive benefit to the internet, as determined by its community's needs/values.
                </li>
                <li>
                    They should only violate civil laws when legislations prohibit them from
                    offering the aforementioned positive benefits to the internet; that is, we believe that digital interactions 
                    have the moral duty of regarding the authority of human rights higher than that of civil law. 
                </li>
                <li>
                    They should be aimed at literary, artistic, religious, political, scientifical, or social pursuits.
                </li>
            </ul>
        </li>
    </ul>
</article>

<article onclick = "toggleSources()" id = "sourceInfo">
    <p>
        <br \>
        Sources for our project
        <br \>
    </p>
</article >

<article id = "sources">
    <ul>
        <a target = "_blank" href = "https://www.oif.ala.org/oif/the-universal-declaration-of-human-rights-article-19-at-seventy/"> https://www.oif.ala.org/oif/the-universal-declaration-of-human-rights-article-19-at-seventy/</a>  <br />
        <a target = "_blank" href = "https://phys.org/news/2019-06-deepfakes-reveals.html"> https://phys.org/news/2019-06-deepfakes-reveals.html</a>  <br />
        <a target = "_blank" href = "https://www.binance.com/en/news/top/6733048"> https://www.binance.com/en/news/top/6733048</a> <br />
        <a target = "_blank" href = "https://www.ccianet.org/section230/"> https://www.ccianet.org/section230/</a> <br />
        <a target = "_blank" href = "https://www.technologyreview.com/2021/06/30/1026502/big-tech-breakup-monopoly-antitrust/">https://www.technologyreview.com/2021/06/30/1026502/big-tech-breakup-monopoly-antitrust/</a> <br />
        <a target = "_blank" href = "https://gulfbusiness.com/deepfakes-novel-trend-or-novel-threat/">https://gulfbusiness.com/deepfakes-novel-trend-or-novel-threat/</a><br />
        <a target = "_blank" href = "https://www.technollama.co.uk/what-do-you-buy-when-you-buy-an-nft">https://www.technollama.co.uk/what-do-you-buy-when-you-buy-an-nft</a> <br />
        <a target = "_blank" href = "https://www.npr.org/2021/03/05/974089381/whats-an-nft-and-why-are-people-paying-millions-to-buy-them">https://www.npr.org/2021/03/05/974089381/whats-an-nft-and-why-are-people-paying-millions-to-buy-them</a> <br />
        <a target = "_blank" href = "https://www.theguardian.com/technology/2020/jan/13/what-are-deepfakes-and-how-can-you-spot-them">https://www.theguardian.com/technology/2020/jan/13/what-are-deepfakes-and-how-can-you-spot-them</a> <br />
        <a target = "_blank" href = "https://www.dailydot.com/debug/obama-section-230-speech-stanford/">https://www.dailydot.com/debug/obama-section-230-speech-stanford/</a> <br />
        <a target = "_blank" href = "https://www.eff.org/cyberspace-independence">https://www.eff.org/cyberspace-independence</a> <br />
        <a target = "_blank" href = "https://www.cnn.com/videos/tv/2020/05/30/what-is-section-230-and-how-did-it-shape-the-internet.cnn">https://www.cnn.com/videos/tv/2020/05/30/what-is-section-230-and-how-did-it-shape-the-internet.cnn</a> <br />
        <a target = "_blank" href = "https://finbold.com/lympo-collaborates-with-binance-nft-marketplace-to-host-nfts-of-famous-athletes/">https://finbold.com/lympo-collaborates-with-binance-nft-marketplace-to-host-nfts-of-famous-athletes/</a> <br />
        <a target = "_blank" href = "https://www.investopedia.com/non-fungible-tokens-nft-5115211">https://www.investopedia.com/non-fungible-tokens-nft-5115211</a> <br />
        <a target = "_blank" href = "https://www.youtube.com/watch?v=Oz9zw7-_vhM">https://www.youtube.com/watch?v=Oz9zw7-_vhM</a> <br />
        <a target = "_blank" href = "https://www.alpha-sense.com/blog/faang-q3-earnings/">https://www.alpha-sense.com/blog/faang-q3-earnings/</a> <br />
        <a target = "_blank" href = "https://www.newsweek.com/fact-check-elon-musk-buying-twitter-led-white-house-target-section-230-1701449">https://www.newsweek.com/fact-check-elon-musk-buying-twitter-led-white-house-target-section-230-1701449</a> <br />
        <a target = "_blank" href = "https://www.creativereview.co.uk/why-nfts-are-the-future-of-creative-expression/">https://www.creativereview.co.uk/why-nfts-are-the-future-of-creative-expression/</a><br/>
        <a target = "_blank" href = "https://www.wsj.com/articles/how-elon-musk-can-liberate-twitter-censorship-fact-check-free-speech-buy-website-platform-takeover-content-moderation-hate-speech-misinformation-disinformation-11650983718">https://www.wsj.com/articles/how-elon-musk-can-liberate-twitter-censorship-fact-check-free-speech-buy-website-platform-takeover-content-moderation-hate-speech-misinformation-disinformation-11650983718</a><br/>
        <a target = "_blank" href = "https://www.brookings.edu/blog/up-front/2020/07/06/how-misinformation-spreads-on-twitter/">https://www.brookings.edu/blog/up-front/2020/07/06/how-misinformation-spreads-on-twitter/</a><br/>
        <a target = "_blank" href = "https://www.youtube.com/watch?v=jEK7P4-rDk4">https://www.youtube.com/watch?v=jEK7P4-rDk4</a><br/> 
        <a target = "_blank" href = "https://www.americanbar.org/groups/crsj/publications/human_rights_magazine_home/the-ongoing-challenge-to-define-free-speech/in-the-age-of-socia-media-first-amendment/">https://www.americanbar.org/groups/crsj/publications/human_rights_magazine_home/the-ongoing-challenge-to-define-free-speech/in-the-age-of-socia-media-first-amendment/</a><br />
    </ul>
</article>
</body>