webly/blg.html at main · danielKakoshi/webly · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K0ZT2W9NRL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-K0ZT2W9NRL');
</script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Daily Purp | Modern News Portal</title>
    <meta name="description"
        content="A premium news portal featuring the latest articles on culture, technology, and more.">
    <link rel="stylesheet" href="blg.css">
</head>

<body>

    <!-- Header Section -->
    <header>
        <div class="container">
            <nav>
                <a href="#" class="logo">THE DAILY PURP</a>
                <div class="nav-links">
                    <a href="#home">Home</a>
                    <a href="#articles">Articles</a>
                    <button id="adminLoginBtn" class="btn-outline">Admin Login</button>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Welcome to THE DAILY PURP</h1>
                <p>Your source for curated stories, deep dives, and daily updates. Explore our latest articles and join
                    the conversation.</p>
                <a href="#articles" class="btn-primary">Start Reading</a>
            </div>
        </div>
    </section>

    <!-- Main Articles Section -->
    <section id="articles">
        <div class="container">
            <h2 class="section-title">Latest Articles</h2>
            <div id="articlesGrid" class="articles-grid">
                <!-- Articles will be injected here by JS -->
                <div class="loader">Loading articles...</div>
            </div>
        </div>
    </section>

    <!-- Article Detail Modal / Section -->
    <div id="articleModal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div id="modalBody">
                <!-- Full article content injected here -->
            </div>

            <!-- Interactions Section -->
            <div class="article-interactions">
                <button id="likeBtn" class="interaction-btn">
                    <span class="icon">🤍</span> <span id="likeCount">0</span>
                </button>
                <div class="view-count">
                    <span>👁️</span> <span id="viewCount">0</span> views
                </div>
            </div>

            <!-- Comments Section -->
            <div class="comments-section">
                <h3>Comments</h3>
                <div id="commentsList"></div>
                <form id="commentForm">
                    <input type="text" id="commentAuthor" placeholder="Your Name" required>
                    <textarea id="commentText" placeholder="Leave a comment..." required></textarea>
                    <button type="submit" class="btn-primary">Post Comment</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Admin Section (Hidden by default) -->
    <div id="adminPanel" class="admin-panel hidden">
        <div class="container">
            <div class="admin-header">
                <h2>Admin Dashboard</h2>
                <button id="logoutBtn" class="btn-outline">Logout</button>
            </div>

            <form id="articleForm">
                <input type="hidden" id="editArticleId">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" id="articleTitle" required>
                </div>
                <div class="form-group">
                    <label>Author</label>
                    <input type="text" id="articleAuthor" required>
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <textarea id="articleContent" rows="10" required></textarea>
                </div>
                <button type="submit" id="saveBtn" class="btn-primary">Publish Article</button>
                <button type="button" id="cancelEdit" class="btn-outline hidden">Cancel Edit</button>
            </form>
        </div>
    </div>

    <!-- Admin Login Modal -->
    <div id="loginModal" class="modal">
        <div class="modal-content login-box">
            <span class="close-modal" id="closeLogin">&times;</span>
            <h3>Admin Login</h3>
            <p>Access the dashboard to manage content.</p>
            <form id="loginForm">
                <input type="password" id="adminPassword" placeholder="Enter Admin Password" required>
                <button type="submit" class="btn-primary">Login</button>
            </form>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2026 The Daily Purp. All rights reserved.</p>
        </div>
    </footer>

    <script src="blg.js"></script>
</body>


</html>