├── README.md ├── images ├── user.jpg ├── AdminLTELogo.png └── floransa_sokak_resmi.jpg ├── script.js ├── index.html ├── style.css ├── admin_style.css └── admin.html /README.md: -------------------------------------------------------------------------------- 1 | # web_tasarim_2025 2 | 2025 yılı web tasarım dersi 3 | -------------------------------------------------------------------------------- /images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canaydinn/web_tasarim_2025/HEAD/images/user.jpg -------------------------------------------------------------------------------- /images/AdminLTELogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canaydinn/web_tasarim_2025/HEAD/images/AdminLTELogo.png -------------------------------------------------------------------------------- /images/floransa_sokak_resmi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canaydinn/web_tasarim_2025/HEAD/images/floransa_sokak_resmi.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var xValues = ["Italy", "France", "Spain", "USA", "Argentina"]; 2 | var yValues = [55, 49, 44, 24, 15]; 3 | var barColors = ["red", "green","blue","orange","brown"]; 4 | 5 | new Chart("myChart", { 6 | type: "bar", 7 | data: { 8 | labels: xValues, 9 | datasets: [{ 10 | backgroundColor: barColors, 11 | data: yValues 12 | }] 13 | }, 14 | options: { 15 | legend: {display: false}, 16 | title: { 17 | display: true, 18 | text: "World Wine Production 2018" 19 | } 20 | } 21 | }); 22 | 23 | 24 | new Chart("myLineChart", { 25 | type: "line", 26 | data: { 27 | labels: xValues, 28 | datasets: [{ 29 | backgroundColor: barColors, 30 | data: yValues 31 | }] 32 | }, 33 | options: { 34 | legend: {display: false}, 35 | title: { 36 | display: true, 37 | text: "World Wine Production 2018" 38 | } 39 | } 40 | }); 41 | 42 | 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Türkiye'nin En Çok Tavsiye Edilen E-ticaret Markası Hepsiburada 4 | 5 | 6 | 7 | 8 | 9 |
10 |

AdminLTE

11 |

Sign in to start your session

12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
-OR-
26 | 27 | 28 |
29 | I forgot my password 30 | Register a new membership 31 |
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | background: #ecf0f5; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | } 9 | .login-box{ 10 | background: white; 11 | padding: 30px; 12 | width: 350px; 13 | box-shadow: 0 0 10px rgba(0,0,0,0.1); 14 | border-radius: 6px; 15 | text-align: center; 16 | } 17 | .login-box h2{ 18 | margin-bottom: 10px; 19 | } 20 | .login-box .bold{ 21 | font-weight: bold; 22 | color:#a5a9ab 23 | } 24 | .login-box .light{ 25 | font-weight: lighter; 26 | } 27 | 28 | .login-box p{ 29 | color:#666; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .input-group{ 34 | position: relative; 35 | margin-bottom: 20px; 36 | } 37 | .input-group input{ 38 | width: 100%; 39 | padding: 5px 5px 10px 10px; 40 | border:1px solid #ccc; 41 | border-radius: 4px; 42 | } 43 | .input-group i{ 44 | position: absolute; 45 | right:10px; 46 | top:10px; 47 | color:#999; 48 | } 49 | .form-options{ 50 | display: flex; 51 | justify-content: space-between; 52 | align-items: center; 53 | margin-bottom: 15px; 54 | } 55 | 56 | .form-options label{ 57 | font-size: 14px; 58 | } 59 | .btn{ 60 | width:100%; 61 | padding: 10px; 62 | margin-bottom: 10px; 63 | color:white; 64 | border-radius: 4px; 65 | border:none; 66 | } 67 | 68 | .btn.signin{ 69 | background-color: #007bff; 70 | width: 150px; 71 | } 72 | 73 | .btn.facebook{ 74 | background-color: #007bff; 75 | } 76 | .btn.google{ 77 | background-color: #dc3545; 78 | } 79 | .separator{ 80 | margin: 15px 0; 81 | color:#999 82 | } 83 | .links{ 84 | font-size: 14px; 85 | display: flex; 86 | flex-direction: column; 87 | text-align: left; 88 | } 89 | .links a{ 90 | color:#007bff; 91 | text-decoration: none; 92 | margin-bottom: 10px; 93 | } 94 | 95 | -------------------------------------------------------------------------------- /admin_style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | font-family: Arial, Helvetica, sans-serif; 4 | background: #f4f6f9; 5 | } 6 | .container{ 7 | display: flex; 8 | } 9 | .sidebar{ 10 | width:250px; 11 | height: 100vh; 12 | background: #343a40; 13 | color: white; 14 | padding: 20px 10px; 15 | box-sizing: border-box; 16 | } 17 | .ust_logo{ 18 | display: flex; 19 | align-items: center; 20 | } 21 | .ust_logo img{ 22 | width: 40px; 23 | height: 40px; 24 | padding:0 10px; 25 | color:#b9bcbe; 26 | text-shadow: 10px 10px #343a40; 27 | } 28 | .ust_logo p{ 29 | font-size: 18px; 30 | color:#b9bcbe; 31 | } 32 | hr{ 33 | width: 100%; 34 | color:#b9bcbe; 35 | } 36 | .user_panel{ 37 | display: flex; 38 | text-align: center; 39 | } 40 | .user_panel img{ 41 | width: 40px; 42 | height: 40px; 43 | border-radius: 20px; 44 | margin: 10px; 45 | } 46 | .user_panel p{ 47 | color: #b9bcbe; 48 | } 49 | .search_panel{ 50 | display: flex; 51 | text-align: center; 52 | position: relative; 53 | margin-bottom: 20px; 54 | margin-top: 20px; 55 | } 56 | .search_panel i{ 57 | position: absolute; 58 | right:10px; 59 | top:10px; 60 | color:#999; 61 | } 62 | .search-box{ 63 | background: #3f474e; 64 | width:100%; 65 | height: 35px; 66 | border:solid 1px #56606a; 67 | border-radius: 3px; 68 | 69 | } 70 | .menu{ 71 | list-style: none; 72 | padding: 0; 73 | font-size: 18px; 74 | color: #ccc; 75 | } 76 | .menu li{ 77 | padding: 8px 15px; 78 | } 79 | .menu i{ 80 | padding: 10px; 81 | } 82 | .submenu{ 83 | list-style: none; 84 | padding-left: 20px; 85 | font-size: 18px; 86 | color: #ccc; 87 | } 88 | .badge{ 89 | float: right; 90 | font-size: 12px; 91 | font-weight: bold; 92 | padding: 2px 6px; 93 | border-radius: 6px; 94 | } 95 | .badge.new{ 96 | background: red; 97 | } 98 | .badge.blue{ 99 | background: #17a2b8; 100 | } 101 | .title{ 102 | margin-top: 15px; 103 | font-size: 20px; 104 | color: #aaa; 105 | text-transform: uppercase; 106 | } 107 | .card_div{ 108 | display: flex; 109 | width: 100%; 110 | } 111 | .card{ 112 | width:400px; 113 | background-color: #17a2b8; 114 | color:white; 115 | border-radius: 7px; 116 | overflow:hidden; 117 | box-shadow: 0 2px 5px rgba(0,0,0,0.2); 118 | margin: 15px; 119 | 120 | } 121 | .card-content{ 122 | display:flex; 123 | justify-content: space-between; 124 | align-items: center; 125 | padding: 20px; 126 | } 127 | .card-text h3{ 128 | font-size: 32px; 129 | margin: 0; 130 | } 131 | .card-text p{ 132 | margin: 10px 0 0; 133 | font-size: 16px; 134 | } 135 | .card-icon i{ 136 | font-size: 45px; 137 | opacity: 0.3; 138 | } 139 | .card-footer{ 140 | display: block; 141 | background-color: rgba(0,0,0,0.1); 142 | padding: 10px 20px; 143 | color: white; 144 | text-decoration: none; 145 | transition: background-color 0.3s ease; 146 | padding-left: 150px ; 147 | } 148 | .card a i{ 149 | padding: 3px; 150 | } 151 | 152 | .card_div .card:nth-child(2){ 153 | background-color: #28a745; 154 | 155 | } 156 | .card_div .card:nth-child(3){ 157 | background-color: #ffc107; 158 | color:#000; 159 | } 160 | .card_div .card:nth-child(4){ 161 | background-color: #dc3545; 162 | color:#fff; 163 | } 164 | .chart-container{ 165 | display: flex; 166 | } 167 | .grafik_div{ 168 | margin: 20px; 169 | } 170 | .chart-card{ 171 | background-color: white; 172 | border-radius: 6px; 173 | box-shadow: 0 2px 5px rgba(0,0,0,0.1); 174 | margin: 0 auto; 175 | overflow:hidden; 176 | border-top:6px solid #28a745; 177 | } 178 | .chart-header{ 179 | display: flex; 180 | justify-content: space-between; 181 | align-items: center; 182 | background-color: #28a745; 183 | color: white; 184 | padding: 10px 20px; 185 | font-weight: bold; 186 | } 187 | .chart-container{ 188 | padding: 20px; 189 | } -------------------------------------------------------------------------------- /admin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Admin Panel 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 19 |
20 |
21 | 22 |

Alexander Pierce

23 |
24 |
25 |
26 | 27 | 28 |
29 | 51 |
52 |
53 |
54 |
55 |
56 |
57 |

150

58 |

New Orders

59 |
60 |
61 | 62 |
63 |
64 | More Info 65 |
66 |
67 |
68 |
69 |

53%

70 |

Bounce Rate

71 |
72 |
73 | 74 |
75 |
76 | More Info 77 |
78 |
79 |
80 |
81 |

44

82 |

User Registration

83 |
84 |
85 | 86 |
87 |
88 | More Info 89 |
90 |
91 |
92 |
93 |

65

94 |

Unique Visitors

95 |
96 |
97 | 98 |
99 |
100 | More Info 101 |
102 |
103 |
104 |
105 |
106 | Bart Chart 107 |
108 | 109 | 110 |
111 |
112 |
113 | 114 | 115 |
116 | 117 |
118 |
119 |
120 |
121 |
122 | 123 | 124 | 125 | --------------------------------------------------------------------------------